Merge branch '239816-convert-stylesheets-pages-diff-scss-into-page-specific-bundle' into 'master'

Convert stylesheets/pages/diff.scss into page specific bundle

See merge request gitlab-org/gitlab!44556

app/assets/stylesheets/_page_specific_files.scss

@@ -8,7 +8,6 @@
 @import './pages/commits';
 @import './pages/deploy_keys';
 @import './pages/detail_page';
-@import './pages/diff';
 @import './pages/editor';
 @import './pages/environment_logs';
 @import './pages/error_list';

app/assets/stylesheets/framework.scss

@@ -70,3 +70,4 @@
 @import 'framework/spinner';
 @import 'framework/card';
 @import 'framework/editor-lite';
+@import 'framework/diffs';

app/assets/stylesheets/pages/diff.scss → app/assets/stylesheets/framework/diffs.scss

@@ -267,6 +267,7 @@
         }
       }
     }
+
     //.view.swipe
     .view.onion-skin {
       .onion-skin-frame {
@@ -335,6 +336,7 @@
         }
       }
     }
+
     //.view.onion-skin
   }
 
@@ -961,15 +963,13 @@ table.code {
 .frame.click-to-comment,
 .btn-transparent.image-diff-overlay-add-comment {
   position: relative;
-  cursor: image-url('illustrations/image_comment_light_cursor.svg')
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   // Retina cursor
   // scss-lint:disable DuplicateProperty
   cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
-  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   .comment-indicator {
@@ -1078,85 +1078,6 @@ table.code {
   position: relative;
 }
 
-.diff-tree-list {
-  position: -webkit-sticky;
-  position: sticky;
-  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
-  top: $top-pos;
-  max-height: calc(100vh - #{$top-pos});
-  z-index: 202;
-
-  .with-system-header & {
-    top: $top-pos + $system-header-height;
-  }
-
-  .with-system-header.with-performance-bar & {
-    top: $top-pos + $system-header-height + $performance-bar-height;
-  }
-
-  .with-performance-bar & {
-    $performance-bar-top-pos: $performance-bar-height + $top-pos;
-    top: $performance-bar-top-pos;
-    max-height: calc(100vh - #{$performance-bar-top-pos});
-  }
-
-  .drag-handle {
-    bottom: 16px;
-    transform: translateX(10px);
-  }
-}
-
-.diff-files-holder {
-  flex: 1;
-  min-width: 0;
-  z-index: 201;
-}
-
-.compare-versions-container {
-  min-width: 0;
-}
-
-.tree-list-holder {
-  height: 100%;
-
-  .file-row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.tree-list-scroll {
-  max-height: 100%;
-  padding-bottom: $grid-size;
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-.tree-list-search {
-  flex: 0 0 34px;
-
-  .form-control {
-    padding-left: 30px;
-  }
-}
-
-.tree-list-icon {
-  top: 50%;
-  left: 10px;
-  transform: translateY(-50%);
-
-  &,
-  svg {
-    fill: $gl-text-color-tertiary;
-  }
-}
-
-.tree-list-clear-icon {
-  right: 10px;
-  left: auto;
-  line-height: 0;
-}
-
 .discussion-collapsible {
   margin: 0 $gl-padding $gl-padding 71px;
 
@@ -1172,30 +1093,6 @@ table.code {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, md)-1) {
-  .diffs .files {
-    @include fixed-width-container;
-    flex-direction: column;
-
-    .diff-tree-list {
-      position: relative;
-      top: 0;
-      // !important is required to override inline styles of resizable sidebar
-      width: 100% !important;
-    }
-
-    .tree-list-holder {
-      max-height: calc(50px + 50vh);
-      padding-right: 0;
-    }
-  }
-
-  .discussion-collapsible {
-    margin: $gl-padding;
-    margin-top: 0;
-  }
-}
-
 .image-diff-overlay,
 .image-diff-overlay-add-comment {
   top: 0;
@@ -1218,3 +1115,15 @@ table.code {
     display: none;
   }
 }
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    @include fixed-width-container;
+    flex-direction: column;
+  }
+
+  .discussion-collapsible {
+    margin: $gl-padding;
+    margin-top: 0;
+  }
+}

app/assets/stylesheets/page_bundles/merge_requests.scss

+@import 'mixins_and_variables_and_functions';
+
+.compare-versions-container {
+  min-width: 0;
+}
+
+.diff-files-holder {
+  flex: 1;
+  min-width: 0;
+  z-index: 201;
+}
+
+.diff-tree-list {
+  position: -webkit-sticky;
+  position: sticky;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
+  top: $top-pos;
+  max-height: calc(100vh - #{$top-pos});
+  z-index: 202;
+
+  .with-system-header & {
+    top: $top-pos + $system-header-height;
+  }
+
+  .with-system-header.with-performance-bar & {
+    top: $top-pos + $system-header-height + $performance-bar-height;
+  }
+
+  .with-performance-bar & {
+    $performance-bar-top-pos: $performance-bar-height + $top-pos;
+    top: $performance-bar-top-pos;
+    max-height: calc(100vh - #{$performance-bar-top-pos});
+  }
+
+  .drag-handle {
+    bottom: 16px;
+    transform: translateX(10px);
+  }
+}
+
+.tree-list-holder {
+  height: 100%;
+
+  .file-row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.tree-list-scroll {
+  max-height: 100%;
+  padding-bottom: $grid-size;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.tree-list-search {
+  flex: 0 0 34px;
+
+  .form-control {
+    padding-left: 30px;
+  }
+}
+
+.tree-list-icon {
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+
+  &,
+  svg {
+    fill: var(--gray-400, $gray-400);
+  }
+}
+
+.tree-list-clear-icon {
+  right: 10px;
+  left: auto;
+  line-height: 0;
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    .diff-tree-list {
+      position: relative;
+      top: 0;
+      // !important is required to override inline styles of resizable sidebar
+      width: 100% !important;
+    }
+
+    .tree-list-holder {
+      max-height: calc(50px + 50vh);
+      padding-right: 0;
+    }
+  }
+}

app/views/projects/merge_requests/show.html.haml

@@ -8,6 +8,7 @@
 - suggest_changes_help_path = help_page_path('user/discussions/index.md', anchor: 'suggest-changes')
 - number_of_pipelines = @pipelines.size
 - mr_action = j(params[:tab].presence || 'show')
+- add_page_specific_style 'page_bundles/merge_requests'
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/reports'
 

config/application.rb

@@ -182,6 +182,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/issues_list.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
     config.assets.precompile << "page_bundles/merge_conflicts.css"
+    config.assets.precompile << "page_bundles/merge_requests.css"
     config.assets.precompile << "page_bundles/milestone.css"
     config.assets.precompile << "page_bundles/pipeline.css"
     config.assets.precompile << "page_bundles/pipelines.css"

ee/app/assets/stylesheets/pages/merge_requests.scss

-.approvals-body {
-  @include media-breakpoint-up(md) {
-    display: flex;
-    align-items: center;
-  }
-
-  .approve-btn {
-    vertical-align: baseline;
-  }
-
-  .approvals-required-text {
-    svg {
-      position: relative;
-      top: 3px;
-    }
-  }
-}
-
-.approvals-footer {
-  display: flex;
-
-  .approvers-prefix {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .approvers-list {
-    display: flex;
-    align-items: center;
-    margin-left: 7px;
-  }
-
-  .avatar-placeholder {
-    color: $gray-darkest;
-  }
-
-  .unapprove-btn {
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-
-    &:hover {
-      color: $gl-text-color-secondary;
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-