Add FieldCheckbox field type

webview/src/FieldTypes/checkbox.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { FieldBase } from './base';
+
+interface Props {
+    optional?: false;
+}
+export class FieldCheckbox extends FieldBase<boolean, Props> {
+    protected getClassName() {
+        return super.getClassName() + ' FieldCheckbox';
+    }
+    public renderInput() {
+        const { description } = this.props;
+        return <>
+            <div className={`checkbox ${this.getValue() ? 'checked' : ''}`} onClick={this.onClick} />
+            {description && <div className="description">{this.props.description}</div>}
+        </>;
+    }
+    public getError() {
+        const { newValue } = this.state;
+        const { validator, optional } = this.props;
+        if (newValue === undefined) {
+            if (optional) return null;
+            return 'No value given';
+        } else if (typeof newValue !== 'boolean') {
+            return 'Not a boolean';
+        }
+        return validator ? validator(newValue!) : null;
+    }
+    public getValue(): boolean | undefined {
+        const { newValue, oldValue } = this.state;
+        if (newValue === undefined) {
+            return this.props.optional ? newValue : oldValue;
+        }
+        return newValue;
+    }
+    public onChange = (newValue?: boolean) => {
+        this.setState({ newValue }, () => this.props.onChange(newValue));
+    }
+    public onClick = () => this.onChange(!this.getValue());
+}

webview/src/FieldTypes/index.css

@@ -24,6 +24,11 @@ div.Field > div.error {
     margin: 5px 0 -5px 0;
 }
 
+div.Field p.warning {
+    color: var(--vscode-editorWarning-foreground);
+    margin: 5px 0 -5px 0;
+}
+
 div.Field > div.value {
     margin-top: 9px;
     min-width: 200px;
@@ -136,3 +141,36 @@ div.FieldPath > button {
     border: none;
     border-left: 1px solid var(--vscode-settings-dropdownBorder);
 }
+
+div.FieldCheckbox > .description {
+    display: none;
+}
+
+div.FieldCheckbox > div.value {
+    --checkbox-size: 23px;
+    max-width: none;
+    min-height: var(--checkbox-size);
+}
+
+div.FieldCheckbox > .value > .description {
+    opacity: 0.75;
+    margin-left: calc(var(--checkbox-size) + 10px);
+}
+
+div.FieldCheckbox > .value > .checkbox { 
+    float: left;
+    height: var(--checkbox-size);
+    width: var(--checkbox-size);
+    font-size: var(--checkbox-size);
+    line-height: var(--checkbox-size);
+    background: var(--vscode-settings-checkboxBackground);
+    color: var(--vscode-settings-checkboxForeground);
+    border: 1px solid var(--vscode-settings-checkboxBorder);
+}
+
+div.FieldCheckbox > .value > .checkbox.checked::before {
+    content: '\2713';
+    width: var(--checkbox-size);
+    display: block;
+    text-align: center;
+}