Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-12 11:11:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set background to notification icon

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-12 18:17:57 +02:00
parent ec2b1116ab
commit 9b675f470d
2 changed files with 206 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/components/Desktop/DesktopHeader.tsx
View File

@ -1,47 +1,55 @@
import * as React from "react"; import * as React from 'react';
import { import {
BottomNavigation, BottomNavigation,
BottomNavigationAction, BottomNavigationAction,
ButtonBase, ButtonBase,
Typography, Typography,
} from "@mui/material"; } from '@mui/material';
import { Home, Groups, Message, ShowChart } from "@mui/icons-material"; import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
import Box from "@mui/material/Box"; import Box from '@mui/material/Box';
import BottomLogo from "../../assets/svgs/BottomLogo5.svg"; import BottomLogo from '../../assets/svgs/BottomLogo5.svg';
import { CustomSvg } from "../../common/CustomSvg"; import { CustomSvg } from '../../common/CustomSvg';
import { WalletIcon } from "../../assets/Icons/WalletIcon"; import { HubsIcon } from '../../assets/Icons/HubsIcon';
import { HubsIcon } from "../../assets/Icons/HubsIcon"; import { TradingIcon } from '../../assets/Icons/TradingIcon';
import { TradingIcon } from "../../assets/Icons/TradingIcon"; import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; import { HomeIcon } from '../../assets/Icons/HomeIcon';
import { HomeIcon } from "../../assets/Icons/HomeIcon"; import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2';
import { NotificationIcon2 } from "../../assets/Icons/NotificationIcon2"; import { ChatIcon } from '../../assets/Icons/ChatIcon';
import { ChatIcon } from "../../assets/Icons/ChatIcon"; import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon';
import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon"; import { MembersIcon } from '../../assets/Icons/MembersIcon';
import { MembersIcon } from "../../assets/Icons/MembersIcon"; import { AdminsIcon } from '../../assets/Icons/AdminsIcon';
import { AdminsIcon } from "../../assets/Icons/AdminsIcon";
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred'; import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
const IconWrapper = ({ children, label, color, selected, selectColor, customHeight }) => { const IconWrapper = ({
children,
label,
color,
selected,
selectColor,
customHeight,
}) => {
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
alignItems: "center", alignItems: 'center',
gap: "5px", gap: '5px',
flexDirection: "column", flexDirection: 'column',
height: customHeight ? customHeight : "65px", height: customHeight ? customHeight : '65px',
width: customHeight ? customHeight : "65px", width: customHeight ? customHeight : '65px',
borderRadius: "50%", borderRadius: '50%',
backgroundColor: selected ? selectColor || "rgba(28, 29, 32, 1)" : "transparent", backgroundColor: selected
? selectColor || 'rgba(28, 29, 32, 1)'
: 'transparent',
}} }}
> >
{children} {children}
<Typography <Typography
sx={{ sx={{
fontFamily: "Inter", fontFamily: 'Inter',
fontSize: "10px", fontSize: '10px',
fontWeight: 500, fontWeight: 500,
color: color, color: color,
}} }}
@ -83,60 +91,67 @@ export const DesktopHeader = ({
isChat, isChat,
isForum, isForum,
setGroupSection, setGroupSection,
isPrivate isPrivate,
}) => { }) => {
const [value, setValue] = React.useState(0); const [value, setValue] = React.useState(0);
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
height: "70px", // Footer height height: '70px', // Footer height
zIndex: 1, zIndex: 1,
justifyContent: "space-between", justifyContent: 'space-between',
padding: "10px", padding: '10px',
}} }}
> >
<Box sx={{ <Box
display: 'flex', sx={{
gap: '10px' display: 'flex',
}}> gap: '10px',
}}
>
{isPrivate && ( {isPrivate && (
<LockIcon sx={{ <LockIcon
color: 'var(--green)' sx={{
}} /> color: 'var(--green)',
}}
/>
)} )}
{isPrivate === false && ( {isPrivate === false && (
<NoEncryptionGmailerrorredIcon sx={{ <NoEncryptionGmailerrorredIcon
color: 'var(--danger)' sx={{
}} /> color: 'var(--danger)',
}}
/>
)} )}
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: '16px',
fontWeight: 600, fontWeight: 600,
}} }}
> >
{selectedGroup?.groupId === '0' ? 'General' :selectedGroup?.groupName} {selectedGroup?.groupId === '0'
? 'General'
: selectedGroup?.groupName}
</Typography> </Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
gap: "20px", gap: '20px',
alignItems: "center", alignItems: 'center',
visibility: selectedGroup?.groupId === '0' ? 'hidden' : 'visibile' visibility: selectedGroup?.groupId === '0' ? 'hidden' : 'visibile',
}} }}
> >
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
goToAnnouncements() goToAnnouncements();
}} }}
> >
<IconWrapper <IconWrapper
color={isAnnouncement ? "black" :"rgba(250, 250, 250, 0.5)"} color={isAnnouncement ? 'black' : 'rgba(250, 250, 250, 0.5)'}
label="ANN" label="ANN"
selected={isAnnouncement} selected={isAnnouncement}
selectColor="#09b6e8" selectColor="#09b6e8"
@ -147,10 +162,10 @@ export const DesktopHeader = ({
width={20} width={20}
color={ color={
isUnread isUnread
? "var(--unread)" ? 'var(--unread)'
: isAnnouncement : isAnnouncement
? "black" ? 'black'
: "rgba(250, 250, 250, 0.5)" : 'rgba(250, 250, 250, 0.5)'
} }
/> />
</IconWrapper> </IconWrapper>
@ -158,11 +173,11 @@ export const DesktopHeader = ({
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
goToChat() goToChat();
}} }}
> >
<IconWrapper <IconWrapper
color={isChat ? "black" :"rgba(250, 250, 250, 0.5)"} color={isChat ? 'black' : 'rgba(250, 250, 250, 0.5)'}
label="Chat" label="Chat"
selected={isChat} selected={isChat}
selectColor="#09b6e8" selectColor="#09b6e8"
@ -173,10 +188,10 @@ export const DesktopHeader = ({
width={20} width={20}
color={ color={
isUnreadChat isUnreadChat
? "var(--unread)" ? 'var(--unread)'
: isChat : isChat
? "black" ? 'black'
: "rgba(250, 250, 250, 0.5)" : 'rgba(250, 250, 250, 0.5)'
} }
/> />
</IconWrapper> </IconWrapper>
@ -184,12 +199,11 @@ export const DesktopHeader = ({
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setGroupSection("forum"); setGroupSection('forum');
}} }}
> >
<IconWrapper <IconWrapper
color={isForum ? 'black' : "rgba(250, 250, 250, 0.5)"} color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
label="Threads" label="Threads"
selected={isForum} selected={isForum}
selectColor="#09b6e8" selectColor="#09b6e8"
@ -198,18 +212,13 @@ export const DesktopHeader = ({
<ThreadsIcon <ThreadsIcon
height={25} height={25}
width={20} width={20}
color={ color={isForum ? 'black' : 'rgba(250, 250, 250, 0.5)'}
isForum
? "black"
: "rgba(250, 250, 250, 0.5)"
}
/> />
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setOpenManageMembers(true) setOpenManageMembers(true);
}} }}
> >
<IconWrapper <IconWrapper
@ -221,22 +230,21 @@ export const DesktopHeader = ({
<MembersIcon <MembersIcon
height={25} height={25}
width={20} width={20}
color={ color={isForum ? 'white' : 'rgba(250, 250, 250, 0.5)'}
isForum
? "white"
: "rgba(250, 250, 250, 0.5)"
}
/> />
</IconWrapper> </IconWrapper>
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setGroupSection("adminSpace"); setGroupSection('adminSpace');
}} }}
> >
<IconWrapper <IconWrapper
color={groupSection === 'adminSpace' ? 'black' : "rgba(250, 250, 250, 0.5)"} color={
groupSection === 'adminSpace'
? 'black'
: 'rgba(250, 250, 250, 0.5)'
}
label="Admins" label="Admins"
selected={groupSection === 'adminSpace'} selected={groupSection === 'adminSpace'}
customHeight="55px" customHeight="55px"
@ -247,8 +255,8 @@ export const DesktopHeader = ({
width={20} width={20}
color={ color={
groupSection === 'adminSpace' groupSection === 'adminSpace'
? "black" ? 'black'
: "rgba(250, 250, 250, 0.5)" : 'rgba(250, 250, 250, 0.5)'
} }
/> />
</IconWrapper> </IconWrapper>

209
src/components/GeneralNotifications.tsx
View File

@ -1,5 +1,4 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useState } from 'react';
import { import {
Box, Box,
ButtonBase, ButtonBase,
@ -8,58 +7,72 @@ import {
Popover, Popover,
Tooltip, Tooltip,
Typography, Typography,
} from "@mui/material"; useTheme,
import NotificationsIcon from "@mui/icons-material/Notifications"; } from '@mui/material';
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet"; import NotificationsIcon from '@mui/icons-material/Notifications';
import { formatDate } from "../utils/time"; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import { useHandlePaymentNotification } from "../hooks/useHandlePaymentNotification"; import { formatDate } from '../utils/time';
import { executeEvent } from "../utils/events"; import { useHandlePaymentNotification } from '../hooks/useHandlePaymentNotification';
import { executeEvent } from '../utils/events';
export const GeneralNotifications = ({ address }) => { export const GeneralNotifications = ({ address }) => {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const {latestTx,
const {
latestTx,
getNameOrAddressOfSenderMiddle, getNameOrAddressOfSenderMiddle,
hasNewPayment, setLastEnteredTimestampPayment, nameAddressOfSender} = useHandlePaymentNotification(address) hasNewPayment,
setLastEnteredTimestampPayment,
nameAddressOfSender,
} = useHandlePaymentNotification(address);
const handlePopupClick = (event) => { const handlePopupClick = (event) => {
event.stopPropagation(); // Prevent parent onClick from firing event.stopPropagation(); // Prevent parent onClick from firing
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
const theme = useTheme();
return ( return (
<> <>
<ButtonBase <ButtonBase
onClick={(e) => { onClick={(e) => {
handlePopupClick(e); handlePopupClick(e);
}} }}
style={{}} style={{}}
> >
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>PAYMENT NOTIFICATION</span>} title={
placement="left" <span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
arrow PAYMENT NOTIFICATION
sx={{ fontSize: "24" }} </span>
slotProps={{ }
tooltip: { placement="left"
sx: { arrow
color: "#ffffff", sx={{ fontSize: '24' }}
backgroundColor: "#444444", slotProps={{
}, tooltip: {
}, sx: {
arrow: { color: '#ffffff',
sx: { backgroundColor: '#444444',
color: "#444444", },
}, },
}, arrow: {
}} sx: {
> color: '#444444',
<NotificationsIcon },
sx={{ },
color: hasNewPayment ? "var(--unread)" : "rgba(255, 255, 255, 0.5)",
}} }}
/> >
<NotificationsIcon
sx={{
color: hasNewPayment
? 'var(--unread)'
: theme.palette.mode === 'dark'
? 'rgb(209, 209, 209)'
: 'rgba(41, 41, 43, 1)',
}}
/>
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
@ -67,81 +80,91 @@ export const GeneralNotifications = ({ address }) => {
open={!!anchorEl} open={!!anchorEl}
anchorEl={anchorEl} anchorEl={anchorEl}
onClose={() => { onClose={() => {
if(hasNewPayment){ if (hasNewPayment) {
setLastEnteredTimestampPayment(Date.now()) setLastEnteredTimestampPayment(Date.now());
} }
setAnchorEl(null) setAnchorEl(null);
}} // Close popover on click outside }} // Close popover on click outside
> >
<Box <Box
sx={{ sx={{
width: "300px", width: '300px',
maxWidth: "100%", maxWidth: '100%',
maxHeight: "60vh", maxHeight: '60vh',
overflow: "auto", overflow: 'auto',
padding: "5px", padding: '5px',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: hasNewPayment ? "flex-start" : "center", alignItems: hasNewPayment ? 'flex-start' : 'center',
}} }}
> >
{!hasNewPayment && <Typography sx={{ {!hasNewPayment && (
userSelect: 'none' <Typography
}}>No new notifications</Typography>} sx={{
userSelect: 'none',
}}
>
No new notifications
</Typography>
)}
{hasNewPayment && ( {hasNewPayment && (
<MenuItem <MenuItem
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
width: "100%", width: '100%',
alignItems: "flex-start", alignItems: 'flex-start',
textWrap: "auto", textWrap: 'auto',
}} }}
onClick={() => { onClick={() => {
setAnchorEl(null) setAnchorEl(null);
executeEvent('openWalletsApp', {}) executeEvent('openWalletsApp', {});
}} }}
> >
<Card sx={{ <Card
padding: '10px',
width: '100%',
backgroundColor: "#1F2023",
gap: '5px',
display: 'flex',
flexDirection: 'column'
}}>
<Box
sx={{ sx={{
display: "flex", padding: '10px',
alignItems: "center", width: '100%',
gap: "5px", backgroundColor: '#1F2023',
justifyContent: "space-between", gap: '5px',
display: 'flex',
flexDirection: 'column',
}} }}
> >
<AccountBalanceWalletIcon <Box
sx={{ sx={{
color: "white", display: 'flex',
alignItems: 'center',
gap: '5px',
justifyContent: 'space-between',
}} }}
/>{" "} >
{formatDate(latestTx?.timestamp)} <AccountBalanceWalletIcon
</Box> sx={{
<Box color: 'white',
sx={{ }}
display: "flex", />{' '}
alignItems: "center", {formatDate(latestTx?.timestamp)}
gap: "5px", </Box>
justifyContent: "space-between", <Box
}} sx={{
> display: 'flex',
alignItems: 'center',
<Typography>{latestTx?.amount}</Typography> gap: '5px',
</Box> justifyContent: 'space-between',
<Typography sx={{ }}
fontSize: '0.8rem' >
}}>{nameAddressOfSender.current[latestTx?.creatorAddress] || getNameOrAddressOfSenderMiddle(latestTx?.creatorAddress)}</Typography> <Typography>{latestTx?.amount}</Typography>
</Box>
<Typography
sx={{
fontSize: '0.8rem',
}}
>
{nameAddressOfSender.current[latestTx?.creatorAddress] ||
getNameOrAddressOfSenderMiddle(latestTx?.creatorAddress)}
</Typography>
</Card> </Card>
</MenuItem> </MenuItem>
)} )}