Port of revert-0ef587b6 to EE

41cd2071 · Filipa Lacerda · Annabel Dunstone Gray · 52da628a · 41cd2071 · 41cd2071
Commit 41cd2071 authored Jan 23, 2017 by Filipa Lacerda Committed by Annabel Dunstone Gray Feb 09, 2017
25 changed files
--- 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();

--- 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();

--- 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;
+    }
+  }
+}
--- 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;
    }

--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -18,7 +18,7 @@
      .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
          id: klass::file_name_noext }
        .file-holder#README
-          .file-title
+          .js-file-title.file-title
            %i.fa.fa-file
            = klass::file_name
            .pull-right

--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -11,7 +11,7 @@
      .form-group
        .col-sm-12
          .file-holder
-            .file-title.clearfix
+            .js-file-title.file-title.clearfix
              Content of .gitlab-ci.yml
            #ci-editor.ci-editor= @content
          = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)

--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -2,7 +2,7 @@
 - blob = discussion.blob
 .diff-file.file-holder
-  .file-title
+  .js-file-title.file-title
    = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_file.content_commit, project: discussion.project, url: discussion_diff_path(discussion)
  .diff-content.code.js-syntax-highlight

--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -528,7 +528,7 @@
  - blob = Snippet.new(content: "Wow\nSuch\nFile")
  .example
    .file-holder
-      .file-title
+      .js-file-title.file-title
        Awesome file
        .file-actions
          .btn-group

--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -7,7 +7,7 @@
  #blob-content-holder.tree-holder
    .file-holder
-      .file-title
+      .js-file-title.file-title
        = blob_icon @blob.mode, @blob.name
        %strong
          = @path

--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -25,7 +25,7 @@
 #blob-content-holder.blob-content-holder
  %article.file-holder
-    .file-title
+    .js-file-title.file-title
      = blob_icon blob.mode, blob.name
      %strong
        = blob.name

--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
 .file-holder.file.append-bottom-default
-  .file-title.clearfix
+  .js-file-title.file-title.clearfix
    .editor-ref
      = icon('code-fork')
      = ref

--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
 - environment = local_assigns.fetch(:environment, nil)
 .diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
-  .file-title
+  .js-file-title.file-title-flex-parent
+    .file-header-content
      = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
    - unless diff_file.submodule?

--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -10,13 +10,13 @@
    - if diff_file.renamed_file
      - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: old_path } }
        = old_path
      &rarr;
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: new_path } }
        = new_path
    - else
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path } }
        = diff_file.new_path
      - if diff_file.deleted_file
        deleted

--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -23,7 +23,7 @@
  .files-wrapper{ "v-if" => "!isLoading && !hasError" }
    .files
      .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
-        .file-title
+        .js-file-title.file-title
          %i.fa.fa-fw{ ":class" => "file.iconClass" }
          %strong {{file.filePath}}
          = render partial: 'projects/merge_requests/conflicts/file_actions'

--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,7 +4,7 @@
 .project-snippets
  %article.file-holder.snippet-file-content
-    .file-title
+    .js-file-title.file-title
      = blob_icon 0, @snippet.file_name
      = @snippet.file_name
      .file-actions

--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
 %article.file-holder.readme-holder
-  .file-title
+  .js-file-title.file-title
    = blob_icon readme.mode, readme.name
    = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do
      %strong

--- a/app/views/search/results/_blob.html.haml
+++ b/app/views/search/results/_blob.html.haml
@@ -9,7 +9,7 @@
 - blob_link = namespace_project_blob_path(project.namespace, project, tree_join(blob.ref, file_name))
 .blob-result
  .file-holder
-    .file-title
+    .js-file-title.file-title
      = link_to blob_link do
        = icon('fa-file')
        %strong

--- a/app/views/search/results/_snippet_blob.html.haml
+++ b/app/views/search/results/_snippet_blob.html.haml
@@ -14,7 +14,7 @@
  - snippet_path = reliable_snippet_path(snippet)
  = link_to snippet_path do
    .file-holder
-      .file-title
+      .js-file-title.file-title
        %i.fa.fa-file
        %strong= snippet.file_name
      - if markup?(snippet.file_name)

--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
 - wiki_blob = parse_search_result(wiki_blob)
 .blob-result
  .file-holder
-    .file-title
+    .js-file-title.file-title
      = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_blob.basename) do
        %i.fa.fa-file
        %strong

--- a/app/views/shared/snippets/_form.html.haml
+++ b/app/views/shared/snippets/_form.html.haml
@@ -18,7 +18,7 @@
        = f.label :file_name, "File", class: 'control-label'
        .col-sm-10
          .file-holder.snippet
