feat(ui): make color picker movable

Signed-off-by: Mathis Mensing <[email protected]>

src/components/ui/AppColorPicker.vue

@@ -28,7 +28,15 @@
         $circle
       </v-icon>
     </template>
-    <v-card>
+    <v-card ref="card">
+      <v-card-title
+        v-if="title"
+        class="card-heading mb-2"
+        color="blue"
+        @mousedown="startDrag"
+      >
+        {{ title }}
+      </v-card-title>
       <v-card-text>
         <v-icon
           :color="primaryColor.hexString"
@@ -154,6 +162,7 @@ export default class AppColorPicker extends Vue {
   dot!: boolean
 
   menu = false
+  dragging = false
 
   primaryColor: AppColor = {
     hexString: '#ffffff',
@@ -262,6 +271,33 @@ export default class AppColorPicker extends Vue {
   debouncedChange (channel: string, color: IroColor) {
     this.$emit('change', { channel, color })
   }
+
+  startDrag () {
+    this.dragging = true
+  }
+
+  stopDrag () {
+    this.dragging = false
+  }
+
+  doDrag (event: MouseEvent) {
+    if (this.dragging) {
+      const parent = (this.$refs.card as Vue).$el.parentElement as HTMLElement
+
+      parent.style.left = parseInt(parent.style.left) + event.movementX + 'px'
+      parent.style.top = parseInt(parent.style.top) + event.movementY + 'px'
+    }
+  }
+
+  mounted () {
+    window.addEventListener('mousemove', this.doDrag)
+    window.addEventListener('mouseup', this.stopDrag)
+  }
+
+  beforeUnmount () {
+    window.removeEventListener('mousemove', this.doDrag)
+    window.removeEventListener('mouseup', this.stopDrag)
+  }
 }
 </script>
 

src/components/widgets/outputs/OutputLed.vue

@@ -14,6 +14,7 @@
       <app-color-picker
         :primary="primaryColor"
         :white="whiteColor"
+        :title="led.prettyName"
         dot
         @change="handleColorChange"
       />