diff --git a/src/common/workspace-store.ts b/src/common/workspace-store.ts index dd10a4c433..43afb0d5c6 100644 --- a/src/common/workspace-store.ts +++ b/src/common/workspace-store.ts @@ -1,6 +1,8 @@ import { action, computed, observable, toJS } from "mobx"; import { BaseStore } from "./base-store"; import { clusterStore } from "./cluster-store" +import { landingURL } from "../renderer/components/+landing-page/landing-page.route"; +import { navigate } from "../renderer/navigation"; export type WorkspaceId = string; @@ -50,12 +52,18 @@ export class WorkspaceStore extends BaseStore { } @action - setActive(id = WorkspaceStore.defaultId) { + setActive(id = WorkspaceStore.defaultId, { redirectToLanding = true, resetActiveCluster = true } = {}) { + if (id === this.currentWorkspaceId) return; if (!this.getById(id)) { throw new Error(`workspace ${id} doesn't exist`); } - this.currentWorkspaceId = id; + if (resetActiveCluster) { + clusterStore.setActive(null) + } + if (redirectToLanding) { + navigate(landingURL()) + } } @action diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss index 0d05c418d8..3c3121208f 100644 --- a/src/renderer/components/+landing-page/landing-page.scss +++ b/src/renderer/components/+landing-page/landing-page.scss @@ -9,7 +9,7 @@ background-position: 0 35%; background-size: 85%; background-clip: content-box; - opacity: 1; + opacity: .75; top: 0; left: 0; bottom: 0; @@ -21,4 +21,39 @@ opacity: 0.2; } } + + .startup-hint { + $bgc: $mainBackground; + $arrowSize: 10px; + + position: absolute; + left: 0; + top: 25px; + margin: $padding; + padding: $padding * 2; + width: 320px; + background: $bgc; + color: $textColorAccent; + filter: drop-shadow(0 0px 2px #ffffff33); + + &: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%; + } + + .theme-light & { + filter: drop-shadow(0 0px 2px #777); + background: white; + + &:before { + border-right-color: white; + } + } + } } \ No newline at end of file diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx index 134c950f92..68d71701c5 100644 --- a/src/renderer/components/+landing-page/landing-page.tsx +++ b/src/renderer/components/+landing-page/landing-page.tsx @@ -1,5 +1,6 @@ import "./landing-page.scss" import React from "react"; +import { observable } from "mobx"; import { observer } from "mobx-react"; import { Trans } from "@lingui/macro"; import { clusterStore } from "../../../common/cluster-store"; @@ -7,11 +8,24 @@ import { workspaceStore } from "../../../common/workspace-store"; @observer export class LandingPage extends React.Component { + @observable showHint = true; + render() { const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId); const noClustersInScope = !clusters.length; + const showStartupHint = this.showHint && noClustersInScope; return (
+ {showStartupHint && ( +
this.showHint = false}> +

This is the quick launch menu.

+

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

+
+ )} {noClustersInScope && (

diff --git a/src/renderer/components/cluster-manager/clusters-menu.scss b/src/renderer/components/cluster-manager/clusters-menu.scss index 5e5f08664d..bc82191ad3 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.scss +++ b/src/renderer/components/cluster-manager/clusters-menu.scss @@ -5,56 +5,26 @@ text-align: center; background: $clusterMenuBackground; border-right: 1px solid $clusterMenuBorderColor; - padding-bottom: $spacing; + padding: $spacing 0; + min-width: 75px; - .is-mac & { - padding-top: $spacing * 2; - } - - > .startup-tooltip { - $bgc: $mainBackground; - $arrowSize: 10px; - - position: absolute; - top: 20px; - left: 100%; - margin: $padding; - padding: $spacing; - width: 320px; - background: $bgc; - color: $textColorAccent; - 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%; - } - - .theme-light & { - filter: drop-shadow(0 0px 2px #777); - background: white; - - &:before { - border-right-color: white; - } - } + .is-mac &:before { + content: ""; + height: 20px; // extra spacing for mac-os "traffic-light" buttons } .clusters { @include hidden-scrollbar; - padding: 0 $spacing $spacing; + padding: 0 $spacing; // extra spacing for cluster-icon's badge + margin-bottom: $spacing; + + &:empty { + display: none; + } } > .add-cluster { position: relative; - min-width: 43px; .Icon { border-radius: $radius; diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx index 46a8613429..79a9196e25 100644 --- a/src/renderer/components/cluster-manager/clusters-menu.tsx +++ b/src/renderer/components/cluster-manager/clusters-menu.tsx @@ -2,7 +2,6 @@ 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"; @@ -13,7 +12,7 @@ import { ClusterIcon } from "../cluster-icon"; import { Icon } from "../icon"; import { cssNames, IClassName } from "../../utils"; import { Badge } from "../badge"; -import { navigate, navigation } from "../../navigation"; +import { navigate } from "../../navigation"; import { addClusterURL } from "../+add-cluster"; import { clusterSettingsURL } from "../+cluster-settings"; import { landingURL } from "../+landing-page"; @@ -30,8 +29,6 @@ interface Props { @observer export class ClustersMenu extends React.Component { - @observable showHint = true; - showCluster = (clusterId: ClusterId) => { clusterStore.setActive(clusterId); navigate(clusterViewURL({ params: { clusterId } })); @@ -94,24 +91,8 @@ export class ClustersMenu extends React.Component { const { className } = this.props; const { newContexts } = userStore; const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId); - const noClustersInScope = clusters.length === 0; - const isLanding = navigation.getPath() === landingURL(); - const showStartupHint = this.showHint && isLanding && noClustersInScope; // fixme: broken, move to landing.tsx return ( -
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 (