Stub ooout some dummy items in sidebar

commontoolsinc · gordonbrander · Oct 4, 2024 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024
commit 7c17261d6589e141ffa74012889f8ba09c7e0822
diff --git a/typescript/packages/common-os-ui/index.html b/typescript/packages/common-os-ui/index.html
@@ -3,12 +3,27 @@
   <head>
     <meta charset="utf-8" />
     <title></title>
+    <link rel="stylesheet" href="src/static/main.css" />
     <script type="module" src="src/index.ts"></script>
   </head>
   <body>
     <commonos-screen>
       <commonos-main></commonos-main>
-      <commonos-sidebar></commonos-sidebar>
+      <commonos-sidebar>
+        <nav slot="actions">
+          <li>A</li>
+          <li>B</li>
+          <li>C</li>
+        </nav>
+        <common-sidebar-group slot="content">
+          <h1 slot="label">Title</h1>
+          <div slot="content">Content</div>
+        </common-sidebar-group>
+        <common-sidebar-group slot="content">
+          <h1 slot="label">Title</h1>
+          <div slot="content">Content</div>
+        </common-sidebar-group>
+      </commonos-sidebar>
     </commonos-screen>
   </body>
 </html>
diff --git a/typescript/packages/common-os-ui/src/components/commonos-sidebar.ts b/typescript/packages/common-os-ui/src/components/commonos-sidebar.ts
@@ -2,7 +2,7 @@ import { LitElement, css, html } from "lit-element";
 import { customElement } from "lit/decorators.js";
 import { base } from "../shared/styles.js";
 
-@customElement("common-datatable")
+@customElement("commonos-sidebar")
 export class CommonOsSidebar extends LitElement {
   static override styles = [
     base,
@@ -18,14 +18,34 @@ export class CommonOsSidebar extends LitElement {
 
   override render() {
     return html`
-      <header class="toolbar">
-        <div class="toolbar-start">
-          <slot name="toolbar-start"></slot>
-        </div>
-        <div class="toolbar-end">
-          <slot name="toolbar-end"></slot>
-        </div>
-      </header>
+      <commonos-toolbar>
+        <slot name="actions"></slot>
+      </commonos-toolbar>
+      <div>
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+}
+
+@customElement("common-sidebar-group")
+export class CommonOsSidebarGroup extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <aside class="vstack">
+        <div class="label"><slot name="label"></slot></div>
+        <div><slot name="content"></slot></div>
+      </aside>
     `;
   }
 }
diff --git a/typescript/packages/common-os-ui/src/components/commonos-toolbar.ts b/typescript/packages/common-os-ui/src/components/commonos-toolbar.ts
@@ -0,0 +1,65 @@
+import { LitElement, css, html } from "lit-element";
+import { customElement } from "lit/decorators.js";
+import { base } from "../shared/styles.js";
+
+@customElement("commonos-toolbar")
+export class CommonOsToolbar extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host {
+        --u-toolbar-height: calc(var(--u) * 24);
+        display: block;
+      }
+
+      .toolbar {
+        height: var(--u-toolbar-height);
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: "start center end";
+        align-items: center;
+        gap: var(--u-gap);
+      }
+
+      .toolbar-start {
+        grid-area: start;
+        display: flex;
+        gap: var(--u-gap);
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      .toolbar-end {
+        grid-area: end;
+        display: flex;
+        gap: var(--u-gap);
+        align-items: center;
+        justify-content: flex-end;
+      }
+
+      .toolbar-center {
+        grid-area: center;
+        display: flex;
+        gap: var(--u-gap);
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <header class="toolbar">
+        <div class="toolbar-start">
+          <slot name="toolbar-start"></slot>
+        </div>
+        <div class="toolbar-center">
+          <slot name="toolbar-center"></slot>
+        </div>
+        <div class="toolbar-end">
+          <slot name="toolbar-end"></slot>
+        </div>
+      </header>
+    `;
+  }
+}
diff --git a/typescript/packages/common-os-ui/src/index.ts b/typescript/packages/common-os-ui/src/index.ts
@@ -0,0 +1,2 @@
+export * as sidebar from "./components/commonos-sidebar.js";
+export * as toolbar from "./components/commonos-toolbar.js";
diff --git a/typescript/packages/common-os-ui/src/shared/styles.ts b/typescript/packages/common-os-ui/src/shared/styles.ts
@@ -27,6 +27,7 @@ export const base = css`
     --u-xsm-size: calc(var(--u) * 2.75);
     --u-xsm-line: calc(var(--u) * 4);
     --u-pad: calc(var(--u) * 6);
+    --u-gap: calc(var(--u) * 6);
     --bg: #fff;
     --bg-1: #fafafa;
     --bg-2: #f0f0f0;
@@ -40,7 +41,6 @@ export const base = css`
     --font-family: Helvetica, sans-serif;
 
     display: block;
-    background-color: var(--bg);
     color: var(--c-text);
     font-family: var(--font-family);
     font-size: var(--u-body-size);
@@ -95,6 +95,7 @@ export const base = css`
 
   .label {
     color: var(--c-text2);
+    font-weight: normal;
     font-family: var(--font-family);
     font-size: var(--u-xsm-size);
     line-height: var(--u-xsm-line);
@@ -108,33 +109,17 @@ export const base = css`
     color: var(--c-text2);
   }
 
-  .toolbar {
-    --u-toolbar-height: calc(var(--u) * 24);
-    height: var(--u-toolbar-height);
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas: "start center end";
-    align-items: center;
-  }
-
-  .toolbar-start {
-    grid-area: start;
+  .vstack {
     display: flex;
-    align-items: center;
-    justify-content: flex-start;
+    flex-direction: column;
   }
 
-  .toolbar-end {
-    grid-area: end;
+  .hstack {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
+    flex-direction: row;
   }
 
-  .toolbar-center {
-    grid-area: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .gap {
+    gap: var(--u-gap);
   }
 `;
diff --git a/typescript/packages/common-os-ui/src/static/main.css b/typescript/packages/common-os-ui/src/static/main.css
@@ -0,0 +1,9 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  list-style: none;
+}
diff --git a/typescript/packages/common-os-ui/tsconfig.json b/typescript/packages/common-os-ui/tsconfig.json
@@ -5,14 +5,7 @@
     "outDir": "./lib",
     "rootDir": "./src",
     "strict": false,
-    "paths": {
-      "common:module/module@0.0.1": [
-        "../../node_modules/@commontools/module/lib/index.d.ts"
-      ],
-      "common:io/state@0.0.1": [
-        "../../node_modules/@commontools/io/lib/index.d.ts"
-      ]
-    }
+    "paths": {}
   },
   "include": ["src/**/*"]
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * as sidebar from "./components/commonos-sidebar.js";
		export * as toolbar from "./components/commonos-toolbar.js";