From ee6c4a2cca65d56c01156950d62dfb2f01839cb9 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 19 Feb 2015 18:23:10 -0800 Subject: Improve commits UI --- CHANGELOG | 2 +- app/assets/stylesheets/sections/commits.scss | 21 ++++++++++++++++++--- app/views/projects/commits/_commit.html.haml | 7 ++++--- app/views/projects/commits/_commits.html.haml | 9 +++++---- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 35387538d39..575afcbbb6a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,5 @@ v 7.9.0 (unreleased) - - Fix broken access control for note attachments (Hannes Rosenögger) + - Move labels/milestones tabs to sidebar v 7.8.0 (unreleased) - Replace highlight.js with rouge-fork rugments (Stefan Tatschner) diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss index 2e274d06c12..f6723eb308f 100644 --- a/app/assets/stylesheets/sections/commits.scss +++ b/app/assets/stylesheets/sections/commits.scss @@ -136,10 +136,13 @@ /** * COMMIT ROW */ -li.commit { +ul li.commit { + padding: 8px 0; + .commit-row-title { font-size: $list-font-size; - margin-bottom: 2px; + line-height: 20px; + margin-bottom: 5px; .notes_count { float: right; @@ -199,7 +202,7 @@ li.commit { } .committed_ago { - float: right; + display: inline-block; } } @@ -245,3 +248,15 @@ li.commit { z-index: 2; } } + +.commits-row { + ul { + margin: 0; + } + + .commits-row-date { + font-size: 15px; + line-height: 20px; + margin-bottom: 5px; + } +} diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 1eb17f760dc..1bf1ada1680 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -1,8 +1,6 @@ %li.commit.js-toggle-container .commit-row-title - = link_to commit.short_id, project_commit_path(project, commit), class: "commit_short_id" -   - %span.str-truncated + %strong.str-truncated = link_to_gfm commit.title, project_commit_path(project, commit.id), class: "commit-row-message" - if commit.description? %a.text-expander.js-toggle-button ... @@ -27,5 +25,8 @@ .commit-row-info = commit_author_link(commit, avatar: true, size: 16) + authored .committed_ago #{time_ago_with_tooltip(commit.committed_date)}   + .pull-right + = link_to commit.short_id, project_commit_path(project, commit), class: "commit_short_id" diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml index 2d0ca671fa0..0cd9ce1f371 100644 --- a/app/views/projects/commits/_commits.html.haml +++ b/app/views/projects/commits/_commits.html.haml @@ -3,12 +3,13 @@ - @commits.group_by { |c| c.committed_date.to_date }.sort.reverse.each do |day, commits| .row.commits-row - .col-md-2 - %h4 + .col-md-2.hidden-xs.hidden-sm + %h5.commits-row-date %i.fa.fa-calendar %span= day.stamp("28 Aug, 2010") - %p= pluralize(commits.count, 'commit') - .col-md-10 + .light + = pluralize(commits.count, 'commit') + .col-md-10.col-sm-12 %ul.bordered-list = render commits, project: project %hr.lists-separator -- cgit v1.2.1 From 906f8efd29ad7d4abb95e8e3507d5a6aa700d653 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 19 Feb 2015 20:45:21 -0800 Subject: Refactor commits css --- app/assets/stylesheets/sections/commit.scss | 131 ++++++++++++ app/assets/stylesheets/sections/commits.scss | 302 +++++++-------------------- app/views/projects/commits/_commit.html.haml | 2 +- 3 files changed, 212 insertions(+), 223 deletions(-) create mode 100644 app/assets/stylesheets/sections/commit.scss diff --git a/app/assets/stylesheets/sections/commit.scss b/app/assets/stylesheets/sections/commit.scss new file mode 100644 index 00000000000..0e2d9571a45 --- /dev/null +++ b/app/assets/stylesheets/sections/commit.scss @@ -0,0 +1,131 @@ +.commit-title{ + display: block; +} + +.commit-title{ + margin-bottom: 10px; +} + +.commit-author, .commit-committer{ + display: block; + color: #999; + font-weight: normal; + font-style: italic; +} + +.commit-author strong, .commit-committer strong{ + font-weight: bold; + font-style: normal; +} + +.commit-description { + background: none; + border: none; + margin: 0; + padding: 0; + margin-top: 10px; +} + +.commit-stat-summary { + color: #666; + font-size: 14px; + font-weight: normal; + padding: 10px 0; +} + +.commit-info-row { + margin-bottom: 10px; + .avatar { + @extend .avatar-inline; + } + .commit-committer-link, + .commit-author-link { + color: #444; + font-weight: bold; + } +} + +.commit-committer-link, +.commit-author-link { + font-size: 13px; + color: #555; + &:hover { + color: #999; + } +} + +.commit-box { + margin: 10px 0; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; + padding: 20px 0; + + .commit-title { + margin: 0; + } + + .commit-description { + margin-top: 15px; + } +} + +.file-stats a { + color: $style_color; +} + +.file-stats { + .new-file { + a { + color: #090; + } + i { + color: #1BCF00; + } + } + .renamed-file { + i { + color: #FE9300; + } + } + .deleted-file { + a { + color: #B00; + } + i { + color: #EE0000; + } + } + .edit-file{ + i{ + color: #555; + } + } +} + +/* + * Commit message textarea for web editor and + * custom merge request message + */ +.commit-message-container { + background-color: $body-bg; + position: relative; + font-family: $monospace_font; + $left: 12px; + .max-width-marker { + width: 72ch; + color: rgba(0, 0, 0, 0.0); + font-family: inherit; + left: $left; + height: 100%; + border-right: 1px solid mix($input-border, white); + position: absolute; + z-index: 1; + } + > textarea { + background-color: rgba(0, 0, 0, 0.0); + font-family: inherit; + padding-left: $left; + position: relative; + z-index: 2; + } +} diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss index f6723eb308f..fa5a3b09693 100644 --- a/app/assets/stylesheets/sections/commits.scss +++ b/app/assets/stylesheets/sections/commits.scss @@ -1,77 +1,3 @@ -/** - * Commit file - */ -.commit-committer-link, -.commit-author-link { - font-size: 13px; - color: #555; - &:hover { - color: #999; - } -} - -/** COMMIT BLOCK **/ -.commit-title{ - display: block; -} -.commit-title{ - margin-bottom: 10px; -} -.commit-author, .commit-committer{ - display: block; - color: #999; - font-weight: normal; - font-style: italic; -} -.commit-author strong, .commit-committer strong{ - font-weight: bold; - font-style: normal; -} - - -.file-stats a { - color: $style_color; -} - -.file-stats { - .new-file { - a { - color: #090; - } - i { - color: #1BCF00; - } - } - .renamed-file { - i { - color: #FE9300; - } - } - .deleted-file { - a { - color: #B00; - } - i { - color: #EE0000; - } - } - .edit-file{ - i{ - color: #555; - } - } -} - -.label_commit { - @include border-radius(4px); - padding: 2px 4px; - font-size: 13px; - background: #474D57; - color: #fff; - font-family: $monospace_font; -} - - .commits-compare-switch{ background: image-url("switch_icon.png") no-repeat center center; width: 32px; @@ -85,136 +11,104 @@ background-color: #EEE; } -.commit-description { - background: none; - border: none; - margin: 0; - padding: 0; - margin-top: 10px; -} - -.commit-box { - margin: 10px 0; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; - padding: 20px 0; - - .commit-title { - margin: 0; - } - - .commit-description { - margin-top: 15px; - } -} - - -.commit-stat-summary { - color: #666; - font-size: 14px; - font-weight: normal; - padding: 10px 0; -} - -.commit-info-row { - margin-bottom: 10px; - .avatar { - @extend .avatar-inline; - } - .commit-committer-link, - .commit-author-link { - color: #444; - font-weight: bold; - } -} .lists-separator { margin: 10px 0; border-top: 1px dashed #CCC; } -/** - * COMMIT ROW - */ -ul li.commit { - padding: 8px 0; - - .commit-row-title { - font-size: $list-font-size; - line-height: 20px; - margin-bottom: 5px; - - .notes_count { - float: right; - margin-right: 10px; - } - - .commit_short_id { - min-width: 65px; - font-family: $monospace_font; - } - - .str-truncated { - max-width: 70%; - } +.commits-row { + ul { + margin: 0; - .commit-row-message { - color: #333; - &:hover { - color: #444; - text-decoration: underline; + li.commit { + padding: 8px 0; + + .commit-row-title { + font-size: $list-font-size; + line-height: 20px; + margin-bottom: 2px; + + .notes_count { + float: right; + margin-right: 10px; + } + + .commit_short_id { + min-width: 65px; + font-family: $monospace_font; + } + + .str-truncated { + max-width: 70%; + } + + .commit-row-message { + color: #333; + &:hover { + color: #444; + text-decoration: underline; + } + } + + .text-expander { + background: #eee; + color: #555; + padding: 0 5px; + cursor: pointer; + margin-left: 4px; + &:hover { + background-color: #ddd; + } + } } - } - .text-expander { - background: #eee; - color: #555; - padding: 0 5px; - cursor: pointer; - margin-left: 4px; - &:hover { - background-color: #ddd; + .commit-row-description { + font-size: 14px; + border-left: 1px solid #EEE; + padding: 10px 15px; + margin: 5px 0 10px 5px; + background: #f9f9f9; + display: none; + + pre { + border: none; + background: inherit; + padding: 0; + margin: 0; + } } - } - } - .commit-row-description { - font-size: 14px; - border-left: 1px solid #EEE; - padding: 10px 15px; - margin: 5px 0 10px 5px; - background: #f9f9f9; - display: none; + .commit-row-info { + color: #777; + line-height: 24px; - pre { - border: none; - background: inherit; - padding: 0; - margin: 0; - } - } + a { + color: #777; + } - .commit-row-info { - color: #777; + .committed_ago { + display: inline-block; + } + } - a { - color: #777; - } + &.inline-commit { + .commit-row-title { + font-size: 13px; + } - .committed_ago { - display: inline-block; + .committed_ago { + float: right; + @extend .cgray; + } + } } } - &.inline-commit { - .commit-row-title { - font-size: 13px; - } - - .committed_ago { - float: right; - @extend .cgray; - } + .commits-row-date { + font-size: 15px; + line-height: 20px; + margin-bottom: 5px; } } @@ -224,39 +118,3 @@ ul li.commit { padding: 4px 12px; } } - -.commit-message-container { - background-color: $body-bg; - position: relative; - font-family: $monospace_font; - $left: 12px; - .max-width-marker { - width: 72ch; - color: rgba(0, 0, 0, 0.0); - font-family: inherit; - left: $left; - height: 100%; - border-right: 1px solid mix($input-border, white); - position: absolute; - z-index: 1; - } - > textarea { - background-color: rgba(0, 0, 0, 0.0); - font-family: inherit; - padding-left: $left; - position: relative; - z-index: 2; - } -} - -.commits-row { - ul { - margin: 0; - } - - .commits-row-date { - font-size: 15px; - line-height: 20px; - margin-bottom: 5px; - } -} diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml index 1bf1ada1680..64f528f482e 100644 --- a/app/views/projects/commits/_commit.html.haml +++ b/app/views/projects/commits/_commit.html.haml @@ -24,7 +24,7 @@ = preserve(gfm(escape_once(commit.description))) .commit-row-info - = commit_author_link(commit, avatar: true, size: 16) + = commit_author_link(commit, avatar: true, size: 24) authored .committed_ago #{time_ago_with_tooltip(commit.committed_date)}   -- cgit v1.2.1 From 692aa78380c4c494ab2367516d68c862f35d7c76 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 19 Feb 2015 21:55:47 -0800 Subject: Improve issue and merge request lists UI --- app/assets/stylesheets/sections/commits.scss | 161 +++++++++++---------- app/assets/stylesheets/sections/issues.scss | 1 + .../stylesheets/sections/merge_requests.scss | 1 + app/views/projects/issues/_issue.html.haml | 16 +- .../merge_requests/_merge_request.html.haml | 39 ++--- 5 files changed, 115 insertions(+), 103 deletions(-) diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss index fa5a3b09693..20e6011afb2 100644 --- a/app/assets/stylesheets/sections/commits.scss +++ b/app/assets/stylesheets/sections/commits.scss @@ -23,85 +23,6 @@ li.commit { padding: 8px 0; - - .commit-row-title { - font-size: $list-font-size; - line-height: 20px; - margin-bottom: 2px; - - .notes_count { - float: right; - margin-right: 10px; - } - - .commit_short_id { - min-width: 65px; - font-family: $monospace_font; - } - - .str-truncated { - max-width: 70%; - } - - .commit-row-message { - color: #333; - &:hover { - color: #444; - text-decoration: underline; - } - } - - .text-expander { - background: #eee; - color: #555; - padding: 0 5px; - cursor: pointer; - margin-left: 4px; - &:hover { - background-color: #ddd; - } - } - } - - .commit-row-description { - font-size: 14px; - border-left: 1px solid #EEE; - padding: 10px 15px; - margin: 5px 0 10px 5px; - background: #f9f9f9; - display: none; - - pre { - border: none; - background: inherit; - padding: 0; - margin: 0; - } - } - - .commit-row-info { - color: #777; - line-height: 24px; - - a { - color: #777; - } - - .committed_ago { - display: inline-block; - } - } - - &.inline-commit { - .commit-row-title { - font-size: 13px; - } - - .committed_ago { - float: right; - @extend .cgray; - } - } } } @@ -114,7 +35,89 @@ .commits-feed-holder { float: right; + .btn { padding: 4px 12px; } } + +li.commit { + .commit-row-title { + font-size: $list-font-size; + line-height: 20px; + margin-bottom: 2px; + + .notes_count { + float: right; + margin-right: 10px; + } + + .commit_short_id { + min-width: 65px; + font-family: $monospace_font; + } + + .str-truncated { + max-width: 70%; + } + + .commit-row-message { + color: #444; + + &:hover { + text-decoration: underline; + } + } + + .text-expander { + background: #eee; + color: #555; + padding: 0 5px; + cursor: pointer; + margin-left: 4px; + &:hover { + background-color: #ddd; + } + } + } + + .commit-row-description { + font-size: 14px; + border-left: 1px solid #EEE; + padding: 10px 15px; + margin: 5px 0 10px 5px; + background: #f9f9f9; + display: none; + + pre { + border: none; + background: inherit; + padding: 0; + margin: 0; + } + } + + .commit-row-info { + color: #777; + line-height: 24px; + + a { + color: #777; + } + + .committed_ago { + display: inline-block; + } + } + + &.inline-commit { + .commit-row-title { + font-size: 13px; + } + + .committed_ago { + float: right; + @extend .cgray; + } + } +} diff --git a/app/assets/stylesheets/sections/issues.scss b/app/assets/stylesheets/sections/issues.scss index ccfc9b704a6..356e8864389 100644 --- a/app/assets/stylesheets/sections/issues.scss +++ b/app/assets/stylesheets/sections/issues.scss @@ -6,6 +6,7 @@ .issue-title { margin-bottom: 5px; font-size: $list-font-size; + font-weight: bold; } .issue-info { diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss index a3eabb5e330..0d2d8b0173e 100644 --- a/app/assets/stylesheets/sections/merge_requests.scss +++ b/app/assets/stylesheets/sections/merge_requests.scss @@ -91,6 +91,7 @@ .merge-request-title { margin-bottom: 5px; font-size: $list-font-size; + font-weight: bold; } .merge-request-info { diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml index dc6510be858..240fcc2b527 100644 --- a/app/views/projects/issues/_issue.html.haml +++ b/app/views/projects/issues/_issue.html.haml @@ -6,9 +6,15 @@ .issue-title %span.str-truncated = link_to_gfm issue.title, project_issue_path(issue.project, issue), class: "row_title" - - if issue.closed? - %small.pull-right - CLOSED + .pull-right + - if issue.closed? + %span + CLOSED + - if issue.notes.any? +   + %span + %i.fa.fa-comments + = issue.notes.count .issue-info %span.light= "##{issue.iid}" @@ -16,10 +22,6 @@ assigned to #{link_to_member(@project, issue.assignee)} - if issue.votes_count > 0 = render 'votes/votes_inline', votable: issue - - if issue.notes.any? - %span - %i.fa.fa-comments - = issue.notes.count - if issue.milestone %span %i.fa.fa-clock-o diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml index 1686ca0e876..be09f3a938d 100644 --- a/app/views/projects/merge_requests/_merge_request.html.haml +++ b/app/views/projects/merge_requests/_merge_request.html.haml @@ -1,18 +1,26 @@ %li{ class: mr_css_classes(merge_request) } .merge-request-title - = link_to_gfm truncate(merge_request.title, length: 80), project_merge_request_path(merge_request.target_project, merge_request), class: "row_title" - - if merge_request.merged? - %small.pull-right - %i.fa.fa-check - MERGED - - else - %span.pull-right.hidden-xs - - if merge_request.for_fork? - %span.light - #{merge_request.source_project_namespace}: - = truncate merge_request.source_branch, length: 25 - %i.fa.fa-angle-right.light - = merge_request.target_branch + %span.str-truncated + = link_to_gfm merge_request.title, project_merge_request_path(merge_request.target_project, merge_request), class: "row_title" + .pull-right + - if merge_request.merged? + %span + %i.fa.fa-check + MERGED + - elsif merge_request.closed? + %span + %i.fa.fa-close + CLOSED + - else + %span.hidden-xs.hidden-sm + %span.label-branch< + %i.fa.fa-code-fork + %span= merge_request.target_branch + - if merge_request.notes.any? +   + %span + %i.fa.fa-comments + = merge_request.mr_and_commit_notes.count .merge-request-info %span.light= "##{merge_request.iid}" - if merge_request.assignee @@ -21,10 +29,6 @@ Unassigned - if merge_request.votes_count > 0 = render 'votes/votes_inline', votable: merge_request - - if merge_request.notes.any? - %span - %i.fa.fa-comments - = merge_request.mr_and_commit_notes.count - if merge_request.milestone_id? %span %i.fa.fa-clock-o @@ -33,6 +37,7 @@ %span.task-status = merge_request.task_status + .pull-right.hidden-xs %small updated #{time_ago_with_tooltip(merge_request.updated_at, 'bottom', 'merge_request_updated_ago')} -- cgit v1.2.1