mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-07-24 10:41:24 +00:00
mobile update
This commit is contained in:
@@ -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 && (
|
||||
|
@@ -247,7 +247,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "500px",
|
||||
width: "600px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexShrink: 1,
|
||||
|
@@ -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}>
|
||||
|
@@ -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");
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -357,7 +357,7 @@ const ListOfMembers = ({
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "500px",
|
||||
width: "600px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexShrink: 1,
|
||||
|
@@ -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 && (
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user