Merge branch 'winh-full-height-boards-sidebar-ee'

Make issue boards sidebar full height

See merge request !2968

app/assets/javascripts/boards/boards_bundle.js

@@ -95,9 +95,6 @@ $(() => {
       });
       Store.rootPath = this.boardsEndpoint;
 
-      this.filterManager = new FilteredSearchBoards(Store.filter, true, [(this.milestoneTitle ? 'milestone' : null)]);
-      this.filterManager.setup();
-
       // Listen for updateTokens event
       eventHub.$on('updateTokens', this.updateTokens);
     },
@@ -105,6 +102,9 @@ $(() => {
       eventHub.$off('updateTokens', this.updateTokens);
     },
     mounted () {
+      this.filterManager = new FilteredSearchBoards(Store.filter, true, [(this.milestoneTitle ? 'milestone' : null)]);
+      this.filterManager.setup();
+
       Store.disabled = this.disabled;
       gl.boardService.all()
         .then(response => response.json())

app/assets/stylesheets/framework/variables.scss

@@ -7,6 +7,7 @@ $gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: .15s;
+$right-sidebar-transition-duration: .3s;
 
 /*
  * Color schema

app/assets/stylesheets/pages/boards.scss

@@ -80,11 +80,25 @@
     .boards-list {
       height: calc(100vh - 50px);
     }
+
+    .issue-boards-sidebar {
+      height: 100%;
+      top: 0;
+    }
   }
 }
 
 .boards-app {
   position: relative;
+
+  @media (min-width: $screen-sm-min) {
+    transition: width $right-sidebar-transition-duration;
+    width: 100%;
+
+    &.is-compact {
+      width: calc(100% - #{$gutter_width});
+    }
+  }
 }
 
 .boards-app-loading {
@@ -108,11 +122,6 @@
     height: calc(100vh - 222px);
     // scss-lint:enable DuplicateProperty
     min-height: 475px;
-    transition: width .2s;
-
-    &.is-compact {
-      width: calc(100% - 290px);
-    }
   }
 }
 
@@ -469,14 +478,6 @@
 
 .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
 .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
-  position: absolute;
-
-  &.right-sidebar {
-    top: 0;
-    bottom: 0;
-    height: 100%;
-  }
-
   .issuable-sidebar-header {
     position: relative;
   }
@@ -514,8 +515,8 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: width .2s,
-                padding .2s;
+    transition: width $right-sidebar-transition-duration,
+                padding $right-sidebar-transition-duration;
   }
 
   &.boards-sidebar-slide-enter,

app/assets/stylesheets/pages/issuable.scss

@@ -223,14 +223,14 @@
   top: $new-navbar-height;
   bottom: 0;
   right: 0;
-  transition: width .3s;
+  transition: width $right-sidebar-transition-duration;
   background: $gray-light;
   z-index: 200;
   overflow: hidden;
 
   .issuable-sidebar {
     width: calc(100% + 100px);
-    height: calc(100% - #{$new-navbar-height});
+    height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;

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

@@ -14,11 +14,11 @@
   %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
   %script#js-board-promotion{ type: "text/x-template" }= render "shared/promotions/promote_issue_board"
 
-.hidden-xs.hidden-sm
+#board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
+  .hidden-xs.hidden-sm
     = render 'shared/issuable/search_bar', type: :boards, board: board
 
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
+  .boards-list
     .boards-app-loading.text-center{ "v-if" => "loading" }
       = icon("spinner spin")
     %board{ "v-cloak" => true,

app/views/shared/boards/_switcher.html.haml

@@ -6,7 +6,7 @@
   ":current-board" => current_board_json,
   "milestone-path" => milestones_filter_path(milestone_filter_opts) }
   .dropdown
-    %button.dropdown-menu-toggle{ "@click" => "loadBoards",
+    %button.dropdown-menu-toggle{ "v-on:click" => "loadBoards",
       data: { toggle: "dropdown" } }
       {{ board.name }}
       = icon("chevron-down")
@@ -14,7 +14,7 @@
       .dropdown-title
         %button.dropdown-title-button.dropdown-menu-back{ type: "button",
           aria: { label: "Go back" },
-          "@click.stop.prevent" => "showPage('')",
+          "v-on:click.stop.prevent" => "showPage('')",
           "v-if" => "currentPage !== ''" }
           = icon("arrow-left")
         {{ title }}
@@ -45,23 +45,23 @@
               method: :delete do
               Delete
             %button.btn.btn-default.pull-right{ type: "button",
-              "@click.stop.prevent" => "showPage('')" }
+              "v-on:click.stop.prevent" => "showPage('')" }
               Cancel
       - if can?(current_user, :admin_board, parent)
         .dropdown-footer{ "v-if" => "currentPage === ''" }
           %ul.dropdown-footer-list
             - if parent.feature_available?(:multiple_issue_boards)
               %li
-                %a{ "href" => "#", "@click.stop.prevent" => "showPage('new')" }
+                %a{ "href" => "#", "v-on:click.stop.prevent" => "showPage('new')" }
                   Create new board
             %li
-              %a{ "href" => "#", "@click.stop.prevent" => "showPage('edit')" }
+              %a{ "href" => "#", "v-on:click.stop.prevent" => "showPage('edit')" }
                 Edit board name
             - if parent.issue_board_milestone_available?(current_user)
               %li
-                %a{ "href" => "#", "@click.stop.prevent" => "showPage('milestone')" }
+                %a{ "href" => "#", "v-on:click.stop.prevent" => "showPage('milestone')" }
                   Edit board milestone
             %li{ "v-if" => "showDelete" }
-              %a{ "href" => "#", "@click.stop.prevent" => "showPage('delete')" }
+              %a{ "href" => "#", "v-on:click.stop.prevent" => "showPage('delete')" }
                 %span.text-danger
                   Delete board

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

 .board-selector-page-two
-  %form{ "@submit.prevent" => "submit" }
+  %form{ "v-on:submit.prevent" => "submit" }
     .dropdown-content
       %input{ type: "hidden",
         id: "board-milestone",
@@ -16,7 +16,7 @@
           %label.label-light{ for: "board-milestone" }
             Board milestone
           %button.dropdown-menu-toggle.wide{ type: "button",
-            "@click.stop.prevent" => "loadMilestones($event)" }
+            "v-on:click.stop.prevent" => "loadMilestones($event)" }
             {{ milestoneToggleText }}
             = icon("chevron-down")
           .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen",
@@ -26,13 +26,13 @@
                 %li{ "v-for" => "milestone in extraMilestones" }
                   %a{ href: "#",
                     ":class" => "{ 'is-active': milestone.id === board.milestone_id }",
-                    "@click.stop.prevent" => "selectMilestone(milestone)" }
+                    "v-on:click.stop.prevent" => "selectMilestone(milestone)" }
                     {{ milestone.title }}
                 %li.divider
                 %li{ "v-for" => "milestone in milestones" }
                   %a{ href: "#",
                     ":class" => "{ 'is-active': milestone.id === board.milestone_id }",
-                    "@click.stop.prevent" => "selectMilestone(milestone)" }
+                    "v-on:click.stop.prevent" => "selectMilestone(milestone)" }
                     {{ milestone.title }}
             = dropdown_loading
           %span
@@ -47,5 +47,5 @@
         "ref" => "'submit-btn'" }
         {{ buttonText }}
       %button.btn.btn-default.pull-right{ type: "button",
-        "@click.stop.prevent" => "cancel" }
+        "v-on:click.stop.prevent" => "cancel" }
         Cancel