very early frontend wip + small fixes.

2023-01-13 17:24:13 +01:00
parent 842f96d8e3
commit e831c0f342
20 changed files with 5132 additions and 7 deletions
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ColorRGB } from "../models/color";
+
+  export let selected: boolean = false; 
+  export let title: string;
+  export let color: ColorRGB;
+  export let intensity: number;
+
+  let displayTitle: string;
+  $: {
+    if (title.length > 12) {
+      let last = title.split(" ").pop() || title;
+      if (last.length > 4) {
+        last = last.slice(-3);
+      }
+
+      displayTitle = `${(title.split(" ").shift()||"").slice(0, 10 - last.length)}... ${last}`
+    } else {
+      displayTitle = title;
+    }
+  }
+</script>
+
+<div class="lamp" class:selected>
+  <div class="row">
+    <div style="background-color: rgb({color.red*255},{color.green*255},{color.blue*255})" class="roundboi"></div>
+    <div class="title">{displayTitle}</div>
+  </div>
+  <div class="flatboi">
+    <div style="width: {intensity*100}%; background-color: rgb({color.red*255},{color.green*255},{color.blue*255})" class="flatboi2"></div>
+  </div>
+</div>
+
+<style>
+  div.lamp {
+    width: 15ch;
+    height: 2em;
+    margin: 0.25em;
+    background: #18181c;
+    color: #84888f;
+    border-radius: 0.25em;
+    border-top-right-radius: 1em;
+    overflow: hidden;
+  }
+  div.lamp.selected {
+    background: #282833;
+    color: #cde;
+  }
+  div.lamp > div.row {
+    display: flex;
+  }
+  div.lamp > div.row > div.roundboi {
+    width: 1.25em;
+    height: 1.25em;
+    margin-left: 0.25em;
+    margin-top: 0.30em;
+    border-radius: 2em;
+    box-sizing: border-box;
+    border: 0.5px solid #000;
+  }
+  div.lamp > div.row > div.title {
+    font-size: 0.9em;
+    text-align: left;
+    margin-top: 0.4em;
+    margin-left: 0.75ch;
+    margin-right: 1ch;
+    height: 1.6em;
+  }
+  div.lamp > div.flatboi {
+    height: 0.2em;
+    background-color: #040408;
+  }
+  div.lamp > div.flatboi > div.flatboi2 {
+    height: 0.2em;
+  }
+</style>