Drag handles continue. In progress.

Thanks to xet7 !
2025-04-22 04:57:07 -04:00 · 2019-10-01 00:48:36 +03:00 · 2019-10-01 00:48:36 +03:00 · 98c38fe58f
commit 98c38fe58f
parent 44378fe9d1
12 changed files with 88 additions and 32 deletions
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@ -165,7 +165,8 @@ BlazeComponent.extendComponent({
    $checklistsDom.sortable({
      tolerance: 'pointer',
      helper: 'clone',
-      handle: '.checklist-title',
+      //handle: '.checklist-title',
+      handle: '.checklist-item-handle',
      items: '.js-checklist',
      placeholder: 'checklist placeholder',
      distance: 7,
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@ -31,10 +31,12 @@ template(name="checklistDetail")
          h2.title.js-open-inlined-form.is-editable
            +viewer
              = checklist.title
+            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
    +checklistItems(checklist = checklist)

 template(name="checklistDeleteDialog")
@ -75,6 +77,11 @@ template(name="checklistItems")
        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
      else
        +checklistItemDetail(item = item checklist = checklist)
+        if isMiniScreen
+          a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle
+        unless isMiniScreen
+          if showDesktopDragHandles
+            a.checklist-item-handle.handle.fa.fa-arrows.js-checklist-item-handle
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
        +addChecklistItemForm
--- 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:not(.placeholder)',
+    items: '.js-checklist-item-handle:not(.placeholder)',
    connectWith: '.js-checklist-items',
    appendTo: '.board-canvas',
    distance: 7,
-    placeholder: 'checklist-item placeholder',
+    placeholder: 'checklist-item-handle 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').get(0);
+      let prevItem = ui.item.prev('.js-checklist-item-handle').get(0);
      if (prevItem) {
        prevItem = Blaze.getData(prevItem).item;
      }
-      let nextItem = ui.item.next('.js-checklist-item').get(0);
+      let nextItem = ui.item.next('.js-checklist-item-handle').get(0);
      if (nextItem) {
        nextItem = Blaze.getData(nextItem).item;
      }
@ -38,7 +38,7 @@ function initSorting(items) {
  });

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

 BlazeComponent.extendComponent({
@ -197,6 +197,12 @@ BlazeComponent.extendComponent({
  },
 }).register('checklists');

+Template.checklists.helpers({
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
+});
+
 Template.checklistDeleteDialog.onCreated(() => {
  const $cardDetails = this.$('.card-details');
  this.scrollState = {
@ -231,6 +237,9 @@ Template.checklistItemDetail.helpers({
      !Meteor.user().isCommentOnly()
    );
  },
+  showDesktopDragHandles() {
+    return Meteor.user().hasShowDesktopDragHandles();
+  },
 });

 BlazeComponent.extendComponent({
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@ -35,6 +35,14 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
    &.is-finished
      color: #3cb500

+  .checklist-handle
+    position: absolute
+    padding: 7px
+    top: 50%
+    transform: translateY(-50%)
+    left: 100px
+    font-size: 18px
+
  .js-delete-checklist
    @extends .delete-text

@ -70,7 +78,7 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
      margin-left: 12%
      float: left
    .toggle-delete-checklist-dialog
-      margin-right: 12%
+      margin-right: 20%
      float: right

 #card-details-overlay
@ -125,12 +133,19 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
    &.is-checked
      color: #8c8c8c
      font-style: italic
-    & .viewer
+    &.viewer
      p
        margin-bottom: 2px
        display: block
        word-wrap: break-word
        max-width: 420px
+    .checklist-item-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      left: 200px
+      font-size: 18px

 .js-delete-checklist-item
  margin: 0 0 0.5em 1.33em
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@ -52,6 +52,7 @@ BlazeComponent.extendComponent({
    $cards.sortable({
      connectWith: '.js-minicards:not(.js-list-full)',
      tolerance: 'pointer',
+      handle: 'list-header',
      appendTo: '.board-canvas',
      helper(evt, item) {
        const helper = item.clone();
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@ -225,7 +225,7 @@
      padding: 7px
      top: 50%
      transform: translateY(-50%)
-      margin-right: 27px
+      right: 47px
      font-size: 20px

    .list-header-menu-handle
@ -236,6 +236,14 @@
      right: 10px
      font-size: 24px

+    .list-header-menu-handle-miniscreen-angle-left
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      right: 25px
+      font-size: 24px
+
 .link-board-wrapper
  display: flex
  align-items: baseline
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@ -29,9 +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
+          a.list-header-menu-handle-miniscreen-angle-left.handle.fa.fa-arrows.js-list-handle
        else
          a.list-header-menu-icon.fa.fa-angle-right.js-select-list
+          |&nbsp;&nbsp;&nbsp;&nbsp;
          a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle
      else if currentUser.isBoardMember
        if isWatching
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/client/components/swimlanes/swimlaneHeader.jade
@ -16,8 +16,11 @@ 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
+      if isMiniScreen
+        a.swimlane-header-menu-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+      unless isMiniScreen
+        if showDesktopDragHandles
+          a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle

 template(name="editSwimlaneTitleForm")
  .list-composer
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@ -53,22 +53,9 @@ 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,
@ -113,6 +100,22 @@ function initSortable(boardComponent, $listsDom) {
  // is not a board member
  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',
@ -165,7 +168,7 @@ BlazeComponent.extendComponent({
          // his mouse.

          if (Utils.isMiniScreen) {
-            const noDragInside = [
+            noDragInside = [
              'a',
              'input',
              'textarea',
@ -176,7 +179,7 @@ BlazeComponent.extendComponent({
          }

          if (!Utils.isMiniScreen && !showDesktopDragHandles) {
-            const noDragInside = [
+            noDragInside = [
              'a',
              'input',
              'textarea',
@ -186,7 +189,7 @@ BlazeComponent.extendComponent({
          }

          if (!Utils.isMiniScreen && showDesktopDragHandles) {
-            const noDragInside = [
+            noDragInside = [
              'a',
              'input',
              'textarea',
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@ -58,6 +58,14 @@
      left: 300px
      font-size: 18px

+    .swimlane-header-menu-miniscreen-handle
+      position: absolute
+      padding: 7px
+      top: 50%
+      transform: translateY(-50%)
+      left: 487px
+      font-size: 18px
+
 .list-group
  height: 100%

--- a/package-lock.json
+++ b/package-lock.json
@ -25,9 +25,9 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.5.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz",
-      "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.2.tgz",
+      "integrity": "sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==",
      "requires": {
        "regenerator-runtime": "^0.13.2"
      }
--- a/package.json
+++ b/package.json
@ -53,7 +53,7 @@
    "prettier-eslint": "^8.8.2"
  },
  "dependencies": {
-    "@babel/runtime": "^7.5.5",
+    "@babel/runtime": "^7.6.2",
    "ajv": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^3.0.2",