Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-11-10 06:44:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add tooltip to icons on left panel

Browse source
This commit is contained in:
Jakub Cabak 2021-03-13 00:32:50 +01:00
parent ab5de15ef1
commit 97c4dfd2a5
1 changed files with 25 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
desktop-app/app/components/LeftIconsPane/index.js
View file

@ -10,6 +10,7 @@ import Logo from '../icons/Logo';
import Gift from '../icons/Gift'; import Gift from '../icons/Gift';
import Headway from '../Headway'; import Headway from '../Headway';
import ZenButton from '../ZenButton'; import ZenButton from '../ZenButton';
import Tooltip from '@material-ui/core/Tooltip';
import styles from './styles.css'; import styles from './styles.css';
import useCommonStyles from '../useCommonStyles'; import useCommonStyles from '../useCommonStyles';
@ -100,9 +101,11 @@ const LeftIconsPane = props => {
})} })}
onClick={() => toggleState(DEVICE_MANAGER)} onClick={() => toggleState(DEVICE_MANAGER)}
> >
<div className={cx(mStyles.leftPaneIcon)}> <Tooltip title="Device manager">
<DevicesIcon {...iconProps} className="deviceManagerIcon" /> <div className={cx(mStyles.leftPaneIcon)}>
</div> <DevicesIcon {...iconProps} className="deviceManagerIcon" />
</div>
</Tooltip>
</Grid> </Grid>
<Grid <Grid
item item
@ -112,9 +115,11 @@ const LeftIconsPane = props => {
})} })}
onClick={() => toggleState(USER_PREFERENCES)} onClick={() => toggleState(USER_PREFERENCES)}
> >
<div className={cx(mStyles.leftPaneIcon)}> <Tooltip title="Preferences">
<SettingsIcon {...iconProps} className="settingsIcon" /> <div className={cx(mStyles.leftPaneIcon)}>
</div> <SettingsIcon {...iconProps} className="settingsIcon" />
</div>
</Tooltip>
</Grid> </Grid>
<Grid <Grid
item item
@ -124,9 +129,11 @@ const LeftIconsPane = props => {
})} })}
onClick={() => toggleState(EXTENSIONS_MANAGER)} onClick={() => toggleState(EXTENSIONS_MANAGER)}
> >
<div className={cx(mStyles.leftPaneIcon)}> <Tooltip title="Manage extensions">
<ExtensionIcon {...iconProps} className="extensionsIcon" /> <div className={cx(mStyles.leftPaneIcon)}>
</div> <ExtensionIcon {...iconProps} className="extensionsIcon" />
</div>
</Tooltip>
</Grid> </Grid>
<Grid <Grid
item item
@ -137,13 +144,15 @@ const LeftIconsPane = props => {
})} })}
onClick={() => toggleState(NETWORK_CONFIGURATION)} onClick={() => toggleState(NETWORK_CONFIGURATION)}
> >
<div className={cx(mStyles.leftPaneIcon)}> <Tooltip title="Manage network">
<NetworkIcon <div className={cx(mStyles.leftPaneIcon)}>
{...iconProps} <NetworkIcon
color="currentColor" {...iconProps}
className="networkIcon" color="currentColor"
/> className="networkIcon"
</div> />
</div>
</Tooltip>
</Grid> </Grid>
</Grid> </Grid>
<Headway /> <Headway />