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

6 files changed, 41 insertions, 43 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index 382c04f3..9e4b9c61 100644
--- a/client/components/boards/boardBody.jade
+++ b/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
diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade
index 483de06f..3e20e2d0 100644
--- a/client/components/swimlanes/swimlaneHeader.jade
+++ b/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'}}
diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js
index 50635f86..72437ba4 100644
--- a/client/components/swimlanes/swimlaneHeader.js
+++ b/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');
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
index 4380de2b..cd864a7c 100644
--- a/client/components/swimlanes/swimlanes.jade
+++ b/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
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index a7743ec7..71317714 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/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();
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index fe7f5e53..71089bb4 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/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%