Merge branch 'revert-0ef587b6' into 'master'

Responsive title in diffs inline, side by side, with and without sidebar

Closes #25709

See merge request !8707

4 files changed, 52 insertions, 4 deletions

diff --git a/app/assets/javascripts/diff.js.es6 b/app/assets/javascripts/diff.js.es6
index c39e30fb7e0..ccccd0a36ff 100644
--- a/app/assets/javascripts/diff.js.es6
+++ b/app/assets/javascripts/diff.js.es6
@@ -76,7 +76,7 @@ require('./lib/utils/url_utility');
       const diffFile = diffTitle.closest('.diff-file');
       const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
       if (nothingHereBlock.length) {
-        const clickTarget = $('.file-title, .click-to-expand', diffFile);
+        const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
         diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
           this.highlighSelectedLine();
           if (cb) cb();
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 5b20c63384c..3ee0c73a8d2 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -33,13 +33,13 @@
         this.$toggleIcon.addClass('fa-caret-down');
       }
 
-      $('.file-title, .click-to-expand', this.file).on('click', (function (e) {
+      $('.js-file-title, .click-to-expand', this.file).on('click', (function (e) {
         this.toggleDiff($(e.target));
       }).bind(this));
     }
 
     SingleFileDiff.prototype.toggleDiff = function($target, cb) {
-      if (!$target.hasClass('file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
+      if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
       this.isOpen = !this.isOpen;
       if (!this.isOpen && !this.hasError) {
         this.content.hide();
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index c51912b4ac4..30f242a35db 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -231,3 +231,46 @@ span.idiff {
     }
   }
 }
+
+.file-title-flex-parent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $gray-light;
+  border-bottom: 1px solid $border-color;
+  padding: 5px $gl-padding;
+  margin: 0;
+  border-radius: 3px 3px 0 0;
+
+  .file-header-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 30px;
+    position: relative;
+  }
+
+  .btn-clipboard {
+    position: absolute;
+    right: 0;
+  }
+
+  a {
+    color: $gl-text-color;
+  }
+
+  small {
+    margin: 0 10px 0 0;
+  }
+
+  .file-actions {
+    white-space: nowrap;
+
+    .btn {
+      padding: 0 10px;
+      font-size: 13px;
+      line-height: 28px;
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 96ba7c40634..92d7772da57 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -34,9 +34,14 @@
     }
   }
 
-  .file-title {
+  .file-title,
+  .file-title-flex-parent {
     cursor: pointer;
 
+    a:hover {
+      text-decoration: none;
+    }
+
     &:hover {
       background-color: $gray-normal;
     }