From a440f60ea307c110ebda45a0e9e1a02915c6210a Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 9 Jul 2020 12:29:46 +0300 Subject: [PATCH] clusters-menu Signed-off-by: Roman --- locales/en/messages.po | 10 +-- locales/fi/messages.po | 10 +-- locales/ru/messages.po | 10 +-- src/common/user-store.ts | 14 ++-- .../components/+workspaces/clusters-menu.scss | 47 +++++++++++-- .../components/+workspaces/clusters-menu.tsx | 68 ++++++++++--------- .../components/+workspaces/workspaces.scss | 3 +- src/renderer/components/icon/icon.scss | 16 ++--- src/renderer/components/icon/icon.tsx | 4 +- 9 files changed, 109 insertions(+), 73 deletions(-) diff --git a/locales/en/messages.po b/locales/en/messages.po index 2fa0c1a94a..d9ea796593 100644 --- a/locales/en/messages.po +++ b/locales/en/messages.po @@ -211,7 +211,7 @@ msgstr "Are you sure you want to drain <0>{nodeName}?" msgid "Arguments" msgstr "Arguments" -#: src/renderer/components/+workspaces/clusters-menu.tsx:55 +#: src/renderer/components/+workspaces/clusters-menu.tsx:64 msgid "Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button." msgstr "Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button." @@ -678,7 +678,7 @@ msgstr "Description" msgid "Desired number of replicas" msgstr "Desired number of replicas" -#: src/renderer/components/+workspaces/clusters-menu.tsx:38 +#: src/renderer/components/+workspaces/clusters-menu.tsx:40 msgid "Disconnect" msgstr "Disconnect" @@ -2030,7 +2030,7 @@ msgstr "Set" msgid "Set quota" msgstr "Set quota" -#: src/renderer/components/+workspaces/clusters-menu.tsx:31 +#: src/renderer/components/+workspaces/clusters-menu.tsx:33 msgid "Settings" msgstr "Settings" @@ -2204,7 +2204,7 @@ msgstr "This field is required" msgid "This field must contain only lowercase latin characters, numbers and dash." msgstr "This field must contain only lowercase latin characters, numbers and dash." -#: src/renderer/components/+workspaces/clusters-menu.tsx:53 +#: src/renderer/components/+workspaces/clusters-menu.tsx:62 msgid "This is the quick launch menu." msgstr "This is the quick launch menu." @@ -2382,7 +2382,7 @@ msgstr "Worker" msgid "Workloads" msgstr "Workloads" -#: src/renderer/components/+workspaces/workspaces.tsx:41 +#: src/renderer/components/+workspaces/bottom-bar.tsx:31 msgid "Workspaces" msgstr "Workspaces" diff --git a/locales/fi/messages.po b/locales/fi/messages.po index decb7026d2..6c5cfc73ca 100644 --- a/locales/fi/messages.po +++ b/locales/fi/messages.po @@ -211,7 +211,7 @@ msgstr "" msgid "Arguments" msgstr "" -#: src/renderer/components/+workspaces/clusters-menu.tsx:55 +#: src/renderer/components/+workspaces/clusters-menu.tsx:64 msgid "Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button." msgstr "" @@ -674,7 +674,7 @@ msgstr "" msgid "Desired number of replicas" msgstr "" -#: src/renderer/components/+workspaces/clusters-menu.tsx:38 +#: src/renderer/components/+workspaces/clusters-menu.tsx:40 msgid "Disconnect" msgstr "" @@ -2013,7 +2013,7 @@ msgstr "" msgid "Set quota" msgstr "" -#: src/renderer/components/+workspaces/clusters-menu.tsx:31 +#: src/renderer/components/+workspaces/clusters-menu.tsx:33 msgid "Settings" msgstr "" @@ -2187,7 +2187,7 @@ msgstr "" msgid "This field must contain only lowercase latin characters, numbers and dash." msgstr "" -#: src/renderer/components/+workspaces/clusters-menu.tsx:53 +#: src/renderer/components/+workspaces/clusters-menu.tsx:62 msgid "This is the quick launch menu." msgstr "" @@ -2365,7 +2365,7 @@ msgstr "" msgid "Workloads" msgstr "" -#: src/renderer/components/+workspaces/workspaces.tsx:41 +#: src/renderer/components/+workspaces/bottom-bar.tsx:31 msgid "Workspaces" msgstr "" diff --git a/locales/ru/messages.po b/locales/ru/messages.po index 616fb7545f..31bb1d6777 100644 --- a/locales/ru/messages.po +++ b/locales/ru/messages.po @@ -212,7 +212,7 @@ msgstr "Выполнить команду drain для ноды <0>{nodeName} { } @observable lastSeenAppVersion = "0.0.0" - @observable seenContexts = observable.set(); + @observable seenContexts: string[] = []; + @observable newContexts: string[] = []; // todo: detect new contexts from .kube/config since last open + @observable preferences: UserPreferences = { allowTelemetry: true, colorTheme: "dark", @@ -54,16 +56,12 @@ export class UserStore extends BaseStore { @action protected fromStore(data: Partial = {}) { - const { lastSeenAppVersion, seenContexts, preferences } = data + const { lastSeenAppVersion, seenContexts = [], preferences } = data if (lastSeenAppVersion) { this.lastSeenAppVersion = lastSeenAppVersion; } - if (seenContexts) { - this.seenContexts = observable.set(seenContexts); - } - if (preferences) { - Object.assign(this.preferences, preferences); - } + this.seenContexts = seenContexts; + Object.assign(this.preferences, preferences); } toJSON() { diff --git a/src/renderer/components/+workspaces/clusters-menu.scss b/src/renderer/components/+workspaces/clusters-menu.scss index f776456ab2..4c3a6dcd65 100644 --- a/src/renderer/components/+workspaces/clusters-menu.scss +++ b/src/renderer/components/+workspaces/clusters-menu.scss @@ -1,15 +1,50 @@ .ClustersMenu { @include hidden-scrollbar; + $menuBgc: #252729; - padding: $padding; - background: #252729; + padding: $padding * 1.5; + background: $menuBgc; .add-cluster { - cursor: pointer; - opacity: 0.4; + position: relative; - &:hover { - opacity: .75; + .Icon.add { + border-radius: $radius; + padding: $padding / 3; + color: $menuBgc !important; + background: white !important; + font-weight: bold; + cursor: pointer; + opacity: 0.4; + + &.active { + opacity: 1; + } + + &:hover { + box-shadow: none; + opacity: .75; + } + } + + // todo: reuse in cluster-icon.tsx + .Badge.new-contexts { + $boxSize: 17px; + $offset: -7px; + + position: absolute; + font-size: $font-size-small; + right: $offset; + bottom: $offset; + line-height: $boxSize; + min-width: $boxSize; + min-height: $boxSize; + text-align: center; + color: white; + background: $colorSuccess; + font-weight: normal; + border-radius: 50%; + padding: 0; } } } \ No newline at end of file diff --git a/src/renderer/components/+workspaces/clusters-menu.tsx b/src/renderer/components/+workspaces/clusters-menu.tsx index fd49065320..8eef7e438d 100644 --- a/src/renderer/components/+workspaces/clusters-menu.tsx +++ b/src/renderer/components/+workspaces/clusters-menu.tsx @@ -6,11 +6,16 @@ import React from "react"; import { observer } from "mobx-react"; import { _i18n } from "../../i18n"; import { t, Trans } from "@lingui/macro"; -import { ClusterId, clusterStore } from "../../../common/cluster-store"; +import { userStore } from "../../../common/user-store"; +import { clusterStore } from "../../../common/cluster-store"; import { WorkspaceId } from "../../../common/workspace-store"; import { ClusterIcon } from "../+cluster-settings/cluster-icon"; import { Icon } from "../icon"; import { cssNames, IClassName } from "../../utils"; +import { Badge } from "../badge"; + +// fixme: allow to rearrange clusters with drag&drop +// fixme: make add-icon's tooltip visible on init interface Props { className?: IClassName; @@ -28,43 +33,30 @@ export class ClustersMenu extends React.Component { console.log('navigate: /add-cluster') } - showContextMenu = (clusterId: ClusterId) => { + showContextMenu = (cluster: Cluster) => { const { Menu, MenuItem } = remote const menu = new Menu(); menu.append(new MenuItem({ label: _i18n._(t`Settings`), - click: () => { - console.log(`navigate to cluster=${clusterId} settings`) - } - })) - // fixme: don't show item if cluster wasn't active during runtime - menu.append(new MenuItem({ - label: _i18n._(t`Disconnect`), - click: () => { - console.log(`disconnect cluster=${clusterId} and navigate to landing-page`) - } - })) + click: () => console.log(`navigate to cluster settings`, cluster) + })); + if (cluster.initialized) { + menu.append(new MenuItem({ + label: _i18n._(t`Disconnect`), + click: () => console.log(`disconnect cluster and navigate to workspaces`, cluster) + })) + } menu.popup({ window: remote.getCurrentWindow() }) } - // fixme: allow to rearrange clusters with drag&drop render() { const { workspaceId, className } = this.props; const clusters = clusterStore.getByWorkspaceId(workspaceId); - const addClusterTooltip = ( -
-

