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

Format file

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-12 17:51:03 +02:00
parent a099788fe7
commit 34d8f2f844
1 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/QMailStatus.tsx
View File

@ -1,31 +1,43 @@
import React, { useMemo } from 'react' import { useMemo } from 'react';
import QMailLogo from '../assets/QMailLogo.png' import QMailLogo from '../assets/QMailLogo.png';
import { useRecoilState } from 'recoil' import { useRecoilState } from 'recoil';
import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global' import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
import { isLessThanOneWeekOld } from './Group/QMailMessages' import { isLessThanOneWeekOld } from './Group/QMailMessages';
import { ButtonBase, Tooltip } from '@mui/material' import { ButtonBase, Tooltip } from '@mui/material';
import { executeEvent } from '../utils/events' import { executeEvent } from '../utils/events';
export const QMailStatus = () => {
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
const [mails, setMails] = useRecoilState(mailsAtom)
const hasNewMail = useMemo(()=> { export const QMailStatus = () => {
if(mails?.length === 0) return false const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
const latestMail = mails[0] qMailLastEnteredTimestampAtom
if(!lastEnteredTimestamp && isLessThanOneWeekOld(latestMail?.created)) return true );
if((lastEnteredTimestamp < latestMail?.created) && isLessThanOneWeekOld(latestMail?.created)) return true const [mails, setMails] = useRecoilState(mailsAtom);
return false
}, [lastEnteredTimestamp, mails]) const hasNewMail = useMemo(() => {
if (mails?.length === 0) return false;
const latestMail = mails[0];
if (!lastEnteredTimestamp && isLessThanOneWeekOld(latestMail?.created))
return true;
if (
lastEnteredTimestamp < latestMail?.created &&
isLessThanOneWeekOld(latestMail?.created)
)
return true;
return false;
}, [lastEnteredTimestamp, mails]);
return ( return (
<ButtonBase onClick={()=> { <ButtonBase
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } }); onClick={() => {
executeEvent("open-apps-mode", { }); executeEvent('addTab', { data: { service: 'APP', name: 'q-mail' } });
setLastEnteredTimestamp(Date.now()) executeEvent('open-apps-mode', {});
}} style={{ setLastEnteredTimestamp(Date.now());
position: 'relative' }}
}}> style={{
position: 'relative',
}}
>
{hasNewMail && ( {hasNewMail && (
<div style={{ <div
style={{
position: 'absolute', position: 'absolute',
zIndex: 1, zIndex: 1,
top: '-7px', top: '-7px',
@ -34,30 +46,35 @@ export const QMailStatus = () => {
height: '15px', height: '15px',
width: '15px', width: '15px',
borderRadius: '50%', borderRadius: '50%',
outline: '1px solid white' outline: '1px solid white',
}} /> }}
/>
)} )}
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MAIL</span>} title={
<span style={{ color: 'white', fontSize: '14px', fontWeight: 700 }}>
Q-MAIL
</span>
}
placement="left" placement="left"
arrow arrow
sx={{ fontSize: "24" }} sx={{ fontSize: '24' }}
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: "#ffffff", color: '#ffffff',
backgroundColor: "#444444", backgroundColor: '#444444',
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: "#444444", color: '#444444',
}, },
}, },
}} }}
> >
<img style={{ width: '24px', height: 'auto' }} src={QMailLogo} /> <img style={{ width: '24px', height: 'auto' }} src={QMailLogo} />
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
) );
} };