Commit 41cd2071 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Annabel Dunstone Gray

Port of revert-0ef587b6 to EE

parent 52da628a
...@@ -76,7 +76,7 @@ require('./lib/utils/url_utility'); ...@@ -76,7 +76,7 @@ require('./lib/utils/url_utility');
const diffFile = diffTitle.closest('.diff-file'); const diffFile = diffTitle.closest('.diff-file');
const nothingHereBlock = $('.nothing-here-block:visible', diffFile); const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
if (nothingHereBlock.length) { 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, () => { diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
this.highlighSelectedLine(); this.highlighSelectedLine();
if (cb) cb(); if (cb) cb();
......
...@@ -33,13 +33,13 @@ ...@@ -33,13 +33,13 @@
this.$toggleIcon.addClass('fa-caret-down'); 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)); this.toggleDiff($(e.target));
}).bind(this)); }).bind(this));
} }
SingleFileDiff.prototype.toggleDiff = function($target, cb) { 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; this.isOpen = !this.isOpen;
if (!this.isOpen && !this.hasError) { if (!this.isOpen && !this.hasError) {
this.content.hide(); this.content.hide();
......
...@@ -231,3 +231,46 @@ span.idiff { ...@@ -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;
}
}
}
...@@ -34,9 +34,14 @@ ...@@ -34,9 +34,14 @@
} }
} }
.file-title { .file-title,
.file-title-flex-parent {
cursor: pointer; cursor: pointer;
a:hover {
text-decoration: none;
}
&:hover { &:hover {
background-color: $gray-normal; background-color: $gray-normal;
} }
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
.tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''), .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
id: klass::file_name_noext } id: klass::file_name_noext }
.file-holder#README .file-holder#README
.file-title .js-file-title.file-title
%i.fa.fa-file %i.fa.fa-file
= klass::file_name = klass::file_name
.pull-right .pull-right
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.form-group .form-group
.col-sm-12 .col-sm-12
.file-holder .file-holder
.file-title.clearfix .js-file-title.file-title.clearfix
Content of .gitlab-ci.yml Content of .gitlab-ci.yml
#ci-editor.ci-editor= @content #ci-editor.ci-editor= @content
= text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true) = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- blob = discussion.blob - blob = discussion.blob
.diff-file.file-holder .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) = 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 .diff-content.code.js-syntax-highlight
......
...@@ -528,7 +528,7 @@ ...@@ -528,7 +528,7 @@
- blob = Snippet.new(content: "Wow\nSuch\nFile") - blob = Snippet.new(content: "Wow\nSuch\nFile")
.example .example
.file-holder .file-holder
.file-title .js-file-title.file-title
Awesome file Awesome file
.file-actions .file-actions
.btn-group .btn-group
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
#blob-content-holder.tree-holder #blob-content-holder.tree-holder
.file-holder .file-holder
.file-title .js-file-title.file-title
= blob_icon @blob.mode, @blob.name = blob_icon @blob.mode, @blob.name
%strong %strong
= @path = @path
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
#blob-content-holder.blob-content-holder #blob-content-holder.blob-content-holder
%article.file-holder %article.file-holder
.file-title .js-file-title.file-title
= blob_icon blob.mode, blob.name = blob_icon blob.mode, blob.name
%strong %strong
= blob.name = blob.name
......
.file-holder.file.append-bottom-default .file-holder.file.append-bottom-default
.file-title.clearfix .js-file-title.file-title.clearfix
.editor-ref .editor-ref
= icon('code-fork') = icon('code-fork')
= ref = ref
......
- environment = local_assigns.fetch(:environment, nil) - 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) } .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
= render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}" .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? - unless diff_file.submodule?
.file-actions.hidden-xs .file-actions.hidden-xs
......
...@@ -10,13 +10,13 @@ ...@@ -10,13 +10,13 @@
- if diff_file.renamed_file - if diff_file.renamed_file
- old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path) - 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 = old_path
→ →
%strong %strong.file-title-name.has-tooltip{ data: { title: new_path } }
= new_path = new_path
- else - else
%strong %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path } }
= diff_file.new_path = diff_file.new_path
- if diff_file.deleted_file - if diff_file.deleted_file
deleted deleted
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.files-wrapper{ "v-if" => "!isLoading && !hasError" } .files-wrapper{ "v-if" => "!isLoading && !hasError" }
.files .files
.diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.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" } %i.fa.fa-fw{ ":class" => "file.iconClass" }
%strong {{file.filePath}} %strong {{file.filePath}}
= render partial: 'projects/merge_requests/conflicts/file_actions' = render partial: 'projects/merge_requests/conflicts/file_actions'
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.project-snippets .project-snippets
%article.file-holder.snippet-file-content %article.file-holder.snippet-file-content
.file-title .js-file-title.file-title
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
= @snippet.file_name = @snippet.file_name
.file-actions .file-actions
......
%article.file-holder.readme-holder %article.file-holder.readme-holder
.file-title .js-file-title.file-title
= blob_icon readme.mode, readme.name = blob_icon readme.mode, readme.name
= link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do
%strong %strong
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
- blob_link = namespace_project_blob_path(project.namespace, project, tree_join(blob.ref, file_name)) - blob_link = namespace_project_blob_path(project.namespace, project, tree_join(blob.ref, file_name))
.blob-result .blob-result
.file-holder .file-holder
.file-title .js-file-title.file-title
= link_to blob_link do = link_to blob_link do
= icon('fa-file') = icon('fa-file')
%strong %strong
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
- snippet_path = reliable_snippet_path(snippet) - snippet_path = reliable_snippet_path(snippet)
= link_to snippet_path do = link_to snippet_path do
.file-holder .file-holder
.file-title .js-file-title.file-title
%i.fa.fa-file %i.fa.fa-file
%strong= snippet.file_name %strong= snippet.file_name
- if markup?(snippet.file_name) - if markup?(snippet.file_name)
......
- wiki_blob = parse_search_result(wiki_blob) - wiki_blob = parse_search_result(wiki_blob)
.blob-result .blob-result
.file-holder .file-holder
.file-title .js-file-title.file-title
= link_to namespace_project_wiki_path(@project.namespace, @project, wiki_blob.basename) do = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_blob.basename) do
%i.fa.fa-file %i.fa.fa-file
%strong %strong
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
= f.label :file_name, "File", class: 'control-label' = f.label :file_name, "File", class: 'control-label'
.col-sm-10 .col-sm-10
.file-holder.snippet .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' = 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 .file-content.code
%pre#editor= @snippet.content %pre#editor= @snippet.content
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
= @file_sample.events = @file_sample.events
%article.file-holder %article.file-holder
.file-title .js-file-title.file-title
%i.fa.fa-file-text-o.fa-fw %i.fa.fa-file-text-o.fa-fw
%strong %strong
= @file_sample.file = @file_sample.file
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
= render 'shared/snippets/header' = render 'shared/snippets/header'
%article.file-holder.snippet-file-content %article.file-holder.snippet-file-content
.file-title .js-file-title.file-title
= blob_icon 0, @snippet.file_name = blob_icon 0, @snippet.file_name
= @snippet.file_name = @snippet.file_name
.file-actions .file-actions
......
---
title: Responsive title in diffs inline, side by side, with and without sidebar
merge_request: 8475
author:
...@@ -72,8 +72,8 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -72,8 +72,8 @@ feature 'Expand and collapse diffs', js: true, feature: true do
it 'collapses large diffs for renamed files by default' do it 'collapses large diffs for renamed files by default' do
expect(large_diff_renamed).not_to have_selector('.code') 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('.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 end
it 'shows non-renderable diffs as such immediately, regardless of their size' do 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 ...@@ -115,9 +115,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 'expanding a large diff' do context 'expanding a large diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `large_diff.md` title # Click `large_diff.md` title
all('.file-title')[1].click all('.diff-toggle-caret')[1].click
wait_for_ajax wait_for_ajax
end end
...@@ -159,9 +159,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -159,9 +159,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 'expanding the diff' do context 'expanding the diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `large_diff.md` title # Click `large_diff.md` title
all('.file-title')[1].click all('.diff-toggle-caret')[1].click
wait_for_ajax wait_for_ajax
end end
...@@ -181,9 +181,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -181,9 +181,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 'collapsing an expanded diff' do context 'collapsing an expanded diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `small_diff.md` title # Click `small_diff.md` title
all('.file-title')[3].click all('.diff-toggle-caret')[3].click
end end
it 'hides the diff content' do it 'hides the diff content' do
...@@ -194,9 +194,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -194,9 +194,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 're-expanding the same diff' do context 're-expanding the same diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `small_diff.md` title # Click `small_diff.md` title
all('.file-title')[3].click all('.diff-toggle-caret')[3].click
end end
it 'shows the diff content' do it 'shows the diff content' do
...@@ -290,9 +290,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -290,9 +290,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 'collapsing an expanded diff' do context 'collapsing an expanded diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `small_diff.md` title # Click `small_diff.md` title
all('.file-title')[3].click all('.diff-toggle-caret')[3].click
end end
it 'hides the diff content' do it 'hides the diff content' do
...@@ -303,9 +303,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do ...@@ -303,9 +303,9 @@ feature 'Expand and collapse diffs', js: true, feature: true do
context 're-expanding the same diff' do context 're-expanding the same diff' do
before do before do
# Wait for diffs # Wait for diffs
find('.file-title', match: :first) find('.js-file-title', match: :first)
# Click `small_diff.md` title # Click `small_diff.md` title
all('.file-title')[3].click all('.diff-toggle-caret')[3].click
end end
it 'shows the diff content' do it 'shows the diff content' do
......
...@@ -22,7 +22,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do ...@@ -22,7 +22,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do
expect(page).to have_selector('.blob-content-holder') 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') expect(page).to have_content('CHANGELOG')
end end
end end
...@@ -35,7 +35,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do ...@@ -35,7 +35,7 @@ feature 'Find file keyboard shortcuts', feature: true, js: true do
expect(page).to have_selector('.blob-content-holder') 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') expect(page).to have_content('application.js')
end end
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment