From 47f6a2b7e16faa2dfdc04623bea5af0e23809843 Mon Sep 17 00:00:00 2001 From: Roman Date: Wed, 15 Jul 2020 15:38:23 +0300 Subject: [PATCH] cluster-menu tooltip fixes Signed-off-by: Roman --- src/main/window-manager.ts | 2 -- .../+cluster-settings/cluster-icon.tsx | 17 ++++++++---- .../cluster-manager/cluster-manager.tsx | 2 +- .../cluster-manager/clusters-menu.scss | 14 +++++++--- .../cluster-manager/clusters-menu.tsx | 26 +++++++++---------- .../components/layout/main-layout.scss | 1 - src/renderer/components/tooltip/tooltip.scss | 17 +++++------- src/renderer/components/tooltip/tooltip.tsx | 4 +-- 8 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts index 1bcdfbab0d..ad4a761e1b 100644 --- a/src/main/window-manager.ts +++ b/src/main/window-manager.ts @@ -5,8 +5,6 @@ import type { ClusterId } from "../common/cluster-store"; import { clusterStore } from "../common/cluster-store"; import logger from "./logger"; -// fixme: activate landing-page when no-clusters exists - export class WindowManager { protected activeView: BrowserWindow; protected views = new Map(); diff --git a/src/renderer/components/+cluster-settings/cluster-icon.tsx b/src/renderer/components/+cluster-settings/cluster-icon.tsx index 906d0b1626..a6266a2bcd 100644 --- a/src/renderer/components/+cluster-settings/cluster-icon.tsx +++ b/src/renderer/components/+cluster-settings/cluster-icon.tsx @@ -14,6 +14,7 @@ interface Props extends DOMAttributes { className?: IClassName; errorClass?: IClassName; showErrors?: boolean; + showTooltip?: boolean; interactive?: boolean; isActive?: boolean; options?: HashiconParams; @@ -21,6 +22,7 @@ interface Props extends DOMAttributes { const defaultProps: Partial = { showErrors: true, + showTooltip: true, }; @observer @@ -28,19 +30,24 @@ export class ClusterIcon extends React.Component { static defaultProps = defaultProps as object; render() { - const { className: cName, cluster, showErrors, errorClass, options, interactive, isActive, children, ...elemProps } = this.props; + const { + cluster, showErrors, showTooltip, errorClass, options, interactive, isActive, + children, ...elemProps + } = this.props; const { isAdmin, eventCount, preferences, id: clusterId } = cluster; const { clusterName, icon } = preferences; const clusterIconId = `cluster-icon-${clusterId}`; - const className = cssNames("ClusterIcon flex inline", cName, { + const className = cssNames("ClusterIcon flex inline", this.props.className, { interactive: interactive || !!this.props.onClick, active: isActive, }); return (
- - {clusterName} - + {showTooltip && ( + + {clusterName} + + )} {icon && {clusterName}/} {!icon && } {showErrors && isAdmin && eventCount > 0 && ( diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 0fce242fb9..f6cab716dc 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -8,7 +8,7 @@ export class ClusterManager extends React.Component { const { children: lensView } = this.props; return (
-
+
{lensView}
diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss index bf0f9f1ae2..521b83b26d 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.scss +++ b/src/renderer/components/cluster-manager/clusters-menu.scss @@ -1,5 +1,6 @@ .ClustersMenu { - @include hidden-scrollbar; + // fixme: uncomment when tooltips handled correctly (rendered outside of parent) + //@include hidden-scrollbar; --flex-gap: #{$padding * 2}; --menu-bgc: #252729; @@ -7,10 +8,15 @@ padding: $padding * 2; background: var(--menu-bgc); - .add-cluster { + #add-cluster { position: relative; - .Icon.add { + .TooltipContent { + min-width: 300px; + text-align: left; + } + + .Icon { border-radius: $radius; padding: $padding / 3; color: var(--menu-bgc) !important; @@ -29,7 +35,7 @@ } } - .Badge.counter { + .Badge { $boxSize: 17px; $offset: -7px; diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index a2f072dd35..d6977f01a7 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -16,6 +16,7 @@ import { navigate } from "../../navigation"; import { addClusterURL } from "../+add-cluster"; import { clusterSettingsURL } from "../+cluster-settings"; import { landingURL } from "../+landing-page"; +import { Tooltip, TooltipContent } from "../tooltip"; // fixme: allow to rearrange clusters with drag&drop // fixme: make add-icon's tooltip visible on init @@ -80,20 +81,17 @@ export class ClustersMenu extends React.Component { /> ) })} -
- -

This is the quick launch menu.

-

- - Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button. - -

-
- )} - /> +
+ + + This is the quick launch menu. +

+ + Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button. + + + + {newContexts.length > 0 && ( )} diff --git a/src/renderer/components/layout/main-layout.scss b/src/renderer/components/layout/main-layout.scss index 9f73b9f75a..36c2234dc8 100755 --- a/src/renderer/components/layout/main-layout.scss +++ b/src/renderer/components/layout/main-layout.scss @@ -46,7 +46,6 @@ background: $sidebarBackground; white-space: nowrap; transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1); - z-index: 100; &.pinned { width: var(--sidebar-max-size); diff --git a/src/renderer/components/tooltip/tooltip.scss b/src/renderer/components/tooltip/tooltip.scss index 5b2dddff9d..72b4bd86b3 100644 --- a/src/renderer/components/tooltip/tooltip.scss +++ b/src/renderer/components/tooltip/tooltip.scss @@ -32,12 +32,14 @@ } &:not(.following) { + margin: #{$margin}; + &.left { - left: 0; + right: 100%; } &.right { - right: 0; + left: 100%; } &.top { @@ -47,24 +49,19 @@ &.bottom { top: 100%; } - - &.center { - left: 50%; - transform: translateX(-50%); - } } } .TooltipContent { &.nowrap { - white-space: nowrap; + &, * { + white-space: nowrap; + } } &.narrow { max-width: 300px; - overflow: hidden; text-overflow: ellipsis; - white-space: normal; word-wrap: break-word; text-align: left; } diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index 4ba738e3ca..a48ee3d0f8 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -7,7 +7,7 @@ import { createPortal } from "react-dom" import { autobind, cssNames } from "../../utils"; import { Animate } from "../animate"; -// todo: refactoring +// todo: refactor // todo: add flag to show visible tooltip by default (until mouse-over the target) // fixme: better positioning + remove "flying effect" @@ -26,13 +26,11 @@ interface Position { right?: boolean; top?: boolean; bottom?: boolean; - center?: boolean; } const defaultProps: Partial = { useAnimation: true, position: { - center: true, bottom: true, } };