mobile update

This commit is contained in:
2024-09-14 06:33:41 +03:00
parent eebcd8c36f
commit 93fba38de3
17 changed files with 524 additions and 217 deletions

View File

@@ -29,7 +29,7 @@ import { AddGroupList } from "./AddGroupList";
import { UserListOfInvites } from "./UserListOfInvites";
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
import { getFee } from "../../background";
import { MyContext } from "../../App";
import { MyContext, isMobile } from "../../App";
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
export const Label = styled("label")(
@@ -220,44 +220,50 @@ export const AddGroup = ({ address, open, setOpen }) => {
}}
>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
},
}}
value={value}
onChange={handleChange}
aria-label="basic tabs example"
>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="Create Group"
{...a11yProps(0)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="Find Group"
{...a11yProps(1)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="Group Invites"
{...a11yProps(2)}
/>
</Tabs>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
scrollButtons="auto"
allowScrollButtonsMobile
sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
},
}}
>
<Tab
label="Create Group"
{...a11yProps(0)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
/>
<Tab
label="Find Group"
{...a11yProps(1)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
/>
<Tab
label="Group Invites"
{...a11yProps(2)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
/>
</Tabs>
</Box>
{value === 0 && (

View File

@@ -247,7 +247,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
style={{
position: "relative",
height: "500px",
width: "600px",
width: "100%",
display: "flex",
flexDirection: "column",
flexShrink: 1,

View File

@@ -30,7 +30,7 @@ import { formatBytes } from "../../../utils/Size";
import { CreateThreadIcon } from "../../../assets/svgs/CreateThreadIcon";
import { SendNewMessage } from "../../../assets/svgs/SendNewMessage";
import { TextEditor } from "./TextEditor";
import { MyContext, pauseAllQueues, resumeAllQueues } from "../../../App";
import { MyContext, isMobile, pauseAllQueues, resumeAllQueues } from "../../../App";
import { getFee } from "../../../background";
import TipTap from "../../Chat/TipTap";
import { MessageDisplay } from "../../Chat/MessageDisplay";
@@ -410,7 +410,7 @@ export const NewThread = ({
<ReusableModal
open={isOpen}
customStyles={{
maxHeight: "95vh",
maxHeight: isMobile ? '95svh' : "95vh",
maxWidth: "950px",
height: "700px",
borderRadius: "12px 12px 0px 0px",
@@ -421,25 +421,27 @@ export const NewThread = ({
>
<InstanceListHeader
sx={{
height: "50px",
padding: "20px 42px",
height: isMobile ? 'auto' : "50px",
padding: isMobile ? '5px' : "20px 42px",
flexDirection: "row",
alignItems: 'center',
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#434448",
}}
>
<NewMessageHeaderP>
{isMessage ? "Post Message" : "New Thread"}
</NewMessageHeaderP>
<CloseContainer onClick={closeModal}>
<CloseContainer sx={{
height: '40px'
}} onClick={closeModal}>
<NewMessageCloseImg src={ModalCloseSVG} />
</CloseContainer>
</InstanceListHeader>
<InstanceListContainer
sx={{
backgroundColor: "#434448",
padding: "20px 42px",
padding: isMobile ? '5px' : "20px 42px",
height: "calc(100% - 150px)",
flexShrink: 0,
}}
@@ -463,7 +465,7 @@ export const NewThread = ({
color: "white",
"& .MuiInput-input::placeholder": {
color: "rgba(255,255,255, 0.70) !important",
fontSize: "20px",
fontSize: isMobile ? '14px' : "20px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "120%", // 24px
@@ -491,7 +493,10 @@ export const NewThread = ({
<MessageDisplay htmlContent={postReply?.textContentV2} />
</Box>
)}
<Spacer height="30px" />
{!isMobile && (
<Spacer height="30px" />
)}
<Box
sx={{
maxHeight: "40vh",
@@ -501,6 +506,8 @@ export const NewThread = ({
setEditorRef={setEditorRef}
onEnter={sendMail}
disableEnter
overrideMobile
customEditorHeight="240px"
/>
{/* <TextEditor
inlineContent={value}
@@ -513,9 +520,9 @@ export const NewThread = ({
<InstanceFooter
sx={{
backgroundColor: "#434448",
padding: "20px 42px",
padding: isMobile ? '5px' : "20px 42px",
alignItems: "center",
height: "90px",
height: isMobile ? 'auto' : "90px",
}}
>
<NewMessageSendButton onClick={sendMail}>

View File

@@ -522,6 +522,36 @@ export const Group = ({
return hasUnread;
}, [timestampEnterData, directs, myAddress]);
const groupChatHasUnread = useMemo(() => {
let hasUnread = false;
groups.forEach((group) => {
if (
group?.data && isExtMsg(group?.data) && group?.sender !== myAddress &&
group?.timestamp &&
((!timestampEnterData[group?.groupId] &&
Date.now() - group?.timestamp <
timeDifferenceForNotificationChats) ||
timestampEnterData[group?.groupId] < group?.timestamp)
) {
hasUnread = true;
}
});
return hasUnread;
}, [timestampEnterData, groups, myAddress]);
const groupsAnnHasUnread = useMemo(() => {
let hasUnread = false;
groups.forEach((group) => {
if (
groupAnnouncements[group?.groupId] &&
!groupAnnouncements[group?.groupId]?.seentimestamp
) {
hasUnread = true;
}
});
return hasUnread;
}, [groupAnnouncements, groups]);
// useEffect(() => {
// if (!myAddress) return;
// checkGroupListFunc(myAddress);
@@ -1660,6 +1690,7 @@ export const Group = ({
setNewChat(true);
setSelectedDirect(null);
setSelectedGroup(null);
setIsOpenDrawer(false)
}}
>
<CreateIcon
@@ -2205,7 +2236,11 @@ export const Group = ({
size="small"
variant="contained"
startIcon={<AnnouncementsIcon />}
sx={{ padding: '4px 6px' }} // Make padding smaller
sx={{ padding: '4px 6px',
color: groupSection === 'announcement' ? 'black' : 'white',
backgroundColor: isUnread
? "red" : groupSection === 'announcement' ? 'white' : 'black',
}}
onClick={goToAnnouncements}
>
ANN
@@ -2217,7 +2252,10 @@ export const Group = ({
size="small"
variant="contained"
startIcon={<ChatIcon />}
sx={{ padding: '4px 6px' }}
sx={{ padding: '4px 6px', color: groupSection === 'chat' ? 'black' : 'white',
backgroundColor: isUnreadChat
? "red"
: groupSection === 'chat' ? 'white' : 'black', }}
onClick={goToChat}
>
Chat
@@ -2229,7 +2267,8 @@ export const Group = ({
size="small"
variant="contained"
startIcon={<ForumIcon />}
sx={{ padding: '4px 6px' }}
sx={{ padding: '4px 6px', color: groupSection === 'forum' ? 'black' : 'white',
backgroundColor: groupSection === 'forum' ? 'white' : 'black', }}
onClick={() => setGroupSection("forum")}
>
Forum
@@ -2241,7 +2280,7 @@ export const Group = ({
size="small"
variant="contained"
startIcon={<GroupIcon />}
sx={{ padding: '4px 6px' }}
sx={{ padding: '4px 6px', backgroundColor: 'black' }}
onClick={() => setOpenManageMembers(true)}
>
Members
@@ -2257,7 +2296,7 @@ export const Group = ({
size="small"
variant="contained"
startIcon={<GroupIcon />}
sx={{ padding: '2px 4px' }}
sx={{ padding: '2px 4px', backgroundColor: groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread ? "red" : 'black' }}
onClick={() => {
setIsOpenDrawer(true);
setDrawerMode("groups");

View File

@@ -168,7 +168,7 @@ export const ListOfBans = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
return (
<div>
<p>Ban list</p>
<div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<AutoSizer>
{({ height, width }) => (
<List

View File

@@ -169,7 +169,7 @@ export const ListOfInvites = ({ groupId, setInfoSnack, setOpenSnack, show }) =>
return (
<div>
<p>Invitees list</p>
<div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<AutoSizer>
{({ height, width }) => (
<List

View File

@@ -169,7 +169,7 @@ export const ListOfJoinRequests = ({ groupId, setInfoSnack, setOpenSnack, show }
return (
<div>
<p>Join request list</p>
<div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<AutoSizer>
{({ height, width }) => (
<List

View File

@@ -357,7 +357,7 @@ const ListOfMembers = ({
style={{
position: "relative",
height: "500px",
width: "600px",
width: "100%",
display: "flex",
flexDirection: "column",
flexShrink: 1,

View File

@@ -19,7 +19,7 @@ import { ListOfBans } from "./ListOfBans";
import { ListOfJoinRequests } from "./ListOfJoinRequests";
import { Box, Tab, Tabs } from "@mui/material";
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
import { MyContext } from "../../App";
import { MyContext, isMobile } from "../../App";
import { getGroupMembers, getNames } from "./Group";
import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
import { getFee } from "../../background";
@@ -173,63 +173,72 @@ export const ManageMembers = ({
}}
>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
},
}}
value={value}
onChange={handleChange}
aria-label="basic tabs example"
>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="List of members"
{...a11yProps(0)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="Invite new member"
{...a11yProps(1)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="List of invites"
{...a11yProps(2)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="List of bans"
{...a11yProps(3)}
/>
<Tab
sx={{
"&.Mui-selected": {
color: `white`,
},
}}
label="Join requests"
{...a11yProps(4)}
/>
</Tabs>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
variant="scrollable" // Make tabs scrollable
scrollButtons="auto" // Show scroll buttons automatically
allowScrollButtonsMobile // Show scroll buttons on mobile as well
sx={{
"& .MuiTabs-indicator": {
backgroundColor: "white",
},
maxWidth: '100%', // Ensure the tabs container fits within the available space
overflow: 'hidden', // Prevents overflow on small screens
}}
>
<Tab
label="List of members"
{...a11yProps(0)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}}
/>
<Tab
label="Invite new member"
{...a11yProps(1)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem',
}}
/>
<Tab
label="List of invites"
{...a11yProps(2)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem',
}}
/>
<Tab
label="List of bans"
{...a11yProps(3)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem',
}}
/>
<Tab
label="Join requests"
{...a11yProps(4)}
sx={{
"&.Mui-selected": {
color: "white",
},
fontSize: isMobile ? '0.75rem' : '1rem',
}}
/>
</Tabs>
</Box>
{selectedGroup?.groupId && !isOwner && (

View File

@@ -186,7 +186,7 @@ export const UserListOfInvites = ({myAddress, setInfoSnack, setOpenSnack}) => {
return (
<div>
<p>Invite list</p>
<div style={{ position: 'relative', height: '500px', width: '600px', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<div style={{ position: 'relative', height: '500px', width: '100%', display: 'flex', flexDirection: 'column', flexShrink: 1 }}>
<AutoSizer>
{({ height, width }) => (
<List