Merge branch 'feature-drag-handle'

14 files changed, 127 insertions, 18 deletions

diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 07cd306a..713b6cbc 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -89,7 +89,7 @@ BlazeComponent.extendComponent({
         helper.append(list.clone());
         return helper;
       },
-      handle: '.js-swimlane-header',
+      handle: '.js-swimlane-header-handle',
       items: '.swimlane:not(.placeholder)',
       placeholder: 'swimlane placeholder',
       distance: 7,
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index 3806ce41..a3f32304 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -3,6 +3,13 @@ template(name="minicard")
     class="{{#if isLinkedCard}}linked-card{{/if}}"
     class="{{#if isLinkedBoard}}linked-board{{/if}}"
     class="minicard-{{colorClass}}")
+    if isMiniScreen
+      .handle
+        .fa.fa-arrows
+    unless isMiniScreen
+      if showDesktopDragHandles
+        .handle
+          .fa.fa-arrows
     if cover
       .minicard-cover(style="background-image: url('{{cover.url}}');")
     if labels
@@ -15,8 +22,6 @@ template(name="minicard")
           if hiddenMinicardLabelText
             .minicard-label(class="card-label-{{color}}" title="{{name}}")
     .minicard-title
-      .handle
-        .fa.fa-arrows
       if $eq 'prefix-with-full-path' currentBoard.presentParentTask
         .parent-prefix
           | {{ parentString ' > ' }}
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index 4c25c11d..4c76db46 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -26,6 +26,9 @@ BlazeComponent.extendComponent({
 }).register('minicard');
 
 Template.minicard.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
   hiddenMinicardLabelText() {
     return Meteor.user().hasHiddenMinicardLabelText();
   },
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index c4172572..9997fd5f 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -105,7 +105,7 @@
     right: 5px;
     top: 5px;
     display:none;
