UI improvements

* Implement visibility choice on board creation;

* Rework the board header bar. Remove links to un-implemented
features;

* Implement a board star counter (visible if the board have >2 stars);

* Define a new icon (a thin cross) to close elements;

* Remove $(document).on('mouseover') event handlers that were
basically fired hundreds of times for nothing, we now define a proper
Tracker dependency to execute jquery-ui plugin initialization only
when something has changed;

* Bug fixes related to list scrolling.

4 files changed, 97 insertions, 297 deletions

diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index 1177d930..248e2851 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -1,7 +1,5 @@
 @import 'nib'
 
-global-reset()
-
 #header
   color: white
   transition: background-color 0.4s
@@ -9,15 +7,16 @@ global-reset()
 
   #header-quick-access
     background-color: rgba(0, 0, 0, 0.2)
-    padding: 4px 10px
-    height: 16px
+    padding: 0px 10px
+    height: 28px
     font-size: 12px
     display: flex
 
-    ul li, #header-user-bar
+    #header-user-bar
+    ul li
       color: darken(white, 17%)
 
-      a
+      a, .fa
         color: inherit
         text-decoration: none
 
@@ -27,240 +26,101 @@ global-reset()
     ul
       flex: 1
       transition: opacity 0.2s
-      margin-left: 5px
+      margin: 4px 0 0 5px
 
       li
         display: block
         float: left
         width: auto
         color: darken(white, 15%)
-        padding: 0 4px 1px 4px
-
-        &.separator
-          padding: 0 2px 1px 2px
+        padding: 2px 5px 0
 
         &.current
-          font-style: italic
+          color: darken(white, 5%)
 
         &:first-child .fa-home
           margin-right: 5px
 
-  #header-main-bar
-    height: 30px
-    padding: 8px
-
-    h1
-      font-size: 19px
-      line-height: 1.7em
-      margin: 0 20px 0 10px
-      float: left
-
-      &.header-board-menu
-        cursor: pointer
-
-        .fa-angle-down
-          font-size: 0.8em
-          // line-height: 1.1em
+        a.js-create-board
           margin-left: 5px
 
-    .board-header-starred .fa
-      color: yellow
-
-    .board-header-members
-      float: right
+    #header-user-bar
+      margin: 2px 0
 
       .member
-        display: block
-        width: 32px
+        width: 24px
         height: @width
+        float: left
+        margin: 0
+        margin-top: 1px
 
-      .add-board-member
-        color: white
-        display: flex
-        align-items: center
-        justify-content: center
-        border: 1px solid white
-        height: 32px - 2px
-        width: @height
-
-        i.fa-plus
-          margin-top: 2px
-
-      .header-btn:last-child
-        margin-right: 0
-
-
-
-// #header {
-//     background: #138871;
-//     height: 30px;
-//     overflow: hidden;
-//     padding: 5px;
-//     position: relative;
-//     z-index: 10;
-// }
-
-// .header-logo {
-//     bottom: 0;
-//     display: block;
-//     height: 25px;
-//     left: 50%;
-//     position: absolute;
-//     top: 8px;
-//     width: 80px;
-//     margin-left: - @width/2;
-//     text-align: center;
-//     z-index: 2;
-//     opacity: .5;
-//     transition: opacity ease-in 85ms;
-//     color: white;
-//     font-size: 22px;
-//     text-decoration: none;
-//     background-image: url('/logos/white_logo.png');
-
-//     &:hover {
-//         opacity: .8;
-//         color: white;
-//     }
-// }
-
-// .header-btn.header-btn-feedback {
-//     background: rgba(255, 255, 255, .1);
-//     background: linear-gradient(to bottom, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .05) 100%);
-//     padding-left: 22px;
-//     margin-right: 16px;
-
-//     .header-btn-icon {
-//         top: 1px;
-//     }
-// }
-
-.header-btn {
-    border-radius: 3px;
-    user-select: none;
-    background: rgba(255, 255, 255, .3);
-    background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .2) 100%);
-    color: #f3f3f3;
-    display: block;
-    float: left;
-    font-weight: 700;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    position: relative;
-    margin-right: 8px;
-    min-width: 30px;
-    text-decoration: none;
-    cursor: pointer;
-
-    .header-btn-icon {
-        font-size: 16px;
-        line-height: 28px;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    &.new-notifications {
-        background: #ba1212;
-
-        &:hover {
-            background: #d11515;
-        }
-    }
-
-    &.header-member .member {
-        margin: 0;
-        border-top-left-radius: 3px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 3px;
-
-        &:hover .member-avatar {
-            opacity: 1;
-        }
-    }
-
-    &:hover {
-        background: rgba(255, 255, 255, .4);
-        background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%);
-        color: #fff;
-
-        .header-btn-count {
-            background: #d11515;
-        }
-    }
-
-    &:active {
-        background: rgba(255, 255, 255, .4);
-        background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .3) 100%);
-    }
-
-    &.upgrade {
-        margin-right: 16px;
+      .header-user-bar-name
+        margin: 4px 8px 0 0
+        float: left
 
-        .icon-sm {
-            padding: 6px 2px 6px 4px;
-        }
-    }
+  #header-main-bar
+    height: 28px * 1.618034 - 6px
+    padding: 7px 10px 0
 
