From a5439897d20b80274733605862d050b2abfb1cb3 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 12 Dec 2017 21:44:59 -0600 Subject: Update issuable status icons Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33926 Changed file icons already addressed in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15367 --- app/assets/javascripts/issue.js | 2 +- app/assets/stylesheets/framework/issue_box.scss | 6 +++++- app/assets/stylesheets/pages/issuable.scss | 16 ++++++++++++---- app/helpers/issues_helper.rb | 2 +- app/models/merge_request.rb | 6 +++--- app/views/projects/issues/show.html.haml | 6 +++--- app/views/projects/merge_requests/_mr_title.html.haml | 2 +- changelogs/unreleased/33926-update-issuable-icons.yml | 5 +++++ spec/javascripts/issue_spec.js | 2 +- 9 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 changelogs/unreleased/33926-update-issuable-icons.yml diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js index 91b5ef1c10a..411c820cc43 100644 --- a/app/assets/javascripts/issue.js +++ b/app/assets/javascripts/issue.js @@ -48,7 +48,7 @@ export default class Issue { }) .fail(() => new Flash(issueFailMessage)) .done((data) => { - const isClosedBadge = $('div.status-box-closed'); + const isClosedBadge = $('div.status-box-issue-closed'); const isOpenBadge = $('div.status-box-open'); const projectIssuesCounter = $('.issue_counter'); diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 1537b0744cc..1d8bd26cf1a 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -24,10 +24,14 @@ font-size: $gl-font-size; line-height: 25px; - &.status-box-closed { + &.status-box-mr-closed { background-color: $gl-danger; } + &.status-box-issue-closed { + background-color: $gl-primary; + } + &.status-box-merged { background-color: $gl-primary; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 8f8f11e3857..e19196e0c41 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -610,11 +610,19 @@ } .issuable-status-box { - float: none; - display: inline-block; + align-self: stretch; + display: flex; + justify-content: center; + align-items: center; margin-top: 0; - height: auto; - align-self: center; + padding-left: 9px; + padding-right: 9px; + + @media (min-width: $screen-sm-min) { + display: inline-block; + height: auto; + align-self: center; + } } .issuable-gutter-toggle { diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb index 212cdbb8157..0f110bd25c5 100644 --- a/app/helpers/issues_helper.rb +++ b/app/helpers/issues_helper.rb @@ -74,7 +74,7 @@ module IssuesHelper elsif item.try(:merged?) 'status-box-merged' elsif item.closed? - 'status-box-closed' + 'status-box-mr-closed' elsif item.try(:upcoming?) 'status-box-upcoming' else diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb index 26a3388602a..86d7bdad574 100644 --- a/app/models/merge_request.rb +++ b/app/models/merge_request.rb @@ -879,11 +879,11 @@ class MergeRequest < ActiveRecord::Base def state_icon_name if merged? - "check" + "git-merge" elsif closed? - "times" + "close" else - "circle-o" + "issue-open-m" end end diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index d260aaee2d3..eab7879c7bf 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -14,12 +14,12 @@ .detail-page-header .detail-page-header-body - .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) } - = icon('check', class: "hidden-sm hidden-md hidden-lg") + .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) } + = sprite_icon('mobile-issue-close', size: 16, css_class: 'hidden-sm hidden-md hidden-lg') %span.hidden-xs Closed .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) } - = icon('circle-o', class: "hidden-sm hidden-md hidden-lg") + = sprite_icon('issue-open-m', size: 16, css_class: 'hidden-sm hidden-md hidden-lg') %span.hidden-xs Open .issuable-meta diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml index bc91758110e..22c8b6b513d 100644 --- a/app/views/projects/merge_requests/_mr_title.html.haml +++ b/app/views/projects/merge_requests/_mr_title.html.haml @@ -7,7 +7,7 @@ .detail-page-header .detail-page-header-body .issuable-status-box.status-box{ class: status_box_class(@merge_request) } - = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg") + = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'hidden-sm hidden-md hidden-lg') %span.hidden-xs = @merge_request.state_human_name diff --git a/changelogs/unreleased/33926-update-issuable-icons.yml b/changelogs/unreleased/33926-update-issuable-icons.yml new file mode 100644 index 00000000000..87076dde545 --- /dev/null +++ b/changelogs/unreleased/33926-update-issuable-icons.yml @@ -0,0 +1,5 @@ +--- +title: Update issuable status icons +merge_request: 15898 +author: +type: changed diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js index 3636aac79a0..2cd2e63b15d 100644 --- a/spec/javascripts/issue_spec.js +++ b/spec/javascripts/issue_spec.js @@ -55,7 +55,7 @@ describe('Issue', function() { } function findElements(isIssueInitiallyOpen) { - $boxClosed = $('div.status-box-closed'); + $boxClosed = $('div.status-box-issue-closed'); expect($boxClosed).toExist(); expect($boxClosed).toHaveText('Closed'); -- cgit v1.2.1