diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 035b38bc44..888e4040f8 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -44,7 +44,7 @@ import { cssNames } from "../../utils"; import { TopBar } from "../layout/topbar"; import { welcomeURL } from "../+welcome"; import { Icon } from "../icon"; -import { MaterialTooltip } from "./material-tooltip/material-tooltip"; +import { MaterialTooltip } from "../material-tooltip/material-tooltip"; enum sortBy { name = "name", @@ -142,7 +142,7 @@ export class Catalog extends React.Component { renderNavigation() { return ( -
+
{ return ( <> - Catalog
}> +
navigate(welcomeURL())}/> diff --git a/src/renderer/components/+welcome/welcome.scss b/src/renderer/components/+welcome/welcome.scss index f74e135f70..6141f9f517 100644 --- a/src/renderer/components/+welcome/welcome.scss +++ b/src/renderer/components/+welcome/welcome.scss @@ -22,6 +22,7 @@ .Welcome { text-align: center; width: 100%; + height: 100%; z-index: 1; .box { diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 03bdf49cd0..16f77051c9 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -46,7 +46,7 @@ #lens-views { position: absolute; left: 0; - top: 0; + top: var(--main-layout-header); // Move below the TopBar right: 0; bottom: 0; display: flex; diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index a43ccb527a..be445d213f 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -25,7 +25,7 @@ import React from "react"; import { Redirect, Route, Switch } from "react-router"; import { observer } from "mobx-react"; import { BottomBar } from "./bottom-bar"; -import { Catalog, catalogRoute } from "../+catalog"; +import { Catalog, catalogRoute, catalogURL } from "../+catalog"; import { Preferences, preferencesRoute } from "../+preferences"; import { AddCluster, addClusterRoute } from "../+add-cluster"; import { ClusterView } from "./cluster-view"; @@ -35,13 +35,36 @@ import { Extensions, extensionsRoute } from "../+extensions"; import { HotbarMenu } from "../hotbar/hotbar-menu"; import { EntitySettings, entitySettingsRoute } from "../+entity-settings"; import { Welcome, welcomeRoute, welcomeURL } from "../+welcome"; +import { TopBar } from "../layout/topbar"; +import { ClusterStore } from "../../../common/cluster-store"; +import { hasLoadedView } from "./lens-views"; +import { navigate } from "../../navigation"; +import { Icon } from "../icon"; +import { MaterialTooltip } from "../material-tooltip/material-tooltip"; @observer export class ClusterManager extends React.Component { render() { + const cluster = ClusterStore.getInstance().active; + const isClusterVisible = cluster?.available && cluster?.ready && hasLoadedView(cluster.id); + return (
+ { isClusterVisible && ( + + {" "} + {cluster.contextName} + ) + }> +
+ + navigate(catalogURL())}/> + +
+
+ )}
@@ -66,3 +89,19 @@ export class ClusterManager extends React.Component { ); } } + +// const ClusterTopBar = observer(() => { +// const cluster = ClusterStore.getInstance().activeCluster; + +// // console.log(cluster) + +// // if (!cluster) { +// // return null; +// // } + +// return ( +// Lens
}> +// {cluster} +// +// ); +// }); diff --git a/src/renderer/components/cluster-manager/cluster-view.tsx b/src/renderer/components/cluster-manager/cluster-view.tsx index ed4cbe2718..081c902718 100644 --- a/src/renderer/components/cluster-manager/cluster-view.tsx +++ b/src/renderer/components/cluster-manager/cluster-view.tsx @@ -65,6 +65,7 @@ export class ClusterView extends React.Component { initView(clusterId); // init cluster-view (iframe), requires parent container #lens-views to be in DOM requestMain(clusterActivateHandler, clusterId, false); // activate and fetch cluster's state from main catalogEntityRegistry.activeEntity = catalogEntityRegistry.getById(clusterId); + ClusterStore.getInstance().setActive(clusterId); }, { fireImmediately: true, }), diff --git a/src/renderer/components/layout/main-layout-header.tsx b/src/renderer/components/layout/main-layout-header.tsx index 6323724009..13c81258e9 100644 --- a/src/renderer/components/layout/main-layout-header.tsx +++ b/src/renderer/components/layout/main-layout-header.tsx @@ -23,7 +23,7 @@ import React from "react"; import { observer } from "mobx-react"; import { cssNames } from "../../utils"; import { Icon } from "../icon"; -import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip"; +import { MaterialTooltip } from "../material-tooltip/material-tooltip"; import { catalogURL } from "../+catalog"; import { broadcastMessage } from "../../../common/ipc"; import { IpcRendererNavigationEvents } from "../../navigation/events"; diff --git a/src/renderer/components/layout/tab-layout.scss b/src/renderer/components/layout/tab-layout.scss index 7eff732856..7d39ddfc10 100755 --- a/src/renderer/components/layout/tab-layout.scss +++ b/src/renderer/components/layout/tab-layout.scss @@ -27,6 +27,7 @@ > .Tabs { background: $layoutTabsBackground; + min-height: 32px; } main { diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css index 3b47da2c66..1b37bcad96 100644 --- a/src/renderer/components/layout/topbar.module.css +++ b/src/renderer/components/layout/topbar.module.css @@ -1,16 +1,24 @@ .topBar { display: grid; - grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr; + grid-template-columns: [title] 1fr [controls] auto; grid-template-rows: var(--main-layout-header); - grid-template-areas: "sidebar contents"; + grid-template-areas: "title controls"; + background-color: var(--layoutBackground); z-index: 1; } -.sidebar { - width: var(--sidebar-width); - background-color: var(--sidebarLogoBackground); +.title { + @apply font-bold; + color: var(--textColorAccent); + align-items: center; + justify-content: center; + display: flex; } -.contents { - background-color: var(--layoutBackground); +.controls { + align-self: flex-end; + padding-right: 1.5rem; + align-items: center; + display: flex; + height: 100%; } \ No newline at end of file diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx index 71853d19dd..01eeb0ae25 100644 --- a/src/renderer/components/layout/topbar.tsx +++ b/src/renderer/components/layout/topbar.tsx @@ -20,22 +20,22 @@ */ import styles from "./topbar.module.css"; -import React, { HTMLAttributes, ReactNode } from "react"; +import React from "react"; import { sidebarStorage } from "./sidebar-storage"; import { observer } from "mobx-react"; -interface Props extends HTMLAttributes { - sidebar: ReactNode; +interface Props extends React.HTMLAttributes { + label: React.ReactNode; } -export const TopBar = observer((props: Props) => { +export const TopBar = observer(({ label, children, ...rest }: Props) => { const { width } = sidebarStorage.get(); const style = { "--sidebar-width": `${width}px` } as React.CSSProperties; return ( -
-
{props.sidebar}
-
{props.children}
+
+
{label}
+
{children}
); });