Remove the 'Add Swimlane' entry and replace it by a plus sign

Still need to create the swimlane right after the one that has been
created

client/components/boards/boardBody.jade

@@ -23,8 +23,6 @@ template(name="boardBody")
       if isViewSwimlanes
         each currentBoard.swimlanes
           +swimlane(this)
-        if currentUser.isBoardMember
-          +addSwimlaneForm
       if isViewLists
         +listsGroup
       if isViewCalendar

client/components/swimlanes/swimlaneHeader.jade

@@ -8,6 +8,7 @@ template(name="swimlaneHeader")
         = title
       .swimlane-header-menu
         unless currentUser.isCommentOnly
+          a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon
           a.fa.fa-navicon.js-open-swimlane-menu
 
 template(name="editSwimlaneTitleForm")
@@ -21,3 +22,11 @@ template(name="swimlaneActionPopup")
   unless currentUser.isCommentOnly
     ul.pop-over-list
       li: a.js-close-swimlane {{_ 'archive-swimlane'}}
+
+template(name="swimlaneAddPopup")
+  unless currentUser.isCommentOnly
+    form
+      input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
+        autocomplete="off" autofocus)
+      .edit-controls.clearfix
+        button.primary.confirm(type="submit") {{_ 'add'}}

client/components/swimlanes/swimlaneHeader.js

@@ -11,6 +11,7 @@ BlazeComponent.extendComponent({
   events() {
     return [{
       'click .js-open-swimlane-menu': Popup.open('swimlaneAction'),
+      'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'),
       submit: this.editTitle,
     }];
   },
@@ -23,3 +24,30 @@ Template.swimlaneActionPopup.events({
     Popup.close();
   },
 });
+
+BlazeComponent.extendComponent({
+  events() {
+    return [{
+      submit(evt) {
+        evt.preventDefault();
+        const titleInput = this.find('.swimlane-name-input');
+        const title = titleInput.value.trim();
+        if (title) {
+          Swimlanes.insert({
+            title,
+            boardId: Session.get('currentBoard'),
+            // XXX we should insert the swimlane right after the caller
+            sort: $('.swimlane').length,
+          });
+
+          titleInput.value = '';
+          titleInput.focus();
+        }
+        // XXX ideally, we should move the popup to the newly
+        // created swimlane so a user can add more than one swimlane
+        // with a minimum of interactions
+        Popup.close();
+      },
+    }];
+  },
+}).register('swimlaneAddPopup');

client/components/swimlanes/swimlanes.jade

@@ -36,20 +36,6 @@ template(name="listsGroup")
       if currentUser.isBoardMember
         +addListForm
 
-template(name="addSwimlaneForm")
-  .list.list-composer.js-list-composer
-    .list-header
-      +inlinedForm(autoclose=false)
-        input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
-          autocomplete="off" autofocus)
-        .edit-controls.clearfix
-          button.primary.confirm(type="submit") {{_ 'save'}}
-          a.fa.fa-times-thin.js-close-inlined-form
-      else
-        a.open-list-composer.js-open-inlined-form
-          i.fa.fa-plus
-          | {{_ 'add-swimlane'}}
-
 template(name="addListForm")
   .list.list-composer.js-list-composer
     .list-header

client/components/swimlanes/swimlanes.js

@@ -175,33 +175,6 @@ BlazeComponent.extendComponent({
   },
 }).register('addListForm');
 
-BlazeComponent.extendComponent({
-  // Proxy
-  open() {
-    this.childComponents('inlinedForm')[0].open();
-  },
-
-  events() {
-    return [{
-      submit(evt) {
-        evt.preventDefault();
-        let titleInput = this.find('.swimlane-name-input');
-        const title = titleInput.value.trim();
-        if (title) {
-          Swimlanes.insert({
-            title,
-            boardId: Session.get('currentBoard'),
-            sort: $('.swimlane').length,
-          });
-
-          titleInput.value = '';
-          titleInput.focus();
-        }
-      },
-    }];
-  },
-}).register('addSwimlaneForm');
-
 Template.swimlane.helpers({
   canSeeAddList() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();

client/components/swimlanes/swimlanes.styl

@@ -46,6 +46,10 @@
       position: absolute
       padding: 5px 5px
 
+    .swimlane-header-plus-icon
+      margin-left: 5px
+      margin-right: 10px
+
 .list-group
   flex-direction: row
   height: 100%

i18n/en.i18n.json

@@ -337,6 +337,7 @@
     "list-select-cards": "Select all cards in this list",
     "listActionPopup-title": "List Actions",
     "swimlaneActionPopup-title": "Swimlane Actions",
+    "swimlaneAddPopup-title": "Add a Swimlane below",
     "listImportCardPopup-title": "Import a Trello card",
     "listMorePopup-title": "More",
     "link-list": "Link to this list",