From e14b52446c22296cf05903d225b4e9ea8db413d2 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 17 Jul 2020 01:18:48 +0300 Subject: [PATCH] show startup-hint tooltip when no-clusters Signed-off-by: Roman --- .../components/+add-cluster/add-cluster.scss | 2 +- src/renderer/components/app.scss | 1 + .../cluster-manager/clusters-menu.scss | 48 +++++++++++---- .../cluster-manager/clusters-menu.tsx | 58 ++++++++++++------- src/renderer/components/tooltip/tooltip.tsx | 5 +- 5 files changed, 77 insertions(+), 37 deletions(-) diff --git a/src/renderer/components/+add-cluster/add-cluster.scss b/src/renderer/components/+add-cluster/add-cluster.scss index f8b938a9f7..7cfcd19ea9 100644 --- a/src/renderer/components/+add-cluster/add-cluster.scss +++ b/src/renderer/components/+add-cluster/add-cluster.scss @@ -10,7 +10,7 @@ > .content { padding: var(--flex-gap); margin-right: var(--flex-gap); - background-color: $contentColor; + background-color: var(--clusters-menu-bgc); border-radius: $radius; } diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index 7c3ad1f9b9..c2f6fa59b7 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -15,6 +15,7 @@ :root { --mainBackground: #1e2124; --textColorPrimary: #87909c; + --clusters-menu-bgc: #252729; } ::selection { diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss index f1a6f11097..07ba56d8a2 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.scss +++ b/src/renderer/components/cluster-manager/clusters-menu.scss @@ -1,26 +1,50 @@ .ClustersMenu { - // fixme: uncomment when tooltips handled correctly (rendered outside of parent) - //@include hidden-scrollbar; - --flex-gap: #{$padding * 2}; - --menu-bgc: #252729; + position: relative; padding: var(--flex-gap); - padding-top: calc(var(--flex-gap) + 20px); // add extra-space for "traffic-light" buttons (mac) - background: var(--menu-bgc); + background: var(--clusters-menu-bgc); - #add-cluster { - position: relative; + > .startup-tooltip { + $bgc: $mainBackground; + $arrowSize: 10px; - .TooltipContent { - min-width: 300px; - text-align: left; + position: absolute; + top: 20px; + left: 100%; + margin: $padding; + padding: $padding * 2; + width: 320px; + background: $bgc; + z-index: 100; + color: white; + filter: drop-shadow(0 0px 2px #ffffff33); + pointer-events: none; + + &:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-top: $arrowSize solid transparent; + border-bottom: $arrowSize solid transparent; + border-right: $arrowSize solid $bgc; + right: 100%; } + } + + > .clusters { + //@include hidden-scrollbar; + //flex: 1; + } + + > .add-cluster { + position: relative; .Icon { border-radius: $radius; padding: $padding / 3; - color: var(--menu-bgc) !important; + color: var(--clusters-menu-bgc) !important; background: white !important; font-weight: bold; cursor: pointer; diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index d6977f01a7..5df05cd08a 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -2,6 +2,7 @@ import "./clusters-menu.scss" import { remote } from "electron" import React from "react"; import { observer } from "mobx-react"; +import { observable } from "mobx"; import { _i18n } from "../../i18n"; import { t, Trans } from "@lingui/macro"; import type { Cluster } from "../../../main/cluster"; @@ -12,14 +13,13 @@ import { ClusterIcon } from "../+cluster-settings/cluster-icon"; import { Icon } from "../icon"; import { cssNames, IClassName } from "../../utils"; import { Badge } from "../badge"; -import { navigate } from "../../navigation"; +import { navigate, navigation } 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 interface Props { className?: IClassName; @@ -27,6 +27,8 @@ interface Props { @observer export class ClustersMenu extends React.Component { + @observable showHint = true; + showCluster = (clusterId: ClusterId) => { if (clusterStore.activeClusterId === clusterId) { navigate("/"); // redirect to index @@ -67,31 +69,45 @@ export class ClustersMenu extends React.Component { const { newContexts } = userStore; const { currentWorkspaceId } = workspaceStore; const clusters = clusterStore.getByWorkspaceId(currentWorkspaceId); + const noClusters = !clusterStore.clusters.size; + const isLanding = navigation.getPath() === landingURL(); + const showStartupHint = this.showHint && isLanding && noClusters; return ( -
- {clusters.map(cluster => { - return ( - this.showCluster(cluster.id)} - onContextMenu={() => this.showContextMenu(cluster)} - /> - ) - })} -
- - - This is the quick launch menu. -

+
this.showHint = false} + > + {showStartupHint && ( +
+

This is the quick launch menu.

+

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

+
+ )} +
+ {clusters.map(cluster => { + return ( + this.showCluster(cluster.id)} + onContextMenu={() => this.showContextMenu(cluster)} + /> + ) + })} +
+
+ + + Add Cluster - + {newContexts.length > 0 && ( )} diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index a48ee3d0f8..6f57d725cc 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -7,9 +7,8 @@ import { createPortal } from "react-dom" import { autobind, cssNames } from "../../utils"; import { Animate } from "../animate"; -// todo: refactor -// todo: add flag to show visible tooltip by default (until mouse-over the target) -// fixme: better positioning + remove "flying effect" +// todo: refactor -- better positioning + remove "flying effect" +// fixme: always render outside of parent element ("overflow: auto" should not affect tooltip) export interface TooltipProps { htmlFor: string;