better color chooser

packages/web/src/forms/ColorSelector.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { presetPrimaryColors } from '@ant-design/colors';
+  import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
+  import { currentThemeDefinition } from '../stores';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let value;
+
+  function colorValue(color, colorIndex, themeDef) {
+    const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+    return palettes[color][colorIndex];
+  }
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="container">
+  <div
+    class="item"
+    class:selected={!value}
+    on:click={() => {
+      dispatch('change', null);
+    }}
+  >
+    <FontIcon icon={value ? 'icon palette' : 'icon no-color'} />
+  </div>
+  {#each _.keys(presetPrimaryColors) as color}
+    <div
+      style={`background:${colorValue(color, 3, $currentThemeDefinition)}`}
+      class="item"
+      class:selected={color == value}
+      on:click={() => {
+        dispatch('change', color);
+      }}
+    >
+      <FontIcon icon={color == value ? 'icon check' : 'icon invisible-box'} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-content: stretch;
+    height: 38px;
+  }
+
+  .item {
+    flex-grow: 1;
+    margin: 3px;
+    border: 1px solid var(--theme-border);
+    border-radius: 4px;
+    font-size: 12pt;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .item:hover {
+    border: 1px solid var(--theme-font-2);
+  }
+
+  .item.selected {
+    border: 2px solid var(--theme-font-1);
+    margin: 2px;
+  }
+</style>

packages/web/src/forms/FormColorField.svelte

@@ -1,17 +1,40 @@
 <script lang="ts">
   import _ from 'lodash';
 
-  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormSelectField from './FormSelectField.svelte';
+  import ColorSelector from './ColorSelector.svelte';
   import { presetPrimaryColors } from '@ant-design/colors';
+  import { getFormContext } from './FormProviderCore.svelte';
 
   export let emptyLabel;
+  export let useSelector = false;
+  export let templateProps = {};
+
+  export let label;
+  export let name;
+
+  const { template } = getFormContext();
+  const { values, setFieldValue } = getFormContext();
 </script>
 
+{#if useSelector}
+  <svelte:component this={template} type="text" {label} {...templateProps}>
+    <ColorSelector
+      value={$values && $values[name]}
+      on:change={e => {
+        setFieldValue(name, e.detail);
+      }}
+    />
+  </svelte:component>
+{:else}
   <FormSelectField
     isNative
     {...$$restProps}
+    {label}
+    {name}
     options={[
       { value: '', label: emptyLabel },
       ..._.keys(presetPrimaryColors).map(color => ({ value: color, label: _.startCase(color) })),
     ]}
   />
+{/if}

packages/web/src/icons/FontIcon.svelte

@@ -68,6 +68,7 @@
     'icon theme': 'mdi mdi-brightness-6',
     'icon error': 'mdi mdi-close-circle',
     'icon ok': 'mdi mdi-check-circle',
+    'icon check': 'mdi mdi-check',
     'icon markdown': 'mdi mdi-application',
     'icon preview': 'mdi mdi-file-find',
     'icon eye': 'mdi mdi-eye',
@@ -91,6 +92,8 @@
     'icon swap': 'mdi mdi-swap-horizontal-bold',
     'icon deploy': 'mdi mdi-content-save-move',
     'icon compare': 'mdi mdi-compare',
+    'icon no-color': 'mdi mdi-format-color-marker-cancel',
+    'icon palette': 'mdi mdi-palette',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
     'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -150,6 +150,7 @@
   </div>
   <div class="col-6 mr-1">
     <FormColorField
+      useSelector
       label="Color"
       name="connectionColor"
       emptyLabel="(not selected)"