settings: add hub name tooltip

This commit is contained in:
David Lechner
2021-11-19 20:48:06 -06:00
parent d8179413ec
commit 97c5a3bfb8
4 changed files with 49 additions and 31 deletions
+46 -31
View File
@@ -193,38 +193,53 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
/>
</Tooltip>
<ControlGroup>
<Label className={Classes.INLINE}>
{i18n.translate(
SettingsStringId.FirmwareHubNameLabel,
<Tooltip
content={i18n.translate(
SettingsStringId.FirmwareHubNameTooltip,
)}
<InputGroup
value={hubName}
onChange={onHubNameChange}
className="pb-hub-name-input"
intent={
isHubNameValid ? Intent.NONE : Intent.DANGER
}
placeholder="Pybricks Hub"
rightElement={
isHubNameValid ? undefined : (
<Tooltip
content={i18n.translate(
SettingsStringId.FirmwareHubNameErrorTooltip,
)}
boundary="window"
position={Position.BOTTOM}
targetTagName="div"
>
<Icon
icon="error"
intent={Intent.DANGER}
itemType="div"
/>
</Tooltip>
)
}
/>
</Label>
boundary="window"
position={Position.LEFT}
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
<Label
className={Classes.INLINE}
htmlFor="hub-name-input"
>
{i18n.translate(
SettingsStringId.FirmwareHubNameLabel,
)}
</Label>
</Tooltip>
<InputGroup
id="hub-name-input"
value={hubName}
onChange={onHubNameChange}
onMouseOver={(e) => e.preventDefault()}
className="pb-hub-name-input"
intent={
isHubNameValid ? Intent.NONE : Intent.DANGER
}
placeholder="Pybricks Hub"
rightElement={
isHubNameValid ? undefined : (
<Tooltip
content={i18n.translate(
SettingsStringId.FirmwareHubNameErrorTooltip,
)}
boundary="window"
position={Position.BOTTOM}
targetTagName="div"
>
<Icon
icon="error"
intent={Intent.DANGER}
itemType="div"
/>
</Tooltip>
)
}
/>
</ControlGroup>
</FormGroup>
<FormGroup label={i18n.translate(SettingsStringId.HelpTitle)}>
+1
View File
@@ -23,6 +23,7 @@
},
"hub-name": {
"label": "Hub name",
"tooltip": "Hub name to use when flashing the firmware.",
"error": {
"tooltip": "The name is too long."
}
+1
View File
@@ -15,6 +15,7 @@ export enum SettingsStringId {
FirmwareCurrentProgramLabel = 'settings.firmware.flash-current-program.label',
FirmwareCurrentProgramTooltip = 'settings.firmware.flash-current-program.tooltip',
FirmwareHubNameLabel = 'settings.firmware.hub-name.label',
FirmwareHubNameTooltip = 'settings.firmware.hub-name.tooltip',
FirmwareHubNameErrorTooltip = 'settings.firmware.hub-name.error.tooltip',
HelpTitle = 'settings.help.title',
HelpProjectsLabel = 'settings.help.projects.label',
+1
View File
@@ -7,4 +7,5 @@
.pb-hub-name-input .#{$ns}-input {
width: 200px;
margin-left: 8px;
}