Merge branch 'reposition-multiple-issue-boards-selector' into 'master'

Repositioned multiple issue boards selector

Closes #1156

See merge request !1020

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -35,7 +35,6 @@ $(() => {
     el: $boardApp,
     components: {
       'board': gl.issueBoards.Board,
-      'boards-selector': gl.issueBoards.BoardsSelector,
       'board-sidebar': gl.issueBoards.BoardSidebar,
       'board-add-issues-modal': gl.issueBoards.IssuesModal,
     },
@@ -110,4 +109,11 @@ $(() => {
       </button>
     `,
   });
+
+  gl.IssueboardsSwitcher = new Vue({
+    el: '#js-multiple-boards-switcher',
+    components: {
+      'boards-selector': gl.issueBoards.BoardsSelector,
+    }
+  });
 });

app/assets/javascripts/boards/components/board_new_form.js.es6

@@ -47,6 +47,9 @@
             Store.state.reload = true;
           });
       },
+      cancel() {
+        Store.state.currentPage = '';
+      },
     },
   });
 })();

app/assets/javascripts/boards/components/boards_selector.js.es6

@@ -64,6 +64,7 @@ require('./board_new_form');
     },
     methods: {
       showPage(page) {
+        this.state.reload = false;
         this.state.currentPage = page;
       },
       toggleDropdown() {

app/assets/stylesheets/pages/boards.scss

@@ -49,6 +49,15 @@
   .page-with-sidebar {
     padding-bottom: 0;
   }
+
+  .issues-details-filters {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .filter-form {
+    width: 100%;
+  }
 }
 
 .boards-app {
@@ -63,6 +72,7 @@
 .boards-list {
   height: calc(100vh - 152px);
   width: 100%;
+  padding-top: 25px;
   padding-bottom: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
@@ -70,8 +80,8 @@
   white-space: nowrap;
 
   @media (min-width: $screen-sm-min) {
-    height: 409px; // Needed for PhantomJS
-    height: calc(100vh - 290px);
+    height: 475px; // Needed for PhantomJS
+    height: calc(100vh - 220px);
     min-height: 409px;
     transition: width .2s;
 
@@ -304,21 +314,6 @@
   }
 }
 
-.boards-switcher {
-  padding: 0;
-  border: 0;
-  outline: 0;
-  background: none;
-  font-size: 19px;
-  font-weight: 600;
-
-  > .fa {
-    position: relative;
-    top: 2px;
-    margin-left: 5px;
-  }
-}
-
 .board-selector-page-two {
   padding-left: 10px;
   padding-right: 10px;
@@ -530,6 +525,13 @@
   font-size: 9px;
   line-height: 15px;
   border-radius: 50%;
+
+}
+
+.boards-switcher {
+  padding-right: 10px;
+  margin-right: 10px;
+  border-right: 1px solid $white-dark;
 }
 
 .modal-filters {

app/views/projects/boards/_show.html.haml

@@ -13,10 +13,9 @@
 
 = render "projects/issues/head"
 
-= render 'shared/issuable/filter', type: :boards
+= render 'shared/issuable/filter', type: :boards, board: board
 
 #board-app.boards-app{ "v-cloak" => true, data: board_data }
-  = render "title", board: board
   .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
     .boards-app-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")

app/views/projects/boards/_title.html.haml → app/views/projects/boards/_switcher.html.haml

 %boards-selector{ "inline-template" => true,
   ":current-board" => board.to_json }
-  .boards-title-holder.dropdown
-    %button.boards-switcher{ "@click" => "loadBoards",
+  .dropdown
+    %button.dropdown-menu-toggle{ "@click" => "loadBoards",
       data: { toggle: "dropdown" } }
       {{ board.name }}
-      = icon("caret-down")
+      = icon("chevron-down")
     .dropdown-menu{ ":class" => "{ 'is-loading': loading }" }
       .dropdown-title
         %button.dropdown-title-button.dropdown-menu-back{ type: "button",
@@ -36,7 +36,7 @@
               method: :delete do
               Delete
             %button.btn.btn-default.pull-right{ type: "button",
-              "@click.stop.prevent" => "currentPage = ''" }
+              "@click.stop.prevent" => "showPage('')" }
               Cancel
       - if can?(current_user, :admin_board, @project)
         .dropdown-footer{ "v-if" => "currentPage === ''" }

app/views/projects/boards/components/_form.html.haml

@@ -11,5 +11,5 @@
         "ref" => "'submit-btn'" }
         {{ buttonText }}
       %button.btn.btn-default.pull-right{ type: "button",
-        "@click.stop.prevent" => "currentPage = ''" }
+        "@click.stop.prevent" => "cancel" }
         Cancel

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

 - finder = controller.controller_name == 'issues' || controller.controller_name == 'boards' ? issues_finder : merge_requests_finder
 - boards_page = controller.controller_name == 'boards'
+- board = local_assigns.fetch(:board, nil)
 
 .issues-filters
   .issues-details-filters.row-content-block.second-block
+    - if boards_page && board
+      #js-multiple-boards-switcher.filter-item.inline.boards-switcher{ "v-cloak" => true }
+        = render "projects/boards/switcher", board: board
     = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search]), method: :get, class: 'filter-form js-filter-form' do
       - if params[:search].present?
         = hidden_field_tag :search, params[:search]

changelogs/unreleased-ee/reposition-multiple-issue-boards-selector.yml

+---
+title: Repositioned multiple issue boards selector
+merge_request:
+author:

spec/features/boards/multiple_boards_spec.rb

@@ -29,7 +29,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'shows a list of boards' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         expect(page).to have_content(board.name)
         expect(page).to have_content(board2.name)
       end
@@ -38,7 +38,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'switches current board' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link board2.name
       end
 
@@ -52,7 +52,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'creates new board' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link 'Edit board name'
 
         fill_in 'board-new-name', with: 'Testing'
@@ -62,7 +62,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
 
       wait_for_vue_resource
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         expect(page).to have_content('Testing')
       end
     end
@@ -70,7 +70,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'edits board name' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link 'Edit board name'
 
         fill_in 'board-new-name', with: 'Testing'
@@ -80,7 +80,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
 
       wait_for_vue_resource
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         expect(page).to have_content('Testing')
       end
     end
@@ -90,7 +90,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
 
       wait_for_vue_resource
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link 'Delete board'
 
         page.within('.dropdown-title') do
@@ -102,7 +102,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
 
       click_button board2.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         expect(page).not_to have_content(board.name)
         expect(page).to have_content(board2.name)
       end
@@ -111,7 +111,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'adds a list to the none default board' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link board2.name
       end
 
@@ -135,7 +135,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
 
       click_button board2.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         click_link board.name
       end
 
@@ -154,7 +154,7 @@ describe 'Multiple Issue Boards', feature: true, js: true do
     it 'does not show action links' do
       click_button board.name
 
-      page.within('.boards-title-holder .dropdown-menu') do
+      page.within('.dropdown-menu') do
         expect(page).not_to have_content('Create new board')
         expect(page).not_to have_content('Edit board name')
         expect(page).not_to have_content('Delete board')