Skip to content

G
gitlab-ce
Commit 8fed318a authored by Florie Guibert's avatar Florie Guibert Committed by Heinrich Lee Yu
Browse files
Options

Use gitlab-ui classes for labels 

- Style fixes
- Restructure scoped label
- Remove label render on delete label modal
parent a7edaa33
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 53 deletions
app/assets/stylesheets/framework/modal.scss
View file @ 8fed318a
......@@ -13,15 +13,14 @@
.page-title,
.modal-title {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
.modal-title-with-label span {
vertical-align: middle;
display: inline-block;
}
.gl-label {
vertical-align: top;
line-height: 16px;
}
}
.modal-title {
......
app/assets/stylesheets/pages/issuable.scss
View file @ 8fed318a
......@@ -97,6 +97,8 @@
.color-label {
padding: 4px $grid-size;
border-radius: $label-border-radius;
margin-right: 4px;
margin-bottom: 4px;
}
&:hover .color-label {
......@@ -123,8 +125,7 @@
padding-right: $gl-padding-24;
}
.scoped-label,
.gl-label-icon {
.scoped-label {
right: 12px;
}
}
......@@ -166,8 +167,11 @@
}
}
.gl-label .gl-label-link:hover,
.gl-label + .gl-label-icon:hover {
a.gl-label-icon {
color: $gray-500;
}
.gl-label .gl-label-link:hover {
text-decoration: none;
color: inherit;
......@@ -176,6 +180,11 @@
}
}
.gl-label .gl-label-icon:hover {
text-decoration: none;
color: $gray-500;
}
.btn-link {
color: inherit;
outline: none;
......@@ -825,6 +834,10 @@
}
}
}
.gl-label-icon {
color: $gray-500;
}
}
@media(max-width: map-get($grid-breakpoints, lg)-1) {
......
app/assets/stylesheets/pages/labels.scss
View file @ 8fed318a
......@@ -310,15 +310,13 @@
width: 150px;
flex-shrink: 0;
.scoped-label-wrapper,
.gl-label {
max-width: 100%;
.gl-label-text {
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
line-height: $gl-line-height;
}
.gl-label-scoped .gl-label-text:last-of-type {
padding-right: 22px;
}
}
......@@ -424,14 +422,6 @@
.scoped-label-wrapper {
max-width: 100%;
vertical-align: top;
line-height: 16px;
.gl-link.gl-label-icon {
color: $gray-500;
display: inline-flex;
align-items: center;
margin-left: 0.25rem;
}
.badge {
text-overflow: ellipsis;
......@@ -449,17 +439,13 @@
.scoped-label {
position: absolute;
top: 6px;
top: 4px;
right: 8px;
padding: 0;
margin: 0;
line-height: $gl-line-height;
}
.gl-label-scoped-text {
padding-right: 22px;
}
&.board-label {
.scoped-label {
top: 1px;
......@@ -467,10 +453,6 @@
}
}
.gl-label-sm + .scoped-label {
top: 2px;
}
.gl-label-scoped {
box-shadow: 0 0 0 2px currentColor inset;
......
app/assets/stylesheets/pages/milestone.scss
View file @ 8fed318a
......@@ -59,10 +59,20 @@ $status-box-line-height: 26px;
}
.issuable-row {
span a {
span {
a {
color: $gl-text-color;
word-wrap: break-word;
}
.gl-label-link {
color: inherit;
}
.gl-label-icon {
color: $gray-500;
}
}
}
.card-header {
......
app/helpers/labels_helper.rb
View file @ 8fed318a
......@@ -46,7 +46,7 @@ module LabelsHelper
end
end
def render_label(label, tooltip: true, link: nil, dataset: nil, small: false, wrapper_class: nil, wrapper_style: nil)
def render_label(label, tooltip: true, link: nil, dataset: nil, small: false, wrapper_class: nil, wrapper_style: nil, extra: nil)
# if scoped label is used then EE wraps label tag with scoped label
# doc link
html = render_colored_label(label)
......@@ -60,6 +60,8 @@ module LabelsHelper
)
end
html += extra.html_safe if extra
wrapper_classes = Array.wrap(wrapper_class)
wrapper_classes << 'gl-label'
wrapper_classes << 'gl-label-sm' if small
......@@ -136,7 +138,7 @@ module LabelsHelper
end
if (r + g + b) > 500
'gl-label-text-black'
'gl-label-text-dark'
else
'gl-label-text-light'
end
......
app/views/shared/_delete_label_modal.html.haml
View file @ 8fed318a
......@@ -2,7 +2,7 @@
.modal-dialog
.modal-content
.modal-header
%h3.page-title Delete #{render_label(label, tooltip: false)} ?
%h3.page-title Delete label: #{label.name} ?
%button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
%span{ "aria-hidden": true } &times;
......
app/views/shared/boards/components/_board.html.haml
View file @ 8fed318a
......@@ -30,7 +30,6 @@
@{{ list.assignee.username }}
%gl-label{ "v-if" => " list.type === \"label\"",
":id" => "list.label.id",
":background-color" => "list.label.color",
":title" => "list.label.title",
":description" => "list.label.description",
......
app/views/shared/boards/components/sidebar/_labels.html.haml
View file @ 8fed318a
......@@ -8,8 +8,7 @@
%span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
= _("None")
%span{ "v-for" => "label in issue.labels" }
%gl-label{ ":id" => "label.id",
":key" => "label.id",
%gl-label{ ":key" => "label.id",
":background-color" => "label.color",
":title" => "label.title",
":description" => "label.description",
......
ee/app/helpers/ee/labels_helper.rb
View file @ 8fed318a
......@@ -11,7 +11,7 @@ module EE
def render_label(label, tooltip: true, link: nil, dataset: nil, small: false)
return super unless label.scoped_label?
scoped_label_doc_wrapper(
scoped_label_wrapper(
super(
label,
tooltip: tooltip,
......@@ -19,7 +19,8 @@ module EE
dataset: dataset,
small: small,
wrapper_class: 'gl-label-scoped',
wrapper_style: "color: #{label.color}"
wrapper_style: "color: #{label.color}",
extra: scoped_labels_doc_link(label)
),
label
)
......@@ -39,13 +40,12 @@ module EE
bg_color: label.color
) + render_partial_label(
label, label_suffix: label_suffix,
label_name: label_name,
css_class: 'gl-label-scoped-text'
label_name: label_name
)
end
def scoped_label_doc_wrapper(link, label)
%(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}#{scoped_labels_doc_link(label)}</span>).html_safe
def scoped_label_wrapper(link, label)
%(<span class="d-inline-block position-relative scoped-label-wrapper">#{link}</span>).html_safe
end
def label_tooltip_title(label)
......@@ -84,13 +84,11 @@ module EE
super + ['epics']
end
private
def scoped_labels_doc_link(label)
content = %(<i class="fa fa-question-circle"></i>)
help_url = ::Gitlab::Routing.url_helpers.help_page_url('user/project/labels.md', anchor: 'scoped-labels')
%(<a href="#{help_url}" class="label scoped-label gl-link gl-label-icon" target="_blank" rel="noopener">#{content}</a>)
%(<a href="#{help_url}" class="gl-link gl-label-icon" target="_blank" rel="noopener">#{content}</a>)
end
end
end
ee/lib/ee/banzai/filter/label_reference_filter.rb
View file @ 8fed318a
......@@ -13,6 +13,8 @@ module EE
if label.scoped_label? && parent && parent.feature_available?(:scoped_labels)
presenter = label.present(issuable_parent: parent)
doc_link = ::LabelsHelper.scoped_labels_doc_link(label)
content = %(<span class="gl-label gl-label-scoped gl-label-sm" style="color: #{label.color}">#{link}#{doc_link}</span>)
content = ::LabelsHelper.scoped_label_wrapper(content, presenter)
end
......
ee/spec/helpers/ee/labels_helper_spec.rb
View file @ 8fed318a
......@@ -15,7 +15,7 @@ describe LabelsHelper do
it 'includes link to scoped labels documentation' do
scoped = scoped_label.title.split('::')
expect(render_label(scoped_label)).to match(%r(<span.+><span.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></span><a.+>.*question-circle.*</a></span>$))
expect(render_label(scoped_label)).to match(%r(<span.+><span.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span><a.+>.*question-circle.*</a></span></span>$))
end
it 'does not include link to scoped label documentation for common labels' do
......
ee/spec/lib/banzai/filter/label_reference_filter_spec.rb
View file @ 8fed318a
......@@ -18,7 +18,7 @@ describe Banzai::Filter::LabelReferenceFilter do
doc = reference_filter("See #{scoped_label.to_reference}")
scoped = scoped_label.name.split('::')
expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></a></span><a.+>.*question-circle.*</a>))
expect(doc.to_html).to match(%r(<span.+><a.+><span.+>#{scoped.first}</span><span.+>#{scoped.last}</span></a><a.+>.*question-circle.*</a></span>))
end
it 'does not include link to scoped documentation for common labels' do
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7