From 04fcc7dab5b2c08dc33e9cb62bfe9c712db6ebff Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 14 Nov 2017 10:36:45 +0000 Subject: Improved the design of the changed files dropdown Closes #36687 --- app/assets/javascripts/dispatcher.js | 2 +- app/assets/stylesheets/pages/diff.scss | 32 +++++++++++++++++++++++++++---- app/views/projects/diffs/_stats.html.haml | 8 +++++--- 3 files changed, 34 insertions(+), 8 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 5ff7edb6077..a8b2c97c188 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -340,7 +340,7 @@ import ProjectVariables from './project_variables'; container: '.js-commit-pipeline-graph', }).bindEvents(); initNotes(); - initChangesDropdown(); + initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight - 16); $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); break; case 'projects:commit:pipelines': diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index bce94e09367..779ba431d85 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -628,21 +628,45 @@ } .diff-file-changes { - width: 450px; + max-width: 550px; + 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; + } + + .diff-changed-stats { + margin-left: auto; + white-space: nowrap; } } diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml index 2de2cf9e38c..72fc828b0b3 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 + = icon("#{diff_file_changed_icon(diff_file)} fw", 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< -- cgit v1.2.1 From 8e7f84b510365d678677e72438aa674e5f9c773b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 14 Nov 2017 10:49:04 +0000 Subject: updated to use new sprite icons --- app/assets/stylesheets/framework/common.scss | 2 ++ app/helpers/diff_helper.rb | 6 +++--- app/views/projects/diffs/_stats.html.haml | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) (limited to 'app') 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/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 72fc828b0b3..dd473ebe580 100644 --- a/app/views/projects/diffs/_stats.html.haml +++ b/app/views/projects/diffs/_stats.html.haml @@ -22,7 +22,7 @@ - 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)} diff-file-changed-icon append-right-8") + = 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 -- cgit v1.2.1 From 323b4b0ffeabad52a37fb5e9aa1df5fa32a5a2ba Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 14 Nov 2017 10:50:00 +0000 Subject: updated dropdown width --- app/assets/stylesheets/pages/diff.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 779ba431d85..0e834a5ad90 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -628,7 +628,7 @@ } .diff-file-changes { - max-width: 550px; + max-width: 560px; width: 100%; z-index: 150; -- cgit v1.2.1 From e05cd8830007d0b1fba832530dca255312ba6140 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 15 Nov 2017 15:13:58 +0000 Subject: changed text color of path --- app/assets/stylesheets/pages/diff.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 0e834a5ad90..848d7f144dc 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -662,6 +662,7 @@ .diff-changed-file-path { direction: rtl; + color: $gl-text-color-tertiary; } .diff-changed-stats { -- cgit v1.2.1 From c70289a0a1c7637878b83840400ab41e763bfc07 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 17 Nov 2017 10:53:14 +0000 Subject: moved magic number into variables --- app/assets/javascripts/dispatcher.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index a8b2c97c188..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(document.querySelector('.navbar-gitlab').offsetHeight - 16); + 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': -- cgit v1.2.1