Improve diff navigation header57364-improve-diff-nav-header

- Compare versions header is full width except in the unified diff mode
with no tree sidebar
  - Bar is always full width, but the content within stays centered when
unified and no tree sidebar
- File header is the same height as the "Compare versions header"
- aligns with the design system grid guidelines => 56px
- Diff file headers use a button group, switch icon order to open file
externally being the last option, all buttons will become icon buttons
(icon delivery by @dimitrieh)
- If a file header becomes sticky no rounded corner/double border
problem is visible anymore

1 files changed, 74 insertions, 63 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index fda7b7c5fd9..2136a61b1ae 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import { mapActions, mapGetters } from 'vuex';
-import { polyfillSticky } from '~/lib/utils/sticky';
+import { polyfillSticky, stickyMonitor } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -11,7 +11,7 @@ import { __, s__, sprintf } from '~/locale';
 import { diffViewerModes } from '~/ide/constants';
 import EditButton from './edit_button.vue';
 import DiffStats from './diff_stats.vue';
-import { scrollToElement } from '~/lib/utils/common_utils';
+import { scrollToElement, contentTop } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -137,9 +137,20 @@ export default {
     isModeChanged() {
       return this.diffFile.viewer.name === diffViewerModes.mode_changed;
     },
+    showExpandDiffToFullFileEnabled() {
+      return gon.features.expandDiffFullFile && !this.diffFile.is_fully_expanded;
+    },
+    expandDiffToFullFileTitle() {
+      if (this.diffFile.isShowingFullFile) {
+        return s__('MRDiff|Show changes only');
+      }
+      return s__('MRDiff|Show full file');
+    },
   },
   mounted() {
     polyfillSticky(this.$refs.header);
+    const fileHeaderHeight = this.$refs.header.clientHeight;
+    stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false);
   },
   methods: {
     ...mapActions('diffs', ['toggleFileDiscussions', 'toggleFullDiff']),
@@ -243,70 +254,70 @@ export default {
       class="file-actions d-none d-sm-block"
     >
       <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
-      <template v-if="diffFile.blob && diffFile.blob.readable_text">
-        <button
-          :disabled="!diffHasDiscussions(diffFile)"
-          :class="{ active: hasExpandedDiscussions }"
-          :title="s__('MergeRequests|Toggle comments for this file')"
-          class="js-btn-vue-toggle-comments btn"
-          type="button"
-          @click="handleToggleDiscussions"
-        >
-          <icon name="comment" />
-        </button>
-
-        <edit-button
-          v-if="!diffFile.deleted_file"
-          :can-current-user-fork="canCurrentUserFork"
-          :edit-path="diffFile.edit_path"
-          :can-modify-blob="diffFile.can_modify_blob"
-          @showForkMessage="showForkMessage"
-        />
-      </template>
+      <div class="btn-group" role="group">
+        <template v-if="diffFile.blob && diffFile.blob.readable_text">
+          <button
+            :disabled="!diffHasDiscussions(diffFile)"
+            :class="{ active: hasExpandedDiscussions }"
+            :title="s__('MergeRequests|Toggle comments for this file')"
+            class="js-btn-vue-toggle-comments btn"
+            type="button"
+            @click="handleToggleDiscussions"
+          >
+            <icon name="comment" />
+          </button>
 
-      <a
-        v-if="diffFile.replaced_view_path"
-        :href="diffFile.replaced_view_path"
-        class="btn view-file js-view-replaced-file"
-        v-html="viewReplacedFileButtonText"
-      >
-      </a>
-      <gl-tooltip :target="() => $refs.viewButton" placement="bottom">
-        <span v-html="viewFileButtonText"></span>
-      </gl-tooltip>
-      <gl-button
-        ref="viewButton"
-        :href="diffFile.view_path"
-        target="blank"
-        class="view-file js-view-file-button"
-      >
-        <icon name="external-link" />
-      </gl-button>
-      <gl-button
-        v-if="!diffFile.is_fully_expanded"
-        class="expand-file js-expand-file"
-        @click="toggleFullDiff(diffFile.file_path)"
-      >
-        <template v-if="diffFile.isShowingFullFile">
-          {{ s__('MRDiff|Show changes only') }}
-        </template>
-        <template v-else>
-          {{ s__('MRDiff|Show full file') }}
+          <edit-button
+            v-if="!diffFile.deleted_file"
+            :can-current-user-fork="canCurrentUserFork"
+            :edit-path="diffFile.edit_path"
+            :can-modify-blob="diffFile.can_modify_blob"
+            @showForkMessage="showForkMessage"
+          />
         </template>
-        <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
-      </gl-button>
 
-      <a
-        v-if="diffFile.external_url"
-        v-gl-tooltip.hover
-        :href="diffFile.external_url"
-        :title="`View on ${diffFile.formatted_external_url}`"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="btn btn-file-option js-external-url"
-      >
-        <icon name="external-link" />
-      </a>
+        <a
+          v-if="diffFile.replaced_view_path"
+          :href="diffFile.replaced_view_path"
+          class="btn view-file js-view-replaced-file"
+          v-html="viewReplacedFileButtonText"
+        >
+        </a>
+        <gl-button
+          v-if="!diffFile.is_fully_expanded"
+          ref="expandDiffToFullFileButton"
+          v-gl-tooltip.hover
+          :title="expandDiffToFullFileTitle"
+          class="expand-file js-expand-file"
+          @click="toggleFullDiff(diffFile.file_path)"
+        >
+          <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
+          <icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
+          <icon v-else name="doc-expand" />
+        </gl-button>
+        <gl-button
+          ref="viewButton"
+          v-gl-tooltip.hover
+          :href="diffFile.view_path"
+          target="blank"
+          class="view-file js-view-file-button"
+          title="viewFileButtonText"
+        >
+          <icon name="external-link" />
+        </gl-button>
+
+        <a
+          v-if="diffFile.external_url"
+          v-gl-tooltip.hover
+          :href="diffFile.external_url"
+          :title="`View on ${diffFile.formatted_external_url}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn btn-file-option js-external-url"
+        >
+          <icon name="external-link" />
+        </a>
+      </div>
     </div>
   </div>
 </template>