Dashboard: ajustable grid

Signed-off-by: Romein van Buren <romein@vburen.nl>

gui/dashboard/app.css

@@ -1,5 +1,6 @@
 html, body {
   --body-bg: #000;
+  --body-fg: #fff;
   --tile-bg: #181818;
   --grey: grey;
   --red: red;
@@ -9,8 +10,6 @@ html, body {
   --cols: 4;
   --rows: 3;
 
-  background-color: var(--body-bg);
-  color: #fff;
   padding: 0;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -19,6 +18,7 @@ html, body {
 
 .theme-light {
   --body-bg: #fff;
+  --body-fg: #000;
   --tile-bg: #dedede;
   --dark: #c2c2c2;
 }
@@ -56,7 +56,6 @@ label {
 label input,
 label select {
   display: block;
-  width: 100%;
   margin-top: 0.5rem;
   font-size: 1rem;
   font-family: inherit;

gui/dashboard/app.svelte

@@ -3,10 +3,10 @@
   import TileRawValue from './tile-rawvalue.svelte';
   import Settings from './settings.svelte';
   import { flip } from 'svelte/animate';
-  import { shuffle, ringBell } from './lib';
+  import { settings, shuffle, ringBell } from './lib';
 
   const [ send, receive ] = shuffle;
-  const size = 3 * 4 - 1;
+  const size = ($settings.cols || 4) * ($settings.rows || 3) - 1;
   let pageNum = -1;
   let tiles = [];
   let time = '';
@@ -91,7 +91,10 @@
 
 <Settings />
 
-<div class="center">
+<div
+  class="center theme-{$settings.theme}"
+  style="--cols: {$settings.cols || 4}; --rows: {$settings.rows || 3};"
+>
   <div class="ratio">
     <div class="tiles">
       <TileRawValue value={time} center weight={200} />
@@ -116,6 +119,8 @@
     justify-content: center;
     width: 100vw;
     height: 100vh;
+    background-color: var(--body-bg);
+    color: var(--body-fg);
   }
 
   .ratio {

gui/dashboard/lib.js

@@ -3,13 +3,19 @@ import { quintOut } from 'svelte/easing';
 import { crossfade } from 'svelte/transition';
 
 function createSettingsStore() {
-  const s = writable(0);
+  const s = writable({
+    theme: 'dark',
+    cols: 4,
+    rows: 3,
+  });
 
   function updateStorage(val) {
     window.localStorage.setItem('statusdash', JSON.stringify(val));
     s.set(val);
   }
 
+  updateStorage(JSON.parse(window.localStorage.getItem('statusdash')));
+
   return {
     subscribe: s.subscribe,
     set: val => updateStorage(val),

gui/dashboard/modal.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { settings } from './lib';
+
   export let title = '';
   export let open = false;
 
@@ -7,7 +9,7 @@
   }
 </script>
 
-<div class="modal-bg" class:open>
+<div class="modal-bg theme-{$settings.theme}" class:open>
   <div class="modal">
     <div class="header">
       <div class="title">{title}</div>
@@ -47,6 +49,7 @@
     width: 100%;
     max-width: 500px;
     z-index: 11;
+    color: var(--body-fg);
   }
 
   .header {

gui/dashboard/settings.svelte

@@ -1,22 +1,9 @@
 <script>
   import Modal from './modal.svelte';
   import { settings } from './lib';
-  import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
 
   let open = false;
   let showCopyCheck = false;
-  let options = {};
-
-  let theme = 'dark';
-
-  onMount(() => {
-    ({ theme } = get(settings));
-  });
-
-  function fillOptions() {
-    options = { theme };
-  }
 
   function toggle() {
     open = !open;
@@ -24,23 +11,16 @@
 
   function copy() {
     if (typeof navigator.clipboard?.writeText === 'function') {
-      navigator.clipboard.writeText(JSON.stringify(options));
+      navigator.clipboard.writeText(JSON.stringify($settings));
       showCopyCheck = true;
       setTimeout(() => showCopyCheck = false, 2000);
     }
   }
-
-  function change() {
-    fillOptions();
-    settings.set(options);
-  }
 </script>
 
 {#if !open}
   <button class="settings" on:click={toggle}>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262.39 262.39">
+    •
-      <path fill="currentColor" d="M245.63 103.39h-9.91a107.45 107.45 0 0 0-10.96-26.43l7.02-7.02a16.76 16.76 0 0 0 0-23.7l-15.62-15.62a16.76 16.76 0 0 0-23.7 0l-7.02 7.01A107.48 107.48 0 0 0 159 26.68v-9.92C159 7.5 151.5 0 142.24 0h-22.09c-9.26 0-16.76 7.5-16.76 16.76v9.92a107.47 107.47 0 0 0-26.43 10.95l-7.02-7.01a16.76 16.76 0 0 0-23.7 0L30.62 46.24a16.76 16.76 0 0 0 0 23.7l7.01 7.02a107.45 107.45 0 0 0-10.95 26.43h-9.92c-9.25 0-16.76 7.5-16.76 16.76v22.1C0 151.5 7.5 159 16.76 159h9.92a107.5 107.5 0 0 0 10.95 26.43l-7.01 7.01a16.76 16.76 0 0 0 0 23.7l15.62 15.63a16.76 16.76 0 0 0 23.7 0l7.02-7.02a107.44 107.44 0 0 0 26.43 10.96v9.91c0 9.26 7.5 16.77 16.76 16.77h22.1c9.25 0 16.76-7.51 16.76-16.77v-9.91c9.37-2.49 18.24-6.2 26.43-10.96l7.02 7.02a16.76 16.76 0 0 0 23.7 0l15.62-15.62a16.76 16.76 0 0 0 0-23.7l-7.01-7.02A107.48 107.48 0 0 0 235.72 159h9.91c9.26 0 16.76-7.51 16.76-16.77v-22.09c0-9.26-7.5-16.76-16.76-16.76zm-114.43 87.8c-33.08 0-60-26.91-60-60 0-33.08 26.92-60 60-60s60 26.92 60 60c0 33.09-26.92 60-60 60z"/><path d="M131.2 101.2c-16.54 0-30 13.46-30 30s13.46 30 30 30 30-13.46 30-30-13.46-30-30-30z"/>
-    </svg>
   </button>
 {/if}
 
@@ -56,13 +36,23 @@
     </button>
   </div>
 
-  <label for="theme">
+  <label>
     Color theme
-    <select id="theme" bind:value={theme} on:change={change}>
+    <select bind:value={$settings.theme}>
       <option value="dark">Dark</option>
       <option value="light">Light</option>
     </select>
   </label>
+
+  <label>
+    Columns
+    <input type="number" bind:value={$settings.cols} width="10">
+  </label>
+
+  <label>
+    Rows
+    <input type="number" bind:value={$settings.rows} width="10">
+  </label>
 </Modal>
 
 <style>
@@ -71,23 +61,13 @@
     bottom: 0;
     right: 0;
     opacity: 0.4;
-    color: #fff;
+    color: var(--body-fg);
-  }
-
-  button.settings svg {
-    width: 20px;
-    height: 20px;
-    transition: linear 0.4s;
   }
 
   button.settings:hover {
     opacity: 0.9;
   }
 
-  button.settings:hover svg {
-    transform: rotate(90deg);
-  }
-
   button.copy svg {
     fill: var(--green);
     height: 1rem;

gui/dashboard/tile.svelte

@@ -74,6 +74,7 @@
   .tile.green {
     border-color: var(--green);
     background-color: var(--green);
+    color: #fff;
   }
 
   .tile.grey {