diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss index 81ae070117..adb09bfac9 100644 --- a/src/renderer/components/+landing-page/landing-page.scss +++ b/src/renderer/components/+landing-page/landing-page.scss @@ -1,4 +1,39 @@ .PageLayout.LandingPage { --width: 80%; text-align: center; + + .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 6f23ca9fe0..8ec7eb279b 100644 --- a/src/renderer/components/+landing-page/landing-page.tsx +++ b/src/renderer/components/+landing-page/landing-page.tsx @@ -1,22 +1,37 @@ import "./landing-page.scss"; import React from "react"; +import { observable } from "mobx"; import { observer } from "mobx-react"; +import { clusterStore } from "../../../common/cluster-store"; import { Workspace, workspaceStore } from "../../../common/workspace-store"; import { WorkspaceOverview } from "./workspace-overview"; import { PageLayout } from "../layout/page-layout"; @observer export class LandingPage extends React.Component { + @observable showHint = true; get workspace(): Workspace { return workspaceStore.currentWorkspace; } render() { + const clusters = clusterStore.getByWorkspaceId(this.workspace.id); + const noClustersInScope = !clusters.length; + const showStartupHint = this.showHint && noClustersInScope; + const header =

Workspace: {this.workspace.name}

; 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. +

+
+ )}
);