Commit 1a430836 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '39550-group-labels-redesign' into 'master'

Resolve "Group label list page redesign"

Closes #39550

See merge request gitlab-org/gitlab-ce!16592
parents 9483cbab cf9b932f
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
.page-title { .page-title {
margin-top: 0; margin-top: 0;
.color-label {
font-size: $gl-font-size;
padding: $gl-vert-padding $label-padding-modal;
}
} }
} }
......
...@@ -558,6 +558,7 @@ $jq-ui-default-color: #777; ...@@ -558,6 +558,7 @@ $jq-ui-default-color: #777;
* Label * Label
*/ */
$label-padding: 7px; $label-padding: 7px;
$label-padding-modal: 10px;
$label-gray-bg: #f8fafc; $label-gray-bg: #f8fafc;
$label-inverse-bg: #333; $label-inverse-bg: #333;
$label-remove-border: rgba(0, 0, 0, .1); $label-remove-border: rgba(0, 0, 0, .1);
......
...@@ -58,13 +58,13 @@ ...@@ -58,13 +58,13 @@
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
width: 200px; width: 200px;
margin-left: $gl-padding * 2;
margin-bottom: 0; margin-bottom: 0;
} }
.label { .label {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle;
max-width: 100%; max-width: 100%;
} }
} }
...@@ -79,26 +79,33 @@ ...@@ -79,26 +79,33 @@
width: 100px; width: 100px;
margin-left: 10px; margin-left: 10px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: top;
} }
} }
.label-description { .label-description {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 50px;
.description-text {
margin-bottom: $gl-padding;
}
a {
color: $blue-600;
}
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
display: inline-block; display: inline-block;
width: 30%; max-width: 50%;
margin-left: 10px; margin-left: 10px;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: top;
} }
} }
.label { .label {
padding: 8px 9px 9px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
} }
} }
...@@ -116,6 +123,12 @@ ...@@ -116,6 +123,12 @@
} }
.manage-labels-list { .manage-labels-list {
@media(min-width: $screen-md-min) {
&.content-list li {
padding: $gl-padding 0;
}
}
> li:not(.empty-message):not(.is-not-draggable) { > li:not(.empty-message):not(.is-not-draggable) {
background-color: $white-light; background-color: $white-light;
cursor: move; cursor: move;
...@@ -133,8 +146,6 @@ ...@@ -133,8 +146,6 @@
} }
.btn-action { .btn-action {
color: $gl-text-color;
.fa { .fa {
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
...@@ -155,10 +166,18 @@ ...@@ -155,10 +166,18 @@
float: right; float: right;
} }
} }
@media (max-width: $screen-xs-max) {
.dropdown-menu {
min-width: 100%;
}
}
} }
.draggable-handler { .draggable-handler {
display: inline-block; display: inline-block;
vertical-align: top;
margin: 5px 0;
opacity: 0; opacity: 0;
transition: opacity .3s; transition: opacity .3s;
color: $gray-darkest; color: $gray-darkest;
...@@ -188,7 +207,7 @@ ...@@ -188,7 +207,7 @@
.toggle-priority { .toggle-priority {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: top;
button { button {
border-color: transparent; border-color: transparent;
...@@ -255,6 +274,11 @@ ...@@ -255,6 +274,11 @@
} }
.label-subscribe-button { .label-subscribe-button {
@media(min-width: $screen-md-min) {
min-width: 105px;
margin-left: $gl-padding;
}
.label-subscribe-button-icon { .label-subscribe-button-icon {
&[disabled] { &[disabled] {
opacity: 0.5; opacity: 0.5;
......
...@@ -54,7 +54,7 @@ class Groups::LabelsController < Groups::ApplicationController ...@@ -54,7 +54,7 @@ class Groups::LabelsController < Groups::ApplicationController
respond_to do |format| respond_to do |format|
format.html do format.html do
redirect_to group_labels_path(@group), status: 302, notice: 'Label was removed' redirect_to group_labels_path(@group), status: 302, notice: "#{@label.name} deleted permanently"
end end
format.js format.js
end end
......
.modal{ id: "modal-delete-label-#{label.id}", tabindex: -1 }
.modal-dialog
.modal-content
.modal-header
%button.close{ data: {dismiss: 'modal' } } &times;
%h3.page-title Delete #{render_colored_label(label, tooltip: false)} ?
.modal-body
%p
%strong= label.name
%span will be permanently deleted from #{label.is_a?(ProjectLabel)? label.project.name : label.group.name}. This cannot be undone.
.modal-footer
%a{ href: '#', data: { dismiss: 'modal' }, class: 'btn btn-default' } Cancel
= link_to 'Delete label',
destroy_label_path(label),
title: 'Delete',
method: :delete,
class: 'btn btn-remove'
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
- show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project) - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
- show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project) - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
%li{ id: label_css_id, data: { id: label.id } } %li.label-list-item{ id: label_css_id, data: { id: label.id } }
= render "shared/label_row", label: label = render "shared/label_row", label: label
.visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown .visible-xs.visible-sm-inline-block.dropdown
%button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } } %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
Options Options
= icon('caret-down') = icon('caret-down')
...@@ -46,14 +46,19 @@ ...@@ -46,14 +46,19 @@
data: {confirm: 'Remove this label? Are you sure?'}, data: {confirm: 'Remove this label? Are you sure?'},
class: 'text-danger' class: 'text-danger'
.pull-right.hidden-xs.hidden-sm.hidden-md .pull-right.hidden-xs.hidden-sm
- if show_label_merge_requests_link - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
= link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do = link_to promote_project_label_path(label.project, label), title: "Promote to Group Label", class: 'btn btn-transparent btn-action', data: {confirm: "You are about to promote #{label.title} to a group level. This will make this milestone available to all projects inside #{label.project.group.name}. The existing project label will be merged into the group level. This action cannot be reversed.", toggle: "tooltip"}, method: :post do
view merge requests %span.sr-only Promote to Group
- if show_label_issues_link = sprite_icon('level-up')
= link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action btn-link') do - if can?(current_user, :admin_label, label)
view open issues = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
%span.sr-only Edit
= sprite_icon('pencil')
%span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
= link_to "#", title: "Delete", class: 'btn btn-transparent btn-action remove-row', data: { toggle: "tooltip" } do
%span.sr-only Delete
= sprite_icon('remove')
- if current_user - if current_user
.label-subscription.inline .label-subscription.inline
- if can_subscribe_to_label_in_different_levels?(label) - if can_subscribe_to_label_in_different_levels?(label)
...@@ -76,14 +81,4 @@ ...@@ -76,14 +81,4 @@
%span= label_subscription_toggle_button_text(label, @project) %span= label_subscription_toggle_button_text(label, @project)
= icon('spinner spin', class: 'label-subscribe-button-loading') = icon('spinner spin', class: 'label-subscribe-button-loading')
- if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group) = render 'shared/delete_label_modal', label: label
= link_to promote_project_label_path(label.project, label), title: "Promote to Group Label", class: 'btn btn-transparent btn-action', data: {confirm: "You are about to promote #{label.title} to a group level. This will make this milestone available to all projects inside #{label.project.group.name}. The existing project label will be merged into the group level. This action cannot be reversed.", toggle: "tooltip"}, method: :post do
%span.sr-only Promote to Group
= icon('level-up')
- if can?(current_user, :admin_label, label)
= link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
%span.sr-only Edit
= icon('pencil-square-o')
= link_to destroy_label_path(label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, data: {confirm: label_deletion_confirm_text(label), toggle: "tooltip"} do
%span.sr-only Delete
= icon('trash-o')
- subject = local_assigns[:subject]
- show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
- show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
%span.label-row %span.label-row
- if can?(current_user, :admin_label, @project) - if can?(current_user, :admin_label, @project)
.draggable-handler .draggable-handler
...@@ -13,6 +17,14 @@ ...@@ -13,6 +17,14 @@
- if defined?(@project) && @project.group.present? - if defined?(@project) && @project.group.present?
%span.label-type %span.label-type
= label.model_name.human.titleize = label.model_name.human.titleize
- if label.description
%span.label-description %span.label-description
= markdown_field(label, :description) - if label.description.present?
.description-text
= markdown_field(label, :description)
.hidden-xs.hidden-sm
- if show_label_issues_link
= link_to_label(label, subject: subject) { 'Issues' }
- if show_label_merge_requests_link
&middot;
= link_to_label(label, subject: subject, type: :merge_request) { 'Merge requests' }
...@@ -15,8 +15,9 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps ...@@ -15,8 +15,9 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps
step 'I delete all labels' do step 'I delete all labels' do
page.within '.labels' do page.within '.labels' do
page.all('.remove-row').each do page.all('.label-list-item').each do
accept_confirm { first('.remove-row').click } first('.remove-row').click
first(:link, 'Delete label').click
end end
end end
end end
......
...@@ -99,7 +99,7 @@ feature 'Prioritize labels' do ...@@ -99,7 +99,7 @@ feature 'Prioritize labels' do
expect(page).to have_content 'wontfix' expect(page).to have_content 'wontfix'
# Sort labels # Sort labels
drag_to(selector: '.js-prioritized-labels', from_index: 1, to_index: 2) drag_to(selector: '.label-list-item', from_index: 1, to_index: 2)
page.within('.prioritized-labels') do page.within('.prioritized-labels') do
expect(first('li')).to have_content('feature') expect(first('li')).to have_content('feature')
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment