Add color edit button

mishamyrt · Jul 10, 2023 · db784b8 · db784b8
1 parent 15e02b2
commit db784b8
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning][].
 
 ## 1.0.0-beta2
 
+## Added
+
+* Color edit button. Right click on a color still works.
+
 ## Fixed
 
 * Window drag on loading state

diff --git a/app/frontend/src/components/Button.svelte b/app/frontend/src/components/Button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
+  export let label: string = ''
+  export let primary = false
+  export let disabled = false
+  const dispatch = createEventDispatcher()
+
+  function handleClick (): void {
+    dispatch('click')
+  }
+</script>
+
+<button {disabled} on:click={handleClick} class:primary>{label}</button>
+
+<style lang="scss">
+  button {
+    font-size: 13px;
+    border: none;
+    appearance: none;
+    border-radius: 5px;
+    background: #565656;
+    width: 64px;
+    border-top: 0.5px solid rgb(255 255 255 / 22%);
+
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &:active {
+      background: #767676;
+    }
+
+    &.primary {
+      background: linear-gradient(180deg, #3978DE 0%, #336CC5 100%);
+
+      &:active {
+        background: #457AEB;
+      }
+    }
+  }
+</style>
diff --git a/app/frontend/src/components/ColorPickerModal.svelte b/app/frontend/src/components/ColorPickerModal.svelte
@@ -2,6 +2,7 @@
 import { backlightColors, changingColor, state, setBacklightColor } from '@stores/lights'
 import { onMount } from 'svelte'
 import ColorPicker from 'svelte-awesome-color-picker'
+import Button from './Button.svelte'
 
 let visible = false
 
@@ -70,8 +71,8 @@ async function applyColor (): Promise<void> {
     </div>
     </div>
     <div class="actions">
-      <button on:click={hideModal}>Cancel</button>
-      <button on:click={applyColor} class="action-main">Done</button>
+      <Button label="Cancel" on:click={hideModal} />
+      <Button label="Done" primary on:click={applyColor} />
     </div>
   </div>
 </div>
@@ -130,28 +131,6 @@ async function applyColor (): Promise<void> {
     border-top: 1px solid rgb(41 41 41 / 100%);
   }
 
-  button {
-    font-size: 13px;
-    border: none;
-    appearance: none;
-    border-radius: 5px;
-    background: #565656;
-    width: 64px;
-    border-top: 0.5px solid rgb(255 255 255 / 22%);
-
-    &:active {
-      background: #767676;
-    }
-
-    &.action-main {
-      background: linear-gradient(180deg, #3978DE 0%, #336CC5 100%);
-
-      &:active {
-        background: #457AEB;
-      }
-    }
-  }
-
   input {
     width: 100%;
     text-align: center;

diff --git a/app/frontend/src/components/LightParams.svelte b/app/frontend/src/components/LightParams.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import type { Color, LightMode, LightState } from '@stores/lights'
+  import { changingColor, type Color, type LightMode, type LightState } from '@stores/lights'
   import Switch from './Switch.svelte'
   import type { MapStore, ReadableAtom } from 'nanostores'
   import ColorSelector from './ColorSelector.svelte'
   import Range from './Range.svelte'
   import { Select, type SelectOption } from './Select'
+  import Button from './Button.svelte'
 
   export let title: string = ''
   export let state: MapStore<LightState>
@@ -38,6 +39,10 @@
     write()
   }
 
+  function handleColorChange (): void {
+    changingColor.set($state.color)
+  }
+
   $: mode = $modes.filter(i => i.code === $state.mode)[0]
   $: supports = {
     color: (mode?.features & 1) !== 0,
@@ -69,15 +74,25 @@
         options={modeOptions}
         value={$state.mode.toString()} />
     </div>
-    <div class="form-row">
-      <span>Color</span>
-      <ColorSelector
-        {colors}
-        disabled={!$state.enabled || !supports.color}
-        random={supports.random}
-        selected={$state.color}
-        canChange={canChangeColor}
-        on:change={handleColor} />
+    <div class="form-row column">
+      <div class="form-row-inner">
+        <span>Color</span>
+        <ColorSelector
+          {colors}
+          disabled={!$state.enabled || !supports.color}
+          random={supports.random}
+          selected={$state.color}
+          canChange={canChangeColor}
+          on:change={handleColor} />
+      </div>
+      {#if canChangeColor}
+      <div class="form-row-actions">
+        <Button
+          disabled={!$state.enabled || !supports.color || $state.color === 7}
+          on:click={handleColorChange}
+          label='Edit' />
+      </div>
+      {/if}
     </div>
     <div class="form-row">
       <span>Brightness</span>
@@ -97,3 +112,9 @@
     </div>
   </div>
 </div>
+
+<style lang="scss">
+  .form-row-actions {
+    margin-top: 10px;
+  }
+</style>
diff --git a/app/frontend/src/form.scss b/app/frontend/src/form.scss
@@ -23,6 +23,19 @@
     font-size: 13px;
     transition: opacity .25s ease-out;
 
+    &-inner {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &-actions {
+      text-align: right;
+    }
+
+    &.column {
+      flex-direction: column;
+    }
+
     &.disabled > * {
       pointer-events: none;
       opacity: 0.5;