wip: colors

webui/src/dialogs/ColorDialog.tsx

@@ -2,13 +2,16 @@ import React, {useCallback, useContext, useState} from "react";
 import {ColorPreset} from "../models/Colors";
 import DialogContext from "../contexts/DialogContext";
 import {DialogType} from "../models/Dialog";
+import {Dialog} from "../primitives/Layout";
+import {LuciferIcon} from "../models/Icons";
+import {HSColorPicker, Input, KelvinColorPicker} from "../primitives/Forms";
 
 interface ColorDialogProps {
   data?: ColorPreset
 }
 
 export default function ColorDialog({data}: ColorDialogProps) {
-  const {setDialog} = useContext(DialogContext);
+  const {setDialog, clearDialog} = useContext(DialogContext);
 
   const [name, setName] = useState(data?.name || "");
   const [hue, setHue] = useState(data?.value?.h || 0);
@@ -19,5 +22,17 @@ export default function ColorDialog({data}: ColorDialogProps) {
     setDialog({type: DialogType.None});
   }, [setDialog]);
 
-
+  return (
+    <Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
+      {icon: LuciferIcon.Check, text: "Lagre"},
+      {icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
+    ]}>
+      <Input label="Navn" value={name} onChange={setName}/>
+      <HSColorPicker h={hue} s={sat} onChange={(h, s) => {
+        setHue(h);
+        setSat(s);
+      }}/>
+      <KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
+    </Dialog>
+  );
 }