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, 57 insertions, 0 deletions

diff --git a/client/components/sidebar/sidebarFilters.jade b/client/components/sidebar/sidebarFilters.jade
new file mode 100644
index 00000000..34b3074f
--- /dev/null
+++ b/client/components/sidebar/sidebarFilters.jade
@@ -0,0 +1,57 @@
+//-
+  XXX There is a *lot* of code duplication in the above templates and in the
+  corresponding JavaScript components. We will probably need the upcoming #let
+  and #each x in y constructors.
+
+template(name="filterSidebar")
+  ul.sidebar-list
+    each currentBoard.labels
+      li
+        a.name.js-toggle-label-filter
+          span.card-label.square(class="card-label-{{color}}")
+          span.sidebar-list-item-description
+            if name
+              = name
+            else
+              span.quiet {{_ "label-default" color}}
+          if Filter.labelIds.isSelected _id
+            i.fa.fa-check
+    hr
+    ul.sidebar-list
+      each currentBoard.members
+        if isActive
+          with getUser userId
+            li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
+              a.name.js-toogle-member-filter
+                +userAvatar(user=this size="small")
+                span.sidebar-list-item-description
+                  = profile.name
+                  | (<span class="username">{{ username }}</span>)
+                if Filter.members.isSelected _id
+                  i.fa.fa-check
+    hr
+    a.js-clear-all(class="{{#unless Filter.isActive}}disabled{{/unless}}")
+      | {{_ 'filter-clear'}}
+
+template(name="multiselectionSidebar")
+  ul.sidebar-list
+    each currentBoard.labels
+      li
+        a.name.js-toggle-label-multiselection
+          span.card-label.square(class="card-label-{{color}}")
+          span.sidebar-list-item-description
+            if name
+              = name
+            else
+              span.quiet {{_ "label-default" color}}
+          if allSelectedElementHave 'label' _id
+            i.fa.fa-check
+          else if someSelectedElementHave 'label' _id
+            i.fa.fa-ellipsis-h
+  //-
+    XXX We should be able to assign a member to the list of selected cards.
+
+template(name="disambiguateMultiLabelPopup")
+  p What do you want to do?
+  button.wide.js-remove-label Remove the label
+  button.wide.js-add-label Add the label