Some styling updates

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

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;
         });

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>

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;

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">

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) {

app/assets/stylesheets/pages/boards.scss

@@ -255,7 +255,6 @@
   .form-control {
     display: inline-block;
     width: 210px;
-    margin-right: 10px;
   }
 }
@@ -387,8 +386,11 @@
     > .row {
       width: 100%;
-      margin-top: auto;
-      margin-bottom: auto;
+      margin: auto 0;
+    }
+
+    .svg-content {
+      margin-top: -40px;
     }
   }
 }
@@ -420,7 +422,7 @@
   .card-parent {
     width: 100%;
-    padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
+    padding: 0 5px 5px;
     @media (min-width: $screen-sm-min) {
       width: 50%;
@@ -433,6 +435,7 @@
   .card {
     border: 1px solid $border-gray-dark;
+    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
     cursor: pointer;
   }
 }
@@ -446,9 +449,7 @@
 }
 .add-issues-footer {
-  margin-top: auto;
-  margin-left: -15px;
-  margin-right: -15px;
+  margin: auto -15px 0;
   padding-left: 15px;
   padding-right: 15px;
   border-bottom-right-radius: $border-radius-default;
@@ -465,10 +466,11 @@
   position: absolute;
   right: -3px;
   top: -3px;
-  width: 20px;
-  background-color: $blue-dark;
+  width: 17px;
+  background-color: $blue-light;
   color: $white-light;
-  font-size: 12px;
-  line-height: 20px;
+  border: 1px solid $border-blue-light;
+  font-size: 9px;
+  line-height: 17px;
   border-radius: 50%;
 }

app/views/shared/issuable/_filter.html.haml

@@ -38,10 +38,10 @@
             #js-boards-search.issue-boards-search
               %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
               - if can?(current_user, :admin_list, @project)
-                %button.btn.btn-create.btn-inverted.js-show-add-issues{ type: "button" }
+                %button.btn.btn-create.pull-right.prepend-left-10.js-show-add-issues{ type: "button" }
                   Add issues
                 .dropdown.pull-right
-                  %button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
+                  %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
                     Add list
                   .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
                     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }

spec/features/boards/add_issues_modal_spec.rb

@@ -10,6 +10,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
   let!(:planning) { create(:label, project: project, name: 'Planning') }
   let!(:label) { create(:label, project: project) }
   let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+  let!(:list2) { create(:list, board: board, label: label, position: 1) }
   let!(:issue) { create(:issue, project: project) }
   let!(:issue2) { create(:issue, project: project) }
@@ -172,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
           first('.card').click
-          expect(page).not_to have_selector('.card')
+          expect(page).not_to have_selector('.is-active')
         end
       end
     end

spec/javascripts/boards/modal_store_spec.js.es6

@@ -81,6 +81,7 @@ describe('Modal store', () => {
   });
   it('adds issue to selected array', () => {
+    issue.selected = true;
     Store.addSelectedIssue(issue);
     expect(Store.selectedCount()).toBe(1);
@@ -112,4 +113,22 @@ describe('Modal store', () => {
   it('does not find a selected issue', () => {
     expect(Store.findSelectedIssue(issue)).toBe(undefined);
   });
+
+  it('does not remove from selected issue if tab is not all', () => {
+    Store.store.activeTab = 'selected';
+
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue);
+
+    expect(Store.store.selectedIssues.length).toBe(1);
+    expect(Store.selectedCount()).toBe(0);
+  });
+
+  it('gets selected issue array with only selected issues', () => {
+    Store.toggleIssue(issue);
+    Store.toggleIssue(issue2);
+    Store.toggleIssue(issue2);
+
+    expect(Store.getSelectedIssues().length).toBe(1);
+  });
 });