Commit 4ed7fa94 authored by André Luís's avatar André Luís Committed by Phil Hughes

Resolve "System level labels UI broken"

parent 6b2b89f3
...@@ -72,6 +72,9 @@ ...@@ -72,6 +72,9 @@
} }
.manage-labels-list { .manage-labels-list {
padding: 0;
margin-bottom: 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;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -81,6 +84,10 @@ ...@@ -81,6 +84,10 @@
border-radius: $border-radius-default; border-radius: $border-radius-default;
border: 1px solid $theme-gray-100; border: 1px solid $theme-gray-100;
&:last-child {
margin-bottom: 0;
}
&.sortable-ghost { &.sortable-ghost {
opacity: 0.3; opacity: 0.3;
} }
...@@ -243,7 +250,10 @@ ...@@ -243,7 +250,10 @@
.label-actions-list { .label-actions-list {
list-style: none; list-style: none;
flex-shrink: 0; flex-shrink: 0;
text-align: right;
padding: 0; padding: 0;
position: relative;
top: -3px;
} }
.label-badge { .label-badge {
...@@ -272,6 +282,16 @@ ...@@ -272,6 +282,16 @@
padding: 0; padding: 0;
} }
.label-description {
.description-text {
margin-bottom: 10px;
.admin-labels & {
margin-bottom: 0;
}
}
}
.label-list-item { .label-list-item {
.content-list &::before, .content-list &::before,
.content-list &::after { .content-list &::after {
...@@ -319,6 +339,64 @@ ...@@ -319,6 +339,64 @@
fill: $blue-600; fill: $blue-600;
} }
} }
&.remove-row {
&:hover {
color: $gl-text-red;
svg {
fill: $gl-text-red;
}
}
}
}
}
@media (max-width: map-get($grid-breakpoints, md)-1) {
.manage-labels-list {
> li:not(.empty-message):not(.is-not-draggable) {
flex-wrap: wrap;
}
.label-name {
order: 1;
flex-grow: 1;
width: auto;
max-width: 100%;
}
.label-actions-list {
order: 2;
flex-shrink: 1;
text-align: left;
}
.label-links {
white-space: normal;
}
.label-description {
order: 3;
width: 100%;
> .append-right-default.prepend-left-default {
margin-left: 0;
margin-right: 0;
}
}
}
}
@media (max-width: 910px) {
.priority-badge {
display: block;
width: 100%;
margin-left: 0;
margin-top: $gl-padding;
.label-badge {
display: inline-block;
}
} }
} }
......
%li{ id: dom_id(label) } %li.label-list-item{ id: dom_id(label) }
.label-row = render "shared/label_row", label: label
= render_colored_label(label, tooltip: false) .label-actions-list
= markdown_field(label, :description) = link_to edit_admin_label_path(label), class: 'btn btn-transparent label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
.float-right = sprite_icon('pencil')
= link_to _('Edit'), edit_admin_label_path(label), class: 'btn btn-sm' = link_to admin_label_path(label), class: 'btn btn-transparent remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
= link_to _('Delete'), admin_label_path(label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Delete this label? Are you sure?"} = sprite_icon('remove')
...@@ -7,10 +7,11 @@ ...@@ -7,10 +7,11 @@
= _('Labels') = _('Labels')
%hr %hr
.labels .labels.labels-container.admin-labels
- if @labels.present? - if @labels.present?
%ul.bordered-list.manage-labels-list %ul.manage-labels-list
= render @labels = render @labels
= paginate @labels, theme: 'gitlab' = paginate @labels, theme: 'gitlab'
- else - else
.card.bg-light .card.bg-light
......
...@@ -17,13 +17,13 @@ ...@@ -17,13 +17,13 @@
- if can?(current_user, :admin_label, @project) - if can?(current_user, :admin_label, @project)
%li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label), %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
dom_id: dom_id(label), type: label.type } } dom_id: dom_id(label), type: label.type } }
%button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'top' }, aria_label: _('Prioritize label') } %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
= sprite_icon('star-o') = sprite_icon('star-o')
%button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'top' }, aria_label: _('Deprioritize label') } %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
= sprite_icon('star') = sprite_icon('star')
- if can?(current_user, :admin_label, label) - if can?(current_user, :admin_label, label)
%li.inline %li.inline
= link_to edit_label_path(label), class: 'btn btn-transparent label-action edit', aria_label: 'Edit label' do = link_to edit_label_path(label), class: 'btn btn-transparent label-action edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
= sprite_icon('pencil') = sprite_icon('pencil')
%li.inline %li.inline
.dropdown .dropdown
......
- subject = local_assigns[:subject] - subject = local_assigns[:subject]
- force_priority = local_assigns.fetch(:force_priority, false) - force_priority = local_assigns.fetch(:force_priority, false)
- show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project) - show_label_issues_link = defined?(@project) && show_label_issuables_link?(label, :issues, project: @project)
- show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project) - show_label_merge_requests_link = defined?(@project) && show_label_issuables_link?(label, :merge_requests, project: @project)
.label-name .label-name
- if defined?(@project)
= link_to_label(label, subject: @project, tooltip: false) = link_to_label(label, subject: @project, tooltip: false)
- else
= render_colored_label(label, tooltip: false)
.label-description .label-description
.append-right-default.prepend-left-default .append-right-default.prepend-left-default
- if label.description.present? - if label.description.present?
.description-text.append-bottom-10 .description-text
= markdown_field(label, :description) = markdown_field(label, :description)
%ul.label-links %ul.label-links
- if show_label_issues_link - if show_label_issues_link
...@@ -19,5 +22,5 @@ ...@@ -19,5 +22,5 @@
%li.label-link-item.inline %li.label-link-item.inline
= link_to_label(label, subject: subject, type: :merge_request) { _('Merge requests') } = link_to_label(label, subject: subject, type: :merge_request) { _('Merge requests') }
- if force_priority - if force_priority
%li.label-link-item.js-priority-badge.inline.prepend-left-10 %li.label-link-item.priority-badge.js-priority-badge.inline.prepend-left-10
.label-badge.label-badge-blue= _('Prioritized label') .label-badge.label-badge-blue= _('Prioritized label')
---
title: Fix the UI for listing system-level labels
merge_request:
author:
type: fixed
...@@ -32,7 +32,7 @@ RSpec.describe 'admin issues labels' do ...@@ -32,7 +32,7 @@ RSpec.describe 'admin issues labels' do
it 'deletes all labels', :js do it 'deletes all labels', :js do
page.within '.labels' do page.within '.labels' do
page.all('.btn-remove').each do |remove| page.all('.remove-row').each do |remove|
accept_confirm { remove.click } accept_confirm { remove.click }
wait_for_requests wait_for_requests
end end
......
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