From 91cfcf7b12b5e7c137c2e765b2c378dde6b82966 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Fri, 28 Aug 2015 05:11:45 +0200
Subject: 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/cards/cardDetails.js   | 15 +++++++++++----
 client/components/cards/cardDetails.styl |  6 ++----
 client/components/cards/labels.js        |  2 +-
 client/components/cards/minicard.styl    | 26 +++++++++++++++++++-------
 4 files changed, 33 insertions(+), 16 deletions(-)

(limited to 'client/components/cards')

diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 4fa90bf7..82ecde85 100644
--- a/client/components/cards/cardDetails.js
+++ b/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;
       }
     })];
   }
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index 72e8c7c9..9a6736ee 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -7,13 +7,12 @@
   flex-basis: 470px
   will-change: flex-basis
   overflow: hidden
-  background: white
-  border-radius: 3px
+  background: darken(white, 2%)
+  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
diff --git a/client/components/cards/labels.js b/client/components/cards/labels.js
index 731e6367..4e6ceb3a 100644
--- a/client/components/cards/labels.js
+++ b/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];
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index ee454e78..c45c7eb9 100644
--- a/client/components/cards/minicard.styl
+++ b/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
-    color: darken(white, 60%)
+    margin-top: 7px
+    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
-- 
cgit v1.2.3-1-g7c22