Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-23 19:37:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltips

Browse Source
This commit is contained in:
AlphaX-Qortal 2025-02-27 10:15:28 +01:00
parent 519a0bb652
commit 35c9e26aef
3 changed files with 272 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
src/App.tsx
View File

@ -1547,18 +1547,38 @@ function App() {
{!isMobile && ( {!isMobile && (
<> <>
<Spacer height="20px" /> <Spacer height="20px" />
<img <Tooltip
src={Logout} title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LOG OUT</span>}
onClick={() => { placement="left"
logoutFunc(); arrow
setIsOpenDrawerProfile(false); sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}} }}
style={{ >
cursor: "pointer", <img
width: '20px', src={Logout}
height: 'auto' onClick={() => {
}} logoutFunc();
/> setIsOpenDrawerProfile(false);
}}
style={{
cursor: "pointer",
width: '20px',
height: 'auto'
}}
/>
</Tooltip>
</> </>
)} )}
<Spacer height="20px" /> <Spacer height="20px" />
@ -1568,38 +1588,98 @@ function App() {
setIsSettingsOpen(true); setIsSettingsOpen(true);
}} }}
> >
<SettingsIcon <Tooltip
sx={{ title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SETTINGS</span>}
color: "rgba(255, 255, 255, 0.5)", placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}} }}
/> >
<SettingsIcon
sx={{
color: "rgba(255, 255, 255, 0.5)",
}}
/>
</Tooltip>
</ButtonBase> </ButtonBase>
<Spacer height="20px" /> <Spacer height="20px" />
{authenticatedMode === "qort" && ( {authenticatedMode === "qort" && (
<img <Tooltip
onClick={() => { title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
setAuthenticatedMode("ltc"); placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}} }}
src={ltcLogo} >
style={{ <img
cursor: "pointer", onClick={() => {
width: "20px", setAuthenticatedMode("ltc");
height: "auto", }}
}} src={ltcLogo}
/> style={{
cursor: "pointer",
width: "20px",
height: "auto",
}}
/>
</Tooltip>
)} )}
{authenticatedMode === "ltc" && ( {authenticatedMode === "ltc" && (
<img <Tooltip
onClick={() => { title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>QORTAL WALLET</span>}
setAuthenticatedMode("qort"); placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}} }}
src={qortLogo} >
style={{ <img
cursor: "pointer", onClick={() => {
width: "20px", setAuthenticatedMode("qort");
height: "auto", }}
}} src={qortLogo}
/> style={{
cursor: "pointer",
width: "20px",
height: "auto",
}}
/>
</Tooltip>
)} )}
<Spacer height="20px" /> <Spacer height="20px" />
<CoreSyncStatus /> <CoreSyncStatus />
@ -1636,9 +1716,9 @@ function App() {
downloadResource, downloadResource,
getIndividualUserInfo, getIndividualUserInfo,
isUserBlocked, isUserBlocked,
addToBlockList, addToBlockList,
removeBlockFromList, removeBlockFromList,
getAllBlockedUsers getAllBlockedUsers
}} }}
> >
<TaskManager getUserInfo={getUserInfo} /> <TaskManager getUserInfo={getUserInfo} />
@ -1661,30 +1741,82 @@ function App() {
}) })
} }
}}> }}>
<EngineeringIcon sx={{ <Tooltip
color: 'var(--unread)' title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MINTING STATUS</span>}
}} /> placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<EngineeringIcon sx={{ color: 'var(--unread)' }} />
</Tooltip>
</ButtonBase> </ButtonBase>
<Spacer height="20px" /> <Spacer height="20px" />
{(desktopViewMode === "apps" || desktopViewMode === "home") && ( {(desktopViewMode === "apps" || desktopViewMode === "home") && (
<ButtonBase onClick={()=> { <ButtonBase onClick={()=> {
if(desktopViewMode === "apps"){ if(desktopViewMode === "apps"){
showTutorial('qapps', true) showTutorial('qapps', true)
} else { } else {
showTutorial('getting-started', true) showTutorial('getting-started', true)
} }
}} > }} >
<HelpIcon sx={{ <Tooltip
color: 'var(--unread)' title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>TUTORIAL</span>}
}} /> placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<HelpIcon sx={{ color: 'var(--unread)' }} />
</Tooltip>
</ButtonBase> </ButtonBase>
)} )}
<Spacer height="20px" /> <Spacer height="20px" />
<Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>BACKUP WALLET</span>}
placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<img <img
onClick={() => { onClick={() => {
setExtstate("download-wallet"); setExtstate("download-wallet");
@ -1696,6 +1828,7 @@ function App() {
width: '20px' width: '20px'
}} }}
/> />
</Tooltip>
<Spacer height="40px" /> <Spacer height="40px" />
</Box> </Box>
</AuthenticatedContainerInnerRight> </AuthenticatedContainerInnerRight>

73
src/components/Chat/ChatOptions.tsx
View File

@ -6,6 +6,7 @@ import {
MenuItem, MenuItem,
Select, Select,
Typography, Typography,
Tooltip
} from "@mui/material"; } from "@mui/material";
import React, { useEffect, useMemo, useRef, useState } from "react"; import React, { useEffect, useMemo, useRef, useState } from "react";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
@ -575,7 +576,27 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
<ButtonBase onClick={() => { <ButtonBase onClick={() => {
setMode("search") setMode("search")
}}> }}>
<SearchIcon /> <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SEARCH</span>}
placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<SearchIcon />
</Tooltip>
</ButtonBase> </ButtonBase>
<ButtonBase onClick={() => { <ButtonBase onClick={() => {
setMode("default") setMode("default")
@ -583,9 +604,27 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
setSelectedMember(0) setSelectedMember(0)
openQManager() openQManager()
}}> }}>
<InsertLinkIcon sx={{ <Tooltip
color: 'white' title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MANAGER</span>}
}} /> placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<InsertLinkIcon sx={{ color: 'white' }} />
</Tooltip>
</ButtonBase> </ButtonBase>
<ContextMenuMentions getTimestampMention={getTimestampMention} groupId={selectedGroup}> <ContextMenuMentions getTimestampMention={getTimestampMention} groupId={selectedGroup}>
<ButtonBase onClick={() => { <ButtonBase onClick={() => {
@ -593,9 +632,29 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
setSearchValue('') setSearchValue('')
setSelectedMember(0) setSelectedMember(0)
}}> }}>
<AlternateEmailIcon sx={{ <Tooltip
color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white' title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MENTIONED</span>}
}} /> placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<AlternateEmailIcon sx={{
color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white'
}} />
</Tooltip>
</ButtonBase> </ButtonBase>
</ContextMenuMentions> </ContextMenuMentions>

32
src/components/QMailStatus.tsx
View File

@ -3,7 +3,7 @@ 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 } from '@mui/material' import { ButtonBase, Tooltip } from '@mui/material'
import { executeEvent } from '../utils/events' import { executeEvent } from '../utils/events'
export const QMailStatus = () => { export const QMailStatus = () => {
const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom) const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
@ -23,7 +23,8 @@ export const QMailStatus = () => {
setLastEnteredTimestamp(Date.now()) setLastEnteredTimestamp(Date.now())
}} style={{ }} style={{
position: 'relative' position: 'relative'
}}>{hasNewMail && ( }}>
{hasNewMail && (
<div style={{ <div style={{
position: 'absolute', position: 'absolute',
zIndex: 1, zIndex: 1,
@ -35,9 +36,28 @@ export const QMailStatus = () => {
borderRadius: '50%', borderRadius: '50%',
outline: '1px solid white' outline: '1px solid white'
}} /> }} />
)}<img style={{ )}
width: '24px', <Tooltip
height: 'auto' title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MAIL</span>}
}} src={QMailLogo} /></ButtonBase> placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<img style={{ width: '24px', height: 'auto' }} src={QMailLogo} />
</Tooltip>
</ButtonBase>
) )
} }