Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

add tooltips to settings

Browse Source
This commit is contained in:
David Lechner
2021-01-14 18:22:29 -06:00
parent f4cb69f995
commit 51fc1ddce0
3 changed files with 72 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsDrawer.tsx
+63 -34
View File
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2021 The Pybricks Authors
import { Drawer, FormGroup, Switch } from '@blueprintjs/core';
import { Drawer, FormGroup, Position, Switch, Tooltip } from '@blueprintjs/core';
import { WithI18nProps, withI18n } from '@shopify/react-i18n';
import React from 'react';
import { connect } from 'react-redux';
@@ -16,6 +16,8 @@ import en from './settings-i18n.en.json';
import './settings.scss';
const tooltipDelay = 1000;
type StateProps = {
open: boolean;
showDocs: boolean;
@@ -64,44 +66,71 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
},
)}
>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDocumentationLabel,
<Tooltip
content={i18n.translate(
SettingsStringId.AppearanceDocumentationTooltip,
)}
large={true}
checked={showDocs}
onChange={(e) =>
onShowDocsChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDarkModeLabel,
position={Position.LEFT}
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDocumentationLabel,
)}
large={true}
checked={showDocs}
onChange={(e) =>
onShowDocsChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
</Tooltip>
<Tooltip
content={i18n.translate(
SettingsStringId.AppearanceDarkModeTooltip,
)}
large={true}
checked={darkMode}
onChange={(e) =>
onDarkModeChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
position={Position.LEFT}
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDarkModeLabel,
)}
large={true}
checked={darkMode}
onChange={(e) =>
onDarkModeChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
</Tooltip>
</FormGroup>
<FormGroup label={i18n.translate(SettingsStringId.FirmwareTitle)}>
<Switch
label={i18n.translate(
SettingsStringId.FirmwareCurrentProgramLabel,
<Tooltip
content={i18n.translate(
SettingsStringId.FirmwareCurrentProgramTooltip,
)}
large={true}
checked={flashCurrentProgram}
onChange={(e) =>
onFlashCurrentProgramChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
position={Position.LEFT}
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
<Switch
label={i18n.translate(
SettingsStringId.FirmwareCurrentProgramLabel,
)}
large={true}
checked={flashCurrentProgram}
onChange={(e) =>
onFlashCurrentProgramChanged(
(e.target as HTMLInputElement).checked,
)
}
/>
</Tooltip>
</FormGroup>
</div>
</Drawer>
src/components/settings-i18n.en.json
+6 -3
View File
@@ -4,10 +4,12 @@
"appearance": {
"title": "Appearance",
"documentation": {
"label": "Documentation"
"label": "Documentation",
"tooltip": "Hides/shows the documentation pane in the app."
},
"dark-mode": {
"label": "Dark mode"
"label": "Dark mode",
"tooltip": "Disables/enables dark mode."
},
"zoom": {
"help": "Use {in} and {out} to zoom."
@@ -16,7 +18,8 @@
"firmware": {
"title": "Firmware",
"flash-current-program": {
"label": "Flash my program"
"label": "Flash my program",
"tooltip": "Selects including a default program or your program when flashing firmware on a hub."
}
}
}
src/components/settings-i18n.ts
+3
View File
@@ -7,8 +7,11 @@ export enum SettingsStringId {
Title = 'settings.title',
AppearanceTitle = 'settings.appearance.title',
AppearanceDocumentationLabel = 'settings.appearance.documentation.label',
AppearanceDocumentationTooltip = 'settings.appearance.documentation.tooltip',
AppearanceDarkModeLabel = 'settings.appearance.dark-mode.label',
AppearanceDarkModeTooltip = 'settings.appearance.dark-mode.tooltip',
AppearanceZoomHelp = 'settings.appearance.zoom.help',
FirmwareTitle = 'settings.firmware.title',
FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
}