cluster-menu tooltip fixes

Signed-off-by: Roman <ixrock@gmail.com>

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<ClusterId, BrowserWindow>();

src/renderer/components/+cluster-settings/cluster-icon.tsx

@@ -14,6 +14,7 @@ interface Props extends DOMAttributes<HTMLElement> {
   className?: IClassName;
   errorClass?: IClassName;
   showErrors?: boolean;
+  showTooltip?: boolean;
   interactive?: boolean;
   isActive?: boolean;
   options?: HashiconParams;
@@ -21,6 +22,7 @@ interface Props extends DOMAttributes<HTMLElement> {
 
 const defaultProps: Partial<Props> = {
   showErrors: true,
+  showTooltip: true,
 };
 
 @observer
@@ -28,19 +30,24 @@ export class ClusterIcon extends React.Component<Props> {
   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 (
       <div {...elemProps} className={className} id={clusterIconId}>
-        <Tooltip htmlFor={clusterIconId} following>
+        {showTooltip && (
-          <TooltipContent nowrap>{clusterName}</TooltipContent>
+          <Tooltip htmlFor={clusterIconId} position={{ right: true }}>
-        </Tooltip>
+            <TooltipContent nowrap>{clusterName}</TooltipContent>
+          </Tooltip>
+        )}
         {icon && <img src={icon} alt={clusterName}/>}
         {!icon && <Hashicon value={clusterName} options={options}/>}
         {showErrors && isAdmin && eventCount > 0 && (

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -8,7 +8,7 @@ export class ClusterManager extends React.Component {
     const { children: lensView } = this.props;
     return (
       <div className="ClusterManager">
-        <div id="draggable-top"></div>
+        <div id="draggable-top"/>
         <div id="lens-view">{lensView}</div>
         <ClustersMenu/>
         <BottomBar/>

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;
 

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<Props> {
             />
           )
         })}
-        <div className="add-cluster" onClick={this.addCluster}>
+        <div id="add-cluster" onClick={this.addCluster}>
-          <Icon
+          <Tooltip htmlFor="add-cluster" position={{ right: true }}>
-            big material="add" className="add"
+            <TooltipContent>
-            tooltip={(
+              <Trans>This is the quick launch menu.</Trans>
-              <div className="flex column gaps">
+              <br/><br/>
-                <p><Trans>This is the quick launch menu.</Trans></p>
+              <Trans>
-                <p>
+                Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
-                  <Trans>
+              </Trans>
-                    Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button.
+            </TooltipContent>
-                  </Trans>
+          </Tooltip>
-                </p>
+          <Icon big material="add"/>
-              </div>
-            )}
-          />
           {newContexts.length > 0 && (
             <Badge className="counter" label={newContexts.length}/>
           )}

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);

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;
   }

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<TooltipProps> = {
   useAnimation: true,
   position: {
-    center: true,
     bottom: true,
   }
 };