This is the quick launch menu.

-

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

-
- ) + const { newContexts } = userStore; return (
{clusters.map(cluster => { @@ -75,18 +67,28 @@ export class ClustersMenu extends React.Component { cluster={cluster} className={cssNames({ active: isActive })} onClick={() => this.selectCluster(cluster)} - onContextMenu={() => this.showContextMenu(cluster.id)} + onContextMenu={() => this.showContextMenu(cluster)} /> ) })} - {/* todo: add badge for "newContexts" since last visit */} - {/* fixme: make tooltip visible on init + remove following to mouse pos */} - +
+ +

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/+workspaces/workspaces.scss b/src/renderer/components/+workspaces/workspaces.scss index 13af93816c..fbfc355443 100644 --- a/src/renderer/components/+workspaces/workspaces.scss +++ b/src/renderer/components/+workspaces/workspaces.scss @@ -1,13 +1,14 @@ .Workspaces { display: grid; grid-template-areas: "draggable draggable" "menu lens-view" "bottom-bar bottom-bar"; - grid-template-rows: 20px 1fr min-content; + grid-template-rows: auto 1fr min-content; grid-template-columns: min-content 1fr; height: 100%; .draggable-top { @include set-draggable; grid-area: draggable; + height: 25px; } #lens-view { diff --git a/src/renderer/components/icon/icon.scss b/src/renderer/components/icon/icon.scss index 60ce4a959e..529a8d8551 100644 --- a/src/renderer/components/icon/icon.scss +++ b/src/renderer/components/icon/icon.scss @@ -33,18 +33,13 @@ height: var(--big-size); } - > span { - width: 100%; - height: 100%; - } - // material-icon &.material { - > span { + > .icon { font-family: "Material Icons"; font-size: inherit; - font-weight: normal; - font-style: normal; + font-weight: inherit; + font-style: inherit; display: inline-block; line-height: 1; text-transform: none; @@ -68,6 +63,11 @@ &.svg { box-sizing: content-box; + > .icon { + width: 100%; + height: 100%; + } + svg { pointer-events: none; width: 100%; diff --git a/src/renderer/components/icon/icon.tsx b/src/renderer/components/icon/icon.tsx index cb3cd92ce8..81635faae1 100644 --- a/src/renderer/components/icon/icon.tsx +++ b/src/renderer/components/icon/icon.tsx @@ -87,12 +87,12 @@ export class Icon extends React.PureComponent { // render as inline svg-icon if (svg) { const svgIconText = require("!!raw-loader!./" + svg + ".svg").default; - iconContent = ; + iconContent = ; } // render as material-icon if (material) { - iconContent = {material}; + iconContent = {material}; } // wrap icon's content passed from decorator