Use shoelace

geoblocks · Dec 13, 2024 · b3b727e · b3b727e
1 parent 0bb9a4e
commit b3b727e
Show file tree

Hide file tree

Showing 12 changed files with 295 additions and 262 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,10 +42,11 @@
     "prettier": "3.3.3",
     "typescript": "5.6.3",
     "typescript-eslint": "8.15.0",
-    "vite": "5.4.11"
+    "vite": "5.4.11",
+    "vite-plugin-static-copy": "2.0.0"
   },
   "dependencies": {
-    "@shoelace-style/shoelace": "2.18.0",
+    "@shoelace-style/shoelace": "2.19.0",
     "@types/geojson": "^7946.0.14"
   }
 }
diff --git a/src/apps/custom/index.ts b/src/apps/custom/index.ts
@@ -27,7 +27,7 @@ export class NgvAppCustom extends ABaseApp<CustomConfig> {
       return r;
     }
     return html`
-      <ngv-structure-app .config=${this.config}>
+      <ngv-structure-app exportparts="language-chooser" .config=${this.config}>
         <ngv-main-custom .config=${this.config?.app}></ngv-main-custom>
       </ngv-structure-app>
     `;

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/apps/illumination/index.ts b/src/apps/illumination/index.ts
@@ -33,10 +33,11 @@ export class NgvAppIllumination extends ABaseApp<IIlluminationConfig> {
       return r;
     }
     return html`
-      <ngv-structure-app .config=${this.config}>
+      <ngv-structure-app exportparts="language-chooser" .config=${this.config}>
         <ngv-menu-illumination
           .date=${this.initialDate}
           slot="menu"
+          part="menu"
           @change=${(evt: CustomEvent<MenuIlluminationChangeDetail>) => {
             this.date = evt.detail.date;
           }}

diff --git a/src/apps/permits/index.ts b/src/apps/permits/index.ts
@@ -44,11 +44,8 @@ export class NgvAppPermits extends ABaseApp<IPermitsConfig> {
       return r;
     }
     return html`
-      <ngv-structure-app .config=${this.config}>
-        <div
-          slot="menu"
-          style="display: flex; flex-direction: column; row-gap: 10px;"
-        >
+      <ngv-structure-app exportparts="language-chooser" .config=${this.config}>
+        <div part="menu" slot="menu">
           ${this.viewer
             ? html`
                 <ngv-plugin-cesium-model-interact

diff --git a/src/plugins/cesium/ngv-plugin-cesium-widget.ts b/src/plugins/cesium/ngv-plugin-cesium-widget.ts
@@ -30,13 +30,17 @@ export class NgvPluginCesiumWidget extends LitElement {
   static styles = [
     unsafeCSS(style),
     css`
+      :host {
+        display: block;
+      }
+
       #globe {
         width: 100%;
         height: 100%;
       }
 
-      .cesium-widget canvas {
-        position: absolute;
+      .cesium-widget, .cesium-widget-credits {
+        position: initial;
       }
 
       .cesium-credit-logoContainer {

diff --git a/src/structure/index.css b/src/structure/index.css
@@ -0,0 +1,40 @@
+@import url('@shoelace-style/shoelace/dist/themes/light.css');
+
+html {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: var(--sl-font-sans);
+  font-size: var(--sl-font-size-medium);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: var(--sl-line-height-normal);
+  color: var(--sl-color-neutral-900);
+  padding: 0;
+  margin: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+::part(menu) {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px;
+}
+
+::part(language-chooser) {
+  width: 100px;
+}
+
+:root,
+:host,
+.sl-theme-light {
+  --sl-focus-ring-width: 0;
+}
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,11 +4,15 @@ 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 type {IngvSearchContext} from '../interfaces/search/ingv-search-context.js';
 import type {IngvAuthContext} from '../interfaces/auth/ingv-auth-context.js';
 
+import './index.css';
+
 export interface INgvStructureApp {
   languages: Partial<Locale>[];
   authContext?: IngvAuthContext;
@@ -44,9 +48,15 @@ export class NgvStructureApp extends LitElement {
     return html`
       <ngv-page>
         <div slot="header">
-          <ngv-structure-header .config=${this.config}></ngv-structure-header>
+          <ngv-structure-header
+            exportparts="language-chooser"
+            .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
@@ -6,6 +6,10 @@ import {getLocale, setLocale} from './helpers/localeHelper.js';
 import '../plugins/search/ngv-plugin-search.js';
 import '../plugins/auth/ngv-plugin-auth';
 
+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})
@@ -21,7 +25,6 @@ export class NgvStructureHeader extends LitElement {
   `;
 
   render(): HTMLTemplateResult {
-    const currentLocale = getLocale();
     const headerConfig = this.config.header;
     return html`
       <header>
@@ -40,24 +43,21 @@ export class NgvStructureHeader extends LitElement {
             `
           : ''}
 
-        <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);
+        <div part="language-chooser">
+          <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);
             }}
           >
+            <sl-icon name="translate" slot="prefix"></sl-icon>
             ${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: {