diff --git a/webui/src/dialogs/ColorDialog.tsx b/webui/src/dialogs/ColorDialog.tsx
index 33f2c49..9b0f704 100644
--- a/webui/src/dialogs/ColorDialog.tsx
+++ b/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 (
);
}
diff --git a/webui/src/primitives/Forms.sass b/webui/src/primitives/Forms.sass
index 039e750..148f8f1 100644
--- a/webui/src/primitives/Forms.sass
+++ b/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
diff --git a/webui/src/primitives/Forms.tsx b/webui/src/primitives/Forms.tsx
index af3e97a..5c6db78 100644
--- a/webui/src/primitives/Forms.tsx
+++ b/webui/src/primitives/Forms.tsx
@@ -115,7 +115,7 @@ export const KelvinColorPicker: React.FC = ({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 = ({label, kelv
return (
-
+
);
}