From fd41e8ba45f7852563de19285b398b84a331dbb1 Mon Sep 17 00:00:00 2001
From: Martin Filser <github-wekan@linux-email.de>
Date: Wed, 11 Nov 2020 00:10:28 +0100
Subject: [PATCH] Drag handles for checklist #3240

---
 client/components/cards/cardDetails.js  |  5 ++++-
 client/components/cards/checklists.jade |  2 ++
 client/components/cards/checklists.styl |  5 +++++
 client/config/blazeHelpers.js           |  4 ++++
 client/lib/utils.js                     | 17 +++++++++++++++++
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 90cdc14e5..19cda5cf1 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -250,12 +250,15 @@ BlazeComponent.extendComponent({
 
     // Disable sorting if the current user is not a board member
     this.autorun(() => {
-      const disabled = !userIsMember() || Utils.isMiniScreen();
+      const disabled = !userIsMember();
       if (
         $checklistsDom.data('uiSortable') ||
         $checklistsDom.data('sortable')
       ) {
         $checklistsDom.sortable('option', 'disabled', disabled);
+        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+          $checklistsDom.sortable({ handle: '.checklist-handle'});
+        }
       }
       if ($subtasksDom.data('uiSortable') || $subtasksDom.data('sortable')) {
         $subtasksDom.sortable('option', 'disabled', disabled);
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index f14b076b3..bbdcb7a37 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -41,6 +41,8 @@ template(name="checklistDetail")
 
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
+            if isMiniScreenOrShowDesktopDragHandles
+              span.fa.checklist-handle(class="fa-arrows" title="{{_ 'dragChecklist'}}")
             +viewer
               = checklist.title
         else
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index e9b0fcd8d..6b8f764c0 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -42,6 +42,11 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   .js-delete-checklist
     @extends .delete-text
 
+  span.fa.checklist-handle
+    padding-right: 20px
+    padding-top: 6px
+    float: right
+
 
 .js-confirm-checklist-delete
   background-color: darken(white, 3%)
diff --git a/client/config/blazeHelpers.js b/client/config/blazeHelpers.js
index 3a857314d..e651b0f27 100644
--- a/client/config/blazeHelpers.js
+++ b/client/config/blazeHelpers.js
@@ -30,3 +30,7 @@ Blaze.registerHelper('getUser', userId => Users.findOne(userId));
 Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join(''));
 
 Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen());
+
+Blaze.registerHelper('isShowDesktopDragHandles', () => Utils.isShowDesktopDragHandles());
+
+Blaze.registerHelper('isMiniScreenOrShowDesktopDragHandles', () => Utils.isMiniScreenOrShowDesktopDragHandles());
diff --git a/client/lib/utils.js b/client/lib/utils.js
index f2f7b4a05..0baefc129 100644
--- a/client/lib/utils.js
+++ b/client/lib/utils.js
@@ -190,6 +190,23 @@ Utils = {
     //return false;
   },
 
+  // returns if desktop drag handles are enabled
+  isShowDesktopDragHandles() {
+    let currentUser = Meteor.user();
+    if (currentUser) {
+      return (currentUser.profile || {}).showDesktopDragHandles;
+    } else if (cookies.has('showDesktopDragHandles')) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  // returns if mini screen or desktop drag handles
+  isMiniScreenOrShowDesktopDragHandles() {
+    return this.isMiniScreen() || this.isShowDesktopDragHandles()
+  },
+
   calculateIndexData(prevData, nextData, nItems = 1) {
     let base, increment;
     // If we drop the card to an empty column