Hide the card composer link while a card is being dragged

4 files changed, 37 insertions, 13 deletions

diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index 311e74cc..7bd3392f 100644
--- a/client/components/lists/body.jade
+++ b/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
diff --git a/client/components/lists/body.js b/client/components/lists/body.js
index 1cbcf8f2..70db42d1 100644
--- a/client/components/lists/body.js
+++ b/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
diff --git a/client/components/lists/main.js b/client/components/lists/main.js
index 748b94d5..78aad17c 100644
--- a/client/components/lists/main.js
+++ b/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();
 
diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
index 18484174..ce408990 100644
--- a/client/components/lists/main.styl
+++ b/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