Drag handles for checklist #3240

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);

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

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%)

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());

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