Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-29 19:13:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltips on sidebar icons when collapsed

Browse Source
This commit is contained in:
Martin Fournier 2022-01-16 17:11:12 -05:00
parent 8b69fd7faa
commit 490da6d374
1 changed files with 85 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/Sidebar/ui/SidebarRoot.tsx
View File

@ -357,7 +357,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<List> <List>
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<ComputerIcon color="primary" /> <Tooltip title={!open ? "Hacking" : ""}>
<ComputerIcon color="primary" />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={<Typography>Hacking</Typography>} /> <ListItemText primary={<Typography>Hacking</Typography>} />
{hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />} {hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@ -374,9 +376,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickTerminal} onClick={clickTerminal}
> >
<ListItemIcon> <ListItemIcon>
<LastPageIcon <Tooltip title={!open ? "Terminal" : ""}>
color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"} <LastPageIcon
/> color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
/>
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}> <Typography color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}>
@ -394,7 +398,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickScriptEditor} onClick={clickScriptEditor}
> >
<ListItemIcon> <ListItemIcon>
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} /> <Tooltip title={!open ? "Script Editor" : ""}>
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}> <Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}>
@ -412,9 +418,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickActiveScripts} onClick={clickActiveScripts}
> >
<ListItemIcon> <ListItemIcon>
<StorageIcon <Tooltip title={!open ? "Active Scripts" : ""}>
color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"} <StorageIcon
/> color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
/>
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography <Typography
@ -435,7 +443,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
> >
<ListItemIcon> <ListItemIcon>
<Badge badgeContent={programCount > 0 ? programCount : undefined} color="error"> <Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
<BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} /> <Tooltip title={!open ? "Create Program" : ""}>
<BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} />
</Tooltip>
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
@ -455,7 +465,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickStaneksGift} onClick={clickStaneksGift}
> >
<ListItemIcon> <ListItemIcon>
<DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} /> <Tooltip title={!open ? "Stanek's Gift" : ""}>
<DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}> <Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}>
@ -470,7 +482,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider /> <Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<AccountBoxIcon color="primary" /> <Tooltip title={!open ? "Character" : ""}>
<AccountBoxIcon color="primary" />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={<Typography>Character</Typography>} /> <ListItemText primary={<Typography>Character</Typography>} />
{characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />} {characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@ -485,7 +499,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickStats} onClick={clickStats}
> >
<ListItemIcon> <ListItemIcon>
<EqualizerIcon color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"} /> <Tooltip title={!open ? "Stats" : ""}>
<EqualizerIcon color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}> <Typography color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}>
@ -505,7 +521,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
> >
<ListItemIcon> <ListItemIcon>
<Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error"> <Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
<ContactsIcon color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"} /> <Tooltip title={!open ? "Factions" : ""}>
<ContactsIcon color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"} />
</Tooltip>
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
@ -527,10 +545,12 @@ export function SidebarRoot(props: IProps): React.ReactElement {
> >
<ListItemIcon> <ListItemIcon>
<Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error"> <Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
<DoubleArrowIcon <Tooltip title={!open ? "Augmentations" : ""}>
style={{ transform: "rotate(-90deg)" }} <DoubleArrowIcon
color={props.page !== Page.Augmentations ? "secondary" : "primary"} style={{ transform: "rotate(-90deg)" }}
/> color={props.page !== Page.Augmentations ? "secondary" : "primary"}
/>
</Tooltip>
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
@ -549,7 +569,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickHacknet} onClick={clickHacknet}
> >
<ListItemIcon> <ListItemIcon>
<AccountTreeIcon color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"} /> <Tooltip title={!open ? "Hacknet" : ""}>
<AccountTreeIcon color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}> <Typography color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}>
@ -568,7 +590,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickSleeves} onClick={clickSleeves}
> >
<ListItemIcon> <ListItemIcon>
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} /> <Tooltip title={!open ? "Sleeves" : ""}>
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography> <Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography>
@ -580,7 +604,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider /> <Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<PublicIcon color="primary" /> <Tooltip title={!open ? "World" : ""}>
<PublicIcon color="primary" />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={<Typography>World</Typography>} /> <ListItemText primary={<Typography>World</Typography>} />
{worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />} {worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@ -596,7 +622,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickCity} onClick={clickCity}
> >
<ListItemIcon> <ListItemIcon>
<LocationCityIcon color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"} /> <Tooltip title={!open ? "City" : ""}>
<LocationCityIcon color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"}> <Typography color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"}>
@ -613,7 +641,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickTravel} onClick={clickTravel}
> >
<ListItemIcon> <ListItemIcon>
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} /> <Tooltip title={!open ? "Travel" : ""}>
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography> <Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography>
@ -630,7 +660,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickJob} onClick={clickJob}
> >
<ListItemIcon> <ListItemIcon>
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} /> <Tooltip title={!open ? "Job" : ""}>
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography> <Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography>
@ -648,7 +680,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickStockMarket} onClick={clickStockMarket}
> >
<ListItemIcon> <ListItemIcon>
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} /> <Tooltip title={!open ? "Stock Market" : ""}>
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography> <Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography>
@ -666,7 +700,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickBladeburner} onClick={clickBladeburner}
> >
<ListItemIcon> <ListItemIcon>
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} /> <Tooltip title={!open ? "Bladeburner" : ""}>
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography> <Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography>
@ -684,7 +720,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickCorp} onClick={clickCorp}
> >
<ListItemIcon> <ListItemIcon>
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} /> <Tooltip title={!open ? "Corp" : ""}>
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Corporation ? "secondary" : "primary"}>Corp</Typography> <Typography color={props.page !== Page.Corporation ? "secondary" : "primary"}>Corp</Typography>
@ -702,7 +740,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickGang} onClick={clickGang}
> >
<ListItemIcon> <ListItemIcon>
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} /> <Tooltip title={!open ? "Gang" : ""}>
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Gang ? "secondary" : "primary"}>Gang</Typography> <Typography color={props.page !== Page.Gang ? "secondary" : "primary"}>Gang</Typography>
@ -714,7 +754,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider /> <Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}> <ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
<ListItemIcon> <ListItemIcon>
<LiveHelpIcon color="primary" /> <Tooltip title={!open ? "Help" : ""}>
<LiveHelpIcon color="primary" />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={<Typography>Help</Typography>} /> <ListItemText primary={<Typography>Help</Typography>} />
{helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />} {helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
@ -729,7 +771,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickMilestones} onClick={clickMilestones}
> >
<ListItemIcon> <ListItemIcon>
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} /> <Tooltip title={!open ? "Milestones" : ""}>
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Milestones ? "secondary" : "primary"}>Milestones</Typography> <Typography color={props.page !== Page.Milestones ? "secondary" : "primary"}>Milestones</Typography>
@ -744,7 +788,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickTutorial} onClick={clickTutorial}
> >
<ListItemIcon> <ListItemIcon>
<HelpIcon color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"} /> <Tooltip title={!open ? "Tutorial" : ""}>
<HelpIcon color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}> <Typography color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}>
@ -761,7 +807,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickAchievements} onClick={clickAchievements}
> >
<ListItemIcon> <ListItemIcon>
<EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} /> <Tooltip title={!open ? "Achievements" : ""}>
<EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Achievements ? "secondary" : "primary"}>Achievements</Typography> <Typography color={props.page !== Page.Achievements ? "secondary" : "primary"}>Achievements</Typography>
@ -776,7 +824,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickOptions} onClick={clickOptions}
> >
<ListItemIcon> <ListItemIcon>
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} /> <Tooltip title={!open ? "Options" : ""}>
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography> <Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography>
@ -793,7 +843,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
onClick={clickDev} onClick={clickDev}
> >
<ListItemIcon> <ListItemIcon>
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} /> <Tooltip title={!open ? "Dev" : ""}>
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
</Tooltip>
</ListItemIcon> </ListItemIcon>
<ListItemText> <ListItemText>
<Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography> <Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography>