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

update to Tooltip2

Browse Source 
Tooltip has been deprecated so trying out the new Tooltip2.
This commit is contained in:
David Lechner
2021-12-27 12:38:50 -06:00
parent 7c50582ca2
commit 9be6ba3640
3 changed files with 85 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/settings/SettingsDrawer.tsx
+21 -22
View File
@@ -13,11 +13,10 @@ import {
InputGroup,
Intent,
Label,
Position,
Switch,
Tooltip,
useHotkeys,
} from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import { useI18n } from '@shopify/react-i18n';
import React, { useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
@@ -117,12 +116,12 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
},
)}
>
<Tooltip
<Tooltip2
content={i18n.translate(
SettingsStringId.AppearanceDocumentationTooltip,
)}
boundary="window"
position={Position.LEFT}
rootBoundary="document"
placement="left"
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
@@ -140,13 +139,13 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
)
}
/>
</Tooltip>
<Tooltip
</Tooltip2>
<Tooltip2
content={i18n.translate(
SettingsStringId.AppearanceDarkModeTooltip,
)}
boundary="window"
position={Position.LEFT}
rootBoundary="document"
placement="left"
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
@@ -164,15 +163,15 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
)
}
/>
</Tooltip>
</Tooltip2>
</FormGroup>
<FormGroup label={i18n.translate(SettingsStringId.FirmwareTitle)}>
<Tooltip
<Tooltip2
content={i18n.translate(
SettingsStringId.FirmwareCurrentProgramTooltip,
)}
boundary="window"
position={Position.LEFT}
rootBoundary="document"
placement="left"
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
@@ -190,14 +189,14 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
)
}
/>
</Tooltip>
</Tooltip2>
<ControlGroup>
<Tooltip
<Tooltip2
content={i18n.translate(
SettingsStringId.FirmwareHubNameTooltip,
)}
boundary="window"
position={Position.LEFT}
rootBoundary="document"
placement="left"
targetTagName="div"
hoverOpenDelay={tooltipDelay}
>
@@ -209,7 +208,7 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
SettingsStringId.FirmwareHubNameLabel,
)}
</Label>
</Tooltip>
</Tooltip2>
<InputGroup
id="hub-name-input"
value={hubName}
@@ -227,12 +226,12 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
placeholder="Pybricks Hub"
rightElement={
isHubNameValid ? undefined : (
<Tooltip
<Tooltip2
content={i18n.translate(
SettingsStringId.FirmwareHubNameErrorTooltip,
)}
boundary="window"
position={Position.BOTTOM}
rootBoundary="document"
placement="bottom"
targetTagName="div"
>
<Icon
@@ -240,7 +239,7 @@ const SettingsDrawer: React.FunctionComponent<SettingsProps> = (props) => {
intent={Intent.DANGER}
itemType="div"
/>
</Tooltip>
</Tooltip2>
)
}
/>
src/toolbar/ActionButton.tsx
+34 -27
View File
@@ -1,14 +1,8 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2020-2021 The Pybricks Authors
import {
Button,
Intent,
Position,
Spinner,
Tooltip,
useHotkeys,
} from '@blueprintjs/core';
import { Button, IRef, Intent, Spinner, useHotkeys } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import { useI18n } from '@shopify/react-i18n';
import React, { useMemo, useRef } from 'react';
import { tooltipDelay } from '../app/constants';
@@ -76,27 +70,40 @@ const ActionButton: React.FC<ActionButtonProps> = (props) => {
useHotkeys(hotkeys);
return (
<Tooltip
<Tooltip2
content={tooltipText}
position={Position.BOTTOM}
placement="bottom"
hoverOpenDelay={tooltipDelay}
>
<Button
ref={buttonRef}
intent={Intent.PRIMARY}
onMouseDown={(e) => e.preventDefault()} // prevent focus
onClick={(): void => props.onAction()}
disabled={props.enabled === false}
className="no-box-shadow"
style={props.enabled === false ? { pointerEvents: 'none' } : undefined}
>
{props.showProgress ? (
<Spinner value={props.progress} intent={Intent.PRIMARY} />
) : (
<img src={props.icon} alt={props.id} />
)}
</Button>
</Tooltip>
renderTarget={({
ref: tooltipRef,
isOpen: _tooltipIsOpen,
...tooltipProps
}) => (
<Button
elementRef={tooltipRef as IRef<HTMLButtonElement>}
{...tooltipProps}
ref={buttonRef}
intent={Intent.PRIMARY}
// prevent focus from mouse click
onMouseDown={(e) => e.preventDefault()}
onClick={() => props.onAction()}
disabled={props.enabled === false}
style={
props.enabled === false ? { pointerEvents: 'none' } : undefined
}
>
{props.showProgress ? (
<Spinner value={props.progress} intent={Intent.PRIMARY} />
) : (
<img
src={props.icon}
alt={props.id}
style={{ pointerEvents: 'none' }}
/>
)}
</Button>
)}
/>
);
};
src/toolbar/OpenFileButton.tsx
+30 -26
View File
@@ -1,7 +1,8 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2020-2021 The Pybricks Authors
import { Button, Intent, Position, Spinner, Tooltip } from '@blueprintjs/core';
import { Button, IRef, Intent, Spinner } from '@blueprintjs/core';
import { Tooltip2 } from '@blueprintjs/popover2';
import { useI18n } from '@shopify/react-i18n';
import React from 'react';
import Dropzone from 'react-dropzone';
@@ -47,7 +48,6 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
accept={props.fileExtension}
multiple={false}
noClick={props.onClick !== undefined}
noKeyboard={props.onClick !== undefined}
onDropAccepted={(acceptedFiles) => {
// should only be one file since multiple={false}
acceptedFiles.forEach((f) => {
@@ -78,7 +78,7 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
}}
>
{({ getRootProps, getInputProps }): JSX.Element => (
<Tooltip
<Tooltip2
content={i18n.translate(
props.tooltip,
props.tooltip === TooltipId.FlashProgress
@@ -90,28 +90,28 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
}
: undefined,
)}
position={Position.BOTTOM}
placement="bottom"
hoverOpenDelay={tooltipDelay}
>
<div
{...getRootProps()}
tabIndex={-1}
className="pb-open-file-button-root"
>
renderTarget={({
ref: tooltipRef,
isOpen: _tooltipIsOpen,
...tooltipProps
}) => (
<Button
intent={Intent.PRIMARY}
disabled={props.enabled === false}
className="no-box-shadow"
style={
props.enabled === false
? { pointerEvents: 'none' }
: undefined
}
onMouseDown={(e) => e.preventDefault()} // prevent focus
// onClick={this.props.onClick}
// breaks Dropzone when this.props.onClick is undefined
// so we have to do it the long way
{...(props.onClick ? { onClick: props.onClick } : {})}
{...getRootProps({
refKey: 'elementRef',
elementRef: tooltipRef as IRef<HTMLButtonElement>,
...tooltipProps,
intent: Intent.PRIMARY,
disabled: props.enabled === false,
style:
props.enabled === false
? { pointerEvents: 'none' }
: undefined,
// prevent focus from mouse click
onMouseDown: (e) => e.preventDefault(),
onClick: props.onClick,
})}
>
<input {...getInputProps()} />
{props.showProgress ? (
@@ -120,11 +120,15 @@ const OpenFileButton: React.FC<OpenFileButtonProps> = (props) => {
intent={Intent.PRIMARY}
/>
) : (
<img src={props.icon} alt={props.id} />
<img
src={props.icon}
alt={props.id}
style={{ pointerEvents: 'none' }}
/>
)}
</Button>
</div>
</Tooltip>
)}
/>
)}
</Dropzone>
);