From 96b165d452a89f9a5b6ed00e7a7dff01ae14dbc3 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 6 Jan 2025 20:03:11 +0200 Subject: [PATCH] mobile friendly --- src/pages/Mail/GroupMail.tsx | 57 +++- src/pages/Mail/Mail-styles.ts | 4 +- src/pages/Mail/Mail.tsx | 538 +++++++++++++++++++++++------- src/pages/Mail/MailMessageRow.tsx | 11 +- src/pages/Mail/NewMessage.tsx | 28 +- src/pages/Mail/NewThread.tsx | 14 +- 6 files changed, 505 insertions(+), 147 deletions(-) diff --git a/src/pages/Mail/GroupMail.tsx b/src/pages/Mail/GroupMail.tsx index 3b65391..84c5e1b 100644 --- a/src/pages/Mail/GroupMail.tsx +++ b/src/pages/Mail/GroupMail.tsx @@ -10,7 +10,7 @@ import { useNavigate } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "../../state/store"; import EditIcon from "@mui/icons-material/Edit"; -import { Box, Button, Input, Typography, formLabelClasses, useTheme } from "@mui/material"; +import { Box, Button, Input, Typography, formLabelClasses, useMediaQuery, useTheme } from "@mui/material"; import { useFetchPosts } from "../../hooks/useFetchPosts"; import LazyLoad from "../../components/common/LazyLoad"; import { removePrefix } from "../../utils/blogIdformats"; @@ -59,6 +59,7 @@ export const GroupMail = ({ groupInfo, setCurrentThread, currentThread, filterMo const [replyTo, setReplyTo] = useState(null); const [valueTab, setValueTab] = React.useState(0); const [viewedThreads, setViewedThreads] = React.useState({}); + const isMobile = useMediaQuery("(max-width:950px)"); const [aliasValue, setAliasValue] = useState(""); const [alias, setAlias] = useState([]); @@ -452,6 +453,60 @@ export const GroupMail = ({ groupInfo, setCurrentThread, currentThread, filterMo {listOfThreadsToDisplay.map(thread => { const hasViewedRecent = viewedThreads[`qmail_threads_${thread?.threadData?.groupId}_${thread?.threadId}`] const shouldAppearLighter = hasViewedRecent && filterMode === 'Recently active' && thread?.threadData?.createdAt < hasViewedRecent?.timestamp + if(isMobile){ + return ( + { + setCurrentThread(thread); + }} + sx={{ + flexDirection: 'column', + alignItems: 'flex-start', + height: 'auto' + }} + > + + + + by {thread?.threadData?.name} + {formatTimestamp(thread?.threadData?.createdAt)} + + + +
+ {thread?.threadData?.title} + {filterMode === 'Recently active' && ( +
+ + last message: + {formatDate(thread?.created)} + +
+ )} + +
+ + ) + } return ( { diff --git a/src/pages/Mail/Mail-styles.ts b/src/pages/Mail/Mail-styles.ts index 209cbbb..e85e4ab 100644 --- a/src/pages/Mail/Mail-styles.ts +++ b/src/pages/Mail/Mail-styles.ts @@ -30,6 +30,7 @@ export const MailBody = styled(Box)(({ theme }) => ({ flexDirection: "row", width: "100%", height: "calc(100% - 59px)", + position: 'relative' // overflow: 'auto !important' })); export const MailBodyInner = styled(Box)(({ theme }) => ({ @@ -249,7 +250,7 @@ export const InstanceListParent = styled(Box)` width: 100%; min-height: 246px; max-height: 325px; - width: 425px; + max-width: 425px; padding: 10px 0px 7px 0px; background-color: var(--color-instance-popover-bg); border: 1px solid rgba(0, 0, 0, 0.1); @@ -334,7 +335,6 @@ export const InstanceListContainerRowMain = styled(Box)(({ theme }) => ({ justifyContent: "space-between", width: "100%", alignItems: "center", - paddingRight: "30px", overflow: "hidden", })); export const CloseParent = styled(Box)(({ theme }) => ({ diff --git a/src/pages/Mail/Mail.tsx b/src/pages/Mail/Mail.tsx index 21d1b2b..53dad24 100644 --- a/src/pages/Mail/Mail.tsx +++ b/src/pages/Mail/Mail.tsx @@ -37,6 +37,8 @@ import { CircularProgress, Popover, TextField, + useMediaQuery, + ButtonBase, } from "@mui/material"; import LazyLoad from "../../components/common/LazyLoad"; import { NewMessage } from "./NewMessage"; @@ -92,6 +94,7 @@ import { CloseSVG } from "../../assets/svgs/CloseSVG"; import { objectToBase64 } from "../../utils/toBase64"; import { ShowMessageV2 } from "./ShowMessageV2"; import { executeEvent } from "../../utils/events"; +import { Spacer } from "../../components/common/Spacer"; const filterOptions = ["Recently active", "Newest", "Oldest"]; @@ -127,14 +130,14 @@ const steps: Step[] = [ content: (

Changing instances

- +

- Toggle between your main inbox, alias' and private groups. + Toggle between your main inbox, alias' and private groups.

), @@ -168,7 +171,7 @@ const steps: Step[] = [ ), placement: "bottom", }, - + { target: ".step-3", content: ( @@ -199,7 +202,8 @@ const steps: Step[] = [ fontFamily: "Arial", }} > - To access messages sent to that alias, simply add the alias as an instance. + To access messages sent to that alias, simply add the alias as an + instance.

), @@ -245,6 +249,8 @@ export const Mail = ({ isFromTo }: MailProps) => { (state: RootState) => state.global.privateGroups ); const [mailInfo, setMailInfo] = useState(null); + const isMobile = useMediaQuery("(max-width:950px)"); + const [mobileMode, setMobileMode] = useState("inbox"); const hasFetchedPrivateGroups = useSelector( (state: RootState) => state.global.hasFetchedPrivateGroups ); @@ -523,9 +529,19 @@ export const Mail = ({ isFromTo }: MailProps) => { return ( - + {selectedGroup ? ( - + {currentThread ? "New Post" : "New Thread"} @@ -749,7 +765,7 @@ export const Mail = ({ isFromTo }: MailProps) => { sx={{ minHeight: "unset", width: "auto", - padding: '0px' + padding: "0px", }} > @@ -813,95 +829,17 @@ export const Mail = ({ isFromTo }: MailProps) => { setFilterMode={setFilterMode} /> ) : ( - - - - - Inbox - - - - {!selectedAlias && ( - - {fullMailMessages.map(item => { - return ( - - ); - })} - - {isLoading && ( - - - - )} - - )} - - {selectedAlias && ( - - )} - - {mailInfo && isShow && ( - - )} - - - - - {isOpen && message && ( - <> + <> + {!isMobile && ( + + - { - setIsOpen(false); - setMessage(null); - }} - > - - Return to Sent - + + Inbox { width: "100%", flexDirection: "column", alignItems: "center", - direction: "ltr", }} > - + {fullMailMessages.map(item => { + return ( + + ); + })} + + {isLoading && ( + + + + )} + + )} + + {selectedAlias && ( + + )} + + {mailInfo && isShow && ( + + )} - - )} - <> - - - Sent - - + + + {isOpen && message && ( + <> + + { + setIsOpen(false); + setMessage(null); + }} + > + + Return to Sent + + + + + + + + + )} + <> + + + Sent + + + + + + + + + + )} + {isMobile && ( + + {isOpen && message && ( - + + { + setIsOpen(false); + setMessage(null); + }} + > + + Return + + + + + + + - - - - + )} + {selectedAlias && ( + + )} + {mailInfo && isShow && ( + + )} + + {mobileMode === "inbox" && ( + + + + { + setMobileMode("inbox"); + }} + sx={{ + height: '40px' + }} + > + + + Inbox + + + { + setMobileMode("sent"); + }} + sx={{ + height: '40px' + }} + > + + + Sent + + + + + + + + {!selectedAlias && ( + + {fullMailMessages.map(item => { + return ( + + ); + })} + + {isLoading && ( + + + + )} + + )} + + + + + + )} + + {mobileMode === "sent" && ( + + <> + + + { + setMobileMode("inbox"); + }} + sx={{ + height: '40px' + }} + > + + + Inbox + + + { + setMobileMode("sent"); + }} + + sx={{ + height: '40px' + }} + > + + + Sent + + + + + + + + + + + + )} + + )} + )} ); diff --git a/src/pages/Mail/MailMessageRow.tsx b/src/pages/Mail/MailMessageRow.tsx index 0925ac2..5f2e609 100644 --- a/src/pages/Mail/MailMessageRow.tsx +++ b/src/pages/Mail/MailMessageRow.tsx @@ -17,6 +17,7 @@ import AttachmentSVG from '../../assets/svgs/Attachment.svg' import { useSelector } from "react-redux"; import { RootState } from "../../state/store"; import { base64ToUint8Array, uint8ArrayToObject } from "../../utils/toBase64"; +import { useMediaQuery } from "@mui/material"; function parseQuery(query: string) { // Regular expression to match both possible formats @@ -49,6 +50,8 @@ export const MailMessageRow = ({ const [sentToNameInfo, setSentToNameInfo] = useState({ name: "" }) + const isMobile = useMediaQuery("(max-width:950px)"); + const [alias, setAlias] = useState(null) const identifier = useMemo(()=> { @@ -149,7 +152,13 @@ const name = useMemo(()=> { return ( { openMessage(messageData?.user, messageData?.id, messageData, isFromSent ? (alias || name) : username) }}> diff --git a/src/pages/Mail/NewMessage.tsx b/src/pages/Mail/NewMessage.tsx index e0b1036..b97b13b 100644 --- a/src/pages/Mail/NewMessage.tsx +++ b/src/pages/Mail/NewMessage.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, useEffect, useState } from 'react' import { ReusableModal } from '../../components/modals/ReusableModal' -import { Box, Button, Input, Typography, useTheme } from '@mui/material' +import { Box, Button, Input, Typography, useMediaQuery, useTheme } from '@mui/material' import { BuilderButton } from '../CreatePost/CreatePost-styles' import BlogEditor from '../../components/editor/BlogEditor' import EmailIcon from '@mui/icons-material/Email' @@ -85,6 +85,8 @@ export const NewMessage = ({ const [showAlias, setShowAlias] = useState(false) const [showBCC, setShowBCC] = useState(false) const [bccNames, setBccNames] = useState([]) + const isMobile = useMediaQuery("(max-width:950px)"); + const theme = useTheme() const { Modal, showModal } = useConfirmationModal({ title: 'Important', @@ -436,7 +438,12 @@ export const NewMessage = ({ }} > {!hideButton && ( - Compose @@ -448,17 +455,18 @@ export const NewMessage = ({ customStyles={{ maxHeight: '95vh', maxWidth: '950px', - height: '700px', + height: isMobile ? '95vh' : '700px', borderRadius: '12px 12px 0px 0px', background: 'var(--Mail-Backgrund, #313338)', padding: '0px', - gap: '0px' + gap: '0px', + width: isMobile ? '95%' : '75%' }} > @@ -659,11 +667,13 @@ export const NewMessage = ({ - + {replyTo ? 'Reply' : 'Send Message'} diff --git a/src/pages/Mail/NewThread.tsx b/src/pages/Mail/NewThread.tsx index c937bd5..cea117f 100644 --- a/src/pages/Mail/NewThread.tsx +++ b/src/pages/Mail/NewThread.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, useCallback, useEffect, useState } from "react"; import { ReusableModal } from "../../components/modals/ReusableModal"; -import { Box, Button, Input, Typography, useTheme } from "@mui/material"; +import { Box, Button, Input, Typography, useMediaQuery, useTheme } from "@mui/material"; import { BuilderButton } from "../CreatePost/CreatePost-styles"; import BlogEditor from "../../components/editor/BlogEditor"; import EmailIcon from "@mui/icons-material/Email"; @@ -97,6 +97,7 @@ export const NewThread = ({ const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false); const [publishes, setPublishes] = useState(null); const [callbackContent, setCallbackContent] = useState(null); + const isMobile = useMediaQuery("(max-width:950px)"); const theme = useTheme(); @@ -463,18 +464,19 @@ export const NewThread = ({ customStyles={{ maxHeight: "95vh", maxWidth: "950px", - height: "700px", + height: isMobile ? '95vh' : '700px', borderRadius: "12px 12px 0px 0px", background: "var(--Mail-Backgrund, #313338)", padding: "0px", gap: "0px", + width: isMobile ? '95%' : '75%' }} >