Some styling updates

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

5 files changed, 43 insertions, 12 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">
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 2d8da482e5f..391765c4978 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -19,7 +19,7 @@
     }
 
     selectedCount() {
-      return this.store.selectedIssues.length;
+      return this.store.selectedIssues.filter(issue => issue.selected).length;
     }
 
     toggleIssue(issueObj) {
@@ -51,13 +51,31 @@
       });
     }
 
-    addSelectedIssue(issue) {
-      this.store.selectedIssues.push(issue);
+    getSelectedIssues() {
+      return this.store.selectedIssues.filter(issue => issue.selected);
     }
 
-    removeSelectedIssue(issue) {
+    addSelectedIssue(issue) {
       const index = this.selectedIssueIndex(issue);
-      this.store.selectedIssues.splice(index, 1);
+
+      if (index === -1) {
+        this.store.selectedIssues.push(issue);
+      }
+    }
+
+    removeSelectedIssue(issue, forcePurge = false) {
+      if (this.store.activeTab === 'all' || forcePurge) {
+        const index = this.selectedIssueIndex(issue);
+        this.store.selectedIssues.splice(index, 1);
+      }
+    }
+
+    purgeUnselectedIssues() {
+      this.store.selectedIssues.forEach((issue) => {
+        if (!issue.selected) {
+          this.removeSelectedIssue(issue, true);
+        }
+      });
     }
 
     selectedIssueIndex(issue) {