From 393ff0d1d49add7e9010ac84daf76349f0cf5314 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Mon, 28 Jun 2021 10:39:43 +0300 Subject: [PATCH] Removing MaterialTooltip references Signed-off-by: Alex Andreev --- .../components/+extensions/install.tsx | 14 +++++------ .../cluster-manager/catalog-topbar.tsx | 10 ++++---- .../cluster-manager/cluster-topbar.tsx | 23 +++++++++++-------- .../components/hotbar/hotbar-entity-icon.tsx | 1 + .../components/hotbar/hotbar-icon.scss | 8 ++++--- .../components/hotbar/hotbar-icon.tsx | 19 +++++++-------- .../components/hotbar/hotbar-menu.tsx | 1 + .../components/hotbar/hotbar-selector.tsx | 20 ++++++++-------- src/renderer/components/tooltip/tooltip.scss | 9 ++++---- src/renderer/components/tooltip/tooltip.tsx | 2 +- 10 files changed, 59 insertions(+), 48 deletions(-) diff --git a/src/renderer/components/+extensions/install.tsx b/src/renderer/components/+extensions/install.tsx index aab8477deb..36ec5be2f9 100644 --- a/src/renderer/components/+extensions/install.tsx +++ b/src/renderer/components/+extensions/install.tsx @@ -29,7 +29,6 @@ import { SubTitle } from "../layout/sub-title"; import { TooltipPosition } from "../tooltip"; import { ExtensionInstallationStateStore } from "./extension-install.store"; import { observer } from "mobx-react"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; interface Props { installPath: string; @@ -71,13 +70,12 @@ export const Install = observer((props: Props) => { onChange={onChange} onSubmit={installFromInput} iconRight={ - - - + } /> diff --git a/src/renderer/components/cluster-manager/catalog-topbar.tsx b/src/renderer/components/cluster-manager/catalog-topbar.tsx index 3027765fc9..7e70834ae3 100644 --- a/src/renderer/components/cluster-manager/catalog-topbar.tsx +++ b/src/renderer/components/cluster-manager/catalog-topbar.tsx @@ -24,15 +24,17 @@ import { welcomeURL } from "../../../common/routes"; import { navigate } from "../../navigation"; import { Icon } from "../icon"; import { TopBar } from "../layout/topbar"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; export function CatalogTopbar() { return (
- - navigate(welcomeURL())}/> - + navigate(welcomeURL())} + tooltip="Close Catalog" + />
); diff --git a/src/renderer/components/cluster-manager/cluster-topbar.tsx b/src/renderer/components/cluster-manager/cluster-topbar.tsx index eb6fbd6e59..f067ba1a74 100644 --- a/src/renderer/components/cluster-manager/cluster-topbar.tsx +++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx @@ -18,19 +18,19 @@ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ - import { observer } from "mobx-react"; import React from "react"; -import type { RouteComponentProps } from "react-router"; + +import { previousActiveTab } from "../+catalog"; +import { ClusterStore } from "../../../common/cluster-store"; import { catalogURL } from "../../../common/routes"; import { navigate } from "../../navigation"; import { Icon } from "../icon"; import { TopBar } from "../layout/topbar"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; -import type { Cluster } from "../../../main/cluster"; -import { ClusterStore } from "../../../common/cluster-store"; + +import type { RouteComponentProps } from "react-router"; import type { ClusterViewRouteParams } from "../../../common/routes"; -import { previousActiveTab } from "../+catalog"; +import type { Cluster } from "../../../main/cluster"; interface Props extends RouteComponentProps { } @@ -43,11 +43,14 @@ export const ClusterTopbar = observer((props: Props) => { return (
- - { + { navigate(`${catalogURL()}/${previousActiveTab.get()}`); - }}/> - + }} + tooltip="Back to Catalog" + />
); diff --git a/src/renderer/components/hotbar/hotbar-entity-icon.tsx b/src/renderer/components/hotbar/hotbar-entity-icon.tsx index b03bf3fb92..fc6628f3eb 100644 --- a/src/renderer/components/hotbar/hotbar-entity-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-entity-icon.tsx @@ -140,6 +140,7 @@ export class HotbarEntityIcon extends React.Component { active={isActive} onMenuOpen={onOpen} menuItems={this.contextMenu.menuItems} + tooltip={`${entity.metadata.name} (${entity.metadata.source})`} {...elemProps} > { this.ledIcon } diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss index 26cc9b4e1e..7d2ef34398 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/src/renderer/components/hotbar/hotbar-icon.scss @@ -68,9 +68,11 @@ box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); } - &:hover { - &:not(.active) { - box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50; + &.interactive { + &:hover { + &:not(.active) { + box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50; + } } } } diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index a24e9bb237..85cd9b6df2 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -27,10 +27,10 @@ import type { CatalogEntityContextMenu } from "../../../common/catalog"; import { cssNames, IClassName } from "../../utils"; import { ConfirmDialog } from "../confirm-dialog"; import { Menu, MenuItem } from "../menu"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; import { observer } from "mobx-react"; import { Avatar } from "../avatar/avatar"; import { Icon } from "../icon"; +import { Tooltip } from "../tooltip"; export interface HotbarIconProps extends DOMAttributes { uid: string; @@ -45,6 +45,8 @@ export interface HotbarIconProps extends DOMAttributes { disabled?: boolean; size?: number; background?: string; + interactive?: boolean; + tooltip?: string; } function onMenuItemClick(menuItem: CatalogEntityContextMenu) { @@ -64,7 +66,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) { } } -export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => { +export const HotbarIcon = observer(({menuItems = [], size = 40, interactive = true, tooltip, ...props}: HotbarIconProps) => { const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props; const id = `hotbarIcon-${uid}`; const [menuOpen, setMenuOpen] = useState(false); @@ -79,7 +81,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba {...rest} title={title} colorHash={`${title}-${source}`} - className={active ? "active" : "default"} + className={cssNames(active ? "active" : "default", { interactive })} width={size} height={size} src={src} @@ -96,12 +98,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba return (
- -
- {renderIcon()} - {children} -
- + {tooltip && {tooltip}} +
+ {renderIcon()} + {children} +
{ title={item.entity.name} source={item.entity.source} menuItems={disabledMenuItems} + tooltip={`${item.entity.name} (${item.entity.source})`} disabled size={40} /> diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx index 0e74f0e9a2..f0ca39d834 100644 --- a/src/renderer/components/hotbar/hotbar-selector.tsx +++ b/src/renderer/components/hotbar/hotbar-selector.tsx @@ -27,7 +27,7 @@ import { Hotbar, HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { HotbarSwitchCommand } from "./hotbar-switch-command"; import { hotbarDisplayIndex } from "./hotbar-display-label"; -import { MaterialTooltip } from "../material-tooltip/material-tooltip"; +import { TooltipPosition } from "../tooltip"; interface Props { hotbar: Hotbar; @@ -40,14 +40,16 @@ export function HotbarSelector({ hotbar }: Props) {
store.switchToPrevious()} />
- - CommandOverlay.open()} - /> - + CommandOverlay.open()} + tooltip={{ + preferredPositions: [TooltipPosition.TOP, TooltipPosition.TOP_LEFT], + children: hotbar.name + }} + />
store.switchToNext()} />
diff --git a/src/renderer/components/tooltip/tooltip.scss b/src/renderer/components/tooltip/tooltip.scss index 8e329dbbfd..a53cc29a57 100644 --- a/src/renderer/components/tooltip/tooltip.scss +++ b/src/renderer/components/tooltip/tooltip.scss @@ -23,7 +23,7 @@ .Tooltip { --bgc: #{$mainBackground}; --radius: #{$radius}; - --color: #{$textColorSecondary}; + --color: #{$textColorAccent}; --border: 1px solid #{$borderColor}; // use positioning relative to viewport (window) @@ -33,17 +33,18 @@ background: var(--bgc); font-size: small; font-weight: normal; - border: var(--border); border-radius: var(--radius); color: var(--color); white-space: normal; padding: .5em; text-align: center; pointer-events: none; - transition: opacity 150ms 25ms ease-in-out; + transition: opacity 150ms 150ms ease-in-out; z-index: 100000; + opacity: 1; + box-shadow: 0 8px 16px rgba(0,0,0,0.24); - &.hidden { + &.invisible { left: 0; top: 0; opacity: 0; diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index c2b5702545..86af502669 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -228,7 +228,7 @@ export class Tooltip extends React.Component { render() { const { style, formatters, usePortal, children } = this.props; const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, { - hidden: !this.isVisible, + invisible: !this.isVisible, formatter: !!formatters, }); const tooltip = (