mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-15 04:21:21 +00:00
added sidebar
This commit is contained in:
parent
978dd7d995
commit
79543644a0
293
src/App.tsx
293
src/App.tsx
@ -1215,9 +1215,10 @@ function App() {
|
||||
return (
|
||||
<AuthenticatedContainer
|
||||
sx={{
|
||||
width: isMobile ? "100vw" : "350px",
|
||||
width: isMobile ? "100vw" : "auto",
|
||||
display: "flex",
|
||||
backgroundColor: "var(--bg-2)",
|
||||
justifyContent: 'flex-end'
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
@ -1239,162 +1240,166 @@ function App() {
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
{desktopViewMode !== "apps" && desktopViewMode !== "dev" && desktopViewMode !== "chat" && (
|
||||
<AuthenticatedContainerInnerLeft
|
||||
sx={{
|
||||
overflowY: isMobile && "auto",
|
||||
padding: '0px 20px'
|
||||
}}
|
||||
>
|
||||
<Spacer height="48px" />
|
||||
|
||||
<AuthenticatedContainerInnerLeft
|
||||
sx={{
|
||||
overflowY: isMobile && "auto",
|
||||
}}
|
||||
>
|
||||
<Spacer height="48px" />
|
||||
|
||||
{authenticatedMode === "ltc" ? (
|
||||
<>
|
||||
<img src={ltcLogo} />
|
||||
<Spacer height="32px" />
|
||||
<CopyToClipboard text={rawWallet?.ltcAddress}>
|
||||
<AddressBox>
|
||||
{rawWallet?.ltcAddress?.slice(0, 6)}...
|
||||
{rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
|
||||
</AddressBox>
|
||||
</CopyToClipboard>
|
||||
<Spacer height="10px" />
|
||||
{ltcBalanceLoading && (
|
||||
<CircularProgress color="success" size={16} />
|
||||
)}
|
||||
{!isNaN(+ltcBalance) && !ltcBalanceLoading && (
|
||||
<Box
|
||||
sx={{
|
||||
gap: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{ltcBalance} LTC
|
||||
</TextP>
|
||||
<RefreshIcon
|
||||
onClick={getLtcBalanceFunc}
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<AddressQRCode targetAddress={rawWallet?.ltcAddress} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MainAvatar myName={userInfo?.name} />
|
||||
<Spacer height="32px" />
|
||||
{authenticatedMode === "ltc" ? (
|
||||
<>
|
||||
<img src={ltcLogo} />
|
||||
<Spacer height="32px" />
|
||||
<CopyToClipboard text={rawWallet?.ltcAddress}>
|
||||
<AddressBox>
|
||||
{rawWallet?.ltcAddress?.slice(0, 6)}...
|
||||
{rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
|
||||
</AddressBox>
|
||||
</CopyToClipboard>
|
||||
<Spacer height="10px" />
|
||||
{ltcBalanceLoading && (
|
||||
<CircularProgress color="success" size={16} />
|
||||
)}
|
||||
{!isNaN(+ltcBalance) && !ltcBalanceLoading && (
|
||||
<Box
|
||||
sx={{
|
||||
gap: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{userInfo?.name}
|
||||
{ltcBalance} LTC
|
||||
</TextP>
|
||||
<Spacer height="10px" />
|
||||
<CopyToClipboard text={rawWallet?.address0}>
|
||||
<AddressBox>
|
||||
{rawWallet?.address0?.slice(0, 6)}...
|
||||
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
|
||||
</AddressBox>
|
||||
</CopyToClipboard>
|
||||
<Spacer height="10px" />
|
||||
{qortBalanceLoading && (
|
||||
<CircularProgress color="success" size={16} />
|
||||
)}
|
||||
{!qortBalanceLoading && balance >= 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
gap: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
<RefreshIcon
|
||||
onClick={getBalanceFunc}
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="35px" />
|
||||
{userInfo && !userInfo?.name && (
|
||||
<TextP
|
||||
ref={registerNamePopoverRef}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
cursor: "pointer",
|
||||
marginTop: "10px",
|
||||
color: "red",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
onClick={() => {
|
||||
setOpenRegisterName(true);
|
||||
}}
|
||||
>
|
||||
REGISTER NAME
|
||||
</TextP>
|
||||
)}
|
||||
<Spacer height="20px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setIsOpenSendQort(true);
|
||||
// setExtstate("send-qort");
|
||||
setIsOpenDrawerProfile(false);
|
||||
<RefreshIcon
|
||||
onClick={getLtcBalanceFunc}
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Transfer QORT
|
||||
</CustomButton>
|
||||
<AddressQRCode targetAddress={rawWallet?.address0} />
|
||||
</>
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<AddressQRCode targetAddress={rawWallet?.ltcAddress} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MainAvatar myName={userInfo?.name} />
|
||||
<Spacer height="32px" />
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
cursor: "pointer",
|
||||
marginTop: "10px",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
onClick={async () => {
|
||||
window.electronAPI.openExternal("https://www.qort.trade");
|
||||
fontSize: "20px",
|
||||
}}
|
||||
>
|
||||
Get QORT at qort.trade
|
||||
{userInfo?.name}
|
||||
</TextP>
|
||||
</AuthenticatedContainerInnerLeft>
|
||||
<Spacer height="10px" />
|
||||
<CopyToClipboard text={rawWallet?.address0}>
|
||||
<AddressBox>
|
||||
{rawWallet?.address0?.slice(0, 6)}...
|
||||
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
|
||||
</AddressBox>
|
||||
</CopyToClipboard>
|
||||
<Spacer height="10px" />
|
||||
{qortBalanceLoading && (
|
||||
<CircularProgress color="success" size={16} />
|
||||
)}
|
||||
{!qortBalanceLoading && balance >= 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
gap: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
{balance?.toFixed(2)} QORT
|
||||
</TextP>
|
||||
<RefreshIcon
|
||||
onClick={getBalanceFunc}
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
color: "white",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height="35px" />
|
||||
{userInfo && !userInfo?.name && (
|
||||
<TextP
|
||||
ref={registerNamePopoverRef}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
cursor: "pointer",
|
||||
marginTop: "10px",
|
||||
color: "red",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
onClick={() => {
|
||||
setOpenRegisterName(true);
|
||||
}}
|
||||
>
|
||||
REGISTER NAME
|
||||
</TextP>
|
||||
)}
|
||||
<Spacer height="20px" />
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setIsOpenSendQort(true);
|
||||
// setExtstate("send-qort");
|
||||
setIsOpenDrawerProfile(false);
|
||||
}}
|
||||
>
|
||||
Transfer QORT
|
||||
</CustomButton>
|
||||
<AddressQRCode targetAddress={rawWallet?.address0} />
|
||||
</>
|
||||
)}
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: "24px",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
cursor: "pointer",
|
||||
marginTop: "10px",
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
onClick={async () => {
|
||||
window.electronAPI.openExternal("https://www.qort.trade");
|
||||
}}
|
||||
>
|
||||
Get QORT at qort.trade
|
||||
</TextP>
|
||||
</AuthenticatedContainerInnerLeft>
|
||||
)}
|
||||
|
||||
|
||||
<AuthenticatedContainerInnerRight>
|
||||
<Spacer height="20px" />
|
||||
<img
|
||||
@ -1473,10 +1478,10 @@ function App() {
|
||||
<AppContainer
|
||||
sx={{
|
||||
height: isMobile ? "100%" : "100vh",
|
||||
backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
|
||||
backgroundSize: desktopViewMode === "apps" && "cover",
|
||||
backgroundPosition: desktopViewMode === "apps" && "center",
|
||||
backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
|
||||
// backgroundImage: desktopViewMode === "apps" && 'url("appsBg.svg")',
|
||||
// backgroundSize: desktopViewMode === "apps" && "cover",
|
||||
// backgroundPosition: desktopViewMode === "apps" && "center",
|
||||
// backgroundRepeat: desktopViewMode === "apps" && "no-repeat",
|
||||
}}
|
||||
>
|
||||
{extState === "not-authenticated" && (
|
||||
@ -1534,7 +1539,7 @@ function App() {
|
||||
desktopViewMode={desktopViewMode}
|
||||
setDesktopViewMode={setDesktopViewMode}
|
||||
/>
|
||||
{!isMobile && desktopViewMode !== "apps" && desktopViewMode !== "dev" && renderProfile()}
|
||||
{!isMobile && renderProfile()}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
|
||||
50
src/assets/Icons/AppsIcon.tsx
Normal file
50
src/assets/Icons/AppsIcon.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
|
||||
export const AppsIcon = ({ color, height = 31, width = 31 }) => {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 30 30"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.76596 7.53192C5.84584 7.53192 7.53192 5.84584 7.53192 3.76596C7.53192 1.68608 5.84584 0 3.76596 0C1.68608 0 0 1.68608 0 3.76596C0 5.84584 1.68608 7.53192 3.76596 7.53192Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M15 7.53192C17.0799 7.53192 18.766 5.84584 18.766 3.76596C18.766 1.68608 17.0799 0 15 0C12.9201 0 11.2341 1.68608 11.2341 3.76596C11.2341 5.84584 12.9201 7.53192 15 7.53192Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M26.234 7.53192C28.3139 7.53192 30 5.84584 30 3.76596C30 1.68608 28.3139 0 26.234 0C24.1542 0 22.4681 1.68608 22.4681 3.76596C22.4681 5.84584 24.1542 7.53192 26.234 7.53192Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M3.76596 30.0001C5.84584 30.0001 7.53192 28.314 7.53192 26.2341C7.53192 24.1542 5.84584 22.4681 3.76596 22.4681C1.68608 22.4681 0 24.1542 0 26.2341C0 28.314 1.68608 30.0001 3.76596 30.0001Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M15 30.0002C17.0799 30.0002 18.766 28.3141 18.766 26.2342C18.766 24.1543 17.0799 22.4683 15 22.4683C12.9201 22.4683 11.2341 24.1543 11.2341 26.2342C11.2341 28.3141 12.9201 30.0002 15 30.0002Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M26.234 30.0002C28.3139 30.0002 30 28.3141 30 26.2342C30 24.1543 28.3139 22.4683 26.234 22.4683C24.1542 22.4683 22.4681 24.1543 22.4681 26.2342C22.4681 28.3141 24.1542 30.0002 26.234 30.0002Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M3.76596 18.766C5.84584 18.766 7.53192 17.08 7.53192 15.0001C7.53192 12.9202 5.84584 11.2341 3.76596 11.2341C1.68608 11.2341 0 12.9202 0 15.0001C0 17.08 1.68608 18.766 3.76596 18.766Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M15 18.766C17.0799 18.766 18.766 17.08 18.766 15.0001C18.766 12.9202 17.0799 11.2341 15 11.2341C12.9201 11.2341 11.2341 12.9202 11.2341 15.0001C11.2341 17.08 12.9201 18.766 15 18.766Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M26.234 18.766C28.3139 18.766 30 17.08 30 15.0001C30 12.9202 28.3139 11.2341 26.234 11.2341C24.1542 11.2341 22.4681 12.9202 22.4681 15.0001C22.4681 17.08 24.1542 18.766 26.234 18.766Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@ -1,36 +1,72 @@
|
||||
|
||||
import React from 'react';
|
||||
import QRCode from 'react-qr-code';
|
||||
import { TextP } from '../App-styles';
|
||||
import { Box } from '@mui/material';
|
||||
import React, { useState } from "react";
|
||||
import QRCode from "react-qr-code";
|
||||
import { TextP } from "../App-styles";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
export const AddressQRCode = ({ targetAddress }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
marginTop: '20px'
|
||||
}}>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Your address
|
||||
</TextP>
|
||||
<QRCode
|
||||
value={targetAddress} // Your address here
|
||||
size={180} // Adjust size as needed
|
||||
level="M" // Error correction level (L, M, Q, H)
|
||||
bgColor="#FFFFFF" // Background color (white)
|
||||
fgColor="#000000" // Foreground color (black)
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
marginTop: '10px'
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
onClick={() => {
|
||||
setOpen((prev)=> !prev);
|
||||
}}
|
||||
>
|
||||
{open ? 'Hide QR code' :'See QR code'}
|
||||
</Typography>
|
||||
|
||||
{open && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
marginTop: "20px",
|
||||
}}
|
||||
>
|
||||
<TextP
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
lineHeight: 1.2,
|
||||
fontSize: "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Your address
|
||||
</TextP>
|
||||
<QRCode
|
||||
value={targetAddress} // Your address here
|
||||
size={150} // Adjust size as needed
|
||||
level="M" // Error correction level (L, M, Q, H)
|
||||
bgColor="#FFFFFF" // Background color (white)
|
||||
fgColor="#000000" // Foreground color (black)
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -21,10 +21,15 @@ import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
import { Save } from "../Save/Save";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { CoreSyncStatus } from "../CoreSyncStatus";
|
||||
import { IconWrapper } from "../Desktop/DesktopFooter";
|
||||
import AppIcon from "../../assets/svgs/AppIcon.svg";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { enabledDevModeAtom } from "../../atoms/global";
|
||||
import { AppsIcon } from "../../assets/Icons/AppsIcon";
|
||||
|
||||
const uid = new ShortUniqueId({ length: 8 });
|
||||
|
||||
export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
|
||||
export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, isApps, desktopViewMode}) => {
|
||||
const [availableQapps, setAvailableQapps] = useState([]);
|
||||
const [selectedAppInfo, setSelectedAppInfo] = useState(null);
|
||||
const [selectedCategory, setSelectedCategory] = useState(null)
|
||||
@ -33,6 +38,7 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
|
||||
const [isNewTabWindow, setIsNewTabWindow] = useState(false);
|
||||
const [categories, setCategories] = useState([])
|
||||
const iframeRefs = useRef({});
|
||||
const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom)
|
||||
const myApp = useMemo(()=> {
|
||||
|
||||
return availableQapps.find((app)=> app.name === myName && app.service === 'APP')
|
||||
@ -317,11 +323,46 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
|
||||
|
||||
<HomeIcon
|
||||
height={34}
|
||||
color="rgba(250, 250, 250, 0.5)"
|
||||
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
|
||||
/>
|
||||
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('apps')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Apps"
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('chat')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Chat"
|
||||
disableWidth
|
||||
>
|
||||
<MessagingIcon
|
||||
height={30}
|
||||
color={
|
||||
(hasUnreadDirects || hasUnreadGroups)
|
||||
? "var(--unread)"
|
||||
: desktopViewMode === 'chat'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
{/* <ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("directs");
|
||||
toggleSideViewDirects()
|
||||
@ -357,10 +398,23 @@ export const AppsDesktop = ({ mode, setMode, show , myName, goToHome, setDesktop
|
||||
}
|
||||
/>
|
||||
|
||||
</ButtonBase>
|
||||
</ButtonBase> */}
|
||||
<Save isDesktop disableWidth />
|
||||
<CoreSyncStatus imageSize="30px" position="left" />
|
||||
|
||||
{isEnabledDevMode && (
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('dev')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
|
||||
label="Dev"
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
)}
|
||||
{mode !== 'home' && (
|
||||
<AppsNavBarDesktop />
|
||||
|
||||
|
||||
@ -22,10 +22,12 @@ import { Save } from "../Save/Save";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { AppsDevModeNavBar } from "./AppsDevModeNavBar";
|
||||
import { CoreSyncStatus } from "../CoreSyncStatus";
|
||||
import { AppsIcon } from "../../assets/Icons/AppsIcon";
|
||||
import { IconWrapper } from "../Desktop/DesktopFooter";
|
||||
|
||||
const uid = new ShortUniqueId({ length: 8 });
|
||||
|
||||
export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects}) => {
|
||||
export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktopSideView, hasUnreadDirects, isDirects, isGroups, hasUnreadGroups, toggleSideViewGroups, toggleSideViewDirects, setDesktopViewMode, desktopViewMode, isApps}) => {
|
||||
const [availableQapps, setAvailableQapps] = useState([]);
|
||||
const [selectedAppInfo, setSelectedAppInfo] = useState(null);
|
||||
const [selectedCategory, setSelectedCategory] = useState(null)
|
||||
@ -208,49 +210,59 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop
|
||||
|
||||
<HomeIcon
|
||||
height={34}
|
||||
color="rgba(250, 250, 250, 0.5)"
|
||||
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
|
||||
/>
|
||||
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("directs");
|
||||
toggleSideViewDirects()
|
||||
setDesktopViewMode('apps')
|
||||
}}
|
||||
>
|
||||
|
||||
<IconWrapper
|
||||
color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Apps"
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon height={30} color={isApps ? 'white' :"rgba(250, 250, 250, 0.5)"} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('chat')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Chat"
|
||||
disableWidth
|
||||
>
|
||||
<MessagingIcon
|
||||
height={30}
|
||||
color={
|
||||
hasUnreadDirects
|
||||
? "var(--unread)"
|
||||
: isDirects
|
||||
: desktopViewMode === 'chat'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("groups");
|
||||
toggleSideViewGroups()
|
||||
}}
|
||||
>
|
||||
<HubsIcon
|
||||
height={30}
|
||||
color={
|
||||
hasUnreadGroups
|
||||
? "var(--unread)"
|
||||
: isGroups
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<Save isDesktop disableWidth />
|
||||
<CoreSyncStatus imageSize="30px" position="left" />
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('dev')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
|
||||
label="Dev"
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
{mode !== 'home' && (
|
||||
<AppsDevModeNavBar />
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ import { Save } from "../Save/Save";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { enabledDevModeAtom } from "../../atoms/global";
|
||||
|
||||
export const IconWrapper = ({ children, label, color, selected, disableWidth }) => {
|
||||
export const IconWrapper = ({ children, label, color, selected, disableWidth, customWidth }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -29,8 +29,8 @@ export const IconWrapper = ({ children, label, color, selected, disableWidth })
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
flexDirection: "column",
|
||||
height: disableWidth ? 'auto' : "89px",
|
||||
width: disableWidth ? 'auto' : "89px",
|
||||
height: customWidth ? customWidth : disableWidth ? 'auto' : "89px",
|
||||
width: customWidth? customWidth : disableWidth ? 'auto' : "89px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: selected ? "rgba(28, 29, 32, 1)" : "transparent",
|
||||
}}
|
||||
|
||||
@ -19,7 +19,7 @@ import { ChatIcon } from "../../assets/Icons/ChatIcon";
|
||||
import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
|
||||
import { MembersIcon } from "../../assets/Icons/MembersIcon";
|
||||
|
||||
const IconWrapper = ({ children, label, color, selected, selectColor }) => {
|
||||
const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -28,8 +28,8 @@ const IconWrapper = ({ children, label, color, selected, selectColor }) => {
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
flexDirection: "column",
|
||||
height: "65px",
|
||||
width: "65px",
|
||||
height: customHeight ? customHeight : "65px",
|
||||
width: customHeight ? customHeight : "65px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent",
|
||||
}}
|
||||
@ -111,7 +111,7 @@ export const DesktopHeader = ({
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
{/* <ButtonBase
|
||||
onClick={() => {
|
||||
goToHome();
|
||||
}}
|
||||
@ -170,15 +170,15 @@ export const DesktopHeader = ({
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<Box
|
||||
</ButtonBase> */}
|
||||
{/* <Box
|
||||
sx={{
|
||||
width: "1px",
|
||||
height: "50px",
|
||||
background: "white",
|
||||
borderRadius: "50px",
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
goToAnnouncements()
|
||||
@ -189,6 +189,7 @@ export const DesktopHeader = ({
|
||||
label="ANN"
|
||||
selected={isAnnouncement}
|
||||
selectColor="#09b6e8"
|
||||
customHeight="55px"
|
||||
>
|
||||
<NotificationIcon2
|
||||
height={25}
|
||||
@ -214,6 +215,7 @@ export const DesktopHeader = ({
|
||||
label="Chat"
|
||||
selected={isChat}
|
||||
selectColor="#09b6e8"
|
||||
customHeight="55px"
|
||||
>
|
||||
<ChatIcon
|
||||
height={25}
|
||||
@ -240,6 +242,7 @@ export const DesktopHeader = ({
|
||||
label="Threads"
|
||||
selected={isForum}
|
||||
selectColor="#09b6e8"
|
||||
customHeight="55px"
|
||||
>
|
||||
<ThreadsIcon
|
||||
height={25}
|
||||
@ -262,6 +265,7 @@ export const DesktopHeader = ({
|
||||
color="rgba(250, 250, 250, 0.5)"
|
||||
label="Members"
|
||||
selected={false}
|
||||
customHeight="55px"
|
||||
>
|
||||
<MembersIcon
|
||||
height={25}
|
||||
|
||||
120
src/components/DesktopSideBar.tsx
Normal file
120
src/components/DesktopSideBar.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import { Box, ButtonBase } from '@mui/material';
|
||||
import React from 'react'
|
||||
import { HomeIcon } from "../assets/Icons/HomeIcon";
|
||||
import { MessagingIcon } from "../assets/Icons/MessagingIcon";
|
||||
import { Save } from "./Save/Save";
|
||||
import { HubsIcon } from "../assets/Icons/HubsIcon";
|
||||
import { CoreSyncStatus } from "./CoreSyncStatus";
|
||||
import { IconWrapper } from './Desktop/DesktopFooter';
|
||||
import AppIcon from "./../assets/svgs/AppIcon.svg";
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { enabledDevModeAtom } from '../atoms/global';
|
||||
import { AppsIcon } from '../assets/Icons/AppsIcon';
|
||||
|
||||
export const DesktopSideBar = ({goToHome, setDesktopSideView, toggleSideViewDirects, hasUnreadDirects, isDirects, toggleSideViewGroups,hasUnreadGroups, isGroups, isApps, setDesktopViewMode, desktopViewMode }) => {
|
||||
const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom)
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '60px',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
gap: '25px'
|
||||
}}>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
paddingTop: '23px'
|
||||
}}
|
||||
onClick={() => {
|
||||
goToHome();
|
||||
|
||||
}}
|
||||
>
|
||||
|
||||
<HomeIcon
|
||||
height={34}
|
||||
color={desktopViewMode === 'home' ? 'white': "rgba(250, 250, 250, 0.5)"}
|
||||
|
||||
/>
|
||||
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('apps')
|
||||
// setIsOpenSideViewDirects(false)
|
||||
// setIsOpenSideViewGroups(false)
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"}
|
||||
label="Apps"
|
||||
selected={isApps}
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon color={isApps ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('chat')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={(hasUnreadDirects || hasUnreadGroups) ? "var(--unread)" : desktopViewMode === 'chat' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Chat"
|
||||
disableWidth
|
||||
>
|
||||
<MessagingIcon
|
||||
height={30}
|
||||
color={
|
||||
(hasUnreadDirects || hasUnreadGroups)
|
||||
? "var(--unread)"
|
||||
: desktopViewMode === 'chat'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
{/* <ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("groups");
|
||||
toggleSideViewGroups()
|
||||
}}
|
||||
>
|
||||
<HubsIcon
|
||||
height={30}
|
||||
color={
|
||||
hasUnreadGroups
|
||||
? "var(--unread)"
|
||||
: isGroups
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
|
||||
</ButtonBase> */}
|
||||
<Save isDesktop disableWidth />
|
||||
{/* <CoreSyncStatus imageSize="30px" position="left" /> */}
|
||||
{isEnabledDevMode && (
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopViewMode('dev')
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"}
|
||||
label="Dev"
|
||||
disableWidth
|
||||
>
|
||||
<AppsIcon color={desktopViewMode === 'dev' ? 'white' : "rgba(250, 250, 250, 0.5)"} height={30} />
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -86,12 +86,15 @@ import { getRootHeight } from "../../utils/mobile/mobileUtils";
|
||||
import { ReturnIcon } from "../../assets/Icons/ReturnIcon";
|
||||
import { ExitIcon } from "../../assets/Icons/ExitIcon";
|
||||
import { HomeDesktop } from "./HomeDesktop";
|
||||
import { DesktopFooter } from "../Desktop/DesktopFooter";
|
||||
import { DesktopFooter, IconWrapper } from "../Desktop/DesktopFooter";
|
||||
import { DesktopHeader } from "../Desktop/DesktopHeader";
|
||||
import { Apps } from "../Apps/Apps";
|
||||
import { AppsNavBar } from "../Apps/AppsNavBar";
|
||||
import { AppsDesktop } from "../Apps/AppsDesktop";
|
||||
import { AppsDevMode } from "../Apps/AppsDevMode";
|
||||
import { DesktopSideBar } from "../DesktopSideBar";
|
||||
import { HubsIcon } from "../../assets/Icons/HubsIcon";
|
||||
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
|
||||
|
||||
// let touchStartY = 0;
|
||||
// let disablePullToRefresh = false;
|
||||
@ -1282,6 +1285,9 @@ export const Group = ({
|
||||
setupGroupWebsocketInterval.current = null;
|
||||
settimeoutForRefetchSecretKey.current = null;
|
||||
initiatedGetMembers.current = false;
|
||||
if(!isMobile){
|
||||
setDesktopViewMode('home')
|
||||
}
|
||||
};
|
||||
|
||||
const logoutEventFunc = () => {
|
||||
@ -1368,6 +1374,9 @@ export const Group = ({
|
||||
setTriedToFetchSecretKey(false);
|
||||
setFirstSecretKeyInCreation(false);
|
||||
setGroupSection("chat");
|
||||
if(!isMobile){
|
||||
setDesktopViewMode('chat')
|
||||
}
|
||||
|
||||
window.sendMessage("addTimestampEnterChat", {
|
||||
timestamp: Date.now(),
|
||||
@ -1381,10 +1390,9 @@ export const Group = ({
|
||||
setSelectedGroup(findGroup);
|
||||
setMobileViewMode("group");
|
||||
setDesktopSideView('groups')
|
||||
setDesktopViewMode('home')
|
||||
getTimestampEnterChat();
|
||||
isLoadingOpenSectionFromNotification.current = false;
|
||||
}, 200);
|
||||
}, 350);
|
||||
} else {
|
||||
isLoadingOpenSectionFromNotification.current = false;
|
||||
}
|
||||
@ -1419,6 +1427,9 @@ export const Group = ({
|
||||
setTriedToFetchSecretKey(false);
|
||||
setFirstSecretKeyInCreation(false);
|
||||
setGroupSection("announcement");
|
||||
if(!isMobile){
|
||||
setDesktopViewMode('chat')
|
||||
}
|
||||
window.sendMessage("addGroupNotificationTimestamp", {
|
||||
timestamp: Date.now(),
|
||||
groupId: findGroup.groupId,
|
||||
@ -1430,9 +1441,8 @@ export const Group = ({
|
||||
setSelectedGroup(findGroup);
|
||||
setMobileViewMode("group");
|
||||
setDesktopSideView('groups')
|
||||
setDesktopViewMode('home')
|
||||
getGroupAnnouncements();
|
||||
}, 200);
|
||||
}, 350);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1481,14 +1491,15 @@ export const Group = ({
|
||||
setFirstSecretKeyInCreation(false);
|
||||
setGroupSection("forum");
|
||||
setDefaultThread(data);
|
||||
|
||||
if(!isMobile){
|
||||
setDesktopViewMode('chat')
|
||||
}
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(findGroup);
|
||||
setMobileViewMode("group");
|
||||
setDesktopSideView('groups')
|
||||
setDesktopViewMode('home')
|
||||
getGroupAnnouncements();
|
||||
}, 200);
|
||||
}, 350);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1512,31 +1523,31 @@ export const Group = ({
|
||||
}
|
||||
setDesktopViewMode('home')
|
||||
|
||||
setGroupSection("default");
|
||||
clearAllQueues();
|
||||
// setGroupSection("default");
|
||||
// clearAllQueues();
|
||||
await new Promise((res) => {
|
||||
setTimeout(() => {
|
||||
res(null);
|
||||
}, 200);
|
||||
});
|
||||
setGroupSection("home");
|
||||
setSelectedGroup(null);
|
||||
setNewChat(false);
|
||||
setSelectedDirect(null);
|
||||
setSecretKey(null);
|
||||
setGroupOwner(null)
|
||||
lastFetchedSecretKey.current = null;
|
||||
initiatedGetMembers.current = false;
|
||||
setSecretKeyPublishDate(null);
|
||||
setAdmins([]);
|
||||
setSecretKeyDetails(null);
|
||||
setAdminsWithNames([]);
|
||||
setMembers([]);
|
||||
setMemberCountFromSecretKeyData(null);
|
||||
setTriedToFetchSecretKey(false);
|
||||
setFirstSecretKeyInCreation(false);
|
||||
setIsOpenSideViewDirects(false)
|
||||
setIsOpenSideViewGroups(false)
|
||||
// setGroupSection("home");
|
||||
// setSelectedGroup(null);
|
||||
// setNewChat(false);
|
||||
// setSelectedDirect(null);
|
||||
// setSecretKey(null);
|
||||
// setGroupOwner(null)
|
||||
// lastFetchedSecretKey.current = null;
|
||||
// initiatedGetMembers.current = false;
|
||||
// setSecretKeyPublishDate(null);
|
||||
// setAdmins([]);
|
||||
// setSecretKeyDetails(null);
|
||||
// setAdminsWithNames([]);
|
||||
// setMembers([]);
|
||||
// setMemberCountFromSecretKeyData(null);
|
||||
// setTriedToFetchSecretKey(false);
|
||||
// setFirstSecretKeyInCreation(false);
|
||||
// setIsOpenSideViewDirects(false)
|
||||
// setIsOpenSideViewGroups(false)
|
||||
};
|
||||
|
||||
const goToAnnouncements = async () => {
|
||||
@ -1612,6 +1623,67 @@ export const Group = ({
|
||||
borderRadius: !isMobile && '0px 15px 15px 0px'
|
||||
}}
|
||||
>
|
||||
{!isMobile && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
gap: '10px'
|
||||
}}>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("groups");
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={(groupChatHasUnread ||
|
||||
groupsAnnHasUnread)
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
customWidth="75px"
|
||||
>
|
||||
<HubsIcon
|
||||
height={24}
|
||||
color={
|
||||
(groupChatHasUnread ||
|
||||
groupsAnnHasUnread)
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'groups'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("directs");
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
customWidth="75px"
|
||||
color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs'}
|
||||
>
|
||||
<MessagingIcon
|
||||
height={24}
|
||||
color={
|
||||
directChatHasUnread
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'directs'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
@ -1819,7 +1891,67 @@ export const Group = ({
|
||||
borderRadius: !isMobile && '0px 15px 15px 0px'
|
||||
}}
|
||||
>
|
||||
|
||||
{!isMobile && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
gap: '10px'
|
||||
}}>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("groups");
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
color={(groupChatHasUnread ||
|
||||
groupsAnnHasUnread)
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'groups' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
customWidth="75px"
|
||||
>
|
||||
<HubsIcon
|
||||
height={24}
|
||||
color={
|
||||
(groupChatHasUnread ||
|
||||
groupsAnnHasUnread)
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'groups'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setDesktopSideView("directs");
|
||||
}}
|
||||
>
|
||||
<IconWrapper
|
||||
customWidth="75px"
|
||||
color={directChatHasUnread ? "var(--unread)" : desktopSideView === 'directs' ? 'white' :"rgba(250, 250, 250, 0.5)"}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs' }
|
||||
>
|
||||
<MessagingIcon
|
||||
height={24}
|
||||
color={
|
||||
directChatHasUnread
|
||||
? "var(--unread)"
|
||||
: desktopSideView === 'directs'
|
||||
? "white"
|
||||
: "rgba(250, 250, 250, 0.5)"
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
@ -1850,7 +1982,6 @@ export const Group = ({
|
||||
onClick={() => {
|
||||
setMobileViewMode("group");
|
||||
setDesktopSideView('groups')
|
||||
setDesktopViewMode('home')
|
||||
initiatedGetMembers.current = false;
|
||||
clearAllQueues();
|
||||
setSelectedDirect(null);
|
||||
@ -2067,8 +2198,14 @@ export const Group = ({
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
>
|
||||
{!isMobile && ((desktopSideView === 'groups' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && renderGroups()}
|
||||
{!isMobile && ((desktopSideView === 'directs' && desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewDirects) && renderDirects()}
|
||||
{!isMobile && ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') || isOpenSideViewGroups) && (
|
||||
<DesktopSideBar desktopViewMode={desktopViewMode} toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} isApps={desktopViewMode === 'apps'} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
|
||||
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
|
||||
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} />
|
||||
)}
|
||||
|
||||
{!isMobile && desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()}
|
||||
{!isMobile && desktopViewMode === 'chat' && desktopSideView === 'directs' && renderDirects()}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
@ -2174,9 +2311,37 @@ export const Group = ({
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{selectedGroup && mobileViewMode !== 'groups' && (
|
||||
<>
|
||||
{!isMobile && selectedGroup && (
|
||||
{desktopViewMode === 'chat' && !selectedGroup && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}}
|
||||
>
|
||||
No group selected
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{mobileViewMode !== 'groups' && (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: selectedGroup? 'block' : 'none',
|
||||
opacity: !(desktopViewMode === 'chat' && selectedGroup) ? 0 : 1,
|
||||
position: !(desktopViewMode === 'chat' && selectedGroup) ? 'absolute' : 'relative',
|
||||
left: !(desktopViewMode === 'chat' && selectedGroup) ? '-100000px' : '0px',
|
||||
}}>
|
||||
{!isMobile && (
|
||||
|
||||
<DesktopHeader
|
||||
selectedGroup={selectedGroup}
|
||||
@ -2457,7 +2622,7 @@ export const Group = ({
|
||||
isOwner={groupOwner?.owner === myAddress}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDirect && !newChat && (
|
||||
@ -2501,7 +2666,7 @@ export const Group = ({
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{!isMobile && groupSection === "home" && (
|
||||
{/* {!isMobile && groupSection === "home" && (
|
||||
<DesktopFooter
|
||||
selectedGroup={selectedGroup}
|
||||
groupSection={groupSection}
|
||||
@ -2536,7 +2701,7 @@ export const Group = ({
|
||||
setIsOpenSideViewDirects={setIsOpenSideViewDirects}
|
||||
setIsOpenSideViewGroups={setIsOpenSideViewGroups}
|
||||
/>
|
||||
)}
|
||||
)} */}
|
||||
{isMobile && mobileViewMode === "home" && (
|
||||
<Home
|
||||
refreshHomeDataFunc={refreshHomeDataFunc}
|
||||
@ -2551,6 +2716,7 @@ export const Group = ({
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
setDesktopViewMode={setDesktopViewMode}
|
||||
/>
|
||||
)}
|
||||
{isMobile && (
|
||||
@ -2559,17 +2725,16 @@ export const Group = ({
|
||||
{!isMobile && (
|
||||
<AppsDesktop toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsMode} setMode={setAppsMode} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "apps"} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
|
||||
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
|
||||
groupsAnnHasUnread} />
|
||||
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} isApps={desktopViewMode === 'apps'} desktopViewMode={desktopViewMode} />
|
||||
)}
|
||||
{!isMobile && (
|
||||
<AppsDevMode toggleSideViewGroups={toggleSideViewGroups} toggleSideViewDirects={toggleSideViewDirects} goToHome={goToHome} mode={appsModeDev} setMode={setAppsModeDev} setDesktopSideView={setDesktopSideView} hasUnreadDirects={directChatHasUnread} show={desktopViewMode === "dev"} myName={userInfo?.name} isGroups={isOpenSideViewGroups}
|
||||
isDirects={isOpenSideViewDirects} hasUnreadGroups={groupChatHasUnread ||
|
||||
groupsAnnHasUnread} />
|
||||
groupsAnnHasUnread} setDesktopViewMode={setDesktopViewMode} desktopViewMode={desktopViewMode} isApps={desktopViewMode === 'apps'} />
|
||||
)}
|
||||
|
||||
|
||||
{!isMobile && !selectedGroup &&
|
||||
groupSection === "home" && desktopViewMode !== "apps" && desktopViewMode !== "dev" && (
|
||||
{!isMobile && desktopViewMode === 'home' && (
|
||||
<HomeDesktop
|
||||
refreshHomeDataFunc={refreshHomeDataFunc}
|
||||
myAddress={myAddress}
|
||||
@ -2583,18 +2748,20 @@ export const Group = ({
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
setDesktopViewMode={setDesktopViewMode}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
<AuthenticatedContainerInnerRight
|
||||
sx={{
|
||||
marginLeft: "auto",
|
||||
width: "31px",
|
||||
// minWidth: "135px",
|
||||
padding: "5px",
|
||||
display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev') ? "none" : "flex",
|
||||
display: (isMobile || desktopViewMode === 'apps' || desktopViewMode === 'dev' || desktopViewMode === 'chat') ? "none" : "flex",
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
|
||||
import { MyContext, getBaseApiReact, isMobile } from "../../App";
|
||||
export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
|
||||
|
||||
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
|
||||
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => {
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
const {txList, setTxList} = React.useContext(MyContext)
|
||||
@ -179,6 +179,9 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
getTimestampEnterChat()
|
||||
setGroupSection("announcement")
|
||||
setOpenManageMembers(true)
|
||||
if(!isMobile){
|
||||
setDesktopViewMode('chat')
|
||||
}
|
||||
setTimeout(() => {
|
||||
executeEvent("openGroupJoinRequest", {});
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@ export const Home = ({
|
||||
setOpenManageMembers,
|
||||
setOpenAddGroup,
|
||||
setMobileViewMode,
|
||||
setDesktopViewMode
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
@ -95,6 +96,7 @@ export const Home = ({
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
setDesktopViewMode={setDesktopViewMode}
|
||||
/>
|
||||
<GroupInvites
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
|
||||
@ -20,6 +20,7 @@ export const HomeDesktop = ({
|
||||
setOpenManageMembers,
|
||||
setOpenAddGroup,
|
||||
setMobileViewMode,
|
||||
setDesktopViewMode
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
@ -66,7 +67,7 @@ export const HomeDesktop = ({
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "flex-start",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Box sx={{
|
||||
@ -104,6 +105,7 @@ export const HomeDesktop = ({
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
setDesktopViewMode={setDesktopViewMode}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
|
||||
@ -73,7 +73,7 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user