Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-01-09 23:07:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2673 from MartinFournier/feature/sidebar-collapsed-tooltip

Browse Source 
Add tooltips on sidebar icons when collapsed
This commit is contained in:
hydroflame 2022-01-17 15:52:13 -05:00 committed by GitHub
commit 2a8a958a7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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

@ -364,7 +364,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" />}
@ -381,9 +383,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"}>
@ -401,7 +405,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"}>
@ -419,9 +425,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
@ -442,7 +450,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>
@ -462,7 +472,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"}>
@ -477,7 +489,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" />}
@ -492,7 +506,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"}>
@ -512,7 +528,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>
@ -534,10 +552,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>
@ -556,7 +576,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"}>
@ -575,7 +597,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>
@ -587,7 +611,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" />}
@ -603,7 +629,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"}>
@ -620,7 +648,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>
@ -637,7 +667,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>
@ -655,7 +687,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>
@ -673,7 +707,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>
@ -691,7 +727,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>
@ -709,7 +747,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>
@ -721,7 +761,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" />}
@ -736,7 +778,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>
@ -751,7 +795,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"}>
@ -768,7 +814,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>
@ -783,7 +831,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>
@ -800,7 +850,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>