rough style color picker

rixo · Jul 10, 2020 · b251c3f · b251c3f
1 parent 42b57a4
commit b251c3f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/app/BackgroundSelect.svelte b/src/app/BackgroundSelect.svelte
@@ -3,6 +3,7 @@
 
   export let value
   export let colors
+  export let aliases
 
   const parseColor = x => {
     if (typeof x === 'string') return parseColor({ value: x })
@@ -14,11 +15,26 @@
   }
 
   $: _colors = [{ value: '@none', label: '' }, ...colors].map(parseColor)
+
+  $: selected = _colors.find(x => x.value === value)
+
+  const optionsAliases = {
+    '@none': '#fff',
+  }
+
+  const renderBg = (value, isOptions) => {
+    if (!value) return 'background: #fff'
+    const bg = (isOptions && optionsAliases[value]) || aliases[value] || value
+    return `background: ${bg}`
+  }
 </script>
 
-<select bind:value>
-  {#each _colors as { value, label, dark } (value)}
-    <option {value} class:dark style="background: {value};">{label}</option>
+<select
+  bind:value
+  style={renderBg(selected && selected.value)}
+  class:dark={selected && selected.dark && false}>
+  {#each _colors as { value, label, dark, optionStyle } (value)}
+    <option {value} class:dark style={renderBg(value, true)}>{label}</option>
   {/each}
 </select>
 
@@ -28,6 +44,12 @@
     font-family: monospace;
     color: #333;
   }
+  select {
+    color: transparent;
+    height: 22px;
+    width: 42px;
+    border-color: #c0c0c0;
+  }
   .dark {
     color: #eee;
   }

diff --git a/src/app/Toolbar.svelte b/src/app/Toolbar.svelte
@@ -27,15 +27,17 @@
       <input type="checkbox" bind:checked={$options.outline} />
       <span>Outline</span>
     </label>
-    <label>
-      Canvas
+    <label class="svench-toolbar-select-label">
+      <span>Canvas</span>
       <BackgroundSelect
+        aliases={$options.backgroundAliases}
         colors={$options.canvasBackgrounds}
         bind:value={$options.canvasBackground} />
     </label>
-    <label>
-      Background
+    <label class="svench-toolbar-select-label">
+      <span>Background</span>
       <BackgroundSelect
+        aliases={$options.backgroundAliases}
         colors={$options.backgrounds}
         bind:value={$options.background} />
     </label>

diff --git a/src/themes/default/app/Toolbar.css b/src/themes/default/app/Toolbar.css
@@ -25,6 +25,9 @@
 
   & .svench-toolbar-wrapper > label {
     margin: 0 0.5em;
+    & > span {
+      font-size: 90%;
+    }
   }
 
   & .svench-toolbar-wrapper {
@@ -40,15 +43,22 @@
     }
 
     /* label.svench-toolbar-checkbox { */
-    & label {
+    & label:not(.svench-toolbar-checkbox) {
       display: flex;
       flex-direction: column;
       align-items: center;
-      font-size: 90%;
+    }
+
+    & label.svench-toolbar-checkbox > span {
+      padding-top: 0.1em;
     }
   }
 
-  select {
+  & select {
     line-height: 1;
+    margin: 0;
+    margin-bottom: 4px;
+    padding: 4px 4px 0 0;
+    border-radius: 0;
   }
 }