diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-10-18 19:41:29 -0500 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-10-28 09:00:30 -0500 |
commit | 002670ec73604feaf1e675ce98157bfb3d5709c9 (patch) | |
tree | 7c4feafe48a39bdc4a68243ff42ff34852800780 | |
parent | 0a848266d7b66b3dce19298337e9ac0b1471db11 (diff) | |
download | gitlab-ce-002670ec73604feaf1e675ce98157bfb3d5709c9.tar.gz |
Finish styling commits view
-rw-r--r-- | app/assets/javascripts/behaviors/details_behavior.js | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/commit.scss | 43 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 31 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 2 | ||||
-rw-r--r-- | app/views/projects/commit/_commit_box.html.haml | 24 | ||||
-rw-r--r-- | app/views/projects/commit/builds.html.haml | 3 | ||||
-rw-r--r-- | app/views/projects/commit/pipelines.html.haml | 3 | ||||
-rw-r--r-- | app/views/projects/commit/show.html.haml | 3 |
9 files changed, 85 insertions, 31 deletions
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js index 48490869364..a64cefb62bd 100644 --- a/app/assets/javascripts/behaviors/details_behavior.js +++ b/app/assets/javascripts/behaviors/details_behavior.js @@ -15,6 +15,11 @@ return $("body").on("click", ".js-details-expand", function(e) { $(this).next('.js-details-content').removeClass("hide"); $(this).hide(); + + var truncatedItem = $(this).siblings('.js-details-short'); + if (truncatedItem.length) { + truncatedItem.addClass("hide"); + } return e.preventDefault(); }); }); diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b271f8cf332..be2a7ceefff 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -90,6 +90,8 @@ $table-border-color: #f0f0f0; $background-color: $gray-light; $dark-background-color: #f5f5f5; $table-text-gray: #8f8f8f; +$widget-expand-item: #e8f2f7; +$widget-inner-border: #eef0f2; /* * Text diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 62232d8a060..16e70bf9e4c 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -33,6 +33,7 @@ &.commit-info-row-header { line-height: 34px; + padding: 10px 0; @media (min-width: $screen-sm-min) { margin-bottom: 0; @@ -80,6 +81,12 @@ } } +.js-details-expand { + &:hover { + text-decoration: none; + } +} + .commit-info-widget { background: $background-color; color: $gl-gray; @@ -90,9 +97,40 @@ padding: $gl-padding; &:not(:last-of-type) { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid $widget-inner-border; + } + + &.branch-info { + .monospace, + .commit-info { + margin-left: 4px; + } } } + + .icon-container { + display: inline-block; + margin-right: 8px; + + svg { + position: relative; + top: 2px; + height: 16px; + width: 16px; + } + + &.commit-icon { + svg { + path { + fill: $gl-text-color; + } + } + } + } + + .label.label-gray { + background-color: $widget-expand-item; + } } .ci-status-link { @@ -154,6 +192,9 @@ } .commit-action-buttons { + position: relative; + top: -1px; + i { color: $gl-icon-color; font-size: 13px; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index ad315cfae62..52d6a39bd59 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -33,21 +33,22 @@ color: $gl-dark-link-color; } - .text-expander { - display: inline-block; - background: $gray-light; - color: $gl-placeholder-color; - padding: 0 5px; - cursor: pointer; - border: 1px solid $border-gray-dark; - border-radius: $border-radius-default; - margin-left: 5px; - line-height: 1; - - &:hover { - background-color: darken($gray-light, 10%); - text-decoration: none; - } +} + +.text-expander { + display: inline-block; + background: $gray-light; + color: $gl-placeholder-color; + padding: 0 5px; + cursor: pointer; + border: 1px solid $border-gray-dark; + border-radius: $border-radius-default; + margin-left: 5px; + line-height: 1; + + &:hover { + background-color: darken($gray-light, 10%); + text-decoration: none; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index f510e3d3cdf..f8e31a624ec 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -60,7 +60,7 @@ } .ci_widget { - border-bottom: 1px solid #eef0f2; + border-bottom: 1px solid $widget-inner-border; svg { margin-right: 4px; diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml index 4039d059d40..47f45ae6b1a 100644 --- a/app/views/projects/commit/_commit_box.html.haml +++ b/app/views/projects/commit/_commit_box.html.haml @@ -1,7 +1,11 @@ .commit-info-row.commit-info-row-header %span.hidden-xs.hidden-sm Commit - = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm" - = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline" + = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short" + = link_to("#", class: "js-details-expand") do + %span.text-expander + \... + %span.js-details-content.hide + = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm" = clipboard_button(clipboard_text: @commit.id) %span.hidden-xs authored #{time_ago_with_tooltip(@commit.authored_date)} @@ -53,6 +57,8 @@ .commit-info-widget .widget-row.branch-info + .icon-container.commit-icon + = custom_icon("icon_commit") %span.cgray= pluralize(@commit.parents.count, "parent") - @commit.parents.each do |parent| = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace" @@ -61,12 +67,14 @@ .widget-row.pipeline-info - if @commit.status - = ci_icon_for_status(@commit.status) - Builds for - = pluralize(@commit.pipelines.count, 'pipeline') - = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do - %span.ci-status-label - = ci_label_for_status(@commit.status) + .icon-container + = ci_icon_for_status(@commit.status) + Pipeline + = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace" + for + = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace" + %span.ci-status-label + = ci_label_for_status(@commit.status) in = time_interval_in_words @commit.pipelines.total_duration diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml index f9d7eac3542..077b2d2725b 100644 --- a/app/views/projects/commit/builds.html.haml +++ b/app/views/projects/commit/builds.html.haml @@ -3,8 +3,7 @@ = render "projects/commits/head" %div{ class: container_class } - .prepend-top-default - = render "commit_box" + = render "commit_box" = render "ci_menu" = render "builds" diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml index d85d6729a81..8233e26e4e7 100644 --- a/app/views/projects/commit/pipelines.html.haml +++ b/app/views/projects/commit/pipelines.html.haml @@ -1,7 +1,6 @@ - page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits" -.prepend-top-default - = render "commit_box" += render "commit_box" = render "ci_menu" = render "pipelines_list", pipelines: @ci_pipelines diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml index cebf58d63df..b8c64d1f13e 100644 --- a/app/views/projects/commit/show.html.haml +++ b/app/views/projects/commit/show.html.haml @@ -4,8 +4,7 @@ = render "projects/commits/head" %div{ class: container_class } - .prepend-top-default - = render "commit_box" + = render "commit_box" - if @commit.status = render "ci_menu" - else |