Drag handles. In progress.

2025-04-22 04:57:07 -04:00 · 2019-10-03 04:23:33 +03:00 · 2019-10-03 04:23:33 +03:00 · 5bc355f9a5
commit 5bc355f9a5
parent 21fa26a1be
9 changed files with 133 additions and 73 deletions
--- 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',
+      handle: '.js-swimlane-header',
      items: '.swimlane:not(.placeholder)',
      placeholder: 'swimlane placeholder',
      distance: 7,
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@ -165,8 +165,7 @@ BlazeComponent.extendComponent({
    $checklistsDom.sortable({
      tolerance: 'pointer',
      helper: 'clone',
-      //handle: '.checklist-title',
-      handle: '.checklist-item-handle',
+      handle: '.checklist-title',
      items: '.js-checklist',
      placeholder: 'checklist placeholder',
      distance: 7,
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@ -31,12 +31,20 @@ template(name="checklistDetail")
          h2.title.js-open-inlined-form.is-editable
            +viewer
              = checklist.title
+          if isMiniScreen
            a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+          unless isMiniScreen
+            if showDesktopDragHandles
+              a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
        else
          h2.title
            +viewer
                = checklist.title
-            a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+            if isMiniScreen
+              a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
+            unless isMiniScreen
+              if showDesktopDragHandles
+                a.checklist-handle.handle.fa.fa-arrows.js-checklist-handle
    +checklistItems(checklist = checklist)

 template(name="checklistDeleteDialog")
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@ -4,11 +4,11 @@ function initSorting(items) {
  items.sortable({
    tolerance: 'pointer',
    helper: 'clone',
-    items: '.js-checklist-item-handle:not(.placeholder)',
+    items: '.js-checklist-item:not(.placeholder)',
    connectWith: '.js-checklist-items',
    appendTo: '.board-canvas',
    distance: 7,
-    placeholder: 'checklist-item-handle placeholder',
+    placeholder: 'checklist-item placeholder',
    scroll: false,
    start(evt, ui) {
      ui.placeholder.height(ui.helper.height());
@ -17,11 +17,11 @@ function initSorting(items) {
    stop(evt, ui) {
      const parent = ui.item.parents('.js-checklist-items');
      const checklistId = Blaze.getData(parent.get(0)).checklist._id;
-      let prevItem = ui.item.prev('.js-checklist-item-handle').get(0);
+      let prevItem = ui.item.prev('.js-checklist-item').get(0);
      if (prevItem) {
        prevItem = Blaze.getData(prevItem).item;
      }
-      let nextItem = ui.item.next('.js-checklist-item-handle').get(0);
+      let nextItem = ui.item.next('.js-checklist-item').get(0);
      if (nextItem) {
        nextItem = Blaze.getData(nextItem).item;
      }
@ -38,7 +38,8 @@ function initSorting(items) {
  });

  // ugly touch event hotfix
-  enableClickOnTouch('.js-checklist-item-handle:not(.placeholder)');
+  enableClickOnTouch('.js-checklist-item:not(.placeholder)');
+
 }

 BlazeComponent.extendComponent({
@ -60,6 +61,30 @@ BlazeComponent.extendComponent({
      if ($itemsDom.data('sortable')) {
        $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
      }
+      if(Utils.isMiniScreen()) {
+        this.$('.js-checklists').sortable({
+          handle: '.checklist-handle',
+        });
+        this.$('.js-checklist-item').sortable({
+          handle: '.checklist-item-handle',
+        });
+      } else {
+        if (Meteor.user().hasShowDesktopDragHandles()) {
+          this.$('.js-checklists').sortable({
+            handle: '.checklist-handle',
+          });
+          this.$('.js-checklist-item').sortable({
+            handle: '.checklist-item-handle',
+          });
+        } else {
+          this.$('.js-checklists').sortable({
+            handle: '.checklist-title',
+          });
+          this.$('.js-checklist-item').sortable({
+            handle: '.checklist-item',
+          });
+        }
+      }
    });
  },

@ -72,6 +97,12 @@ BlazeComponent.extendComponent({
  },
 }).register('checklistDetail');

+Template.checklistDetail.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 BlazeComponent.extendComponent({
  addChecklist(event) {
    event.preventDefault();
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@ -37,10 +37,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item

  .checklist-handle
    position: absolute
-    padding: 7px
-    top: 50%
+    float: right
+    padding-bottom: 30px
    transform: translateY(-50%)
-    left: 100px
+    left: 400px
    font-size: 18px

  .js-delete-checklist
@ -141,10 +141,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
        max-width: 420px
    .checklist-item-handle
      position: absolute
-      padding: 7px
-      top: 50%
+      float: right
+      padding-bottom: 30px
      transform: translateY(-50%)
-      left: 200px
+      left: 400px
      font-size: 18px

 .js-delete-checklist-item
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@ -3,13 +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 isMiniScreen
+      .handle
+        .fa.fa-arrows
    if cover
      .minicard-cover(style="background-image: url('{{cover.url}}');")
    if labels
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@ -105,12 +105,25 @@
    right: 5px;
    top: 5px;
    display:none;
-    @media only screen {
+    @media only screen and (min-width: 1200px) {
      display:block;
    }
    .fa-arrows
      font-size:20px;
      color: #ccc;
+  //.handle-minicard-desktop
+  //  width: 20px;
+  //  height: 20px;
+  //  position: absolute;
+  //  right: 5px;
+  //  top: 5px;
+  //  display:none;
+  //  @media only screen and (min-width: 1200px) {
+  //    display:block;
+  //  }
+  //  .fa-arrows
+  //    font-size:20px;
+  //    color: #ccc;
  .minicard-title
    p:last-child
      margin-bottom: 0
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@ -31,24 +31,6 @@ BlazeComponent.extendComponent({
    const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
    const $cards = this.$('.js-minicards');

-    if (Utils.isMiniScreen) {
-      $('.js-minicards').sortable({
-        handle: '.handle',
-      });
-    }
-
-    if (!Utils.isMiniScreen && showDesktopDragHandles) {
-      $('.js-minicards').sortable({
-        handle: '.handle',
-      });
-    }
-
-    if (!Utils.isMiniScreen && !showDesktopDragHandles) {
-      $('.js-minicards').sortable({
-        handle: 'list-header',
-      });
-    }
-
    $cards.sortable({
      connectWith: '.js-minicards:not(.js-list-full)',
      tolerance: 'pointer',
@ -138,6 +120,21 @@ BlazeComponent.extendComponent({
    // Disable drag-dropping if the current user is not a board member or is comment only
    this.autorun(() => {
      $cards.sortable('option', 'disabled', !userIsMember());
+      if (Utils.isMiniScreen()) {
+        this.$('.js-minicards').sortable({
+          handle: '.handle',
+        });
+      } else {
+        if (Meteor.user().hasShowDesktopDragHandles()) {
+          this.$('.js-minicards').sortable({
+            handle: '.handle',
+          });
+        } else {
+          this.$('.js-minicards').sortable({
+            handle: '.minicard-title',
+          });
+        }
+      }
    });

    // We want to re-run this function any time a card is added.
@ -180,3 +177,9 @@ Template.miniList.events({
    Session.set('currentList', listId);
  },
 });
+
+Template.miniList.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@ -56,6 +56,7 @@ function initSortable(boardComponent, $listsDom) {
  $listsDom.sortable({
    tolerance: 'pointer',
    helper: 'clone',
+    handle: '.js-list-header',
    items: '.js-list:not(.js-list-composer)',
    placeholder: 'list placeholder',
    distance: 7,
@ -101,16 +102,7 @@ function initSortable(boardComponent, $listsDom) {
  boardComponent.autorun(() => {
    const $listDom = $listsDom;

-    if (Utils.isMiniScreen) {
-      $listsDom.sortable({
-        handle: '.js-list-handle',
-      });
-    }
-    if (!Utils.isMiniScreen && showDesktopDragHandles) {
-      $listsDom.sortable({
-        handle: '.js-list-header',
-      });
-    }
+
    if ($listDom.data('sortable')) {
      $listsDom.sortable(
        'option',
@ -118,6 +110,33 @@ function initSortable(boardComponent, $listsDom) {
        MultiSelection.isActive() || !userIsMember(),
      );
    }
+
+
+    if (Utils.isMiniScreen()) {
+      this.$('.js-lists').sortable({
+        handle: '.list-header-menu-handle',
+      });
+      this.$('.js-swimlanes').sortable({
+        handle: '.swimlane-header-menu-miniscreen-handle',
+      });
+    } else {
+      if (Meteor.user().hasShowDesktopDragHandles()) {
+        this.$('.js-lists').sortable({
+          handle: '.list-header-menu-handle',
+        });
+        this.$('.js-swimlanes').sortable({
+          handle: '.swimlane-header-menu-handle',
+        });
+      } else {
+        this.$('.js-lists').sortable({
+          handle: '.list-header',
+        });
+        this.$('.js-swimlanes').sortable({
+          handle: '.swimlane-header',
+        });
+      }
+    }
+
  });
 }

@ -161,32 +180,13 @@ 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.
-
-          if (Utils.isMiniScreen) {
-            noDragInside = [
-              'a',
-              'input',
-              'textarea',
-              'p',
-              '.js-list-handle',
-              '.js-swimlane-header-handle',
-            ];
-          }
-
-          if (!Utils.isMiniScreen && !showDesktopDragHandles) {
-            noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header'];
-          }
-
-          if (!Utils.isMiniScreen && showDesktopDragHandles) {
-            noDragInside = [
-              'a',
-              'input',
-              'textarea',
-              'p',
-              '.js-list-handle',
-              '.js-swimlane-header-handle',
-            ];
-          }
+          const noDragInside = [
+            'a',
+            'input',
+            'textarea',
+            'p',
+            '.js-list-header',
+          ];

          if (
            $(evt.target).closest(noDragInside.join(',')).length === 0 &&
@ -308,3 +308,9 @@ BlazeComponent.extendComponent({
    initSortable(boardComponent, $listsDom);
  },
 }).register('listsGroup');
+
+Template.listsGroup.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});