From c67331b2dbf000d632137f50dda296c146b0dd7b Mon Sep 17 00:00:00 2001 From: Arinde Eniola Date: Mon, 2 May 2016 12:34:27 +0100 Subject: [PATCH 1/4] redesign commits page --- app/assets/stylesheets/pages/commit.scss | 8 ++++++++ app/assets/stylesheets/pages/commits.scss | 4 ++++ app/views/projects/commits/_commit.html.haml | 5 +++-- app/views/projects/commits/_commits.html.haml | 14 +++++++------- 4 files changed, 22 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 358d2f4ab9d9..83c120d60681 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -2,6 +2,14 @@ display: block; } +.commit-header { + background-color: $background-color; + + .light { + margin-left: 10px; + } +} + .commit-author, .commit-committer { display: block; color: #999; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index c8c6bbde0846..bf1d1e883c9b 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,3 +1,7 @@ +.gray-content-block { + background-color: #fff; +} + .commits-compare-switch { @include btn-default; @include btn-white; diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index c7d8c9a0d15b..2efd7b16863e 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -9,6 +9,7 @@ = cache(cache_key) do %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" } + = image_tag avatar_icon(commit.send(:author), 40), class: "avatar s40", alt:'' .commit-row-title %span.item-title = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message" @@ -27,8 +28,8 @@ = preserve(markdown(escape_once(commit.description), pipeline: :single_line)) .commit-row-info - by - = commit_author_link(commit, avatar: true, size: 24) + = commit_author_link(commit, avatar: false) + authored .committed_ago #{time_ago_with_tooltip(commit.committed_date)}   = link_to_browse_code(project, commit) diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml index 64e8da9201d1..9421a7fa8e30 100644 --- a/app/views/projects/commits/_commits.html.haml +++ b/app/views/projects/commits/_commits.html.haml @@ -5,14 +5,14 @@ - commits.group_by { |c| c.committed_date.to_date }.sort.reverse.each do |day, commits| .row.commits-row - .col-md-2.hidden-xs.hidden-sm - %h5.commits-row-date - %i.fa.fa-calendar - %span= day.strftime('%d %b, %Y') - .light - = pluralize(commits.count, 'commit') - .col-md-10.col-sm-12 + .col-md-12.col-sm-12 %ul.content-list + %li.commit-header + .light + %span + = day.strftime('%d %b, %Y') + . + = pluralize(commits.count, 'commit') = render commits, project: project %hr.lists-separator -- GitLab From 7ecbc2f0439be4f71a9b367a1b74912042265f3c Mon Sep 17 00:00:00 2001 From: Arinde Eniola Date: Mon, 2 May 2016 13:06:49 +0100 Subject: [PATCH 2/4] create helper method to display author avatar only --- app/assets/stylesheets/pages/commits.scss | 2 +- app/helpers/commits_helper.rb | 8 ++++++++ app/views/projects/commits/_commit.html.haml | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index bf1d1e883c9b..0d2d82dca5b8 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -12,7 +12,7 @@ } .lists-separator { - margin: 10px 0; + margin: 0; border-color: #ddd; } diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index b59c3982edd1..161e169da9d5 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -204,6 +204,14 @@ def commit_person_link(commit, options = {}) end end + def commit_author_avatar(commit, options = {}) + user = commit.send(:author) + source_email = clean(commit.send "author_email".to_sym) + person_email = user.try(:email) || source_email + + image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "") + end + def view_file_btn(commit_sha, diff, project) link_to( namespace_project_blob_path(project.namespace, project, diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 2efd7b16863e..5e47142b9b1c 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -9,7 +9,7 @@ = cache(cache_key) do %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" } - = image_tag avatar_icon(commit.send(:author), 40), class: "avatar s40", alt:'' + = commit_author_avatar(commit, size: 30) .commit-row-title %span.item-title = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message" -- GitLab From 00795d2968747e0b8baea19c46d068b4e2b30346 Mon Sep 17 00:00:00 2001 From: Arinde Eniola Date: Mon, 2 May 2016 15:04:50 +0100 Subject: [PATCH 3/4] improve design for commits list and update the CHANGELOG --- CHANGELOG | 1 + app/assets/stylesheets/pages/commit.scss | 15 +++++++++ app/helpers/commits_helper.rb | 6 ++-- app/views/projects/commits/_commit.html.haml | 35 ++++++++++---------- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 121b03be3201..437131a02537 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -11,6 +11,7 @@ v 8.8.0 (unreleased) - Display informative message when new milestone is created - Replace Devise Async with Devise ActiveJob integration. !3902 (Connor Shea) - Allow "NEWS" and "CHANGES" as alternative names for CHANGELOG. !3768 (Connor Shea) + - Improve design of commits list - Added button to toggle whitespaces changes on diff view - Backport GitLab Enterprise support from EE - Files over 5MB can only be viewed in their raw form, files over 1MB without highlighting !3718 diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 83c120d60681..a2646ce738cc 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -2,6 +2,11 @@ display: block; } +.commit-row { + display: inline-block; + width: 70%; +} + .commit-header { background-color: $background-color; @@ -10,6 +15,16 @@ } } +.pull-right { + .commit_short_id, .ci-status-link, { + padding: 0 5px; + } + + .browse-code { + margin: 0 5px; + } +} + .commit-author, .commit-committer { display: block; color: #999; diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index 161e169da9d5..a99d785ebcb2 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -105,21 +105,21 @@ def link_to_browse_code(project, commit) "Browse File »", namespace_project_blob_path(project.namespace, project, tree_join(commit.id, @path)), - class: "pull-right" + class: "browse-code btn" ) elsif @path.present? return link_to( "Browse Directory »", namespace_project_tree_path(project.namespace, project, tree_join(commit.id, @path)), - class: "pull-right" + class: "browse-code btn" ) end end link_to( "Browse Files", namespace_project_tree_path(project.namespace, project, commit), - class: "pull-right" + class: "browse-code btn" ) end diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 5e47142b9b1c..bb911ed5305f 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -10,26 +10,27 @@ = cache(cache_key) do %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" } = commit_author_avatar(commit, size: 30) - .commit-row-title - %span.item-title - = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message" - - if commit.description? - %a.text-expander.js-toggle-button ... + .commit-row + %span.commit-row-title + %span.item-title + = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message" + - if commit.description? + %a.text-expander.js-toggle-button ... - .pull-right - - if commit.status - = render_ci_status(commit) - = clipboard_button(clipboard_text: commit.id) - = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id" + .commit-row-info + = commit_author_link(commit, avatar: false) + authored + .committed_ago + #{time_ago_with_tooltip(commit.committed_date)}   + + .pull-right + - if commit.status + = render_ci_status(commit) + = clipboard_button(clipboard_text: commit.id) + = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id" + = link_to_browse_code(project, commit) - if commit.description? .commit-row-description.js-toggle-content %pre = preserve(markdown(escape_once(commit.description), pipeline: :single_line)) - - .commit-row-info - = commit_author_link(commit, avatar: false) - authored - .committed_ago - #{time_ago_with_tooltip(commit.committed_date)}   - = link_to_browse_code(project, commit) -- GitLab From 7a8263a92396aa6e89c925b0e6a5cd2a5f8fd779 Mon Sep 17 00:00:00 2001 From: Arinde Eniola Date: Thu, 5 May 2016 09:24:57 +0100 Subject: [PATCH 4/4] make the commit page display properly on mobile --- app/assets/stylesheets/pages/commit.scss | 52 +++++++++++++++---- app/assets/stylesheets/pages/commits.scss | 12 ++++- app/helpers/commits_helper.rb | 2 +- app/views/projects/commits/_commit.html.haml | 4 +- app/views/projects/commits/_commits.html.haml | 2 +- 5 files changed, 55 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index a2646ce738cc..7badea256c1c 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -4,24 +4,54 @@ .commit-row { display: inline-block; - width: 70%; + width: 64%; + + @media (max-width: $screen-md-min) { + width: inherit; + } } -.commit-header { - background-color: $background-color; +.content-list { + .commit-header { + background-color: $background-color; + padding: 4px 0; - .light { - margin-left: 10px; + .light { + margin-left: 10px; + color: $btn-white-active; + } } -} -.pull-right { - .commit_short_id, .ci-status-link, { - padding: 0 5px; + .commit { + .avatar { + margin-right: 10px; + } } - .browse-code { - margin: 0 5px; + .pull-info-right { + float: right; + + .commit_short_id, .ci-status-link, { + padding: 0 5px; + } + + .commit_short_id { + display: inline-block; + width: 73px; + font-weight: 600; + } + + .btn-clipboard, .browse-code { + color: $btn-white-active; + } + + .browse-code { + margin: 0 5px; + } + + @media (max-width: $screen-xs-max) { + float: none; + } } } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 0d2d82dca5b8..25633525341a 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -82,6 +82,10 @@ li.commit { .item-title { display: inline-block; max-width: 70%; + + .text-expander { + color: $btn-white-active; + } } .commit-row-description { @@ -97,6 +101,10 @@ li.commit { background: inherit; padding: 0; margin: 0; + + @media (max-width: $screen-xs-max) { + width: 100%; + } } a { @@ -105,11 +113,11 @@ li.commit { } .commit-row-info { - color: $gl-gray; + color: $btn-white-active; line-height: 24px; a { - color: $gl-gray; + color: $btn-white-active; } .avatar { diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index a99d785ebcb2..67d69e3bc0c8 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -209,7 +209,7 @@ def commit_author_avatar(commit, options = {}) source_email = clean(commit.send "author_email".to_sym) person_email = user.try(:email) || source_email - image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "") + image_tag(avatar_icon(person_email, options[:size]), class: "avatar #{"s#{options[:size]} hidden-xs" if options[:size]}", width: options[:size], alt: "") end def view_file_btn(commit_sha, diff, project) diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index bb911ed5305f..61bf4381bc21 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -9,7 +9,7 @@ = cache(cache_key) do %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" } - = commit_author_avatar(commit, size: 30) + = commit_author_avatar(commit, size: 32) .commit-row %span.commit-row-title %span.item-title @@ -23,7 +23,7 @@ .committed_ago #{time_ago_with_tooltip(commit.committed_date)}   - .pull-right + .pull-info-right - if commit.status = render_ci_status(commit) = clipboard_button(clipboard_text: commit.id) diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml index 9421a7fa8e30..1e069367187e 100644 --- a/app/views/projects/commits/_commits.html.haml +++ b/app/views/projects/commits/_commits.html.haml @@ -11,7 +11,7 @@ .light %span = day.strftime('%d %b, %Y') - . + • = pluralize(commits.count, 'commit') = render commits, project: project %hr.lists-separator -- GitLab