diff options
5 files changed, 70 insertions, 45 deletions
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index b487f6278c2..86cdda0359e 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -107,7 +107,6 @@ } } - .commits-compare-switch { float: left; margin-right: 9px; @@ -179,7 +178,7 @@ .commit-detail { display: flex; justify-content: space-between; - align-items: flex-start; + align-items: center; flex-grow: 1; .merge-request-branches & { @@ -200,37 +199,63 @@ } .ci-status-link { - display: inline-block; - position: relative; - top: 2px; + display: inline-flex; } - .btn-clipboard, - .btn-transparent { - padding-left: 0; - padding-right: 0; + > .ci-status-link, + > .btn, + > .commit-sha-group { + margin-left: $gl-padding-8; } +} +.commit-sha-group { + display: inline-flex; + + .label, .btn { - &:not(:first-child) { - margin-left: $gl-padding; - } + padding: $gl-vert-padding $gl-btn-padding; + border: 1px $border-color solid; + font-size: $gl-font-size; + line-height: $line-height-base; + border-radius: 0; + display: flex; + align-items: center; + } + + .label-monospace { + @extend .monospace; + user-select: text; + color: $gl-text-color; + background-color: $gray-light; } - .commit-sha { - font-size: 14px; - font-weight: $gl-font-weight-bold; + .btn svg { + top: auto; + fill: $gl-text-color-secondary; } - .ci-status-icon { - position: relative; - top: 2px; + .fa-clipboard { + color: $gl-text-color-secondary; + } + + :first-child { + border-bottom-left-radius: $border-radius-default; + border-top-left-radius: $border-radius-default; + } + + :not(:first-child) { + border-left: 0; + } + + :last-child { + border-bottom-right-radius: $border-radius-default; + border-top-right-radius: $border-radius-default; } } .commit, .generic_commit_status { - a, button { color: $gl-text-color; @@ -303,10 +328,8 @@ } } - .gpg-status-box { padding: 2px 10px; - margin-right: $gl-padding; &:empty { display: none; diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index 0333c29e2fd..7cc56de24e4 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -93,25 +93,18 @@ module CommitsHelper return unless current_controller?(:commits) if @path.blank? - return link_to( - _("Browse Files"), - project_tree_path(project, commit), - class: "btn btn-default" - ) + url = project_tree_path(project, commit) + tooltip = _("Browse Files") elsif @repo.blob_at(commit.id, @path) - return link_to( - _("Browse File"), - project_blob_path(project, - tree_join(commit.id, @path)), - class: "btn btn-default" - ) + url = project_blob_path(project, tree_join(commit.id, @path)) + tooltip = _("Browse File") elsif @path.present? - return link_to( - _("Browse Directory"), - project_tree_path(project, - tree_join(commit.id, @path)), - class: "btn btn-default" - ) + url = project_tree_path(project, tree_join(commit.id, @path)) + tooltip = _("Browse Directory") + end + + link_to url, class: "btn btn-default has-tooltip", title: tooltip, data: { container: "body" } do + sprite_icon('folder-open') end end diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 078bd0eee63..163432c9263 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -22,7 +22,10 @@ .commit-detail.flex-list .commit-content - = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title") + - if view_details && merge_request + = link_to commit.title, project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "commit-row-message item-title" + - else + = link_to_markdown_field(commit, :title, link, class: "commit-row-message item-title") %span.commit-row-message.visible-xs-inline · = commit.short_id @@ -52,9 +55,9 @@ = render_commit_status(commit, ref: ref) .js-commit-pipeline-status{ data: { endpoint: pipelines_project_commit_path(project, commit.id) } } - = link_to commit.short_id, link, class: "commit-sha btn btn-transparent btn-link" - = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard")) - = link_to_browse_code(project, commit) - - if view_details && merge_request - = link_to "View details", project_commit_path(project, commit.id, merge_request_iid: merge_request.iid), class: "btn btn-default" + .commit-sha-group + .label.label-monospace + = commit.short_id + = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"), class: "btn btn-default", container: "body") + = link_to_browse_code(project, commit) diff --git a/changelogs/unreleased/42448-change-commit-row-actions-and-sha-design-for-project-commit-list.yml b/changelogs/unreleased/42448-change-commit-row-actions-and-sha-design-for-project-commit-list.yml new file mode 100644 index 00000000000..77d1ebf69df --- /dev/null +++ b/changelogs/unreleased/42448-change-commit-row-actions-and-sha-design-for-project-commit-list.yml @@ -0,0 +1,6 @@ +--- +title: Improved visual styles and consistency for commit hash and possible actions + across commit lists +merge_request: 17406 +author: +type: changed diff --git a/spec/views/projects/merge_requests/_commits.html.haml_spec.rb b/spec/views/projects/merge_requests/_commits.html.haml_spec.rb index 3ca67114558..b1c6565c08a 100644 --- a/spec/views/projects/merge_requests/_commits.html.haml_spec.rb +++ b/spec/views/projects/merge_requests/_commits.html.haml_spec.rb @@ -28,6 +28,6 @@ describe 'projects/merge_requests/_commits.html.haml' do commit = merge_request.commits.first # HEAD href = diffs_project_merge_request_path(target_project, merge_request, commit_id: commit) - expect(rendered).to have_link(Commit.truncate_sha(commit.sha), href: href) + expect(rendered).to have_link(href: href) end end |