refactor: AppDraggable and AppDragIcon

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

src/components/settings/macros/MacroCategorySettings.vue

@@ -55,10 +55,7 @@
       <app-draggable
         v-model="macros"
         :options="{
-          animation: 200,
-          handle: '.handle',
           group: `macro-settings-${category.name}`,
-          ghostClass: 'ghost'
         }"
       >
         <section

src/components/settings/macros/MacroSettings.vue

@@ -28,10 +28,7 @@
       <app-draggable
         v-model="categories"
         :options="{
-          animation: 200,
-          handle: '.handle',
           group: `macro-settings`,
-          ghostClass: 'ghost'
         }"
       >
         <section

src/components/ui/AppColumnPicker.vue

@@ -32,10 +32,7 @@
       <app-draggable
         v-model="configurableHeaders"
         :options="{
-          animation: '200',
-          handle: '.handle',
           group: 'columnPicker',
-          ghostClass: 'ghost',
         }"
       >
         <template v-for="header in configurableHeaders">

src/components/ui/AppDragIcon.vue

@@ -1,27 +1,17 @@
 <template>
   <div class="handle-container">
     <v-icon>
-      {{ icon }}
+      $drag
     </v-icon>
-    <div
-      class="handle"
-      :style="{
-        cursor: cursor
-      }"
-    />
+    <div class="handle" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
 
 @Component({})
 export default class AppDraggable extends Vue {
-  @Prop({ type: String, default: '$drag' })
-  readonly icon?: string
-
-  @Prop({ type: String, default: 'grab' })
-  readonly cursor?: string
 }
 </script>
 
@@ -43,5 +33,10 @@ export default class AppDraggable extends Vue {
     top: calc(50% - 24px);
     margin: 7px;
     border-radius: 50%;
+    cursor: grab;
+  }
+
+  .app-draggable__chosen .handle {
+    cursor: grabbing;
   }
 </style>

src/components/ui/AppDraggable.vue

@@ -122,6 +122,10 @@ export default class AppDraggable extends Vue {
     targetElement[instanceKey] = this
 
     const options: Sortable.Options = {
+      animation: 200,
+      handle: '.handle',
+      ghostClass: 'app-draggable__ghost',
+      chosenClass: 'app-draggable__chosen',
       ...this.options,
       onStart: this.handleStart,
       onAdd: this.handleAdd,

src/components/widgets/job-queue/JobQueueBrowser.vue

@@ -3,10 +3,7 @@
     <app-draggable
       v-model="jobs"
       :options="{
-        animation: '200',
-        handle: '.handle',
         group: 'jobQueue',
-        ghostClass: 'ghost',
       }"
       target="tbody"
     >

src/components/widgets/job-queue/JobQueueCard.vue

@@ -26,7 +26,10 @@
         <app-btn
           v-else-if="queueStatus === 'paused'"
           small
-          class="me-1 my-1"
+          class="my-1"
+          :class="{
+            'me-1': !fullscreen
+          }"
           @click="handleResume"
         >
           <v-icon

src/scss/draggable.scss

@@ -8,7 +8,7 @@
   transition: transform 0s;
 }
 
-.ghost {
+.app-draggable__ghost {
   opacity: 0.5;
   background: #ccc;
 }

src/views/Dashboard.vue

@@ -13,11 +13,8 @@
           v-model="containers[containerIndex]"
           class="list-group"
           :options="{
-            animation: 200,
-            handle: '.handle',
             group: 'dashboard',
             disabled: !inLayout,
-            ghostClass: 'ghost'
           }"
           target=":first-child"
           @end="handleUpdateLayout"

src/views/Diagnostics.vue

@@ -40,11 +40,8 @@
             v-model="containers[containerIndex]"
             class="list-group"
             :options="{
-              animation: 200,
-              handle: '.handle',
               group: 'diagnostics',
               disabled: !inLayout,
-              ghostClass: 'ghost'
             }"
             target=":first-child"
             @end.stop="updateLayout"