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 @@
}
.manage-labels-list {
padding: 0;
margin-bottom: 0;
> li:not(.empty-message):not(.is-not-draggable) {
background-color: $white-light;
margin-bottom: 5px;
......@@ -81,6 +84,10 @@
border-radius: $border-radius-default;
border: 1px solid $theme-gray-100;
&:last-child {
margin-bottom: 0;
}
&.sortable-ghost {
opacity: 0.3;
}
......@@ -243,7 +250,10 @@
.label-actions-list {
list-style: none;
flex-shrink: 0;
text-align: right;
padding: 0;
position: relative;
top: -3px;
}
.label-badge {
......@@ -272,6 +282,16 @@
padding: 0;
}
.label-description {
.description-text {
margin-bottom: 10px;
.admin-labels & {
margin-bottom: 0;
}
}
}
.label-list-item {
.content-list &::before,
.content-list &::after {
......@@ -319,6 +339,64 @@
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) }
.label-row
= render_colored_label(label, tooltip: false)
= markdown_field(label, :description)
.float-right
= link_to _('Edit'), edit_admin_label_path(label), class: 'btn btn-sm'
= 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?"}
%li.label-list-item{ id: dom_id(label) }
= render "shared/label_row", label: label
.label-actions-list
= link_to edit_admin_label_path(label), class: 'btn btn-transparent label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
= sprite_icon('pencil')
= 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
= sprite_icon('remove')
......@@ -7,10 +7,11 @@
= _('Labels')
%hr
.labels
.labels.labels-container.admin-labels
- if @labels.present?
%ul.bordered-list.manage-labels-list
%ul.manage-labels-list
= render @labels
= paginate @labels, theme: 'gitlab'
- else
.card.bg-light
......
......@@ -17,13 +17,13 @@
- if can?(current_user, :admin_label, @project)
%li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
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')
%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')
- if can?(current_user, :admin_label, label)
%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')
%li.inline
.dropdown
......
- subject = local_assigns[:subject]
- force_priority = local_assigns.fetch(:force_priority, false)
- 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)
- show_label_issues_link = defined?(@project) && show_label_issuables_link?(label, :issues, project: @project)
- show_label_merge_requests_link = defined?(@project) && show_label_issuables_link?(label, :merge_requests, project: @project)
.label-name
= link_to_label(label, subject: @project, tooltip: false)
- if defined?(@project)
= link_to_label(label, subject: @project, tooltip: false)
- else
= render_colored_label(label, tooltip: false)
.label-description
.append-right-default.prepend-left-default
- if label.description.present?
.description-text.append-bottom-10
.description-text
= markdown_field(label, :description)
%ul.label-links
- if show_label_issues_link
......@@ -19,5 +22,5 @@
%li.label-link-item.inline
= link_to_label(label, subject: subject, type: :merge_request) { _('Merge requests') }
- 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')
---
title: Fix the UI for listing system-level labels
merge_request:
author:
type: fixed
......@@ -32,7 +32,7 @@ RSpec.describe 'admin issues labels' do
it 'deletes all labels', :js do
page.within '.labels' do
page.all('.btn-remove').each do |remove|
page.all('.remove-row').each do |remove|
accept_confirm { remove.click }
wait_for_requests
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