Qortal/chrome-extension
3
0
Fork 0
mirror of https://github.com/Qortal/chrome-extension.git synced 2025-02-11 17:55:49 +00:00
Code Issues Projects Releases Wiki Activity

started on desktop

Browse Source
This commit is contained in:
PhilReact 2024-09-21 09:57:35 +03:00
parent 38545e3da5
commit 7205f8c9ad
9 changed files with 405 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App-styles.ts
View File

@ -77,7 +77,7 @@ display: flex;
border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
justify-content: space-between;
align-items: center;
width: 132px;
width: 140px;
height: 25px;
padding: 5px 15px 5px 15px;
gap: 5px;

2
src/App.tsx
View File

@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = {
message: "",
},
};
export let isMobile = true
export let isMobile = false
const isMobileDevice = () => {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;

118
src/components/Desktop/DesktopFooter.tsx Normal file
View File

@ -0,0 +1,118 @@
import * as React from "react";
import {
BottomNavigation,
BottomNavigationAction,
ButtonBase,
Typography,
} from "@mui/material";
import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
import Box from "@mui/material/Box";
import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
import { CustomSvg } from "../../common/CustomSvg";
import { WalletIcon } from "../../assets/Icons/WalletIcon";
import { HubsIcon } from "../../assets/Icons/HubsIcon";
import { TradingIcon } from "../../assets/Icons/TradingIcon";
import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
import { HomeIcon } from "../../assets/Icons/HomeIcon";
const IconWrapper = ({ children, label, color, selected }) => {
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "5px",
flexDirection: "column",
height: '89px',
width: '89px',
borderRadius: '50%',
backgroundColor: selected ? 'rgba(28, 29, 32, 1)' : 'transparent'
}}
>
{children}
<Typography
sx={{
fontFamily: "Inter",
fontSize: "12px",
fontWeight: 500,
color: color,
}}
>
{label}
</Typography>
</Box>
);
};
export const DesktopFooter = ({
selectedGroup,
groupSection,
isUnread,
goToAnnouncements,
isUnreadChat,
goToChat,
goToThreads,
setOpenManageMembers,
groupChatHasUnread,
groupsAnnHasUnread,
directChatHasUnread,
chatMode,
openDrawerGroups,
goToHome,
setIsOpenDrawerProfile,
mobileViewMode,
setMobileViewMode,
setMobileViewModeKeepOpen,
hasUnreadGroups,
hasUnreadDirects,
isHome,
isGroups,
isDirects,
setDesktopSideView
}) => {
const [value, setValue] = React.useState(0);
return (
<Box
sx={{
width: "100%",
position: "absolute",
bottom: 0,
display: "flex",
alignItems: "center",
height: "100px", // Footer height
zIndex: 1,
justifyContent: 'center'
}}
>
<Box sx={{
display: 'flex',
gap: '20px'
}}>
<ButtonBase onClick={()=> {
goToHome()
}}>
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Home" selected={isHome}>
<HomeIcon height={30} color={isHome ? "white" : "rgba(250, 250, 250, 0.5)"} />
</IconWrapper>
</ButtonBase>
<ButtonBase onClick={()=> {
setDesktopSideView('groups')
}}>
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs" selected={isGroups}>
<HubsIcon height={30} color={hasUnreadGroups ? "var(--unread)" : isGroups ? 'white' : "rgba(250, 250, 250, 0.5)"} />
</IconWrapper>
</ButtonBase>
<ButtonBase onClick={()=> {
setDesktopSideView('directs')
}}>
<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Messaging" selected={isDirects}>
<MessagingIcon height={30} color={hasUnreadDirects ? "var(--unread)" : isDirects ? 'white' : "rgba(250, 250, 250, 0.5)"} />
</IconWrapper>
</ButtonBase>
</Box>
</Box>
);
};

205
src/components/Group/Group.tsx
View File

