feat: more/improved styles, moved settings

src/ui/Widgets/BoolBox/BoolBox.css

@@ -0,0 +1,61 @@
+.bool-box {
+    height: 1.1em;
+    margin: 0.5em;
+    line-height: 1em;
+}
+
+.bool-box-label {
+    display: inline-block;
+    margin-right: 0.5em;
+}
+
+input.bool-box-checkbox[type="checkbox"] {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+    padding: 0;
+    top: 0.1em;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+input.bool-box-checkbox[type="checkbox"]::before {
+    width: 2em;
+    height: 1em;
+    border-radius: 1em;
+    background-color: var(--color-ui-accent-dark);
+    display: inline-block;
+    content: "";
+    z-index: 0;
+    position: absolute;
+    transition: background-color 200ms;
+}
+
+input.bool-box-checkbox[type="checkbox"]:checked::before {
+    background-color: var(--color-ui-accent-light);
+}
+
+input.bool-box-checkbox[type="checkbox"]::after {
+    position: absolute;
+    width: 1.05em;
+    height: 1.05em;
+    border-radius: 1em;
+    border-color: var(--color-ui-neutral-dark);
+    border-width: 0.05em;
+    border-style: solid;
+    background-color: var(--color-ui-neutral-dark);
+    display: block;
+    content: "";
+    top: -0.075em;
+    z-index: 1;
+    left: -0.075em;
+    transition: left 200ms, background-color 200ms;
+}
+
+input.bool-box-checkbox[type="checkbox"]:checked::after {
+    left: 0.925em;
+    background-color: var(--color-ui-neutral-light);
+}

src/ui/Widgets/BoolBox/BoolBoxView.ts

@@ -0,0 +1,59 @@
+import "./BoolBox.css";
+import UINode, {UINodeOptions} from "../../UINode";
+
+export type BoolBoxUINodeOptions = UINodeOptions & {
+    label?: string,
+    value?: boolean,
+    onInput?: (isChecked: boolean) => void,
+};
+
+export default class BoolBoxView extends UINode {
+    private label: string | null;
+    private labelElement!: HTMLLabelElement;
+    private checkboxElement!: HTMLInputElement;
+    private onInput: (isChecked: boolean) => void;
+
+    constructor(options: BoolBoxUINodeOptions) {
+        super(options);
+        this.label = options.label ?? "";
+        this.onInput = options.onInput ?? (() => { /* dummy */ });
+    }
+
+    setLabel(newLabel: string | null): void {
+        if (newLabel !== null) {
+            this.label = newLabel;
+            this.labelElement.innerText = newLabel;
+            this.labelElement.classList.add("visible");
+        } else {
+            this.label = newLabel;
+            this.labelElement.innerText = "";
+            this.labelElement.classList.remove("visible");
+        }
+    }
+
+    setValue(isChecked: boolean): void {
+        this.checkboxElement.checked = isChecked;
+    }
+
+    rebuild(): HTMLDivElement {
+        this.labelElement = UINode.make("label", {
+            classes: ["bool-box-label"],
+            innerText: this.label ?? "",
+        });
+        if (this.label !== null) {
+            this.labelElement.classList.add("visible");
+        }
+        this.checkboxElement = UINode.make("input", {
+            type: "checkbox",
+            classes: ["bool-box-checkbox"],
+            oninput: (event: Event) => this.onInput((event.target as HTMLInputElement).checked),
+        });
+        return UINode.make("div", {
+            classes: ["bool-box"],
+            subs: [
+                this.labelElement,
+                this.checkboxElement,
+            ],
+        });
+    }
+}