mirror of
https://github.com/pybricks/pybricks-code.git
synced 2026-09-12 09:36:27 +00:00
settings: add hub name tooltip
This commit is contained in:
@@ -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)}>
|
||||
|
||||
@@ -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."
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -7,4 +7,5 @@
|
||||
|
||||
.pb-hub-name-input .#{$ns}-input {
|
||||
width: 200px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user