wip form

webui/src/dialogs/ColorDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useState} from "react";
+import React, {useCallback, useContext, useEffect, useState} from "react";
 import {ColorPreset} from "../models/Colors";
 import DialogContext from "../contexts/DialogContext";
 import {DialogType} from "../models/Dialog";
@@ -10,6 +10,18 @@ interface ColorDialogProps {
   data?: ColorPreset
 }
 
+enum ColorType {
+  HueSat,
+  Kelvin,
+  HueSatKelvin,
+}
+
+const COLOR_TYPE_OPTIONS = [
+  {value: ColorType.HueSat, name: "Bare Nyanse (H) og metning (S)"},
+  {value: ColorType.Kelvin, name: "Bare temperatur (K)"},
+  {value: ColorType.HueSatKelvin, name: "Nyanse (H), metning (K) og kelvin (S)"},
+];
+
 export default function ColorDialog({data}: ColorDialogProps) {
   const {setDialog, clearDialog} = useContext(DialogContext);
 
@@ -18,21 +30,42 @@ export default function ColorDialog({data}: ColorDialogProps) {
   const [sat, setSat] = useState(data?.value?.s || 0);
   const [kelvin, setKelvin] = useState(data?.value?.kelvin || 0);
 
-  const onClose = useCallback(() => {
+  const [colorType, setColorType] = useState(COLOR_TYPE_OPTIONS[0].value);
+  const [isInit, setIsInit] = useState(false);
+
+  const onSave = useCallback(() => {
     setDialog({type: DialogType.None});
   }, [setDialog]);
 
+  useEffect(() => {
+    if (!isInit && data) {
+      const v = data.value;
+
+      if (v.kelvin !== undefined && v.kelvin > 0) {
+        setColorType((v.h || v.s) ? ColorType.HueSatKelvin : ColorType.Kelvin);
+      }
+    }
+
+    if (!isInit) {
+      setIsInit(true);
+    }
+  }, [isInit, data, colorType]);
+
   return (
     <Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
-      {icon: LuciferIcon.Check, text: "Lagre"},
+      {icon: LuciferIcon.Check, text: "Lagre", onClick: onSave},
       {icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
     ]}>
       <Input label="Navn" value={name} onChange={setName}/>
-      <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
+      {colorType !== ColorType.Kelvin && (
-        setHue(h);
+        <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
-        setSat(s);
+          setHue(h);
-      }}/>
+          setSat(s);
-      <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
+        }}/>
+      )}
+      {colorType !== ColorType.HueSat && (
+        <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
+      )}
     </Dialog>
   );
 }

webui/src/primitives/Forms.sass

@@ -1,10 +1,20 @@
 @import "../res/colors"
 
 .FormLine
-  margin: 0.5em 1ch
+  padding: 0.5em 1ch
+  width: 100%
 
   &:first-of-type
     margin-top: 0
 
-  input
+  input, select
     display: block
+    width: 100%
+    font: inherit
+    background-color: $color-background-elevated
+    color: $color-foreground
+    border: none
+    padding: 0.25em 0.5ch
+
+    &:focus, &:active
+      outline: 1px solid $color-foreground-elevated

webui/src/primitives/Forms.tsx

@@ -115,7 +115,7 @@ export const KelvinColorPicker: React.FC<KelvinColorPickerProps> = ({label, kelv
     });
 
     colorPicker.on("input:end", (color: iro.Color) => {
-      onChange(color.kelvin);
+      onChange(Math.floor(color.kelvin));
     });
 
     return () => {
@@ -130,7 +130,7 @@ export const KelvinColorPicker: React.FC<KelvinColorPickerProps> = ({label, kelv
 
   return (
     <FormLine label={label || "KV-farge"}>
-      <div id={myId} style={{margin: "0 auto"}}/>
+      <div title={`${kelvin}K`} id={myId} style={{margin: "0 auto"}}/>
     </FormLine>
   );
 }