Repositioned multiple issue boards selector

Closes #1156

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/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;
@@ -534,6 +529,12 @@
   font-size: 9px;
   line-height: 15px;
   border-radius: 50%;
+
+}
+.issue-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",

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.issue-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: