From f08e7e7758922bdd40593b1d806ab6a9026aaf28 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 27 May 2021 11:55:29 +0300 Subject: [PATCH] Adding TopBar to catalog view Signed-off-by: Alex Andreev --- .../components/+catalog/catalog.module.css | 6 +- src/renderer/components/+catalog/catalog.tsx | 91 +++++++++++-------- src/renderer/components/app.scss | 3 +- .../cluster-manager/cluster-manager.scss | 1 + .../components/layout/main-layout.module.css | 4 +- .../components/layout/sidebar-storage.ts | 2 +- src/renderer/components/layout/sidebar.tsx | 7 -- .../components/layout/tab-layout.scss | 8 +- .../components/layout/topbar.module.css | 16 ++++ src/renderer/components/layout/topbar.tsx | 41 +++++++++ .../resizing-anchor/resizing-anchor.scss | 2 +- 11 files changed, 126 insertions(+), 55 deletions(-) create mode 100644 src/renderer/components/layout/topbar.module.css create mode 100644 src/renderer/components/layout/topbar.tsx diff --git a/src/renderer/components/+catalog/catalog.module.css b/src/renderer/components/+catalog/catalog.module.css index b8db97108e..937195aa8f 100644 --- a/src/renderer/components/+catalog/catalog.module.css +++ b/src/renderer/components/+catalog/catalog.module.css @@ -68,6 +68,10 @@ -webkit-font-smoothing: auto; } +.tabs { + @apply flex flex-grow flex-col; +} + .tab { @apply px-8 py-4; } @@ -77,7 +81,7 @@ --color-active: var(--textColorTertiary); } -.tab:hover::after { +.tab::after { display: none; } diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index d2eccf5783..035b38bc44 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -41,6 +41,10 @@ import { Notifications } from "../notifications"; import { Avatar } from "../avatar/avatar"; import { MainLayout } from "../layout/main-layout"; import { cssNames } from "../../utils"; +import { TopBar } from "../layout/topbar"; +import { welcomeURL } from "../+welcome"; +import { Icon } from "../icon"; +import { MaterialTooltip } from "./material-tooltip/material-tooltip"; enum sortBy { name = "name", @@ -137,7 +141,7 @@ export class Catalog extends React.Component { renderNavigation() { return ( - +
{ } return ( - -
- item.name, - [sortBy.source]: (item: CatalogEntityItem) => item.source, - [sortBy.status]: (item: CatalogEntityItem) => item.phase, - }} - searchFilters={[ - (entity: CatalogEntityItem) => entity.searchFields, - ]} - renderTableHeader={[ - { title: "", className: styles.iconCell }, - { title: "Name", className: styles.nameCell, sortBy: sortBy.name }, - { title: "Source", className: styles.sourceCell, sortBy: sortBy.source }, - { title: "Labels", className: styles.labelsCell }, - { title: "Status", className: styles.statusCell, sortBy: sortBy.status }, - ]} - renderTableContents={(item: CatalogEntityItem) => [ - this.renderIcon(item), - item.name, - item.source, - item.labels.map((label) => ), - { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } - ]} - onDetails={(item: CatalogEntityItem) => this.onDetails(item) } - renderItemMenu={this.renderItemMenu} - /> -
- - + <> + Catalog
}> +
+ + navigate(welcomeURL())}/> + +
+ + +
+ item.name, + [sortBy.source]: (item: CatalogEntityItem) => item.source, + [sortBy.status]: (item: CatalogEntityItem) => item.phase, + }} + searchFilters={[ + (entity: CatalogEntityItem) => entity.searchFields, + ]} + renderTableHeader={[ + { title: "", className: styles.iconCell }, + { title: "Name", className: styles.nameCell, sortBy: sortBy.name }, + { title: "Source", className: styles.sourceCell, sortBy: sortBy.source }, + { title: "Labels", className: styles.labelsCell }, + { title: "Status", className: styles.statusCell, sortBy: sortBy.status }, + ]} + renderTableContents={(item: CatalogEntityItem) => [ + this.renderIcon(item), + item.name, + item.source, + item.labels.map((label) => ), + { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } + ]} + onDetails={(item: CatalogEntityItem) => this.onDetails(item) } + renderItemMenu={this.renderItemMenu} + /> +
+ + + ); } } diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index b4c15b89fd..039df21ff3 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -39,7 +39,8 @@ --font-weight-normal: 400; --font-weight-bold: 500; --main-layout-header: 40px; - --drag-region-height: 22px + --drag-region-height: 22px; + --sidebar-width: 200px; } *, *:before, *:after { diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss index 0c7c450f1b..03bdf49cd0 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.scss +++ b/src/renderer/components/cluster-manager/cluster-manager.scss @@ -32,6 +32,7 @@ grid-area: main; position: relative; display: flex; + flex-direction: column; } .HotbarMenu { diff --git a/src/renderer/components/layout/main-layout.module.css b/src/renderer/components/layout/main-layout.module.css index bd517263f9..abee3c0258 100644 --- a/src/renderer/components/layout/main-layout.module.css +++ b/src/renderer/components/layout/main-layout.module.css @@ -28,12 +28,14 @@ grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr; width: 100%; z-index: 1; + height: calc(100% - var(--main-layout-header)); } .sidebar { grid-area: sidebar; + display: flex; + position: relative; background: var(--sidebarBackground); - width: var(--sidebar-width); } .contents { diff --git a/src/renderer/components/layout/sidebar-storage.ts b/src/renderer/components/layout/sidebar-storage.ts index f12aefb6ea..663cb7c177 100644 --- a/src/renderer/components/layout/sidebar-storage.ts +++ b/src/renderer/components/layout/sidebar-storage.ts @@ -29,6 +29,6 @@ export interface SidebarStorageState { } export const sidebarStorage = createStorage("sidebar", { - width: 200, // sidebar size in non-compact mode + width: 200, expanded: {}, }); diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx index 9ca868ff5e..6ecc9b8df9 100644 --- a/src/renderer/components/layout/sidebar.tsx +++ b/src/renderer/components/layout/sidebar.tsx @@ -24,7 +24,6 @@ import type { TabLayoutRoute } from "./tab-layout"; import React from "react"; import { observer } from "mobx-react"; -import { NavLink } from "react-router-dom"; import { cssNames } from "../../utils"; import { Icon } from "../icon"; import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route"; @@ -175,12 +174,6 @@ export class Sidebar extends React.Component { return (
-
- - -
Lens
- -
.Tabs { - grid-area: tabs; background: $layoutTabsBackground; } - main { $spacing: $margin * 2; - grid-area: main; + flex-grow: 1; overflow-y: scroll; // always reserve space for scrollbar (17px) overflow-x: auto; margin: $spacing; diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css new file mode 100644 index 0000000000..3b47da2c66 --- /dev/null +++ b/src/renderer/components/layout/topbar.module.css @@ -0,0 +1,16 @@ +.topBar { + display: grid; + grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr; + grid-template-rows: var(--main-layout-header); + grid-template-areas: "sidebar contents"; + z-index: 1; +} + +.sidebar { + width: var(--sidebar-width); + background-color: var(--sidebarLogoBackground); +} + +.contents { + background-color: var(--layoutBackground); +} \ No newline at end of file diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx new file mode 100644 index 0000000000..71853d19dd --- /dev/null +++ b/src/renderer/components/layout/topbar.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import styles from "./topbar.module.css"; +import React, { HTMLAttributes, ReactNode } from "react"; +import { sidebarStorage } from "./sidebar-storage"; +import { observer } from "mobx-react"; + +interface Props extends HTMLAttributes { + sidebar: ReactNode; +} + +export const TopBar = observer((props: Props) => { + const { width } = sidebarStorage.get(); + const style = { "--sidebar-width": `${width}px` } as React.CSSProperties; + + return ( +
+
{props.sidebar}
+
{props.children}
+
+ ); +}); diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss index 024a83105b..f393466d64 100644 --- a/src/renderer/components/resizing-anchor/resizing-anchor.scss +++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss @@ -68,7 +68,7 @@ body.resizing { } &.horizontal { - top: 0; + top: calc(var(--main-layout-header) * -1); // Cover TopBar area also bottom: 0; cursor: col-resize; width: $dimension;