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

4 files changed, 13 insertions, 25 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index 25c8f6d8..0233231d 100644
--- a/client/components/boards/boardBody.jade
+++ b/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
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 8a1941d6..669b5b4b 100644
--- a/client/components/boards/boardBody.js
+++ b/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
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index b0649f45..dd961bae 100644
--- a/client/components/boards/boardBody.styl
+++ b/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
-    overflow: auto
-    padding-bottom: 5px
+    margin: 0 10px 10px
+    padding: 0 25px 5px 0
+    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
diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index 4773e3bb..ea779e32 100644
--- a/client/components/boards/boardHeader.jade
+++ b/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