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