Add checklist at top

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;

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

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);
     }

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