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.

6 files changed, 107 insertions, 90 deletions

diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl
index 68a436f9..6b1a4cd4 100644
--- a/client/components/cards/details.styl
+++ b/client/components/cards/details.styl
@@ -134,33 +134,6 @@
 .card-composer
   padding-bottom: 8px
 
-.cc-controls
-  margin-top: 1px
-
-  input[type="submit"]
-    float: left
-    margin-top: 0
-    padding: 5px 18px
-
-  .icon-lg
-    float: left
-
-  .cc-opt
-    float: right
-
-.minicard-placeholder,
-.minicard.placeholder
-  background: silver
-  border: none
-  min-height: 18px
-
-  .hook
-    height: 18px
-    position: absolute
-    right: 0
-    top: 0
-    width: 18px
-
 input[type="text"].attachment-add-link-input
   float: left
   margin: 0 0 8px
diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl
index 27058b21..9514ce45 100644
--- a/client/components/cards/labels.styl
+++ b/client/components/cards/labels.styl
@@ -19,6 +19,11 @@
   &:hover
     color: white
 
+  &.square
+    height: 30px
+    width: @height
+    padding: 0
+
 .card-label-green
   background-color: #3cb500
 
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index e1176264..ad51ce22 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -1,7 +1,11 @@
 template(name="minicard")
-  .minicard.card.js-minicard(
-    class="{{#if isSelected}}is-selected{{/if}}")
-    a.minicard-details.clearfix.show(href=absoluteUrl)
+  a.minicard-wrapper.js-minicard(href=absoluteUrl
+    class="{{#if isSelected}}is-selected{{/if}}"
+    class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+    if MultiSelection.isActive
+      .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+        class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+    .minicard
       if cover
         .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});")
       if labels
@@ -16,12 +20,12 @@ template(name="minicard")
       .badges
         if comments.count
           .badge(title="{{_ 'card-comments-title' comments.count }}")
-            span.badge-icon.icon-sm.fa.fa-comment-o
+            span.badge-icon.fa.fa-comment-o
             .badge-text= comments.count
         if description
           .badge.badge-state-image-only(title=description)
-            span.badge-icon.icon-sm.fa.fa-align-left
+            span.badge-icon.fa.fa-align-left
         if attachments.count
           .badge
-            span.badge-icon.icon-sm.fa.fa-paperclip
+            span.badge-icon.fa.fa-paperclip
             span.badge-text= attachments.count
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index b339580b..81d8c0d4 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -2,7 +2,6 @@
 //   'click .member': Popup.open('cardMember')
 // });
 
-
 BlazeComponent.extendComponent({
   template: function() {
     return 'minicard';
@@ -10,5 +9,29 @@ BlazeComponent.extendComponent({
 
   isSelected: function() {
     return Session.equals('currentCard', this.currentData()._id);
+  },
+
+  toggleMultiSelection: function(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    MultiSelection.toogle(this.currentData()._id);
+  },
+
+  clickOnMiniCard: function(evt) {
+    if (MultiSelection.isActive() || evt.shiftKey) {
+      evt.stopImmediatePropagation();
+      evt.preventDefault();
+      var methodName = evt.shiftKey ? 'toogleRange' : 'toogle';
+      MultiSelection[methodName](this.currentData()._id);
+    }
+  },
+
+  events: function() {
+    return [{
+      submit: this.addCard,
+      'click .js-toggle-multi-selection': this.toggleMultiSelection,
+      'click .js-minicard': this.clickOnMiniCard,
+      'click .open-minicard-composer': this.scrollToBottom
+    }];
   }
 }).register('minicard');
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 775d31eb..a5110584 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -1,30 +1,57 @@
+.minicard-wrapper
+  cursor: pointer
+  position: relative
+  display: flex
+  align-items: center
+  margin-bottom: 9px
+
+  &.draggable-hover-card
+    background-color: #f0f0f0
+    border-bottom-color: #c2c2c2
+
+  &.placeholder
+    background: darken(white, 20%)
+    border-radius: 2px
+
+  &.ui-sortable-helper
+    transform: rotate(4deg)
+    display: block !important
+
+    .and-n-other
+      width: 100%
+      height: 16px
+      padding: 4px
+      background-color: darken(white, 5%)
+      text-align: center
+      border-radius: 3px
+
+    .multi-selection-checkbox
+      display: none
+
+  .multi-selection-checkbox + .minicard
+    margin-left: 8px
+
 .minicard
+  padding: 6px 8px 2px
+  position: relative
+  flex: 1
+  flex-wrap: wrap
   background-color: #fff
+  min-height: 20px
   box-shadow: 0 1px 2px rgba(0,0,0,.2)
   border-radius: 2px
-  cursor: pointer
-  margin-bottom: 9px
-  min-height: 20px
-  position: relative
-  z-index: 0
+  color: #4d4d4d
   overflow: hidden
   transition: transform 0.2s,
               border-radius 0.2s,
               border-left 0.2s
 
-  a
-    color: #4d4d4d
-
-    &.active-card
-      background-color: #f0f0f0
-      border-bottom-color: #c2c2c2
-
-      .minicard-operation
-        display: block
-
-  &.draggable-hover-card
-    background-color: #f0f0f0
-    border-bottom-color: #c2c2c2
+  .is-selected &
+    transform: translateX(11px)
+    border-bottom-right-radius: 0
+    border-top-right-radius: 0
+    z-index: 100
+    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
 
   .minicard-cover
     background-position: center
@@ -39,21 +66,6 @@
       background-size: auto
       background-position: center
 
-  .minicard-details
-    padding: 6px 8px 2px
-    position: relative
-    // z-index: 1
-
-  &.is-selected
-    transform: translateX(11px)
-    border-bottom-right-radius: 0
-    border-top-right-radius: 0
-    z-index: 100
-    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
-
-  a.minicard-details
-    text-decoration:none
-
   .minicard-details-overlay
     background: transparent
     bottom: 0
@@ -121,23 +133,24 @@
   .minicard-members:empty
     display: none
 
-  &.ui-sortable-helper
-    transform: rotate(4deg)
-
-.badges
-  float: left
-
-  &:empty
-    display: none
-
-textarea.minicard-composer-textarea,
-textarea.minicard-composer-textarea:focus
-  background: none
-  border: none
-  box-shadow: none
-  height: auto
-  margin-bottom: 4px
-  padding: 0
-  max-height: 162px
-  min-height: 54px
-  overflow-y: auto
+  .badges
+    float: left
+
+    &:empty
+      display: none
+
+  &.minicard-composer
+    margin-bottom: 10px
+
+    textarea.minicard-composer-textarea,
+    textarea.minicard-composer-textarea:focus
+      resize: none
+      background: none
+      border: none
+      box-shadow: none
+      height: auto
+      margin: 0
+      padding: 0
+      max-height: 162px
+      min-height: 54px
+      overflow-y: auto
diff --git a/client/components/cards/popups.jade b/client/components/cards/popups.jade
index 0b5aa4c0..0d10c147 100644
--- a/client/components/cards/popups.jade
+++ b/client/components/cards/popups.jade
@@ -1,8 +1,7 @@
 template(name="cardMembersPopup")
-  //- input.js-search-mem(autofocus placeholder="Search members…" type="text")
-  ul.pop-over-member-list.checkable.js-mem-list
+  ul.pop-over-member-list.js-mem-list
     each board.members
-      li.item.js-member-item(class="{{#if isCardMember}}active{{/if}}")
+      li.item(class="{{#if isCardMember}}active{{/if}}")
         a.name.js-select-member(href="#")
           +userAvatar(user=user size="small")
           span.full-name