diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 9192364e91..76339e79a3 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -179,7 +179,6 @@ export class Catalog extends React.Component { src={item.entity.spec.icon?.src} material={item.entity.spec.icon?.material} background={item.entity.spec.icon?.background} - onClick={() => this.onDetails(item)} size={24} /> ); 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..20a6120ba1 100644 --- a/src/renderer/components/cluster-manager/cluster-topbar.tsx +++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx @@ -18,19 +18,20 @@ * 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"; +import { TooltipPosition } from "../tooltip"; interface Props extends RouteComponentProps { } @@ -43,11 +44,17 @@ export const ClusterTopbar = observer((props: Props) => { return (
- - { + { navigate(`${catalogURL()}/${previousActiveTab.get()}`); - }}/> - + }} + tooltip={{ + preferredPositions: TooltipPosition.BOTTOM_RIGHT, + children: "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 225a054011..2f9ad6a696 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/src/renderer/components/hotbar/hotbar-icon.scss @@ -72,9 +72,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 b739fa2b4c..b8447baf80 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,7 @@ export interface HotbarIconProps extends DOMAttributes { disabled?: boolean; size?: number; background?: string; + tooltip?: string; } function onMenuItemClick(menuItem: CatalogEntityContextMenu) { @@ -64,7 +65,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) { } } -export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => { +export const HotbarIcon = observer(({menuItems = [], size = 40, 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 +80,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: !!onClick })} width={size} height={size} src={src} @@ -96,12 +97,11 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba return (
0 })}> - -
- {renderIcon()} - {children} -
- + {tooltip && {tooltip}} +
+ {renderIcon()} + {children} +
{ uid={`hotbar-icon-${item.entity.uid}`} title={item.entity.name} source={item.entity.source} + tooltip={`${item.entity.name} (${item.entity.source})`} menuItems={[ { title: "Unpin from Hotbar", 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/material-tooltip/material-tooltip.tsx b/src/renderer/components/material-tooltip/material-tooltip.tsx deleted file mode 100644 index 0427f1ca78..0000000000 --- a/src/renderer/components/material-tooltip/material-tooltip.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Copyright (c) 2021 OpenLens Authors - * - * Permission is hereby granted, free of charge, to any person obtaining a copy of - * this software and associated documentation files (the "Software"), to deal in - * the Software without restriction, including without limitation the rights to - * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of - * the Software, and to permit persons to whom the Software is furnished to do so, - * subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS - * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR - * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER - * 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 React from "react"; -import { makeStyles, Tooltip, TooltipProps } from "@material-ui/core"; - -const useStyles = makeStyles(() => ({ - arrow: { - color: "var(--tooltipBackground)", - }, - tooltip: { - fontSize: 12, - backgroundColor: "var(--tooltipBackground)", - color: "var(--textColorAccent)", - padding: 8, - boxShadow: "0 8px 16px rgba(0,0,0,0.24)" - }, -})); - -export function MaterialTooltip(props: TooltipProps) { - const classes = useStyles(); - - return ( - - ); -} - -MaterialTooltip.defaultProps = { - arrow: true -}; - 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 = (