Commit 85582b05 authored by Phil Hughes's avatar Phil Hughes

Moved changed files into a dropdown

This makes navigating through diff files quickly. Currently we just
toggle a list, which could be pretty big. This moves it into a dropdown
to make it much easier.

Also includes a filter bar to quickly search for certain
files/extensions.

Closes #29778
parent 57aa5d63
......@@ -266,6 +266,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
const $container = $('#diffs');
$container.html(data.html);
this.initChangesDropdown();
if (typeof gl.diffNotesCompileComponents !== 'undefined') {
gl.diffNotesCompileComponents();
}
......@@ -314,6 +316,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
});
}
initChangesDropdown() {
$('.js-diff-stats-dropdown').glDropdown({
filterable: true,
remoteFilter: false,
});
}
// Show or hide the loading spinner
//
// status - Boolean, true to show, false to hide
......
......@@ -395,12 +395,11 @@
background-color: transparent;
border: 0;
color: $gl-link-color;
transition: color 0.1s linear;
font-weight: 600;
&:hover,
&:focus {
outline: none;
text-decoration: underline;
color: $gl-link-hover-color;
}
}
......@@ -559,3 +558,17 @@
outline: 0;
}
}
.diff-file-changes {
width: 450px;
z-index: 150;
a {
padding-top: 8px;
padding-bottom: 8px;
}
}
.diff-file-changes-path {
@include str-truncated(78%);
}
......@@ -148,6 +148,24 @@ module DiffHelper
options
end
def diff_file_changed_icon(diff_file)
if diff_file.deleted_file? || diff_file.renamed_file?
"minus"
elsif diff_file.new_file?
"plus"
else
"adjust"
end
end
def diff_file_changed_icon_color(diff_file)
if diff_file.deleted_file?
"cred"
elsif diff_file.new_file?
"cgreen"
end
end
private
def diff_btn(title, name, selected)
......
.js-toggle-container
.commit-stat-summary
Showing
%button.diff-stats-summary-toggler.js-toggle-button{ type: "button" }
%strong= pluralize(diff_files.size, "changed file")
with
%strong.cgreen #{diff_files.sum(&:added_lines)} additions
and
%strong.cred #{diff_files.sum(&:removed_lines)} deletions
.file-stats.js-toggle-content.hide
%ul
- diff_files.each do |diff_file|
- file_hash = hexdigest(diff_file.file_path)
%li
- if diff_file.deleted_file?
%span.deleted-file
%a{ href: "##{file_hash}" }
%i.fa.fa-minus
= diff_file.old_path
- elsif diff_file.renamed_file?
%span.renamed-file
%a{ href: "##{file_hash}" }
%i.fa.fa-minus
= diff_file.old_path
→
= diff_file.new_path
- elsif diff_file.new_file?
%span.new-file
%a{ href: "##{file_hash}" }
%i.fa.fa-plus
= diff_file.new_path
- else
%span.edit-file
%a{ href: "##{file_hash}" }
%i.fa.fa-adjust
= diff_file.new_path
.commit-stat-summary.dropdown
Showing
%button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown" } }<
= pluralize(diff_files.size, "changed file")
= icon("caret-down fw")
with
%strong.cgreen #{diff_files.sum(&:added_lines)} additions
and
%strong.cred #{diff_files.sum(&:removed_lines)} deletions
.dropdown-menu.diff-file-changes
= dropdown_filter("Search file")
.dropdown-content
%ul
- diff_files.each do |diff_file|
- file_hash = hexdigest(diff_file.file_path)
- added_lines = diff_file.added_lines
- removed_lines = diff_file.removed_lines
%li
%a{ href: "##{file_hash}", title: diff_file.new_path }
= icon("#{diff_file_changed_icon(diff_file)} fw", class: "#{diff_file_changed_icon_color(diff_file)} append-right-5")
%span.diff-file-changes-path= diff_file.new_path
.pull-right
%span.cgreen= "+#{added_lines}"
%span.cred= "-#{removed_lines}"
---
title: Moved diff changed files into a dropdown
merge_request:
author:
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