summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/dispatcher.js3
-rw-r--r--app/assets/stylesheets/framework/common.scss2
-rw-r--r--app/assets/stylesheets/pages/diff.scss33
-rw-r--r--app/helpers/diff_helper.rb6
-rw-r--r--app/views/projects/diffs/_stats.html.haml8
-rw-r--r--changelogs/unreleased/improved-changes-dropdown.yml5
6 files changed, 46 insertions, 11 deletions
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 5ff7edb6077..344b31cf8b7 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -340,7 +340,8 @@ import ProjectVariables from './project_variables';
container: '.js-commit-pipeline-graph',
}).bindEvents();
initNotes();
- initChangesDropdown();
+ const stickyBarPaddingTop = 16;
+ initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - stickyBarPaddingTop);
$('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
break;
case 'projects:commit:pipelines':
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5f5b5657a2f..bbbb73201be 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -2,7 +2,9 @@
.cgray { color: $common-gray; }
.clgray { color: $common-gray-light; }
.cred { color: $common-red; }
+svg.cred { fill: $common-red; }
.cgreen { color: $common-green; }
+svg.cgreen { fill: $common-green; }
.cdark { color: $common-gray-dark; }
.text-secondary {
color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index bce94e09367..848d7f144dc 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -628,21 +628,46 @@
}
.diff-file-changes {
- width: 450px;
+ max-width: 560px;
+ width: 100%;
z-index: 150;
@media (min-width: $screen-sm-min) {
left: $gl-padding;
}
- a {
+ .diff-changed-file {
+ display: flex;
padding-top: 8px;
padding-bottom: 8px;
+ min-width: 0;
}
- .diff-changed-file {
+ .diff-file-changed-icon {
+ margin-top: 2px;
+ }
+
+ .diff-changed-file-content {
display: flex;
- align-items: center;
+ flex-direction: column;
+ min-width: 0;
+ }
+
+ .diff-changed-file-name,
+ .diff-changed-file-path {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .diff-changed-file-path {
+ direction: rtl;
+ color: $gl-text-color-tertiary;
+ }
+
+ .diff-changed-stats {
+ margin-left: auto;
+ white-space: nowrap;
}
}
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 4e4a66e8a02..2b3094918c5 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -152,11 +152,11 @@ module DiffHelper
def diff_file_changed_icon(diff_file)
if diff_file.deleted_file? || diff_file.renamed_file?
- "minus"
+ "file-deletion"
elsif diff_file.new_file?
- "plus"
+ "file-addition"
else
- "adjust"
+ "file-modified"
end
end
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index 2de2cf9e38c..dd473ebe580 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -22,9 +22,11 @@
- diff_files.each do |diff_file|
%li
%a.diff-changed-file{ href: "##{hexdigest(diff_file.file_path)}", 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.append-right-5= diff_file.new_path
- .pull-right
+ = sprite_icon(diff_file_changed_icon(diff_file), size: 16, css_class: "#{diff_file_changed_icon_color(diff_file)} diff-file-changed-icon append-right-8")
+ %span.diff-changed-file-content.append-right-8
+ %strong.diff-changed-file-name= diff_file.blob.name
+ %span.diff-changed-file-path.prepend-top-5= diff_file.new_path
+ %span.diff-changed-stats
%span.cgreen<
+#{diff_file.added_lines}
%span.cred<
diff --git a/changelogs/unreleased/improved-changes-dropdown.yml b/changelogs/unreleased/improved-changes-dropdown.yml
new file mode 100644
index 00000000000..f305cbe573b
--- /dev/null
+++ b/changelogs/unreleased/improved-changes-dropdown.yml
@@ -0,0 +1,5 @@
+---
+title: Improved diff changed files dropdown design
+merge_request:
+author:
+type: changed