Yet another iteration on the user interface

* Automatically display the overlay when the card details is opened
  (previously we waited for the mouse to enter the card details panel)
* Improve the design of the minicards badges
* Change the minicard background when it is hovered or selected
* Removes unimplemented features links from the UI
* Fix the board canvas position when the sidebar is open (was hidden
  behind)

Fixes #215

client/components/activities/activities.styl

@@ -2,7 +2,7 @@
   clear: both
 
   .activity
-    margin: 6px 0
+    margin: 10px 0
     display: flex
 
     .member
@@ -13,6 +13,7 @@
       flex: 1
       align-self: center
       margin: 0
+      margin-left: 3px
 
       .activity-comment
         display: block

client/components/boards/boardBody.jade

@@ -10,8 +10,9 @@ template(name="board")
 
 template(name="boardBody")
   .board-wrapper(class=currentBoard.colorClass)
+    +sidebar
     .board-canvas(
-      class=currentBoard.sidebarSize
+      class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
       class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
       class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
       if showOverlay.get
@@ -23,7 +24,6 @@ template(name="boardBody")
             +cardDetails(currentCard)
         if currentUser.isBoardMember
           +addListForm
-    +sidebar
 
 template(name="addListForm")
   .list.js-list.list-composer.js-list-composer

client/components/boards/boardBody.js

@@ -22,6 +22,9 @@ BlazeComponent.extendComponent({
 
     self._isDragging = false;
     self._lastDragPositionX = 0;
+
+    // Used to set the overlay
+    self.mouseHasEnterCardDetails = false;
   },
 
   openNewListForm: function() {
@@ -57,18 +60,14 @@ BlazeComponent.extendComponent({
     return currentCard && currentCard.listId === listId;
   },
 
-  sidebarSize: function() {
-    var sidebar = this.componentChildren('sidebar')[0];
-    if (sidebar && sidebar.isOpen())
-      return 'next-sidebar';
-  },
-
   events: function() {
     return [{
       // XXX The board-overlay div should probably be moved to the parent
       // component.
       'mouseenter .board-overlay': function() {
-        this.showOverlay.set(false);
+        if (this.mouseHasEnterCardDetails) {
+          this.showOverlay.set(false);
+        }
       },
 
       // Click-and-drag action

client/components/boards/boardBody.styl

@@ -26,11 +26,10 @@ position()
       animation: fadeIn 0.2s
       z-index: 16
 
-    &.next-sidebar
+    &.is-sibling-sidebar-open
       margin-right: 248px
 
     &.is-dragging-active
-
       .open-minicard-composer,
       .minicard-wrapper.is-checked
         display: none
@@ -39,14 +38,8 @@ position()
     align-items: flex-start
     display: flex
     flex-direction: row
-    margin-bottom: 10px
+    margin: 0 10px 10px
-    overflow: auto
+    padding: 0 25px 5px 0
-    padding-bottom: 5px
+    overflow-x: auto
+    overflow-y: hidden
     position: cover
-
-    // In order for the card details pane to overlap the header we need to
-    // virtually increase this container size with the below hack. (Note that it
-    // is not possible to set overflow-x: auto, overflow-y: hidden as I
-    // originally tried).
-    padding-top: 10px
-    top: -10px

client/components/boards/boardHeader.jade

@@ -46,10 +46,6 @@ template(name="boardMenuPopup")
       li: a.js-open-archives Archived elements
       if currentUser.isBoardAdmin
         li: a.js-change-board-color Change color
-        li: a Permissions
-    hr
-  ul.pop-over-list
-    li: a Copy this board
     //-
       XXX Language should be handled by sandstorm, but for now display a
       language selection link in the board menu. This link is normally present

client/components/cards/cardDetails.js

@@ -1,3 +1,7 @@
+// XXX Obviously this shouldn't be a global, but this is currently the only way
+// to share a variable between two files.
+
+
 BlazeComponent.extendComponent({
   template: function() {
     return 'cardDetails';
@@ -17,6 +21,12 @@ BlazeComponent.extendComponent({
     activitiesComponent.loadNextPage();
   },
 
+  onCreated: function() {
+    this.isLoaded = new ReactiveVar(false);
+    this.componentParent().showOverlay.set(true);
+    this.componentParent().mouseHasEnterCardDetails = false;
+  },
+
   onRendered: function() {
     var bodyBoardComponent = this.componentParent();
     var additionalMargin = 550;
@@ -35,10 +45,6 @@ BlazeComponent.extendComponent({
     });
   },
 
-  onCreated: function() {
-    this.isLoaded = new ReactiveVar(false);
-  },
-
   events: function() {
     var events = {
       [CSSEvents.animationend + ' .js-card-details']: function() {
@@ -69,6 +75,7 @@ BlazeComponent.extendComponent({
       'click .js-add-labels': Popup.open('cardLabels'),
       'mouseenter .js-card-details': function() {
         this.componentParent().showOverlay.set(true);
+        this.componentParent().mouseHasEnterCardDetails = true;
       }
     })];
   }

client/components/cards/cardDetails.styl

@@ -7,13 +7,12 @@
   flex-basis: 470px
   will-change: flex-basis
   overflow: hidden
-  background: white
+  background: darken(white, 2%)
-  border-radius: 3px
+  border-radius: bottom 3px
   z-index: 20 !important
   animation: flexGrowIn 0.1s
   box-shadow: 0 0 7px 0 darken(white, 30%)
   transition: flex-basis 0.1s
-  margin-top: -9px
 
   .card-details-canvas
     width: 470px
@@ -21,7 +20,6 @@
   .card-details-header
     margin: 0 -20px 5px
     padding 7px 20px 0
-    background: #F7F7F7
     border-bottom: 1px solid darken(white, 10%)
     min-height: 38px
     position: relative

client/components/cards/labels.js

@@ -37,7 +37,7 @@ Template.createLabelPopup.helpers({
   // is not already used in the board (although it's not a problem if two
   // labels have the same color).
   defaultColor: function() {
-    var labels = this.labels || this.card.board().labels;
+    var labels = Boards.findOne(Session.get('currentBoard')).labels;
     var usedColors = _.pluck(labels, 'color');
     var availableColors = _.difference(labelColors, usedColors);
     return availableColors.length > 1 ? availableColors[0] : labelColors[0];

client/components/cards/minicard.styl

@@ -5,10 +5,6 @@
   align-items: center
   margin-bottom: 9px
 
-  &.draggable-hover-card
-    background-color: #f0f0f0
-    border-bottom-color: #c2c2c2
-
   &.placeholder
     background: darken(white, 20%)
     border-radius: 2px
@@ -53,6 +49,14 @@
     z-index: 25
     box-shadow: -2px 1px 2px rgba(0,0,0,.2)
 
+  &:hover:not(.minicard-composer),
+  .is-selected &,
+  .draggable-hover-card &
+    background: darken(white, 2%)
+
+  .draggable-hover-card &
+    background: darken(white, 4%)
+
   .minicard-cover
     background-position: center
     background-repeat: no-repeat
@@ -79,18 +83,26 @@
 
   .badges
     float: left
-    margin-top: 5px
+    margin-top: 7px
-    color: darken(white, 60%)
+    color: darken(white, 50%)
 
     &:empty
       display: none
 
     .badge
       float: left
-      margin-right: 10px
+      margin-right: 11px
+      margin-bottom: 3px
+      font-size: 0.9em
+
+      .badge-icon,
+      .badge-text
+        vertical-align: top
 
       .badge-text
         font-size: 0.9em
+        padding-left: 2px
+        line-height: 14px
 
   .minicard-members
     float: right

client/components/sidebar/sidebar.js

@@ -102,6 +102,10 @@ BlazeComponent.extendComponent({
   }
 }).register('sidebar');
 
+Blaze.registerHelper('Sidebar', function() {
+  return Sidebar;
+});
+
 EscapeActions.register('sidebarView',
   function() { Sidebar.setView(defaultView); },
   function() { return Sidebar && Sidebar.getView() !== defaultView; }

client/components/sidebar/sidebar.styl

@@ -34,7 +34,7 @@
       display: flex
       flex-direction: column
 
-      li a
+      li > a
         display: flex
         height: 30px
         margin: 0