Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-10 10:16:58 +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 QMailLogo from '../assets/QMailLogo.png'
import { useRecoilState } from 'recoil'
import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global'
import { isLessThanOneWeekOld } from './Group/QMailMessages'
import { ButtonBase, Tooltip } from '@mui/material'
import { executeEvent } from '../utils/events'
export const QMailStatus = () => {
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
const [mails, setMails] = useRecoilState(mailsAtom)
import { useMemo } from 'react';
import QMailLogo from '../assets/QMailLogo.png';
import { useRecoilState } from 'recoil';
import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
import { isLessThanOneWeekOld } from './Group/QMailMessages';
import { ButtonBase, Tooltip } from '@mui/material';
import { executeEvent } from '../utils/events';
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])
export const QMailStatus = () => {
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(
qMailLastEnteredTimestampAtom
);
const [mails, setMails] = useRecoilState(mailsAtom);
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 (
<ButtonBase onClick={()=> {
executeEvent("addTab", { data: { service: 'APP', name: 'q-mail' } });
executeEvent("open-apps-mode", { });
setLastEnteredTimestamp(Date.now())
}} style={{
position: 'relative'
}}>
<ButtonBase
onClick={() => {
executeEvent('addTab', { data: { service: 'APP', name: 'q-mail' } });
executeEvent('open-apps-mode', {});
setLastEnteredTimestamp(Date.now());
}}
style={{
position: 'relative',
}}
>
{hasNewMail && (
<div style={{
<div
style={{
position: 'absolute',
zIndex: 1,
top: '-7px',
@ -34,30 +46,35 @@ export const QMailStatus = () => {
height: '15px',
width: '15px',
borderRadius: '50%',
outline: '1px solid white'
}} />
outline: '1px solid white',
}}
/>
)}
<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"
arrow
sx={{ fontSize: "24" }}
sx={{ fontSize: '24' }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
color: '#ffffff',
backgroundColor: '#444444',
},
},
arrow: {
sx: {
color: "#444444",
color: '#444444',
},
},
}}
>
<img style={{ width: '24px', height: 'auto' }} src={QMailLogo} />
</Tooltip>
</ButtonBase>
)
}
</ButtonBase>
);
};