diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 22:30:48 +0300 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-09 22:30:48 +0300 |
commit | d7e8adeabfb77d9675234f6ca2f73089915ce0ad (patch) | |
tree | 9fe2cb1b09414dbc89b01db10e69bc2c5a8e88ad /app | |
parent | ae126c5599315b817a22e9d7b7866ea532c4d880 (diff) | |
parent | b0a80f69e3f96b4f259a8b4ee9cedc7e6b64745a (diff) |
Merge branch 'labels-ui-fix' into 'master'
Updated labels UI
- Fixed alignment issues
- Added dropdown to mobile to make the options look nicer & to save space
![Screen_Shot_2016-05-25_at_09.42.46](/uploads/ff59abd2310725965b388a62c6c1f2af/Screen_Shot_2016-05-25_at_09.42.46.png)
Closes #14227
See merge request !4273
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/subscription.js.coffee | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/labels.scss | 108 | ||||
-rw-r--r-- | app/helpers/labels_helper.rb | 6 | ||||
-rw-r--r-- | app/views/projects/labels/_label.html.haml | 62 | ||||
-rw-r--r-- | app/views/shared/_label_row.html.haml | 5 |
5 files changed, 105 insertions, 81 deletions
diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee index 1a430f3aa47..08d494aba9f 100644 --- a/app/assets/javascripts/subscription.js.coffee +++ b/app/assets/javascripts/subscription.js.coffee @@ -19,3 +19,8 @@ class @Subscription action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe' btn.find('span').text(action) @subscription_status.find('>div').toggleClass('hidden') + + if btn.attr('data-original-title') + btn.tooltip('hide') + .attr('data-original-title', action) + .tooltip('fixTitle') diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 26128fcea85..bc65404a741 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -50,11 +50,26 @@ .label-row { .label-name { - display: inline-block; - width: 170px; + display: block; + margin-bottom: 10px; - @media (max-width: $screen-xs-min) { - display: block; + @media (min-width: $screen-sm-min) { + display: inline-block; + width: 200px; + margin-bottom: 0; + } + } + + .label-description { + display: block; + margin-bottom: 10px; + + @media (min-width: $screen-sm-min) { + display: inline-block; + width: 40%; + margin-left: 10px; + margin-bottom: 0; + vertical-align: middle; } } @@ -68,10 +83,6 @@ padding: 3px 4px; } -.label-subscription { - display: inline-block; -} - .dropdown-labels-error { padding: 5px 10px; margin-bottom: 10px; @@ -79,62 +90,27 @@ color: $white-light; } -@mixin labels-mobile { - @media (max-width: $screen-xs-min) { - display: block; - width: 100%; - margin-left: 0; - padding: 10px 0; - } -} - - .manage-labels-list { + .btn-action { + color: $gl-dark-link-color; - .prepend-left-10, .prepend-description-left { - display: inline-block; - width: 40%; - vertical-align: middle; - - @include labels-mobile; - } - - .prepend-description-left { - width: 57%; - - @include labels-mobile; - } - - .pull-info-right { - float: right; - - @media (max-width: $screen-xs-min) { - float: none; + .fa { + font-size: 18px; + vertical-align: middle; } - .action-buttons { - border-color: transparent; - padding: 6px; - color: $gl-text-color; + &:hover { + color: $gl-link-color; - &.label-subscribe-button { - padding-left: 0; + &.remove-row { + color: $gl-danger; } } + } - i { - color: $gl-text-color; - } - - .append-right-20 { - a { - color: $gl-text-color; - } - - @media (max-width: $screen-xs-min) { - display: block; - margin-bottom: 10px; - } + .dropdown { + @media (min-width: $screen-sm-min) { + float: right; } } } @@ -186,3 +162,23 @@ color: inherit; } } + +.label-options-toggle { + width: 100%; +} + +.label-subscribe-button { + .label-subscribe-button-loading { + display: none; + } + + &.disabled { + .label-subscribe-button-icon { + display: none; + } + + .label-subscribe-button-loading { + display: block; + } + } +} diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb index c99b137cdaa..5074e645769 100644 --- a/app/helpers/labels_helper.rb +++ b/app/helpers/labels_helper.rb @@ -32,7 +32,7 @@ module LabelsHelper # link_to_label(label) { "My Custom Label Text" } # # Returns a String - def link_to_label(label, project: nil, type: :issue, tooltip: true, &block) + def link_to_label(label, project: nil, type: :issue, tooltip: true, css_class: nil, &block) project ||= @project || label.project link = send("namespace_project_#{type.to_s.pluralize}_path", project.namespace, @@ -40,9 +40,9 @@ module LabelsHelper label_name: [label.name]) if block_given? - link_to link, &block + link_to link, class: css_class, &block else - link_to render_colored_label(label, tooltip: tooltip), link + link_to render_colored_label(label, tooltip: tooltip), link, class: css_class end end diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml index 1c51ea676c7..73c6f2a046c 100644 --- a/app/views/projects/labels/_label.html.haml +++ b/app/views/projects/labels/_label.html.haml @@ -1,28 +1,50 @@ - label_css_id = dom_id(label) %li{id: label_css_id, data: { id: label.id } } = render "shared/label_row", label: label - .pull-info-right - %span.append-right-20 - = link_to_label(label, type: :merge_request) do - = pluralize label.open_merge_requests_count, 'merge request' - %span.append-right-20 - = link_to_label(label) do - = pluralize label.open_issues_count(current_user), 'open issue' + .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown + %button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } } + Options + %span.caret + .dropdown-menu.dropdown-menu-align-right + %ul + %li + = link_to_label(label, type: :merge_request) do + = pluralize label.open_merge_requests_count, 'merge request' + %li + = link_to_label(label) do + = pluralize label.open_issues_count(current_user), 'open issue' + - if current_user + %li.label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } } + %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label) } } + %span= label_subscription_toggle_button_text(label) + - if can? current_user, :admin_label, @project + %li + = link_to "Edit", edit_namespace_project_label_path(@project.namespace, @project, label) + %li + = link_to "Delete", namespace_project_label_path(@project.namespace, @project, label), title: "Delete", method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"} - - if current_user - .label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } } - .subscription-status{ data: { status: label_subscription_status(label) } } + .pull-right.hidden-xs.hidden-sm.hidden-md + = link_to_label(label, type: :merge_request, css_class: 'btn btn-transparent btn-action') do + = pluralize label.open_merge_requests_count, 'merge request' + = link_to_label(label, css_class: 'btn btn-transparent btn-action') do + = pluralize label.open_issues_count(current_user), 'open issue' - %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } } - %span= label_subscription_toggle_button_text(label) + - if current_user + .label-subscription.inline{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } } + %button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label), data: { toggle: "tooltip", status: label_subscription_status(label) } } + %span.sr-only= label_subscription_toggle_button_text(label) + = icon('eye', class: 'label-subscribe-button-icon') + = icon('spinner spin', class: 'label-subscribe-button-loading') - - if can?(current_user, :admin_label, @project) - = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: { toggle: 'tooltip' } do - %i.fa.fa-pencil-square-o - = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn action-buttons remove-row', method: :delete, remote: true, data: { confirm: 'Remove this label? Are you sure?', toggle: 'tooltip' } do - %i.fa.fa-trash-o + - if can? current_user, :admin_label, @project + = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do + %span.sr-only Edit + = icon('pencil-square-o') + = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip"} do + %span.sr-only Delete + = icon('trash-o') -- if current_user - :javascript - new Subscription('##{label_css_id} .label-subscription'); + - if current_user + :javascript + new Subscription('##{dom_id(label)} .label-subscription'); diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml index d315a3fe93b..478c04318c6 100644 --- a/app/views/shared/_label_row.html.haml +++ b/app/views/shared/_label_row.html.haml @@ -8,5 +8,6 @@ = icon('star') %span.label-name = link_to_label(label, tooltip: false) - %span.prepend-left-10 - = markdown(label.description, pipeline: :single_line) + - if label.description + %span.label-description + = markdown(label.description, pipeline: :single_line) |