Move "Add card to bottom" to hamburger menu

client/components/lists/list.styl

@@ -91,7 +91,7 @@
     top: -7px
     right: 3px
 
-  .list-header-plus-top,.list-header-plus-bottom
+  .list-header-plus-top
     color: #a6a6a6
     margin-right: 15px
 
@@ -102,20 +102,10 @@
     color: #8c8c8c
     font-size: 0.8em
 
-.list-header .list-header-plus-top, .list-header .list-header-plus-bottom, .js-open-list-menu, .list-header-menu a
+.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
     color #4d4d4d
     padding-left 3px
 
-.list-header-plus-bottom, .list-header-plus-top
-  border: 1px solid #a6a6a6
-
-  a
-    padding: 0px
-
-  .fa
-    color #4d4d4d
-    padding-right: 2px
-
 .list-body
   flex: 1 1 auto
   flex-direction: column

client/components/lists/listHeader.jade

@@ -28,12 +28,7 @@ template(name="listHeader")
           div.list-header-menu
             unless currentUser.isCommentOnly
               if canSeeAddCard
-                a.js-add-card.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}")
-                  a.fa.fa-plus
-                  a.fa.fa-arrow-down
-                a.js-add-card.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
-                  a.fa.fa-plus
-                  a.fa.fa-arrow-up
+                a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
               a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
         else
           a.list-header-menu-icon.fa.fa-angle-right.js-select-list
@@ -46,10 +41,7 @@ template(name="listHeader")
             //if isBoardAdmin
             //  a.fa.js-list-star.list-header-plus-top(class="fa-star{{#unless starred}}-o{{/unless}}")
             if canSeeAddCard
-              a.js-add-card.fa.fa-plus.list-header-plus-bottom(title="{{_ 'add-card-to-bottom-of-list'}}")
-                a.fa.fa-arrow-down
               a.js-add-card.fa.fa-plus.list-header-plus-top(title="{{_ 'add-card-to-top-of-list'}}")
-                a.fa.fa-arrow-up
             a.fa.fa-navicon.js-open-list-menu(title="{{_ 'listActionPopup-title'}}")
           if currentUser.isBoardAdmin
             if isShowDesktopDragHandles
@@ -63,6 +55,13 @@ template(name="editListTitleForm")
       a.fa.fa-times-thin.js-close-inlined-form
 
 template(name="listActionPopup")
+  ul.pop-over-list
+    li
+      a.js-add-card.list-header-plus-bottom
+        i.fa.fa-plus
+        i.fa.fa-arrow-down
+        | {{_ 'add-card-to-bottom-of-list'}}
+  hr
   ul.pop-over-list
     li
       a.js-toggle-watch-list

client/components/lists/listHeader.js

@@ -110,15 +110,6 @@ BlazeComponent.extendComponent({
             position: 'top',
           });
         },
-        'click .js-add-card.list-header-plus-bottom'(event) {
-          const listDom = $(event.target).parents(
-            `#js-list-${this.currentData()._id}`,
-          )[0];
-          const listComponent = BlazeComponent.getComponentForElement(listDom);
-          listComponent.openForm({
-            position: 'bottom',
-          });
-        },
         'click .js-unselect-list'() {
           Session.set('currentList', null);
         },
@@ -150,6 +141,14 @@ Template.listActionPopup.helpers({
 
 Template.listActionPopup.events({
   'click .js-list-subscribe'() {},
+  'click .js-add-card.list-header-plus-bottom'(event) {
+    const listDom = $(`#js-list-${this._id}`)[0];
+    const listComponent = BlazeComponent.getComponentForElement(listDom);
+    listComponent.openForm({
+      position: 'bottom',
+    });
+    Popup.back();
+  },
   'click .js-set-color-list': Popup.open('setListColor'),
   'click .js-select-cards'() {
     const cardIds = this.allCards().map(card => card._id);