-            .file-title
+            .js-file-title.file-title
              = f.text_field :file_name, placeholder: "Optionally name this file to add code highlighting, e.g. example.rb for Ruby.", class: 'form-control snippet-file-name'
            .file-content.code
              %pre#editor= @snippet.content

--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
@@ -26,7 +26,7 @@
      = @file_sample.events
 %article.file-holder
-  .file-title
+  .js-file-title.file-title
    %i.fa.fa-file-text-o.fa-fw
    %strong
      = @file_sample.file

--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -3,7 +3,7 @@
 = render 'shared/snippets/header'
 %article.file-holder.snippet-file-content
-  .file-title
+  .js-file-title.file-title
    = blob_icon 0, @snippet.file_name
    = @snippet.file_name
    .file-actions

--- a/changelogs/unreleased/25709-diff-file-overflow.yml
+++ b/changelogs/unreleased/25709-diff-file-overflow.yml
+---
+title: Responsive title in diffs inline, side by side, with and without sidebar
+merge_request: 8475
+author:
--- a/spec/features/expand_collapse_diffs_spec.rb
+++ b/spec/features/expand_collapse_diffs_spec.rb
@@ -72,8 +72,8 @@ feature 'Expand and collapse diffs', js: true, feature: true do
    it 'collapses large diffs for renamed files by default' do
      expect(large_diff_renamed).not_to have_selector('.code')
      expect(large_diff_renamed).to have_selector('.nothing-here-block')
-      expect(large_diff_renamed).to have_selector('.file-title .deletion')
+      expect(large_diff_renamed).to have_selector('.js-file-title .deletion')
-      expect(large_diff_renamed).to have_selector('.file-title .addition')
+      expect(large_diff_renamed).to have_selector('.js-file-title .addition')
    end
    it 'shows non-renderable diffs as such immediately, regardless of their size' do
@@ -115,9 +115,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
    context 'expanding a large diff' do
      before do
        # Wait for diffs
-        find('.file-title', match: :first)
+        find('.js-file-title', match: :first)
        # Click `large_diff.md` title
-        all('.file-title')[1].click
+        all('.diff-toggle-caret')[1].click
        wait_for_ajax
      end
@@ -159,9 +159,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
          context 'expanding the diff' do
            before do
              # Wait for diffs
-              find('.file-title', match: :first)
+              find('.js-file-title', match: :first)
              # Click `large_diff.md` title
-              all('.file-title')[1].click
+              all('.diff-toggle-caret')[1].click
              wait_for_ajax
            end
@@ -181,9 +181,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
    context 'collapsing an expanded diff' do
      before do
        # Wait for diffs
-        find('.file-title', match: :first)
+        find('.js-file-title', match: :first)
        # Click `small_diff.md` title
-        all('.file-title')[3].click
+        all('.diff-toggle-caret')[3].click
      end
      it 'hides the diff content' do
@@ -194,9 +194,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
      context 're-expanding the same diff' do
        before do
          # Wait for diffs
-          find('.file-title', match: :first)
+          find('.js-file-title', match: :first)
          # Click `small_diff.md` title
-          all('.file-title')[3].click
+          all('.diff-toggle-caret')[3].click
        end
        it 'shows the diff content' do
@@ -290,9 +290,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
    context 'collapsing an expanded diff' do
      before do
        # Wait for diffs
-        find('.file-title', match: :first)
+        find('.js-file-title', match: :first)
        # Click `small_diff.md` title
-        all('.file-title')[3].click
+        all('.diff-toggle-caret')[3].click
      end
      it 'hides the diff content' do
@@ -303,9 +303,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
      context 're-expanding the same diff' do
        before do
          # Wait for diffs
-          find('.file-title', match: :first)
+          find('.js-file-title', match: :first)
          # Click `small_diff.md` title
-          all('.file-title')[3].click
+          all('.diff-toggle-caret')[3].click
        end
        it 'shows the diff content' do

--- a/spec/features/projects/files/find_file_keyboard_spec.rb
+++ b/spec/features/projects/files/find_file_keyboard_spec.rb
@@ -22,7 +22,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do
    expect(page).to have_selector('.blob-content-holder')
-    page.within('.file-title') do
+    page.within('.js-file-title') do
      expect(page).to have_content('CHANGELOG')
    end
  end
@@ -35,7 +35,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do
    expect(page).to have_selector('.blob-content-holder')
-    page.within('.file-title') do
+    page.within('.js-file-title') do
      expect(page).to have_content('application.js')
    end
  end