mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-23 06:32:26 +01:00
Merge pull request #2673 from MartinFournier/feature/sidebar-collapsed-tooltip
Add tooltips on sidebar icons when collapsed
This commit is contained in:
hydroflame
GitHub
commit
2a8a958a7a
@ -364,7 +364,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
<List>
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<ComputerIcon color="primary" />
|
||||
<Tooltip title={!open ? "Hacking" : ""}>
|
||||
<ComputerIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Hacking</Typography>} />
|
||||
{hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
@ -381,9 +383,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickTerminal}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<LastPageIcon
|
||||
color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
|
||||
/>
|
||||
<Tooltip title={!open ? "Terminal" : ""}>
|
||||
<LastPageIcon
|
||||
color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}>
|
||||
@ -401,7 +405,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickScriptEditor}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Script Editor" : ""}>
|
||||
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}>
|
||||
@ -419,9 +425,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickActiveScripts}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<StorageIcon
|
||||
color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
|
||||
/>
|
||||
<Tooltip title={!open ? "Active Scripts" : ""}>
|
||||
<StorageIcon
|
||||
color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography
|
||||
@ -442,7 +450,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
>
|
||||
<ListItemIcon>
|
||||
<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>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
@ -462,7 +472,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickStaneksGift}
|
||||
>
|
||||
<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>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}>
|
||||
@ -477,7 +489,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
<Divider />
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<AccountBoxIcon color="primary" />
|
||||
<Tooltip title={!open ? "Character" : ""}>
|
||||
<AccountBoxIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Character</Typography>} />
|
||||
{characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
@ -492,7 +506,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickStats}
|
||||
>
|
||||
<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>
|
||||
<ListItemText>
|
||||
<Typography color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}>
|
||||
@ -512,7 +528,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
>
|
||||
<ListItemIcon>
|
||||
<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>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
@ -534,10 +552,12 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
|
||||
<DoubleArrowIcon
|
||||
style={{ transform: "rotate(-90deg)" }}
|
||||
color={props.page !== Page.Augmentations ? "secondary" : "primary"}
|
||||
/>
|
||||
<Tooltip title={!open ? "Augmentations" : ""}>
|
||||
<DoubleArrowIcon
|
||||
style={{ transform: "rotate(-90deg)" }}
|
||||
color={props.page !== Page.Augmentations ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
@ -556,7 +576,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickHacknet}
|
||||
>
|
||||
<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>
|
||||
<ListItemText>
|
||||
<Typography color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}>
|
||||
@ -575,7 +597,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickSleeves}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Sleeves" : ""}>
|
||||
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography>
|
||||
@ -587,7 +611,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
<Divider />
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<PublicIcon color="primary" />
|
||||
<Tooltip title={!open ? "World" : ""}>
|
||||
<PublicIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>World</Typography>} />
|
||||
{worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
@ -603,7 +629,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickCity}
|
||||
>
|
||||
<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>
|
||||
<ListItemText>
|
||||
<Typography color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"}>
|
||||
@ -620,7 +648,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickTravel}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Travel" : ""}>
|
||||
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography>
|
||||
@ -637,7 +667,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickJob}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Job" : ""}>
|
||||
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography>
|
||||
@ -655,7 +687,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickStockMarket}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Stock Market" : ""}>
|
||||
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography>
|
||||
@ -673,7 +707,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickBladeburner}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Bladeburner" : ""}>
|
||||
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography>
|
||||
@ -691,7 +727,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickCorp}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Corp" : ""}>
|
||||
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Corporation ? "secondary" : "primary"}>Corp</Typography>
|
||||
@ -709,7 +747,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickGang}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Gang" : ""}>
|
||||
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Gang ? "secondary" : "primary"}>Gang</Typography>
|
||||
@ -721,7 +761,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
<Divider />
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<LiveHelpIcon color="primary" />
|
||||
<Tooltip title={!open ? "Help" : ""}>
|
||||
<LiveHelpIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Help</Typography>} />
|
||||
{helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
@ -736,7 +778,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickMilestones}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Milestones" : ""}>
|
||||
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Milestones ? "secondary" : "primary"}>Milestones</Typography>
|
||||
@ -751,7 +795,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickTutorial}
|
||||
>
|
||||
<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>
|
||||
<ListItemText>
|
||||
<Typography color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}>
|
||||
@ -768,7 +814,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickAchievements}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Achievements" : ""}>
|
||||
<EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Achievements ? "secondary" : "primary"}>Achievements</Typography>
|
||||
@ -783,7 +831,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickOptions}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Options" : ""}>
|
||||
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography>
|
||||
@ -800,7 +850,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
onClick={clickDev}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
|
||||
<Tooltip title={!open ? "Dev" : ""}>
|
||||
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user