From 781577db041e0008de22f31bcc1cb11ae96670e0 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Sun, 24 May 2015 12:30:58 +0200
Subject: Experiment new ergonomics to interact with card details
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The idea is that by displaying card details in a sidebar stuck on the
right of the screen, the mouse had to travel too much before
interacting with it. I also don’t want to use the Trello solution
(modal) on big screens, because I like the ability to interact with
the selected card and with the board at the same time (like in a
e-mail client).

The solution introduced in this commit consist of opening the card
detail in a column next to the minicard list.

This commit also fix right sidebar members and labels drag and drop.
---
 client/components/lists/main.js | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

(limited to 'client/components/lists/main.js')

diff --git a/client/components/lists/main.js b/client/components/lists/main.js
index 78aad17c..8a96f5ce 100644
--- a/client/components/lists/main.js
+++ b/client/components/lists/main.js
@@ -25,13 +25,14 @@ BlazeComponent.extendComponent({
   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: '.js-minicard:not(.placeholder, .hide, .js-composer)',
+        items: itemsSelector,
         placeholder: 'minicard placeholder',
         start: function(event, ui) {
           $('.minicard.placeholder').height(ui.item.height());
@@ -57,24 +58,20 @@ BlazeComponent.extendComponent({
         }
       }).disableSelection();
 
-      Utils.liveEvent('mouseover', function($el) {
-        $el.find('.js-member-droppable').droppable({
+      $(document).on('mouseover', function() {
+        $cards.find(itemsSelector).droppable({
           hoverClass: 'draggable-hover-card',
-          accept: '.js-member',
+          accept: '.js-member,.js-label',
           drop: function(event, ui) {
-            var memberId = Blaze.getData(ui.draggable.get(0)).userId;
             var cardId = Blaze.getData(this)._id;
-            Cards.update(cardId, {$addToSet: {members: memberId}});
-          }
-        });
 
-        $el.find('.js-member-droppable').droppable({
-          hoverClass: 'draggable-hover-card',
-          accept: '.js-label',
-          drop: function(event, ui) {
-            var labelId = Blaze.getData(ui.draggable.get(0))._id;
-            var cardId = Blaze.getData(this)._id;
-            Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+            if (ui.draggable.hasClass('js-member')) {
+              var memberId = Blaze.getData(ui.draggable.get(0)).userId;
+              Cards.update(cardId, {$addToSet: {members: memberId}});
+            } else {
+              var labelId = Blaze.getData(ui.draggable.get(0))._id;
+              Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+            }
           }
         });
       });
-- 
cgit v1.2.3-1-g7c22