Hide the card composer link while a card is being dragged

client/components/boards/body.js

@@ -7,6 +7,12 @@ BlazeComponent.extendComponent({
     this.componentChildren('addListForm')[0].open();
   },
 
+  showNewCardForms: function(value) {
+    _.each(this.componentChildren('list'), function(listComponent) {
+      listComponent.showNewCardForm(value);
+    });
+  },
+
   scrollLeft: function() {
     // TODO
   },

client/components/lists/body.jade

@@ -34,9 +34,10 @@ template(name="listBody")
       +inlinedForm(autoclose=false position="bottom")
         +addCardForm(listId=_id position="bottom")
       else
-        a.open-card-composer.js-open-inlined-form
-          i.fa.fa-plus
-          | {{_ 'add-card'}}
+        if newCardFormIsVisible.get
+          a.open-card-composer.js-open-inlined-form
+            i.fa.fa-plus
+            | {{_ 'add-card'}}
 
 template(name="addCardForm")
   .minicard.js-composer

client/components/lists/body.js

@@ -58,6 +58,14 @@ BlazeComponent.extendComponent({
     }
   },
 
+  showNewCardForm: function(value) {
+    this.newCardFormIsVisible.set(value);
+  },
+
+  onCreated: function() {
+    this.newCardFormIsVisible = new ReactiveVar(true);
+  },
+
   events: function() {
     return [{
       submit: this.addCard

client/components/lists/main.js

@@ -3,11 +3,19 @@ BlazeComponent.extendComponent({
     return 'list';
   },
 
-  // Proxy
+  // Proxies
   openForm: function(options) {
     this.componentChildren('listBody')[0].openForm(options);
   },
 
+  showNewCardForm: function(value) {
+    this.componentChildren('listBody')[0].showNewCardForm(value);
+  },
+
+  onCreated: function() {
+    this.newCardFormIsVisible = new ReactiveVar(true);
+  },
+
   // XXX The jQuery UI sortable plugin is far from ideal here. First we include
   // all jQuery components but only use one. Second, it modifies the DOM itself,
   // resulting in Blaze abandoning reactive update of the nodes that have been
@@ -16,6 +24,7 @@ BlazeComponent.extendComponent({
   // the drag&drop code ourselves?
   onRendered: function() {
     if (Meteor.user().isBoardMember()) {
+      var boardComponent = this.componentParent();
       var $cards = this.$('.js-minicards');
       $cards.sortable({
         connectWith: '.js-minicards',
@@ -27,6 +36,7 @@ BlazeComponent.extendComponent({
         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
@@ -43,6 +53,7 @@ BlazeComponent.extendComponent({
               sort: sort
             }
           });
+          boardComponent.showNewCardForms(true);
         }
       }).disableSelection();
 

client/components/lists/main.styl

@@ -99,27 +99,31 @@
     height: 4px
 
 .open-card-composer
-  border-top-left-radius: 0
-  border-top-right-radius: 0
-  border-bottom-right-radius: 3px
-  border-bottom-left-radius: 3px
+  border-radius: 2px
   color: #8c8c8c
   display: block
-  // flex: 0 0 auto
-  margin: 2px -3px -3px
   padding: 7px 10px
   position: relative
   text-decoration: none
+  animation: fadeIn 0.2s
+
+  i.fa
+    margin-right: 7px
 
   &:hover
-    background: #c3c3c3
+    background: white
     color: #222
-    text-decoration: underline
-
+    box-shadow: 0 1px 2px rgba(0,0,0,.2)
 
   &::selection
     background: transparent
 
+@keyframes fadeIn
+  from
+    opacity: 0
+  to
+    opacity: 1
+
 .list.placeholder
   background-color: rgba(0, 0, 0, .2)
   border-color: transparent