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.

1 files changed, 49 insertions, 38 deletions

diff --git a/client/components/lists/main.js b/client/components/lists/main.js
index 3464865a..8f86183a 100644
--- a/client/components/lists/main.js
+++ b/client/components/lists/main.js
@@ -24,58 +24,69 @@ BlazeComponent.extendComponent({
   // powerful enough for our use casesShould we “simply” write the drag&drop
   // code ourselves?
   onRendered: function() {
-    if (Meteor.user().isBoardMember()) {
-      var boardComponent = this.componentParent();
-      var itemsSelector = '.js-minicard:not(.placeholder, .hide, .js-composer)';
-      var $cards = this.$('.js-minicards');
-      $cards.sortable({
-        connectWith: '.js-minicards',
-        tolerance: 'pointer',
-        appendTo: '.js-lists',
-        helper: 'clone',
-        items: itemsSelector,
-        placeholder: 'minicard placeholder',
-        start: function(event, ui) {
-          $('.minicard.placeholder').height(ui.item.height());
-          Popup.close();
-          boardComponent.showNewCardForms(false);
-        },
-        stop: function(event, ui) {
-          // To attribute the new index number, we need to get the dom element
-          // of the previous and the following card -- if any.
-          var cardDomElement = ui.item.get(0);
-          var prevCardDomElement = ui.item.prev('.js-minicard').get(0);
-          var nextCardDomElement = ui.item.next('.js-minicard').get(0);
-          var sort = Utils.getSortIndex(prevCardDomElement, nextCardDomElement);
-          var cardId = Blaze.getData(cardDomElement)._id;
-          var listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
-          Cards.update(cardId, {
-            $set: {
-              listId: listId,
-              sort: sort
-            }
-          });
-          boardComponent.showNewCardForms(true);
-        }
-      }).disableSelection();
+    var self = this;
+    if (! Meteor.userId() || ! Meteor.user().isBoardMember())
+      return;
 
-      $(document).on('mouseover', function() {
+    var boardComponent = self.componentParent();
+    var itemsSelector = '.js-minicard:not(.placeholder, .hide, .js-composer)';
+    var $cards = self.$('.js-minicards');
+    $cards.sortable({
+      connectWith: '.js-minicards',
+      tolerance: 'pointer',
+      appendTo: '.js-lists',
+      helper: 'clone',
+      items: itemsSelector,
+      placeholder: 'minicard placeholder',
+      start: function(event, ui) {
+        $('.minicard.placeholder').height(ui.item.height());
+        Popup.close();
+        boardComponent.showNewCardForms(false);
+      },
+      stop: function(event, ui) {
+        // To attribute the new index number, we need to get the dom element
+        // of the previous and the following card -- if any.
+        var cardDomElement = ui.item.get(0);
+        var prevCardDomElement = ui.item.prev('.js-minicard').get(0);
+        var nextCardDomElement = ui.item.next('.js-minicard').get(0);
+        var sort = Utils.getSortIndex(prevCardDomElement, nextCardDomElement);
+        var cardId = Blaze.getData(cardDomElement)._id;
+        var listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
+        Cards.update(cardId, {
+          $set: {
+            listId: listId,
+            sort: sort
+          }
+        });
+        boardComponent.showNewCardForms(true);
+      }
+    });
+
+    // We want to re-run this function any time a card is added.
+    self.autorun(function() {
+      var currentBoardId = Tracker.nonreactive(function() {
+        return Session.get('currentBoard');
+      });
+      Cards.find({ boardId: currentBoardId }).fetch();
+      Tracker.afterFlush(function() {
         $cards.find(itemsSelector).droppable({
           hoverClass: 'draggable-hover-card',
           accept: '.js-member,.js-label',
           drop: function(event, ui) {
             var cardId = Blaze.getData(this)._id;
+            var addToSet;
 
             if (ui.draggable.hasClass('js-member')) {
               var memberId = Blaze.getData(ui.draggable.get(0)).userId;
-              Cards.update(cardId, {$addToSet: {members: memberId}});
+              addToSet = { members: memberId };
             } else {
               var labelId = Blaze.getData(ui.draggable.get(0))._id;
-              Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+              addToSet = { labelIds: labelId };
             }
+            Cards.update(cardId, { $addToSet: addToSet });
           }
         });
       });
-    }
+    });
   }
 }).register('list');