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

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

@ -364,7 +364,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<List>
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
<ListItemIcon>
<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>
<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>
<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>
<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">
<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>
<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>
<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>
<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">
<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">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>