@ -85,6 +85,8 @@ import { GroupMenu } from "./GroupMenu";
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";
// let touchStartY = 0;
// let disablePullToRefresh = false;
@ -418,7 +420,7 @@ export const Group = ({
const [mutedGroups, setMutedGroups] = useState([]);
const [mobileViewMode, setMobileViewMode] = useState("home");
const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState("");
const [desktopSideView, setDesktopSideView] = useState('groups')
const isFocusedRef = useRef(true);
const selectedGroupRef = useRef(null);
const selectedDirectRef = useRef(null);
@ -1547,10 +1549,12 @@ export const Group = ({
<div
style={{
display: "flex",
width: isMobile ? "100%" : "300px",
width: isMobile ? "100%" : "380px",
flexDirection: "column",
alignItems: "flex-start",
height: isMobile ? `calc(${getRootHeight()} - 45px)` : "100%",
background: !isMobile && 'var(--bg-primary)',
borderRadius: !isMobile && '0px 15px 15px 0px'
}}
>
{isMobile && (
@ -1752,10 +1756,12 @@ export const Group = ({
<div
style={{
display: "flex",
width: isMobile ? "100%" : "300px",
width: isMobile ? "100%" : "380px",
flexDirection: "column",
alignItems: "flex-start",
height: isMobile ? "calc(100% - 45px)" : "100%",
background: !isMobile && 'var(--bg-primary)',
borderRadius: !isMobile && '0px 15px 15px 0px'
}}
>
{/* <div
@ -2147,21 +2153,24 @@ export const Group = ({
info={infoSnack}
setInfo={setInfoSnack}
/>
<Header
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
isThin={
mobileViewMode === "groups" ||
mobileViewMode === "group" ||
mobileViewModeKeepOpen === "messaging"
}
logoutFunc={logoutFunc}
goToHome={goToHome}
setIsOpenDrawerProfile={setIsOpenDrawerProfile}
hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread}
hasUnreadDirects={directChatHasUnread}
setMobileViewMode={setMobileViewMode}
/>
{isMobile && (
<Header
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
isThin={
mobileViewMode === "groups" ||
mobileViewMode === "group" ||
mobileViewModeKeepOpen === "messaging"
}
logoutFunc={logoutFunc}
goToHome={goToHome}
setIsOpenDrawerProfile={setIsOpenDrawerProfile}
hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread}
hasUnreadDirects={directChatHasUnread}
setMobileViewMode={setMobileViewMode}
/>
)}
<div
style={{
@ -2172,7 +2181,9 @@ export const Group = ({
alignItems: "flex-start",
}}
>
{!isMobile && renderGroups()}
{!isMobile && desktopSideView === 'groups' && renderGroups()}
{!isMobile && desktopSideView === 'directs' && renderDirects()}
<Box
sx={{
width: "100%",
@ -2277,60 +2288,63 @@ export const Group = ({
)}
{selectedGroup && (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "100%",
marginTop: "14px",
justifyContent: "center",
height: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "320px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "50px",
}}
>
<ButtonBase
onClick={() => {
setMobileViewMode("groups");
}}
>
<ReturnIcon />
</ButtonBase>
</Box>
<Typography
sx={{
fontSize: "14px",
fontWeight: 600,
}}
>
{selectedGroup?.groupName}
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "50px",
justifyContent: "flex-end",
}}
>
{/* <ExitIcon /> */}
</Box>
</Box>
</Box>
{mobileViewMode === "group" && (
{isMobile && (
<Box
sx={{
display: "flex",
alignItems: "center",
width: "100%",
marginTop: "14px",
justifyContent: "center",
height: "15px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "320px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "50px",
}}
>
<ButtonBase
onClick={() => {
setMobileViewMode("groups");
}}
>
<ReturnIcon />
</ButtonBase>
</Box>
<Typography
sx={{
fontSize: "14px",
fontWeight: 600,
}}
>
{selectedGroup?.groupName}
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
width: "50px",
justifyContent: "flex-end",
}}
>
{/* <ExitIcon /> */}
</Box>
</Box>
</Box>
)}
{isMobile && mobileViewMode === "group" && (
<>
<GroupMenu
setGroupSection={setGroupSection}
@ -2556,8 +2570,37 @@ export const Group = ({
</Box>
</>
)}
{mobileViewMode === "home" && (
{!isMobile && (
<DesktopFooter
selectedGroup={selectedGroup}
groupSection={groupSection}
isUnread={isUnread}
goToAnnouncements={goToAnnouncements}
isUnreadChat={isUnreadChat}
goToChat={goToChat}
goToThreads={goToThreads}
setOpenManageMembers={setOpenManageMembers}
groupChatHasUnread={groupChatHasUnread}
groupsAnnHasUnread={groupsAnnHasUnread}
directChatHasUnread={directChatHasUnread}
chatMode={chatMode}
openDrawerGroups={openDrawerGroups}
goToHome={goToHome}
setIsOpenDrawerProfile={setIsOpenDrawerProfile}
mobileViewMode={mobileViewMode}
setMobileViewMode={setMobileViewMode}
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
hasUnreadGroups={groupChatHasUnread ||
groupsAnnHasUnread}
hasUnreadDirects={directChatHasUnread}
myName={userInfo?.name || null}
isHome={groupSection === "home"}
isGroups={desktopSideView === 'groups'}
isDirects={desktopSideView === 'directs'}
setDesktopSideView={setDesktopSideView}
/>
)}
{isMobile && mobileViewMode === "home" && (
<Home
refreshHomeDataFunc={refreshHomeDataFunc}
myAddress={myAddress}
@ -2573,11 +2616,11 @@ export const Group = ({
setMobileViewMode={setMobileViewMode}
/>
)}
{/* {
!selectedGroup &&
{
!isMobile && !selectedGroup &&
groupSection === "home" && (
<Home
<HomeDesktop
refreshHomeDataFunc={refreshHomeDataFunc}
myAddress={myAddress}
isLoadingGroups={isLoadingGroups}
@ -2589,8 +2632,9 @@ export const Group = ({
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
setOpenAddGroup={setOpenAddGroup}
setMobileViewMode={setMobileViewMode}
/>
)} */}
)}
</Box>
<AuthenticatedContainerInnerRight
sx={{
@ -2796,7 +2840,8 @@ export const Group = ({
}}
/>
</div>
{mobileViewMode === "home" && !mobileViewModeKeepOpen && (
{isMobile && mobileViewMode === "home" && !mobileViewModeKeepOpen && (
<>
<div
style={{

5
src/components/Group/GroupInvites.tsx
View File

@ -14,7 +14,7 @@ import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApiReact } from "../../App";
import { getBaseApiReact, isMobile } from "../../App";
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
@ -75,7 +75,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
<Box
sx={{
width: "322px",
height: "165px",
height: isMobile ? "165px" : "250px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",

5
src/components/Group/GroupJoinRequests.tsx
View File

@ -15,7 +15,7 @@ import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApi } from "../../background";
import { getBaseApiReact } from "../../App";
import { getBaseApiReact, isMobile } from "../../App";
export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
@ -124,7 +124,8 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
<Box
sx={{
width: "322px",
height: '165px',
height: isMobile ? "165px" : "250px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",

150
src/components/Group/HomeDesktop.tsx Normal file
View File

@ -0,0 +1,150 @@
import { Box, Button, Typography } from "@mui/material";
import React from "react";
import { Spacer } from "../../common/Spacer";
import { ListOfThreadPostsWatched } from "./ListOfThreadPostsWatched";
import { ThingsToDoInitial } from "./ThingsToDoInitial";
import { GroupJoinRequests } from "./GroupJoinRequests";
import { GroupInvites } from "./GroupInvites";
import RefreshIcon from "@mui/icons-material/Refresh";
export const HomeDesktop = ({
refreshHomeDataFunc,
myAddress,
isLoadingGroups,
balance,
userInfo,
groups,
setGroupSection,
setSelectedGroup,
getTimestampEnterChat,
setOpenManageMembers,
setOpenAddGroup,
setMobileViewMode,
}) => {
return (
<Box
sx={{
display: "flex",
width: "100%",
flexDirection: "column",
height: "100%",
overflow: "auto",
alignItems: "center",
}}
>
<Spacer height="20px" />
<Box sx={{
display: "flex",
width: "100%",
flexDirection: "column",
height: "100%",
alignItems: "flex-start",
maxWidth: '1036px'
}}>
<Typography
sx={{
color: "rgba(255, 255, 255, 1)",
fontWeight: 400,
fontSize: userInfo?.name?.length > 15 ? "16px" : "20px",
padding: '10px'
}}
>
Welcome{" "}
{userInfo?.name ? (
<span
style={{
fontStyle: "italic",
}}
>{`, ${userInfo?.name}`}</span>
) : null}
</Typography>
<Spacer height="70px" />
{!isLoadingGroups && (
<Box
sx={{
display: "flex",
gap: "15px",
flexWrap: "wrap",
justifyContent: "flex-start",
}}
>
<Box sx={{
width: '330px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<ThingsToDoInitial
balance={balance}
myAddress={myAddress}
name={userInfo?.name}
hasGroups={groups?.length !== 0}
/>
</Box>
<Box sx={{
width: '330px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<ListOfThreadPostsWatched />
</Box>
<Box sx={{
width: '330px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<GroupJoinRequests
setGroupSection={setGroupSection}
setSelectedGroup={setSelectedGroup}
getTimestampEnterChat={getTimestampEnterChat}
setOpenManageMembers={setOpenManageMembers}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
</Box>
<Box sx={{
width: '330px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<GroupInvites
setOpenAddGroup={setOpenAddGroup}
myAddress={myAddress}
groups={groups}
setMobileViewMode={setMobileViewMode}
/>
</Box>
</Box>
)}
</Box>
<Spacer height="26px" />
{/* <Box
sx={{
display: "flex",
width: "100%",
justifyContent: "flex-start",
}}
>
<Button
variant="outlined"
startIcon={<RefreshIcon />}
onClick={refreshHomeDataFunc}
sx={{
color: "white",
}}
>
Refresh home data
</Button>
</Box> */}
<Spacer height="180px" />
</Box>
);
};

3
src/components/Group/ListOfThreadPostsWatched.tsx
View File

@ -15,6 +15,7 @@ import { Spacer } from "../../common/Spacer";
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import VisibilityIcon from "@mui/icons-material/Visibility";
import { isMobile } from "../../App";
export const ListOfThreadPostsWatched = () => {
const [posts, setPosts] = React.useState([]);
@ -92,7 +93,7 @@ export const ListOfThreadPostsWatched = () => {
<Box
sx={{
width: "322px",
height: '165px',
height: isMobile ? "165px" : "250px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",

3
src/components/Group/ThingsToDoInitial.tsx
View File

@ -10,6 +10,7 @@ import CommentIcon from "@mui/icons-material/Comment";
import InfoIcon from "@mui/icons-material/Info";
import { Box, Typography } from "@mui/material";
import { Spacer } from "../../common/Spacer";
import { isMobile } from "../../App";
export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
const [checked1, setChecked1] = React.useState(false);
@ -77,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
<Box
sx={{
width: "322px",
height: "165px",
height: isMobile ? "165px" : "250px",
display: "flex",
flexDirection: "column",
bgcolor: "background.paper",