diff options
| -rw-r--r-- | client/components/boards/body.js | 6 | ||||
| -rw-r--r-- | client/components/lists/body.jade | 7 | ||||
| -rw-r--r-- | client/components/lists/body.js | 8 | ||||
| -rw-r--r-- | client/components/lists/main.js | 13 | ||||
| -rw-r--r-- | client/components/lists/main.styl | 22 |
5 files changed, 43 insertions, 13 deletions
diff --git a/client/components/boards/body.js b/client/components/boards/body.js index 78566f2e..ffb132c5 100644 --- a/client/components/boards/body.js +++ b/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 }, 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 |