[goals] add drag handler to goal card

src/app.scss

@@ -759,6 +759,10 @@ nav.level.grid-2 {
 .sheet-editor .cm-editor {
 }
 
+.preview-editor {
+  min-height: 35px;
+}
+
 .search-query-editor {
   border: 1px solid $grey-lighter;
   border-radius: $radius;

src/lib/components/BoxedTabs.svelte

@@ -9,10 +9,10 @@
   }
 </script>
 
-<div class="du-tabs du-tabs-boxed">
+<div class="du-tabs du-tabs-boxed du-tabs-sm">
   {#each options as option}
     <a
-      class="du-tab du-tab-sm {option.value === value ? 'du-tab-active' : ''}"
+      class="du-tab {option.value === value ? 'du-tab-active' : ''}"
       on:click={() => (value = option.value)}
     >
       {option.label}

src/lib/components/GoalSummaryCard.svelte

@@ -6,9 +6,11 @@
   import Progress from "$lib/components/Progress.svelte";
   import COLORS from "$lib/colors";
   import dayjs from "dayjs";
+  import type { Action } from "svelte/action";
 
   export let goal: GoalSummary;
   export let small = false;
+  export let action: Action = null;
 
   function formatDate(date: string) {
     const d = dayjs(date, "YYYY-MM-DD", true);
@@ -31,12 +33,19 @@
 
 <div class="box p-3 goal-summary-card" class:mb-3={small}>
   <div class="flex justify-between mb-4">
-    <a
-      class="secondary-link has-text-grey"
-      href="/more/goals/{goal.type}/{encodeURIComponent(goal.name)}"
-    >
-      <h4 class="is-size-4 has-text-grey">{goal.name}</h4>
-    </a>
+    <div class="flex">
+      {#if action}
+        <span use:action class="icon is-size-4 mr-1 mt-1 has-text-grey">
+          <i class="fas fa-grip-vertical" />
+        </span>
+      {/if}
+      <a
+        class="secondary-link has-text-grey"
+        href="/more/goals/{goal.type}/{encodeURIComponent(goal.name)}"
+      >
+        <h4 class="is-size-4 has-text-grey">{goal.name}</h4>
+      </a>
+    </div>
     {#if !_.isEmpty(goal.icon)}
       <span class="{small ? 'is-size-3' : 'is-size-2'} custom-icon">{iconGlyph(goal.icon)}</span>
     {/if}

src/routes/(app)/ledger/import/+page.svelte

@@ -251,14 +251,14 @@
             <p class="control">
               <span data-tippy-content="Create" data-tippy-followCursor="false">
                 <button class="button" on:click={(_e) => openTemplateCreateModal()}>
-                  <span class="icon is-small">
+                  <span class="icon">
                     <i class="fas fa-file-circle-plus" />
                   </span>
                 </button>
               </span>
 
               <span
-                class="du-tooltip ml-4"
+                class="ml-4"
                 data-tippy-followCursor="false"
                 data-tippy-content={$templateEditorState.hasUnsavedChanges == false
                   ? "No Unsaved Chagnes"
@@ -270,7 +270,7 @@
                   disabled={$templateEditorState.hasUnsavedChanges == false ||
                     selectedTemplate?.template_type == "builtin"}
                 >
-                  <span class="icon is-small">
+                  <span class="icon">
                     <i class="fas fa-floppy-disk" />
                   </span>
                 </button>
@@ -285,7 +285,7 @@
                   on:click={(_e) => remove()}
                   disabled={selectedTemplate?.template_type == "builtin"}
                 >
-                  <span class="icon is-small">
+                  <span class="icon">
                     <i class="fas fa-trash-can" />
                   </span>
                 </button>
@@ -331,22 +331,24 @@
           <div class="field">
             <div class="control">
               <button
-                title="copy to clipboard"
-                class="button is-small clipboard"
+                data-tippy-followCursor="false"
+                data-tippy-content="Copy to Clipboard"
+                class="button clipboard"
                 disabled={_.isEmpty(preview)}
                 on:click={copyToClipboard}
               >
-                <span class="icon is-small">
-                  <i class="fas fa-clipboard" />
+                <span class="icon">
+                  <i class="fas fa-copy" />
                 </span>
               </button>
               <button
-                title="save"
-                class="button is-small save"
+                data-tippy-followCursor="false"
+                data-tippy-content="Save"
+                class="button save"
                 disabled={_.isEmpty(preview)}
                 on:click={openSaveModal}
               >
-                <span class="icon is-small">
+                <span class="icon">
                   <i class="fas fa-floppy-disk" />
                 </span>
               </button>

src/routes/(app)/more/goals/+page.svelte

@@ -7,16 +7,21 @@
   import _ from "lodash";
   import { onMount } from "svelte";
   import * as toast from "bulma-toast";
+  import { writable } from "svelte/store";
+  import type { Action } from "svelte/action";
 
   let isEmpty = false;
   let config: UserConfig;
   let goals: GoalSummary[] = [];
+  const dragDisabled = writable(true);
 
   function handleConsider(event: CustomEvent<DndEvent<GoalSummary>>) {
     goals = event.detail.items;
   }
 
   async function handleFinalize(event: CustomEvent<DndEvent<GoalSummary>>) {
+    dragDisabled.set(true);
+
     goals = event.detail.items;
     for (let i = 0; i < goals.length; i++) {
       const g = goals[i];
@@ -59,19 +64,63 @@
       isEmpty = true;
     }
   });
+
+  const dragHandle: Action<HTMLElement, {}> = (node: HTMLElement) => {
+    function startDrag(e: Event) {
+      e.preventDefault();
+      dragDisabled.set(false);
+    }
+
+    function stopDrag(_e: KeyboardEvent) {
+      dragDisabled.set(true);
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Enter" || e.key === " ") {
+        dragDisabled.set(false);
+      }
+    }
+
+    dragDisabled.subscribe((disabled) => {
+      node.tabIndex = disabled ? 0 : -1;
+      node.style.cursor = disabled ? "grab" : "grabbing";
+    });
+
+    node.addEventListener("mousedown", startDrag);
+    node.addEventListener("touchstart", startDrag);
+    node.addEventListener("keydown", handleKeyDown);
+    node.addEventListener("mouseup", stopDrag);
+    node.addEventListener("touchend", stopDrag);
+
+    return {
+      update: () => {},
+      destroy: () => {
+        node.removeEventListener("mousedown", startDrag);
+        node.removeEventListener("touchstart", startDrag);
+        node.removeEventListener("keydown", handleKeyDown);
+        node.removeEventListener("mouseup", stopDrag);
+        node.removeEventListener("touchend", stopDrag);
+      }
+    };
+  };
 </script>
 
 <section class="section">
   <div class="container is-fluid">
     <div
       class="columns flex-wrap"
-      use:dndzone={{ items: goals, dropTargetStyle: {}, flipDurationMs: 300 }}
+      use:dndzone={{
+        items: goals,
+        dropTargetStyle: {},
+        flipDurationMs: 300,
+        dragDisabled: $dragDisabled
+      }}
       on:consider={handleConsider}
       on:finalize={handleFinalize}
     >
       {#each goals as goal (goal.id)}
         <div animate:flip={{ duration: 300 }} class="column is-6 is-one-third-widescreen">
-          <GoalSummaryCard {goal} />
+          <GoalSummaryCard action={dragHandle} {goal} />
         </div>
       {/each}
     </div>