diff --git a/client/components/cards/checklists.css b/client/components/cards/checklists.css index b40f77f67..c730e0ac8 100644 --- a/client/components/cards/checklists.css +++ b/client/components/cards/checklists.css @@ -164,6 +164,21 @@ textarea.js-edit-checklist-item { color: #222; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } +.add-checklist-top { + /* more space to checklists title */ + padding-left: 20px; + /* + is easier clickable */ + padding-right: 20px; +} +.add-checklist-top.js-open-inlined-form:hover { + background: #dbdbdb; + color: #222; + box-shadow: 0 1px 2px rgba(0,0,0,.2); +} +.card-details-item-title { + /* max width for adding checklist at top */ + width: 100%; +} .checklist-details-menu { float: right; padding: 6px 10px 6px 10px; diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 99dabfb6f..6fb4881c4 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -3,6 +3,12 @@ template(name="checklists") h3.card-details-item-title i.fa.fa-check | {{_ 'checklists'}} + if canModifyCard + +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId position="top") + +addChecklistItemForm + else + a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}") + i.fa.fa-plus if currentUser.isBoardMember .material-toggle-switch(title="{{_ 'hide-checked-items'}}") //span.toggle-switch-title diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 4142775c6..1a581860f 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -97,16 +97,26 @@ BlazeComponent.extendComponent({ //if (card.isLinked()) cardId = card.linkedId; if (card.isLinkedCard()) cardId = card.linkedId; + let sortIndex; + let checklistItemIndex; + if (this.currentData().position === 'top') { + sortIndex = Utils.calculateIndexData(null, card.firstChecklist()).base; + checklistItemIndex = 0; + } else { + sortIndex = Utils.calculateIndexData(card.lastChecklist(), null).base; + checklistItemIndex = -1; + } + if (title) { Checklists.insert({ cardId, title, - sort: card.checklists().count(), + sort: sortIndex, }); this.closeAllInlinedForms(); setTimeout(() => { this.$('.add-checklist-item') - .last() + .eq(checklistItemIndex) .click(); }, 100); } diff --git a/models/cards.js b/models/cards.js index b3b4acd34..70723f0f7 100644 --- a/models/cards.js +++ b/models/cards.js @@ -815,6 +815,18 @@ Cards.helpers({ } }, + firstChecklist() { + const checklists = this.checklists().fetch(); + const ret = _.first(checklists); + return ret; + }, + + lastChecklist() { + const checklists = this.checklists().fetch(); + const ret = _.last(checklists); + return ret; + }, + checklistItemCount() { const checklists = this.checklists().fetch(); return checklists