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.

1 files changed, 21 insertions, 3 deletions

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)