Use shoelace

geoblocks · Oct 24, 2024 · 37864a4 · 37864a4
1 parent 4095df4
commit 37864a4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
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,3 @@
+/* FIXME: include reset css */
+
+@import url('@shoelace-style/shoelace/dist/themes/light.css');
diff --git a/src/structure/ngv-structure-app.ts b/src/structure/ngv-structure-app.ts
@@ -7,6 +7,8 @@ import {getLocale} from './helpers/localeHelper.js';
 import './ngv-page.js';
 import './ngv-structure-header.js';
 
+import './index.css';
+
 export interface INgvStructureApp {
   languages: Locale[];
   header: {

diff --git a/src/structure/ngv-structure-header.ts b/src/structure/ngv-structure-header.ts
@@ -4,6 +4,9 @@ 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';
+
 @customElement('ngv-structure-header')
 export class NgvStructureHeader extends LitElement {
   @property({type: Object})
@@ -24,23 +27,24 @@ export class NgvStructureHeader extends LitElement {
       <header>
         <img src="${this.config.header.logo}" />
         <div>
-          <label for="language">Lang:</label>
-          <select
+          <sl-select
             name="language"
             id="language"
-            @change=${async (evt: Event) => {
+            label="Language"
+            size="small"
+            @sl-change=${async (evt: Event) => {
               const el = evt.target as HTMLSelectElement;
               const locale = this.config.languages[el.selectedIndex];
               await setLocale(locale);
             }}
           >
             ${this.config.languages.map(
               (l) =>
-                html`<option value="${l}" ?selected=${l === currentLocale}>
+                html`<sl-option value="${l}" ?selected=${l === currentLocale}>
                   ${l}
-                </option>`,
+                </sl-option>`,
             )}
-          </select>
+          </sl-select>
         </div>
       </header>
     `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/* FIXME: include reset css */

		@import url('@shoelace-style/shoelace/dist/themes/light.css');