Use shoelace

geoblocks · Oct 31, 2024 · ad7cc8a · ad7cc8a
1 parent 4095df4
commit ad7cc8a
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,8 @@
     "prettier": "3.3.3",
     "typescript": "^5.5.4",
     "typescript-eslint": "8.4.0",
-    "vite": "5.4.3"
+    "vite": "5.4.3",
+    "vite-plugin-static-copy": "2.0.0"
   },
   "dependencies": {
     "@shoelace-style/shoelace": "2.17.1"

diff --git a/src/apps/illumination/index.html b/src/apps/illumination/index.html
@@ -6,22 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Revolutionary illumination / solar app</title>
     <!-- <link rel="stylesheet" href="./src/index.css" /> -->
-    <script type="module" src="./index.ts"></script>
 
-    <style>
-      /* FIXME: move to default style */
-      html {
-        box-sizing: border-box;
-      }
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-      body {
-        margin: 0;
-      }
-    </style>
+    <script type="module" src="./index.ts"></script>
   </head>
   <body>
     <noscript>Enable JS!</noscript>

diff --git a/src/structure/index.css b/src/structure/index.css
@@ -0,0 +1,8 @@
+/* FIXME: include reset css */
+
+@import url('@shoelace-style/shoelace/dist/themes/light.css');
+
+ngv-page::part(divider) {
+    background-color: #fff;
+    font-size: 1.25rem;
+}
diff --git a/src/structure/ngv-page.ts b/src/structure/ngv-page.ts
@@ -100,19 +100,12 @@ export class NgvPage extends LitElement {
       grid-area: footer;
     }
 
-    /* FIXME: outside of this component */
     .divider {
       position: absolute;
       z-index: 1;
       top: 30px;
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background-color: red;
-      cursor: pointer;
     }
 
-    /* FIXME: outside of this component */
     sl-split-panel {
       --divider-width: 2px;
       --max: 300px;
@@ -149,7 +142,9 @@ export class NgvPage extends LitElement {
             class="divider"
             slot="divider"
             @click=${() => this.dividerClick()}
-          ></div>
+          >
+            <slot name="divider"></slot>
+          </div>
           <div class="main" slot="end">
             <div class="main-header">
               <slot name="main-header"></slot>

diff --git a/src/structure/ngv-structure-app.ts b/src/structure/ngv-structure-app.ts
@@ -4,9 +4,13 @@ import {customElement, property} from 'lit/decorators.js';
 import type {Locale} from './helpers/localeHelper.js';
 import {getLocale} from './helpers/localeHelper.js';
 
+import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
+
 import './ngv-page.js';
 import './ngv-structure-header.js';
 
+import './index.css';
+
 export interface INgvStructureApp {
   languages: Locale[];
   header: {
@@ -43,6 +47,9 @@ export class NgvStructureApp extends LitElement {
           <ngv-structure-header .config=${this.config}></ngv-structure-header>
         </div>
         <div slot="menu"><slot name="menu"></slot></div>
+        <div slot="divider">
+          <sl-icon-button name="arrow-left-circle"></sl-icon-button>
+        </div>
         <!-- <div slot="main-header">main-header</div> -->
         <div slot="main-content" style="height: 100%"><slot></slot></div>
         <div slot="main-footer">

diff --git a/src/structure/ngv-structure-header.ts b/src/structure/ngv-structure-header.ts
@@ -4,6 +4,10 @@ import {customElement, property} from 'lit/decorators.js';
 import type {INgvStructureApp} from './ngv-structure-app.js';
 import {getLocale, setLocale} from './helpers/localeHelper.js';
 
+import '@shoelace-style/shoelace/dist/components/select/select.js';
+import '@shoelace-style/shoelace/dist/components/option/option.js';
+import type SlSelect from '@shoelace-style/shoelace/dist/components/select/select.js';
+
 @customElement('ngv-structure-header')
 export class NgvStructureHeader extends LitElement {
   @property({type: Object})
@@ -19,28 +23,23 @@ export class NgvStructureHeader extends LitElement {
   `;
 
   render(): HTMLTemplateResult {
-    const currentLocale = getLocale();
     return html`
       <header>
         <img src="${this.config.header.logo}" />
         <div>
-          <label for="language">Lang:</label>
-          <select
-            name="language"
-            id="language"
-            @change=${async (evt: Event) => {
-              const el = evt.target as HTMLSelectElement;
-              const locale = this.config.languages[el.selectedIndex];
-              await setLocale(locale);
+          <sl-select
+            label="Language"
+            size="small"
+            value="${getLocale()}"
+            @sl-change=${async (evt: Event) => {
+              const el = evt.target as SlSelect;
+              await setLocale(el.value as string);
             }}
           >
             ${this.config.languages.map(
-              (l) =>
-                html`<option value="${l}" ?selected=${l === currentLocale}>
-                  ${l}
-                </option>`,
+              (l) => html`<sl-option value="${l}">${l}</sl-option>`,
             )}
-          </select>
+          </sl-select>
         </div>
       </header>
     `;

diff --git a/vite.config.js b/vite.config.js
@@ -1,5 +1,6 @@
 import {resolve} from 'path';
 import {defineConfig} from 'vite';
+import {viteStaticCopy} from 'vite-plugin-static-copy';
 
 const __dirname = import.meta.dirname;
 
@@ -8,7 +9,16 @@ export default defineConfig({
     strictPort: true,
     port: 1234,
   },
-
+  plugins: [
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'node_modules/@shoelace-style/shoelace/dist/assets/icons',
+          dest: 'assets',
+        },
+      ],
+    }),
+  ],
   build: {
     assetsDir: 'vassets',
     rollupOptions: {