more using friendly for forum posts

This commit is contained in:
PhilReact 2024-09-14 22:26:40 +03:00
parent a6db86f051
commit e19ba2ec5a
3 changed files with 103 additions and 58 deletions

View File

@ -360,7 +360,8 @@ console.log('isFocusedParent', isFocusedParent)
<> <>
<Spacer height="30px" /> <Spacer height="30px" />
<Input sx={{ <Input sx={{
fontSize: '18px' fontSize: '18px',
padding: '5px'
}} placeholder='Name or address' value={directToValue} onChange={(e)=> setDirectToValue(e.target.value)} /> }} placeholder='Name or address' value={directToValue} onChange={(e)=> setDirectToValue(e.target.value)} />
</> </>

View File

@ -1,5 +1,5 @@
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Box, Button, IconButton, Skeleton } from "@mui/material"; import { Box, Button, ButtonBase, IconButton, Skeleton } from "@mui/material";
import { ShowMessage } from "./ShowMessageWithoutModal"; import { ShowMessage } from "./ShowMessageWithoutModal";
import { import {
ComposeP, ComposeP,
@ -479,8 +479,9 @@ export const Thread = ({
/> />
<Box sx={{ <Box sx={{
display: 'flex', display: 'flex',
gap: isMobile ? '5px' : '25px', gap: isMobile ? '45px' : '35px',
alignItems: 'center' alignItems: 'center',
padding: isMobile && '5px'
}}> }}>
<ShowMessageReturnButton <ShowMessageReturnButton
sx={{ sx={{
@ -501,23 +502,26 @@ export const Thread = ({
{/* Conditionally render the scroll buttons */} {/* Conditionally render the scroll buttons */}
{showScrollButton && ( {showScrollButton && (
isAtBottom ? ( isAtBottom ? (
<ButtonBase onClick={scrollToPosition}>
<ArrowUpwardIcon <ArrowUpwardIcon
onClick={scrollToPosition}
sx={{ sx={{
color: 'white', color: 'white',
cursor: 'pointer', cursor: 'pointer',
fontSize: isMobile ? '28px' : '36px', fontSize: isMobile ? '28px' : '36px',
}} }}
/> />
</ButtonBase>
) : ( ) : (
<ButtonBase onClick={scrollToPosition}>
<ArrowDownwardIcon <ArrowDownwardIcon
onClick={scrollToPosition}
sx={{ sx={{
color: 'white', color: 'white',
cursor: 'pointer', cursor: 'pointer',
fontSize: isMobile ? '28px' : '36px', fontSize: isMobile ? '28px' : '36px',
}} }}
/> />
</ButtonBase>
) )
)} )}
</Box> </Box>
@ -701,51 +705,71 @@ export const Thread = ({
}} }}
> >
<Button <Button
onClick={() => { sx={{
getMailMessages(currentThread, null, null, false); padding: isMobile && '5px',
}} fontSize: isMobile && '14px',
disabled={!hasFirstPage} textTransformation: 'capitalize'
variant="contained" }}
> onClick={() => {
First Page getMailMessages(currentThread, null, null, false);
</Button> }}
<Button disabled={!hasFirstPage}
onClick={() => { variant="contained"
getMailMessages( >
currentThread, First
messages[0].created, </Button>
null, <Button
false sx={{
); padding: isMobile && '5px',
}} fontSize: isMobile && '14px',
disabled={!hasPreviousPage} textTransformation: 'capitalize'
variant="contained" }}
> onClick={() => {
Previous Page getMailMessages(
</Button> currentThread,
<Button messages[0].created,
onClick={() => { null,
getMailMessages( false
currentThread, );
null, }}
messages[messages.length - 1].created, disabled={!hasPreviousPage}
false variant="contained"
); >
}} Previous
disabled={!hasNextPage} </Button>
variant="contained" <Button
> sx={{
Next page padding: isMobile && '5px',
</Button> fontSize: isMobile && '14px',
<Button textTransformation: 'capitalize'
onClick={() => { }}
getMailMessages(currentThread, null, null, true); onClick={() => {
}} getMailMessages(
disabled={!hasLastPage} currentThread,
variant="contained" null,
> messages[messages.length - 1].created,
Last page false
</Button> );
}}
disabled={!hasNextPage}
variant="contained"
>
Next
</Button>
<Button
sx={{
padding: isMobile && '5px',
fontSize: isMobile && '14px',
textTransformation: 'capitalize'
}}
onClick={() => {
getMailMessages(currentThread, null, null, true);
}}
disabled={!hasLastPage}
variant="contained"
>
Last
</Button>
</Box> </Box>
<Spacer height="30px" /> <Spacer height="30px" />
</> </>

View File

@ -1358,6 +1358,7 @@ export const Group = ({
}, 200); }, 200);
}); });
setSelectedDirect(null); setSelectedDirect(null);
setNewChat(false)
setGroupSection("announcement"); setGroupSection("announcement");
chrome?.runtime?.sendMessage({ chrome?.runtime?.sendMessage({
action: "addGroupNotificationTimestamp", action: "addGroupNotificationTimestamp",
@ -1379,6 +1380,7 @@ export const Group = ({
}, 200); }, 200);
}); });
setGroupSection("chat"); setGroupSection("chat");
setNewChat(false)
setSelectedDirect(null); setSelectedDirect(null);
if (selectedGroupRef.current) { if (selectedGroupRef.current) {
chrome?.runtime?.sendMessage({ chrome?.runtime?.sendMessage({
@ -2241,6 +2243,7 @@ export const Group = ({
onClick={() => { onClick={() => {
setGroupSection("forum"); setGroupSection("forum");
setSelectedDirect(null); setSelectedDirect(null);
setNewChat(false)
}} }}
> >
<ForumIcon <ForumIcon
@ -2339,7 +2342,9 @@ export const Group = ({
> >
{selectedGroup && ( {selectedGroup && (
<> <>
<Grid item xs={4}> <Grid item xs={4} sx={{
display: 'flex'
}}>
<Button <Button
fullWidth fullWidth
size="small" size="small"
@ -2381,7 +2386,9 @@ export const Group = ({
ANN ANN
</Button> </Button>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4} sx={{
display: 'flex'
}}>
<Button <Button
fullWidth fullWidth
size="small" size="small"
@ -2422,7 +2429,9 @@ export const Group = ({
Chat Chat
</Button> </Button>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4} sx={{
display: 'flex'
}}>
<Button <Button
fullWidth fullWidth
size="small" size="small"
@ -2445,13 +2454,16 @@ export const Group = ({
}} }}
onClick={() => { onClick={() => {
setSelectedDirect(null); setSelectedDirect(null);
setNewChat(false)
setGroupSection("forum") setGroupSection("forum")
} } } }
> >
Forum Forum
</Button> </Button>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={4} sx={{
display: 'flex'
}}>
<Button <Button
fullWidth fullWidth
size="small" size="small"
@ -2475,7 +2487,9 @@ export const Group = ({
)} )}
{/* Second row: Groups, Home, Profile */} {/* Second row: Groups, Home, Profile */}
<Grid item xs={4}> <Grid item xs={4} sx={{
display: 'flex',
}}>
<Button <Button
fullWidth fullWidth
size="small" size="small"
@ -2516,7 +2530,10 @@ export const Group = ({
{chatMode === "groups" ? "Groups" : "Direct"} {chatMode === "groups" ? "Groups" : "Direct"}
</Button> </Button>
</Grid> </Grid>
<Grid item xs={2}> <Grid item xs={2} sx={{
display: 'flex',
justifyContent: 'center'
}}>
<IconButton <IconButton
sx={{ padding: "0", color: "white" }} // Reduce padding for icons sx={{ padding: "0", color: "white" }} // Reduce padding for icons
onClick={goToHome} onClick={goToHome}
@ -2524,7 +2541,10 @@ export const Group = ({
<HomeIcon /> <HomeIcon />
</IconButton> </IconButton>
</Grid> </Grid>
<Grid item xs={2}> <Grid item xs={2} xs={2} sx={{
display: 'flex',
justifyContent: 'center'
}}>
<IconButton <IconButton
sx={{ padding: "0", color: "white" }} // Reduce padding for icons sx={{ padding: "0", color: "white" }} // Reduce padding for icons
onClick={() => setIsOpenDrawerProfile(true)} onClick={() => setIsOpenDrawerProfile(true)}