Implement multi-selection

The UI and the internal APIs are still rough around the edges but the
feature is basically working. You can now select multiple cards and
move them together or (un|)assign them a label.

7 files changed, 94 insertions, 20 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index 672a3860..57970c4f 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -8,7 +8,10 @@ template(name="board")
 template(name="boardComponent")
   if this
     .board-wrapper(class=colorClass)
-      .board-canvas(class=sidebarSize)
+      .board-canvas(
+        class=sidebarSize
+        class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
+        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
         .lists.js-lists
           each lists
             +list(this)
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index cf32f764..b5e4154a 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -12,14 +12,16 @@ BlazeComponent.extendComponent({
     return 'boardComponent';
   },
 
+  onCreated: function() {
+    this.draggingActive = new ReactiveVar(false);
+  },
+
   openNewListForm: function() {
     this.componentChildren('addListForm')[0].open();
   },
 
-  showNewCardForms: function(value) {
-    _.each(this.componentChildren('list'), function(listComponent) {
-      listComponent.showNewCardForm(value);
-    });
+  setIsDragging: function(bool) {
+    this.draggingActive.set(bool);
   },
 
   scrollLeft: function(position) {
@@ -79,8 +81,8 @@ BlazeComponent.extendComponent({
       helper: 'clone',
       items: '.js-list:not(.js-list-composer)',
       placeholder: 'list placeholder',
-      start: function(event, ui) {
-        $('.list.placeholder').height(ui.item.height());
+      start: function(evt, ui) {
+        ui.placeholder.height(ui.helper.height());
         Popup.close();
       },
       stop: function() {
@@ -97,6 +99,11 @@ BlazeComponent.extendComponent({
       }
     });
 
+    // Disable drag-dropping while in multi-selection mode
+    self.autorun(function() {
+      self.$(lists).sortable('option', 'disabled', MultiSelection.isActive());
+    });
+
     // If there is no data in the board (ie, no lists) we autofocus the list
     // creation form by clicking on the corresponding element.
     if (self.data().lists().count() === 0) {
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index de4963ab..70d8f3d6 100644
--- a/client/components/boards/boardBody.styl
+++ b/client/components/boards/boardBody.styl
@@ -19,6 +19,11 @@
     &.next-sidebar
       margin-right: 248px
 
+    &.is-dragging-active
+
+      .open-minicard-composer
+        display: none
+
 .lists
   align-items: flex-start
   display: flex
diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index 0ea359fc..f10fcb22 100644
--- a/client/components/boards/boardHeader.jade
+++ b/client/components/boards/boardHeader.jade
@@ -27,15 +27,43 @@ template(name="headerBoard")
           i.fa.fa-times-thin
       else
         span {{_ 'filter'}}
+
+    if currentUser.isBoardMember
+      a.board-header-btn.js-multiselection-activate(
+          title="{{#if MultiSelection.isActive}}{{_ 'filter-on-desc'}}{{/if}}"
+          class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
+        i.fa.fa-check-square-o
+        if MultiSelection.isActive
+          span Multi-Selection is on
+          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+            i.fa.fa-times-thin
+        else
+          span Multi-Selection
+
     .separator
     a.board-header-btn.js-open-board-menu
       i.board-header-btn-icon.fa.fa-cog
 
 template(name="boardMenuPopup")
+  if currentUser.isBoardMember
+    ul.pop-over-list
+      li: a Archived elements
+      li: a.js-change-board-color Change color
+      li: a Permissions
+    hr
   ul.pop-over-list
-    li: a.js-change-board-color Change color
     li: a Copy this board
-    li: a Permissions
+    //-
+      XXX Language should be handled by sandstorm, but for now display a
+      language selection link in the board menu. This link is normally present
+      in the header bar that is not displayed on sandstorm.
+    if isSandstorm
+      li: a.js-change-language {{_ 'language'}}
+  unless isSandstorm
+    if currentUser.isBoardAdmin
+      hr
+      ul.pop-over-list
+        li: a Close Board…
 
 template(name="boardVisibilityList")
   ul.pop-over-list
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
index a78012ca..28238d4c 100644
--- a/client/components/boards/boardHeader.js
+++ b/client/components/boards/boardHeader.js
@@ -1,6 +1,7 @@
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
-  'click .js-change-board-color': Popup.open('boardChangeColor')
+  'click .js-change-board-color': Popup.open('boardChangeColor'),
+  'click .js-change-language': Popup.open('setLanguage')
 });
 
 Template.boardChangeTitlePopup.events({
@@ -24,14 +25,15 @@ BlazeComponent.extendComponent({
   },
 
   isStarred: function() {
-    var boardId = this.currentData()._id;
+    var currentBoard  = this.currentData();
     var user = Meteor.user();
-    return boardId && user && user.hasStarred(boardId);
+    return currentBoard && user && user.hasStarred(currentBoard._id);
   },
 
   // Only show the star counter if the number of star is greater than 2
   showStarCounter: function() {
-    return this.currentData().stars > 2;
+    var currentBoard = this.currentData();
+    return currentBoard && currentBoard.stars > 2;
   },
 
   events: function() {
@@ -49,6 +51,17 @@ BlazeComponent.extendComponent({
         evt.stopPropagation();
         Sidebar.setView();
         Filter.reset();
+      },
+      'click .js-multiselection-activate': function() {
+        var currentCard = Session.get('currentCard');
+        MultiSelection.activate();
+        if (currentCard) {
+          MultiSelection.add(currentCard);
+        }
+      },
+      'click .js-multiselection-reset': function(evt) {
+        evt.stopPropagation();
+        MultiSelection.disable();
       }
     }];
   }
diff --git a/client/components/boards/colors.styl b/client/components/boards/colors.styl
index 2b60dde3..1097b20a 100644
--- a/client/components/boards/colors.styl
+++ b/client/components/boards/colors.styl
@@ -1,6 +1,10 @@
 // We define a set of six board colors that we took from the FlatUI palette.
 // http://flatuicolors.com
-
+//
+// XXX Centralizing all these properties in a single file just because their
+// value is derivedform the same color, doesn't make any sense. We should create
+// a macro that would generate 6 version of a given propertie and dispatch this
+// list in the other stylus files.
 setBoardColor(color)
   &#header,
   &.sk-spinner div,
@@ -8,13 +12,16 @@ setBoardColor(color)
   .board-list & a
     background-color: color
 
-  & .minicard.is-selected .minicard-details
+  .is-selected .minicard
     border-left: 3px solid color
 
-  &.pop-over .pop-over-list li a:hover,
   button[type=submit].primary, input[type=submit].primary
     background-color: darken(color, 20%)
 
+  &.pop-over .pop-over-list li a:hover,
+  .sidebar-list li a:hover
+    background-color: lighten(color, 10%)
+
   &#header #header-quick-access ul li.current
     border-bottom: 2px solid lighten(color, 10%)
 
@@ -28,6 +35,17 @@ setBoardColor(color)
     &:hover .board-header-btn-close
       background: darken(complement(color), 20%)
 
+  .materialCheckBox.is-checked
+    border-bottom: 2px solid color
+    border-right: 2px solid color
+
+  .is-multiselection-active .multi-selection-checkbox
+    &.is-checked + .minicard
+      background: lighten(color, 90%)
+
+    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
+      background: lighten(color, 97%)
+
 .board-color-nephritis
   setBoardColor(#27AE60)
 
diff --git a/client/components/boards/router.js b/client/components/boards/router.js
index 81fc3d91..e5ccecdb 100644
--- a/client/components/boards/router.js
+++ b/client/components/boards/router.js
@@ -19,7 +19,6 @@ Router.route('/boards/:_id/:slug', {
   onAfterAction: function() {
     // XXX We probably shouldn't rely on Session
     Session.set('sidebarIsOpen', true);
-    Session.set('currentWidget', 'home');
     Session.set('menuWidgetIsOpen', false);
   },
   waitOn: function() {
@@ -37,6 +36,7 @@ Router.route('/boards/:_id/:slug', {
 Router.route('/boards/:boardId/:slug/:cardId', {
   name: 'Card',
   template: 'board',
+  noEscapeActions: true,
   onAfterAction: function() {
     Tracker.nonreactive(function() {
       if (! Session.get('currentCard') && Sidebar) {
@@ -57,7 +57,7 @@ Router.route('/boards/:boardId/:slug/:cardId', {
 });
 
 // Close the card details pane by pressing escape
-EscapeActions.register('detailedPane',
-  function() { return ! Session.equals('currentCard', null); },
-  function() { Utils.goBoardId(Session.get('currentBoard')); }
+EscapeActions.register('detailsPane',
+  function() { Utils.goBoardId(Session.get('currentBoard')); },
+  function() { return ! Session.equals('currentCard', null); }
 );