Merge branch 'andresmanelli-fixDragInListsView' into devel

CHANGELOG.md

@@ -3,9 +3,14 @@
 This release adds the following new features:
 
 - [Checklist items sort fix, and checklist sort capability](https://github.com/wekan/wekan/pull/1543);
-- [Add Received Date and End Date. Between them is already existing Start and Due Date](https://github.com/wekan/wekan/pull/1550).
+- [Add Received Date and End Date. Between them is already existing Start and Due Date](https://github.com/wekan/wekan/pull/1550);
 
-Thanks to GitHub users andresmanelli and rjevnikar for their contributions.
+and fixes the following bugs:
+
+- [Fix drag in lists view](https://github.com/wekan/wekan/pull/1559/commits/679e50af6449a680f958256570e8b9f1944a3a92);
+- [Set fixed width for swimlane header](https://github.com/wekan/wekan/pull/1559/commits/2e8f8924dd0d985ae4634450cfbef04e88e5d954).
+
+Thanks to GitHub users andresmanelli, rjevnikar and xet7 for their contributions.
 
 # v0.78 2018-03-17 Wekan release
 

client/components/lists/listsGroup.js

@@ -1,13 +0,0 @@
-BlazeComponent.extendComponent({
-  currentCardIsInThisList(listId, swimlaneId) {
-    const currentCard = Cards.findOne(Session.get('currentCard'));
-    const currentBoardId = Session.get('currentBoard');
-    const board = Boards.findOne(currentBoardId);
-    if (board.view === 'board-view-lists')
-      return currentCard && currentCard.listId === listId;
-    else if (board.view === 'board-view-swimlanes')
-      return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
-    else
-      return false;
-  },
-}).register('listsGroup');

client/components/swimlanes/swimlanes.js

@@ -1,5 +1,85 @@
 const { calculateIndex } = Utils;
 
+function currentCardIsInThisList(listId, swimlaneId) {
+  const currentCard = Cards.findOne(Session.get('currentCard'));
+  const currentBoardId = Session.get('currentBoard');
+  const board = Boards.findOne(currentBoardId);
+  if (board.view === 'board-view-lists')
+    return currentCard && currentCard.listId === listId;
+  else if (board.view === 'board-view-swimlanes')
+    return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
+  else
+    return false;
+};
+
+function initSortable(boardComponent, $listsDom) {
+  // We want to animate the card details window closing. We rely on CSS
+  // transition for the actual animation.
+  $listsDom._uihooks = {
+    removeElement(node) {
+      const removeNode = _.once(() => {
+        node.parentNode.removeChild(node);
+      });
+      if ($(node).hasClass('js-card-details')) {
+        $(node).css({
+          flexBasis: 0,
+          padding: 0,
+        });
+        $listsDom.one(CSSEvents.transitionend, removeNode);
+      } else {
+        removeNode();
+      }
+    },
+  };
+
+  $listsDom.sortable({
+    tolerance: 'pointer',
+    helper: 'clone',
+    handle: '.js-list-header',
+    items: '.js-list:not(.js-list-composer)',
+    placeholder: 'list placeholder',
+    distance: 7,
+    start(evt, ui) {
+      ui.placeholder.height(ui.helper.height());
+      EscapeActions.executeUpTo('popup-close');
+      boardComponent.setIsDragging(true);
+    },
+    stop(evt, ui) {
+      // To attribute the new index number, we need to get the DOM element
+      // of the previous and the following card -- if any.
+      const prevListDom = ui.item.prev('.js-list').get(0);
+      const nextListDom = ui.item.next('.js-list').get(0);
+      const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
+
+      $listsDom.sortable('cancel');
+      const listDomElement = ui.item.get(0);
+      const list = Blaze.getData(listDomElement);
+
+      Lists.update(list._id, {
+        $set: {
+          sort: sortIndex.base,
+        },
+      });
+
+      boardComponent.setIsDragging(false);
+    },
+  });
+
+  function userIsMember() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  }
+
+  // Disable drag-dropping while in multi-selection mode, or if the current user
+  // is not a board member
+  boardComponent.autorun(() => {
+    const $listDom = $listsDom;
+    if ($listDom.data('sortable')) {
+      $listsDom.sortable('option', 'disabled',
+        MultiSelection.isActive() || !userIsMember());
+    }
+  });
+};
+
 BlazeComponent.extendComponent({
   onRendered() {
     const boardComponent = this.parentComponent();
@@ -9,71 +89,7 @@ BlazeComponent.extendComponent({
       boardComponent.scrollLeft();
     }
 
-    // We want to animate the card details window closing. We rely on CSS
-    // transition for the actual animation.
-    $listsDom._uihooks = {
-      removeElement(node) {
-        const removeNode = _.once(() => {
-          node.parentNode.removeChild(node);
-        });
-        if ($(node).hasClass('js-card-details')) {
-          $(node).css({
-            flexBasis: 0,
-            padding: 0,
-          });
-          $listsDom.one(CSSEvents.transitionend, removeNode);
-        } else {
-          removeNode();
-        }
-      },
-    };
-
-    $listsDom.sortable({
-      tolerance: 'pointer',
-      helper: 'clone',
-      handle: '.js-list-header',
-      items: '.js-list:not(.js-list-composer)',
-      placeholder: 'list placeholder',
-      distance: 7,
-      start(evt, ui) {
-        ui.placeholder.height(ui.helper.height());
-        EscapeActions.executeUpTo('popup-close');
-        boardComponent.setIsDragging(true);
-      },
-      stop(evt, ui) {
-        // To attribute the new index number, we need to get the DOM element
-        // of the previous and the following card -- if any.
-        const prevListDom = ui.item.prev('.js-list').get(0);
-        const nextListDom = ui.item.next('.js-list').get(0);
-        const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
-
-        $listsDom.sortable('cancel');
-        const listDomElement = ui.item.get(0);
-        const list = Blaze.getData(listDomElement);
-
-        Lists.update(list._id, {
-          $set: {
-            sort: sortIndex.base,
-          },
-        });
-
-        boardComponent.setIsDragging(false);
-      },
-    });
-
-    function userIsMember() {
-      return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
-    }
-
-    // Disable drag-dropping while in multi-selection mode, or if the current user
-    // is not a board member
-    boardComponent.autorun(() => {
-      const $listDom = $listsDom;
-      if ($listDom.data('sortable')) {
-        $listsDom.sortable('option', 'disabled',
-          MultiSelection.isActive() || !userIsMember());
-      }
-    });
+    initSortable(boardComponent, $listsDom);
   },
   onCreated() {
     this.draggingActive = new ReactiveVar(false);
@@ -87,15 +103,7 @@ BlazeComponent.extendComponent({
   },
 
   currentCardIsInThisList(listId, swimlaneId) {
-    const currentCard = Cards.findOne(Session.get('currentCard'));
-    const currentBoardId = Session.get('currentBoard');
-    const board = Boards.findOne(currentBoardId);
-    if (board.view === 'board-view-lists')
-      return currentCard && currentCard.listId === listId;
-    else if (board.view === 'board-view-swimlanes')
-      return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
-    else
-      return false;
+    return currentCardIsInThisList(listId, swimlaneId);
   },
 
   events() {
@@ -210,3 +218,19 @@ Template.swimlane.helpers({
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
 });
+
+BlazeComponent.extendComponent({
+  currentCardIsInThisList(listId, swimlaneId) {
+    return currentCardIsInThisList(listId, swimlaneId);
+  },
+  onRendered() {
+    const boardComponent = this.parentComponent();
+    const $listsDom = this.$('.js-lists');
+
+    if (!Session.get('currentCard')) {
+      boardComponent.scrollLeft();
+    }
+
+    initSortable(boardComponent, $listsDom);
+  },
+}).register('listsGroup');

client/components/swimlanes/swimlanes.styl

@@ -39,7 +39,7 @@
       margin-top: 50px;
       font-weight: bold;
       min-height: 9px;
-      min-width: 30px;
+      width: 50px;
       overflow: hidden;
       -o-text-overflow: ellipsis;
       text-overflow: ellipsis;