-    @media only screen and (max-width: 1199px) {
+    @media only screen {
       display:block;
     }
     .fa-arrows
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index c2b39be9..b7b8b2e0 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -31,7 +31,13 @@ BlazeComponent.extendComponent({
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
 
-    if (window.matchMedia('(max-width: 1199px)').matches) {
+    if (Utils.isMiniScreen) {
+      $('.js-minicards').sortable({
+        handle: '.handle',
+      });
+    }
+
+    if (!Utils.isMiniScreen && showDesktopDragHandles) {
       $('.js-minicards').sortable({
         handle: '.handle',
       });
@@ -155,6 +161,12 @@ BlazeComponent.extendComponent({
   },
 }).register('list');
 
+Template.list.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 Template.miniList.events({
   'click .js-select-list'() {
     const listId = this._id;
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index 81938c1a..459481ea 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -84,17 +84,16 @@
     padding-left: 10px
     color: #a6a6a6
 
-
   .list-header-menu
     position: absolute
     padding: 27px 19px
     margin-top: 1px
     top: -7px
-    right: -7px
+    right: 3px
 
   .list-header-plus-icon
     color: #a6a6a6
-    margin-right: 10px
+    margin-right: 15px
 
   .highlight
     color: #ce1414
@@ -165,7 +164,12 @@
 
 @media screen and (max-width: 800px)
   .list-header-menu
-    margin-right: 30px
+    position: absolute
+    padding: 27px 19px
+    margin-top: 1px
+    top: -7px
+    margin-right: 50px
+    right: -3px
 
   .mini-list
     flex: 0 0 60px
@@ -221,9 +225,17 @@
       padding: 7px
       top: 50%
       transform: translateY(-50%)
-      right: 17px
+      margin-right: 27px
       font-size: 20px
 
+    .list-header-menu-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      right: 10px
+      font-size: 24px
+
 .link-board-wrapper
   display: flex
   align-items: baseline
diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index f930e57a..6a61a66f 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -29,8 +29,10 @@ template(name="listHeader")
               if canSeeAddCard
                 a.js-add-card.fa.fa-plus.list-header-plus-icon
               a.fa.fa-navicon.js-open-list-menu
+          a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
+          a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
       else if currentUser.isBoardMember
         if isWatching
           i.list-header-watch-icon.fa.fa-eye
@@ -39,6 +41,8 @@ template(name="listHeader")
             if canSeeAddCard
               a.js-add-card.fa.fa-plus.list-header-plus-icon
             a.fa.fa-navicon.js-open-list-menu
+          if showDesktopDragHandles
+            a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
 
 template(name="editListTitleForm")
   .list-composer
diff --git a/client/components/lists/listHeader.js b/client/components/lists/listHeader.js
index e8a82499..5b7232cd 100644
--- a/client/components/lists/listHeader.js
+++ b/client/components/lists/listHeader.js
@@ -80,6 +80,12 @@ BlazeComponent.extendComponent({
   },
 }).register('listHeader');
 
+Template.listHeader.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 Template.listActionPopup.helpers({
   isWipLimitEnabled() {
     return Template.currentData().getWipLimit('enabled');
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index 8c6aa5a3..fb6ef21d 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@@ -16,6 +16,8 @@ template(name="swimlaneFixedHeader")
     unless currentUser.isCommentOnly
       a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon
       a.fa.fa-navicon.js-open-swimlane-menu
+      if showDesktopDragHandles
+        a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle
 
 template(name="editSwimlaneTitleForm")
   .list-composer
diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js
index ee21d100..6f8029fd 100644
--- a/client/components/swimlanes/swimlaneHeader.js
+++ b/client/components/swimlanes/swimlaneHeader.js
@@ -28,6 +28,12 @@ BlazeComponent.extendComponent({
   },
 }).register('swimlaneHeader');
 
+Template.swimlaneHeader.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 Template.swimlaneActionPopup.events({
   'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'),
   'click .js-close-swimlane'(event) {
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index e0857003..33a7991e 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -53,10 +53,21 @@ function initSortable(boardComponent, $listsDom) {
     },
   };
 
+  if (Utils.isMiniScreen) {
+    $listsDom.sortable({
+      handle: '.js-list-handle',
+    });
+  }
+
+  if (!Utils.isMiniScreen && showDesktopDragHandles) {
+    $listsDom.sortable({
+      handle: '.js-list-header',
+    });
+  }
+
   $listsDom.sortable({
     tolerance: 'pointer',
     helper: 'clone',
-    handle: '.js-list-header',
     items: '.js-list:not(.js-list-composer)',
     placeholder: 'list placeholder',
     distance: 7,
@@ -151,13 +162,39 @@ BlazeComponent.extendComponent({
           // define a list of elements in which we disable the dragging because
           // the user will legitimately expect to be able to select some text with
           // his mouse.
-          const noDragInside = [
-            'a',
-            'input',
-            'textarea',
-            'p',
-            '.js-list-header',
-          ];
+
+          if (Utils.isMiniScreen) {
+            const noDragInside = [
+              'a',
+              'input',
+              'textarea',
+              'p',
+              '.js-list-handle',
+              '.js-swimlane-header-handle',
+            ];
+          }
+
+          if (!Utils.isMiniScreen && !showDesktopDragHandles) {
+            const noDragInside = [
+              'a',
+              'input',
+              'textarea',
+              'p',
+              '.js-list-header',
+            ];
+          }
+
+          if (!Utils.isMiniScreen && showDesktopDragHandles) {
+            const noDragInside = [
+              'a',
+              'input',
+              'textarea',
+              'p',
+              '.js-list-handle',
+              '.js-swimlane-header-handle',
+            ];
+          }
+
           if (
             $(evt.target).closest(noDragInside.join(',')).length === 0 &&
             this.$('.swimlane').prop('clientHeight') > evt.offsetY
@@ -233,6 +270,9 @@ BlazeComponent.extendComponent({
 }).register('addListForm');
 
 Template.swimlane.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
   canSeeAddList() {
     return (
       Meteor.user() &&
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index 1056e1e3..503091ee 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -50,6 +50,14 @@
       margin-left: 5px
       margin-right: 10px
 
+    .swimlane-header-menu-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      left: 300px
+      font-size: 18px
+
 .list-group
   height: 100%
 
diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade
index 946bdab1..50a80396 100644
--- a/client/components/users/userHeader.jade
+++ b/client/components/users/userHeader.jade
@@ -79,6 +79,11 @@ template(name="changeSettingsPopup")
         if hiddenSystemMessages
           i.fa.fa-check
     li
+      a.js-toggle-desktop-drag-handles
+        | {{_ 'show-desktop-drag-handles'}}
+        if showDesktopDragHandles
+          i.fa.fa-check
+    li
       label.bold
         | {{_ 'show-cards-minimum-count'}}
       input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="0" max="99" onkeydown="return false")
diff --git a/client/components/users/userHeader.js b/client/components/users/userHeader.js
index 36fb2020..194f990f 100644
--- a/client/components/users/userHeader.js
+++ b/client/components/users/userHeader.js
@@ -161,6 +161,9 @@ Template.changeLanguagePopup.events({
 });
 
 Template.changeSettingsPopup.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
   hiddenSystemMessages() {
     return Meteor.user().hasHiddenSystemMessages();
   },
@@ -170,6 +173,9 @@ Template.changeSettingsPopup.helpers({
 });
 
 Template.changeSettingsPopup.events({
+  'click .js-toggle-desktop-drag-handles'() {
+    Meteor.call('toggleDesktopDragHandles');
+  },
   'click .js-toggle-system-messages'() {
     Meteor.call('toggleSystemMessages');
   },