Adding TopBar to catalog view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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;
 }
 

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<Props> {
 
   renderNavigation() {
     return (
-      <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+      <Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
         <div className="pt-4">
           <Tab
             value={undefined}
@@ -205,44 +209,53 @@ export class Catalog extends React.Component<Props> {
     }
 
     return (
-      <MainLayout sidebar={this.renderNavigation()}>
+      <>
-        <div className="p-6 h-full">
+        <TopBar sidebar={<div>Catalog</div>}>
-          <ItemListLayout
+          <div>
-            renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
+            <MaterialTooltip title="Close Catalog" placement="left">
-            isClusterScoped
+              <Icon style={{ cursor: "default" }} material="close" onClick={() => navigate(welcomeURL())}/>
-            isSearchable={true}
+            </MaterialTooltip>
-            isSelectable={false}
+          </div>
-            className="CatalogItemList"
+        </TopBar>
-            store={this.catalogEntityStore}
+        <MainLayout sidebar={this.renderNavigation()}>
-            tableId="catalog-items"
+          <div className="p-6 h-full">
-            sortingCallbacks={{
+            <ItemListLayout
-              [sortBy.name]: (item: CatalogEntityItem) => item.name,
+              renderHeaderTitle={this.catalogEntityStore.activeCategory?.metadata.name ?? "Browse All"}
-              [sortBy.source]: (item: CatalogEntityItem) => item.source,
+              isClusterScoped
-              [sortBy.status]: (item: CatalogEntityItem) => item.phase,
+              isSearchable={true}
-            }}
+              isSelectable={false}
-            searchFilters={[
+              className="CatalogItemList"
-              (entity: CatalogEntityItem) => entity.searchFields,
+              store={this.catalogEntityStore}
-            ]}
+              tableId="catalog-items"
-            renderTableHeader={[
+              sortingCallbacks={{
-              { title: "", className: styles.iconCell },
+                [sortBy.name]: (item: CatalogEntityItem) => item.name,
-              { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
+                [sortBy.source]: (item: CatalogEntityItem) => item.source,
-              { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
+                [sortBy.status]: (item: CatalogEntityItem) => item.phase,
-              { title: "Labels", className: styles.labelsCell },
+              }}
-              { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
+              searchFilters={[
-            ]}
+                (entity: CatalogEntityItem) => entity.searchFields,
-            renderTableContents={(item: CatalogEntityItem) => [
+              ]}
-              this.renderIcon(item),
+              renderTableHeader={[
-              item.name,
+                { title: "", className: styles.iconCell },
-              item.source,
+                { title: "Name", className: styles.nameCell, sortBy: sortBy.name },
-              item.labels.map((label) => <Badge className={styles.badge} key={label} label={label} title={label} />),
+                { title: "Source", className: styles.sourceCell, sortBy: sortBy.source },
-              { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) }
+                { title: "Labels", className: styles.labelsCell },
-            ]}
+                { title: "Status", className: styles.statusCell, sortBy: sortBy.status },
-            onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
+              ]}
-            renderItemMenu={this.renderItemMenu}
+              renderTableContents={(item: CatalogEntityItem) => [
-          />
+                this.renderIcon(item),
-        </div>
+                item.name,
-        <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
+                item.source,
-      </MainLayout>
+                item.labels.map((label) => <Badge className={styles.badge} key={label} label={label} title={label} />),
+                { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) }
+              ]}
+              onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
+              renderItemMenu={this.renderItemMenu}
+            />
+          </div>
+          <CatalogAddButton category={this.catalogEntityStore.activeCategory} />
+        </MainLayout>
+      </>
     );
   }
 }

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 {

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -32,6 +32,7 @@
     grid-area: main;
     position: relative;
     display: flex;
+    flex-direction: column;
   }
 
   .HotbarMenu {

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 {

src/renderer/components/layout/sidebar-storage.ts

@@ -29,6 +29,6 @@ export interface SidebarStorageState {
 }
 
 export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
-  width: 200,     // sidebar size in non-compact mode
+  width: 200,
   expanded: {},
 });

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<Props> {
 
     return (
       <div className={cssNames(Sidebar.displayName, "flex column", className)}>
-        <div className="header flex align-center">
-          <NavLink exact to="/" className="box grow">
-            <Icon svg="logo-lens" className="logo-icon"/>
-            <div className="logo-text">Lens</div>
-          </NavLink>
-        </div>
         <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
           <SidebarItem
             id="cluster"

src/renderer/components/layout/tab-layout.scss

@@ -21,18 +21,18 @@
 
 
 .TabLayout {
-  display: contents;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
   > .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;

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);
+}

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<any> {
+  sidebar: ReactNode;
+}
+
+export const TopBar = observer((props: Props) => {
+  const { width } = sidebarStorage.get();
+  const style = { "--sidebar-width": `${width}px` } as React.CSSProperties;
+
+  return (
+    <div className={styles.topBar} style={style}>
+      <div className={styles.sidebar}>{props.sidebar}</div>
+      <div className={styles.contents}>{props.children}</div>
+    </div>
+  );
+});

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;