Move swimlane creation button to board header when using swimlane view mode

client/components/boards/boardColors.css

@@ -2181,9 +2181,6 @@ THEME - Modern Dark
   padding: 6px;
   font-size: 16px;
 }
-.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
-  font-size: 16px;
-}
 .board-color-moderndark .swimlane {
   background: #2a2a2a;
   line-height: 18px;
@@ -3395,11 +3392,6 @@ THEME - Clean Light
   background-color: #2E2E39;
 }
 
-.board-color-cleanlight .swimlane .swimlane-header-wrap .swimlane-header-plus-icon,
-.board-color-cleandark .swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
-  margin-left: 14px;
-}
-
 .board-color-cleanlight .swimlane .swimlane-header-wrap .list-composer,
 .board-color-cleandark .swimlane .swimlane-header-wrap .list-composer {
   display: flex;

client/components/boards/boardHeader.jade

@@ -16,6 +16,10 @@ template(name="boardHeaderBar")
               a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                 i.fa.fa-pencil-square-o
 
+          if $eq boardView 'board-view-swimlanes'
+            a.board-header-btn.js-open-add-swimlane-menu(title="{{_ 'add-swimlane'}}")
+              i.fa.fa-plus
+
           a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
             title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
             i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
@@ -59,6 +63,10 @@ template(name="boardHeaderBar")
             a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
               i.fa.fa-pencil-square-o
 
+          if $eq boardView 'board-view-swimlanes'
+            a.board-header-btn.js-open-add-swimlane-menu(title="{{_ 'add-swimlane'}}")
+              i.fa.fa-plus
+
           a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
             title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
             i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
@@ -295,3 +303,16 @@ template(name="cardsSortPopup")
     li
       a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
 
+
+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'}}
+        unless currentBoard.isTemplatesBoard
+          unless currentBoard.isTemplateBoard
+            span.quiet
+              | {{_ 'or'}}
+              a.js-swimlane-template {{_ 'template'}}

client/components/boards/boardHeader.js

@@ -2,6 +2,8 @@ import { ReactiveCache } from '/imports/reactiveCache';
 import { TAPi18n } from '/imports/i18n';
 import dragscroll from '@wekanteam/dragscroll';
 
+const { calculateIndexData } = Utils;
+
 /*
 const DOWNCLS = 'fa-sort-down';
 const UPCLS = 'fa-sort-up';
@@ -68,6 +70,7 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
+        'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'),
         'click .js-edit-board-title': Popup.open('boardChangeTitle'),
         'click .js-star-board'() {
           ReactiveCache.getCurrentUser().toggleBoardStar(Session.get('currentBoard'));
@@ -128,6 +131,41 @@ BlazeComponent.extendComponent({
   },
 }).register('boardHeaderBar');
 
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        submit(event) {
+          event.preventDefault();
+          const currentBoard = Utils.getCurrentBoard();
+          const titleInput = this.find('.swimlane-name-input');
+          const title = titleInput.value.trim();
+          const swimlaneType = currentBoard.isTemplatesBoard()
+            ? 'template-swimlane'
+            : 'swimlane';
+
+          if (title) {
+            Swimlanes.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: 0,
+              type: swimlaneType,
+            });
+
+            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.back();
+        },
+        'click .js-swimlane-template': Popup.open('searchElement'),
+      },
+    ];
+  },
+}).register('swimlaneAddPopup');
+
 Template.boardHeaderBar.helpers({
   boardView() {
     return Utils.boardView();

client/components/swimlanes/swimlaneHeader.jade

@@ -24,7 +24,6 @@ template(name="swimlaneFixedHeader")
           | {{isTitleDefault title}}
   .swimlane-header-menu
     unless currentUser.isCommentOnly
-      a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
       a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
       //// TODO: Collapse Swimlane: make button working, etc.
       //unless collapsed
@@ -75,19 +74,6 @@ template(name="swimlaneActionPopup")
             i.fa.fa-arrow-up
             | {{_ 'move-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'}}
-        unless currentBoard.isTemplatesBoard
-          unless currentBoard.isTemplateBoard
-            span.quiet
-              | {{_ 'or'}}
-              a.js-swimlane-template {{_ 'template'}}
-
 template(name="setSwimlaneColorPopup")
   form.edit-label
     .palette-colors: each colors

client/components/swimlanes/swimlaneHeader.js

@@ -38,7 +38,6 @@ BlazeComponent.extendComponent({
           this.collapsed(!this.collapsed());
         },
         'click .js-open-swimlane-menu': Popup.open('swimlaneAction'),
-        'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'),
         submit: this.editTitle,
       },
     ];
@@ -81,7 +80,7 @@ Template.editSwimlaneTitleForm.helpers({
     // When that happens, try use translation "defaultdefault" that has same content of default, or return text "Default".
     // This can happen, if swimlane does not have name.
     // Yes, this is fixing the symptom (Swimlane title does not have title)
-    // instead of fixing the problem (Add Swimlane title when creating swimlane) 
+    // instead of fixing the problem (Add Swimlane title when creating swimlane)
     // because there could be thousands of swimlanes, adding name Default to all of them
     // would be very slow.
     if (title.startsWith("key 'default") && title.endsWith('returned an object instead of string.')) {
@@ -116,51 +115,6 @@ Template.swimlaneActionPopup.events({
   },
 });
 
-BlazeComponent.extendComponent({
-  onCreated() {
-    this.currentSwimlane = this.currentData();
-  },
-
-  events() {
-    return [
-      {
-        submit(event) {
-          event.preventDefault();
-          const currentBoard = Utils.getCurrentBoard();
-          const nextSwimlane = currentBoard.nextSwimlane(this.currentSwimlane);
-          const titleInput = this.find('.swimlane-name-input');
-          const title = titleInput.value.trim();
-          const sortValue = calculateIndexData(
-            this.currentSwimlane,
-            nextSwimlane,
-            1,
-          );
-          const swimlaneType = currentBoard.isTemplatesBoard()
-            ? 'template-swimlane'
-            : 'swimlane';
-
-          if (title) {
-            Swimlanes.insert({
-              title,
-              boardId: Session.get('currentBoard'),
-              sort: sortValue.base,
-              type: swimlaneType,
-            });
-
-            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.back();
-        },
-        'click .js-swimlane-template': Popup.open('searchElement'),
-      },
-    ];
-  },
-}).register('swimlaneAddPopup');
-
 BlazeComponent.extendComponent({
   onCreated() {
     this.currentSwimlane = this.currentData();

client/components/swimlanes/swimlanes.css

@@ -73,11 +73,6 @@
     display: none;
   }
 }
-.swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
-  margin-left: 5px;
-  padding-right: 20px;
-  font-size: 22px;
-}
 .swimlane .swimlane-header-wrap .swimlane-header-menu-icon {
   padding-right: 20px;
   font-size: 22px;