-    &.upgrade,
-    &.header-boards {
-        padding-left: 4px;
-    }
+    h1
+      font-size: 20px
+      line-height: 1.7em
+      padding: 0 10px
+      margin: 0
+      margin-right: 10px
+      float: left
+      border-radius: 3px
 
-    &.header-boards {
-        padding-right: 4px;
-    }
+      &.is-clickable
+        cursor: pointer
 
-    &.header-login,
-    &.header-signup {
-        padding: 0 12px;
-    }
+    .board-header-btns
+      display: block
+      margin-top: 3px
+      width: auto
 
-    &.header-signup {
-        background: #48b512;
-        background: linear-gradient(to bottom, #48b512 0, #3d990f 100%);
+      // XXX Use a flexbox instead of floats?
+      &.left
+        float: left
 
-        &:hover {
-            background: #3d990f;
-            background: linear-gradient(to bottom, #3d990f 0, #327d0c 100%);
-        }
+      &.right
+        float: right
 
-        &:active {
-            background: #327d0c;
-        }
-    }
+    .board-header-btn
+      border-radius: 3px
+      color: darken(white, 5%)
+      padding: 0
+      height: 28px
+      font-size: 13px
+      float: left
+      overflow: hidden
+      line-height: @height
+      margin: 0 2px
 
-    &.header-go-to-boards {
-        padding: 0 8px 0 38px;
-    }
+      i.fa
+        float: left
+        display: block
+        line-height: 28px
+        color: darken(white, 5%)
+        margin: 0 10px
 
-    &.header-go-to-boards .member {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 3px;
-        position: absolute;
-        left: 0;
-    }
-}
+        + span
+          margin-right: 10px
 
-// .header-btn-text {
-//     padding: 0 8px;
-// }
+      .board-header-btn-close
+        float: right
 
-// .header-notification-list ul {
-//     margin-top: 8px;
-// }
+        i.fa
+          margin: 0 6px
 
-// .header-notification-list .action-comment {
-//     max-height: 250px;
-//     overflow-y: auto;
-// }
+    .board-header-btn,
+    h1.is-clickable
+      &.is-hovered,
+      &:hover
+        background: rgba(0, 0, 0, .15)
 
-// .header-user {
-//     position: absolute;
-//     top: 5px;
-//     right: 0;
-// }
+    .separator
+      margin: 2px 4px
+      border-left: 1px solid rgba(255, 255, 255, .3)
+      height: 24px
+      float: left
diff --git a/client/components/main/popup.js b/client/components/main/popup.js
index 8abe1697..48847525 100644
--- a/client/components/main/popup.js
+++ b/client/components/main/popup.js
@@ -1,11 +1,21 @@
 // XXX This event list must be abstracted somewhere else.
-var endTransitionEvents = [
-  'webkitTransitionEnd',
-  'otransitionend',
-  'oTransitionEnd',
-  'msTransitionEnd',
-  'transitionend'
-].join(' ');
+function whichTransitionEvent() {
+  var t;
+  var el = document.createElement('fakeelement');
+  var transitions = {
+    transition:'transitionend',
+    OTransition:'oTransitionEnd',
+    MozTransition:'transitionend',
+    WebkitTransition:'webkitTransitionEnd'
+  };
+
+  for (t in transitions) {
+    if (el.style[t] !== undefined) {
+      return transitions[t];
+    }
+  }
+}
+var transitionEvent = whichTransitionEvent();
 
 Popup.template.events({
   click: function(evt) {
@@ -32,7 +42,7 @@ Popup.template.onRendered(function() {
   container._uihooks = {
     removeElement: function(node) {
       $(node).addClass('no-height');
-      $(container).one(endTransitionEvents, function() {
+      $(container).one(transitionEvent, function() {
         node.parentNode.removeChild(node);
       });
     }
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index 9faad876..141f4261 100644
--- a/client/components/main/popup.styl
+++ b/client/components/main/popup.styl
@@ -91,6 +91,10 @@
       top: 0
       right: 0
 
+
+  &.no-title .header
+    background: none
+
   .content-wrapper
     width: 100%
 
@@ -527,78 +531,3 @@
 
   &.limited li.exceeds-limit
     display: none
-
-.pop-over-emoji-list li > a
-  padding: 2px 4px
-
-  .emoji
-    margin: 0 6px
-
-.pop-over-card-list li > a
-  padding: 2px 4px
-
-.login-signup-popover
-  padding: 15px
-
-  .form-tabs
-    display: none
-
-  h1
-    margin-bottom: 15px
-
-  p
-    margin: 8px 0
-
-  .form-parts-container
-    position: relative
-
-  .active-box
-    position: absolute
-    top: 0
-    background: #e2e2e2
-    border: 1px solid #c9c9c9
-    border-radius: 3px
-    z-index: 1
-    height: 100%
-    width: 49%
-    transition-property: all
-    transition-duration: .4s
-    opacity: 1
-
-    &.start
-      opacity: 0
-      left: 25%
-
-  .signup-form,
-  .login-form
-    position: relative
-    box-sizing: border-box
-    padding: 20px
-    width: 50%
-    z-index: 2
-    opacity: .3
-    transition-property: opacity
-    transition-duration: .2s
-
-    .active
-      opacity: 1
-
-
-  .js-signup-form-pos
-    left: 0
-
-  .login-form
-    position: absolute
-    top: 0
-
-  .login-form .icon-google
-    position: absolute
-    left: 5px
-    top: 3px
-
-  .login-form .button.google
-    padding-left: 40px
-    margin: 0 0 15px 0
-
-  .js-login-form-pos
-    left: 50%
diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index fa54c713..dade8449 100644
--- a/client/components/main/popup.tpl.jade
+++ b/client/components/main/popup.tpl.jade
@@ -1,13 +1,14 @@
 .pop-over.clearfix(
   class="{{#unless title}}miniprofile{{/unless}}"
   class=currentBoard.colorClass
+  class="{{#unless title}}no-title{{/unless}}"
   style="display:block; left:{{offset.left}}px; top:{{offset.top}}px;")
-  .header.clearfix
+  .header
     a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
       i.fa.fa-chevron-left
     span.header-title= title
     a.close-btn.js-close-pop-over
-      i.fa.fa-times
+      i.fa.fa-times-thin
   .content-wrapper
     //-
       We display the all stack of popup content next to each other and move