wip colors

webui/src/App.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useLayoutEffect} from 'react';
 import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
-import {Dialog, Page, Tabs} from "./primitives/Layout";
+import {Page, Tabs} from "./primitives/Layout";
 import {IconElement} from "./primitives/Elements";
 import SettingsPage from "./pages/SettingsPage";
 import {LuciferIcon} from "./models/Icons";
@@ -10,12 +10,6 @@ import DialogContext, {DialogContextProvider, makeDialog} from "./contexts/Dialo
 const routeObj: HookRouter.RouteObject = {
   "/": () => (
     <Page>
-      <Dialog title="Testdialog" buttons={[
-        {icon: LuciferIcon.Check, text: "Lagre"},
-        {icon: LuciferIcon.Cross, text: "Avbryt"},
-      ]}>
-        Test
-      </Dialog>
       <h1>&nbsp;</h1>
       <h1>Enheter</h1>
     </Page>

webui/src/dialogs/ColorDialog.tsx

@@ -0,0 +1,23 @@
+import React, {useCallback, useContext, useState} from "react";
+import {ColorPreset} from "../models/Colors";
+import DialogContext from "../contexts/DialogContext";
+import {DialogType} from "../models/Dialog";
+
+interface ColorDialogProps {
+  data?: ColorPreset
+}
+
+export default function ColorDialog({data}: ColorDialogProps) {
+  const {setDialog} = useContext(DialogContext);
+
+  const [name, setName] = useState(data?.name || "");
+  const [hue, setHue] = useState(data?.value?.h || 0);
+  const [sat, setSat] = useState(data?.value?.s || 0);
+  const [kelvin, setKelvin] = useState(data?.value?.kelvin || 0);
+
+  const onClose = useCallback(() => {
+    setDialog({type: DialogType.None});
+  }, [setDialog]);
+
+
+}

webui/src/pages/SettingsPage.tsx

@@ -13,7 +13,7 @@ const SettingsPage: React.FC = () => {
     <Page title="Oppsett">
       <h1>Definerte farger</h1>
       {colorPresets.map(cp => (
-        <IconElement key={cp.id} {...cp} caption={cp.name}/>
+        <IconElement key={cp.id} color={cp.value} caption={cp.name}/>
       ))}
       <button>Add</button>
     </Page>

webui/src/primitives/Elements.tsx

@@ -30,13 +30,19 @@ export function IconBlock({icon, color}: IconProps) {
         s.backgroundImage = "linear-gradient(to bottom right, red, yellow, green, blue, violet)";
       } else if (color === "k-gradient") {
         s.backgroundImage = "linear-gradient(to bottom right, #ff9329, #ffd6aa, #fffaf4, #fff, #c9e2ff, #40a3ff)";
-      } else if (color.kelvin !== undefined && color.kelvin > 0) {
+      } else if (color.h !== undefined) {
-        s.color = kelvinToRgbHex(color.kelvin);
+        const hue = color.h;
-      } else {
-        const hue = color.h || 0;
         const sat = Math.floor((color.s || 0) * 100);
 
         s.color = `hsl(${hue}, ${sat}%, 50%)`;
+
+        if (color.kelvin) {
+          s.borderBottom = `1px solid ${kelvinToRgbHex(color.kelvin)}`;
+        }
+      } else if (color.kelvin !== undefined && color.kelvin > 0) {
+        s.color = kelvinToRgbHex(color.kelvin);
+      } else {
+        s.color = "white"
       }
     }
 
@@ -58,7 +64,7 @@ interface IconElementProps extends IconProps {
 export function IconElement({caption, color, icon}: IconElementProps) {
   return (
     <Element>
-      <IconBlock icon={icon} color={color}/>
+      <IconBlock icon={icon} color={color} />
       {caption}
     </Element>
   );

webui/src/primitives/Layout.sass

@@ -66,6 +66,7 @@
   text-align: center
   padding: 0.1em 0
   background-color: $color-background-elevated
+  border-bottom: solid 1px #000
 
 .Dialog-footer
   display: flex
@@ -80,11 +81,11 @@
     color: $color-foreground
     border: none
     cursor: pointer
+    border-bottom: solid 1px #000
 
     &:hover, &:active
       background-color: $color-background-elevated2
       color: $color-foreground-elevated
 
-
     &:not(:last-of-type)
       border-right: solid 1px #000