Some styling updates

Does not remove the issue from the selected tab when it it de-selected, it instead gets purged when changing tab

4 files changed, 20 insertions, 7 deletions

diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 81b1aa1da77..1a147daca7a 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -17,7 +17,7 @@
       submitText() {
         const count = ModalStore.selectedCount();
 
-        return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
+        return `Add ${count > 0 ? count : ''} issue${count > 1 || !count ? 's' : ''}`;
       },
     },
     methods: {
@@ -26,7 +26,9 @@
       },
       addIssues() {
         const list = this.selectedList;
-        const issueIds = this.selectedIssues.map(issue => issue.globalId);
+        const selectedIssues = ModalStore.getSelectedIssues();
+        const issueIds = selectedIssues.filter(issue => issue.selected)
+          .map(issue => issue.globalId);
 
         // Post the data to the backend
         this.$http.post(this.bulkUpdatePath, {
@@ -37,7 +39,7 @@
         });
 
         // Add the issues on the frontend
-        this.selectedIssues.forEach((issue) => {
+        selectedIssues.forEach((issue) => {
           list.addIssue(issue);
           list.issuesSize += 1;
         });
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index d7d896e3be1..ebb2ee1a82f 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -17,7 +17,11 @@
       },
     },
     methods: {
-      toggleAll: ModalStore.toggleAll.bind(ModalStore),
+      toggleAll() {
+        this.$refs.selectAllBtn.blur();
+
+        ModalStore.toggleAll();
+      }
     },
     components: {
       'modal-tabs': gl.issueBoards.ModalTabs,
@@ -49,6 +53,7 @@
           <button
             type="button"
             class="btn btn-success btn-inverted prepend-left-10"
+            ref="selectAllBtn"
             @click="toggleAll">
             {{ selectAllText }}
           </button>
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index c0c3f4b8d8f..605c1101666 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -12,6 +12,10 @@
     watch: {
       activeTab() {
         this.initMasonry();
+
+        if (this.activeTab === 'all') {
+          ModalStore.purgeUnselectedIssues();
+        }
       },
       issues: {
         handler() {
@@ -43,7 +47,9 @@
       showIssue(issue) {
         if (this.activeTab === 'all') return true;
 
-        return issue.selected;
+        const index = ModalStore.selectedIssueIndex(issue);
+
+        return index !== -1;
       },
       initMasonry() {
         const listScrollTop = this.$refs.list.scrollTop;
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index b205c019a31..d6bb755001a 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -21,11 +21,11 @@
           type="button"
           data-toggle="dropdown"
           aria-expanded="false">
-          {{ selected.title }}
           <span
-            class="dropdown-label-box pull-right"
+            class="dropdown-label-box"
             :style="{ backgroundColor: selected.label.color }">
           </span>
+          {{ selected.title }}
           <i class="fa fa-chevron-down"></i>
         </button>
         <div class="dropdown-menu dropdown-menu-selectable">