Commit 17feebea authored by Florie Guibert's avatar Florie Guibert

Dark mode - Fix edit scoped labels

parent e9dc7f29
...@@ -477,13 +477,11 @@ export default class LabelsSelect { ...@@ -477,13 +477,11 @@ export default class LabelsSelect {
const linkOpenTag = const linkOpenTag =
'<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>" class="gl-link gl-label-link has-tooltip" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>">'; '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>" class="gl-link gl-label-link has-tooltip" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>">';
const spanOpenTag =
'<span class="gl-label-text" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">';
const labelTemplate = template( const labelTemplate = template(
[ [
'<span class="gl-label">', '<span class="gl-label">',
linkOpenTag, linkOpenTag,
spanOpenTag, '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
'<%- label.title %>', '<%- label.title %>',
'</span>', '</span>',
'</a>', '</a>',
...@@ -491,18 +489,24 @@ export default class LabelsSelect { ...@@ -491,18 +489,24 @@ export default class LabelsSelect {
].join(''), ].join(''),
); );
const rightLabelTextColor = ({ label, escapeStr }) => { const labelTextClass = ({ label, escapeStr }) => {
return escapeStr(label.text_color === '#FFFFFF' ? label.color : label.text_color); return escapeStr(
label.text_color === '#FFFFFF' ? 'gl-label-text-light' : 'gl-label-text-dark',
);
};
const rightLabelTextClass = ({ label, escapeStr }) => {
return escapeStr(label.text_color === '#333333' ? labelTextClass({ label, escapeStr }) : '');
}; };
const scopedLabelTemplate = template( const scopedLabelTemplate = template(
[ [
'<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>; --label-inset-border: inset 0 0 0 2px <%= escapeStr(label.color) %>;">', '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>; --label-inset-border: inset 0 0 0 2px <%= escapeStr(label.color) %>;">',
linkOpenTag, linkOpenTag,
spanOpenTag, '<span class="gl-label-text <%= labelTextClass({ label, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>;">',
'<%- label.title.slice(0, label.title.lastIndexOf("::")) %>', '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>',
'</span>', '</span>',
'<span class="gl-label-text" style="color: <%= rightLabelTextColor({ label, escapeStr }) %>;">', '<span class="gl-label-text <%= rightLabelTextClass({ label, escapeStr }) %>">',
'<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>', '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>',
'</span>', '</span>',
'</a>', '</a>',
...@@ -526,9 +530,9 @@ export default class LabelsSelect { ...@@ -526,9 +530,9 @@ export default class LabelsSelect {
[ [
'<% labels.forEach(function(label){ %>', '<% labels.forEach(function(label){ %>',
'<% if (isScopedLabel(label) && enableScopedLabels) { %>', '<% if (isScopedLabel(label) && enableScopedLabels) { %>',
'<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, rightLabelTextColor, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>', '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, rightLabelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>',
'<% } else { %>', '<% } else { %>',
'<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>', '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, labelTextClass, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>',
'<% } %>', '<% } %>',
'<% }); %>', '<% }); %>',
].join(''), ].join(''),
...@@ -537,7 +541,8 @@ export default class LabelsSelect { ...@@ -537,7 +541,8 @@ export default class LabelsSelect {
return tpl({ return tpl({
...tplData, ...tplData,
labelTemplate, labelTemplate,
rightLabelTextColor, labelTextClass,
rightLabelTextClass,
scopedLabelTemplate, scopedLabelTemplate,
tooltipTitleTemplate, tooltipTitleTemplate,
isScopedLabel, isScopedLabel,
......
---
title: Dark mode - Fix edit scoped labels
merge_request: 39166
author:
type: fixed
...@@ -29,7 +29,7 @@ const mockScopedLabels2 = [ ...@@ -29,7 +29,7 @@ const mockScopedLabels2 = [
title: 'Foo::Bar2', title: 'Foo::Bar2',
description: 'Foobar2', description: 'Foobar2',
color: '#FFFFFF', color: '#FFFFFF',
text_color: '#000000', text_color: '#333333',
}, },
]; ];
...@@ -61,10 +61,11 @@ describe('LabelsSelect', () => { ...@@ -61,10 +61,11 @@ describe('LabelsSelect', () => {
expect($labelEl.find('a').attr('title')).toBe(label.description); expect($labelEl.find('a').attr('title')).toBe(label.description);
}); });
it('generated label item template has correct label styles', () => { it('generated label item template has correct label styles and classes', () => {
expect($labelEl.find('span.gl-label-text').attr('style')).toBe( expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`, `background-color: ${label.color};`,
); );
expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
}); });
it('generated label item has a gl-label-text class', () => { it('generated label item has a gl-label-text class', () => {
...@@ -100,16 +101,12 @@ describe('LabelsSelect', () => { ...@@ -100,16 +101,12 @@ describe('LabelsSelect', () => {
expect($labelEl.find('a').attr('data-html')).toBe('true'); expect($labelEl.find('a').attr('data-html')).toBe('true');
}); });
it('generated label item template has correct label styles', () => { it('generated label item template has correct label styles and classes', () => {
expect($labelEl.find('span.gl-label-text').attr('style')).toBe( expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`, `background-color: ${label.color};`,
); );
expect( expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
$labelEl expect($labelEl.find('span.gl-label-text').last()).not.toHaveClass('gl-label-text-light');
.find('span.gl-label-text')
.last()
.attr('style'),
).toBe(`color: ${label.color};`);
}); });
it('generated label item has a badge class', () => { it('generated label item has a badge class', () => {
...@@ -131,16 +128,12 @@ describe('LabelsSelect', () => { ...@@ -131,16 +128,12 @@ describe('LabelsSelect', () => {
); );
}); });
it('generated label item template has correct label styles', () => { it('generated label item template has correct label styles and classes', () => {
expect($labelEl.find('span.gl-label-text').attr('style')).toBe( expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
`background-color: ${label.color}; color: ${label.text_color};`, `background-color: ${label.color};`,
); );
expect( expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-dark');
$labelEl expect($labelEl.find('span.gl-label-text').last()).toHaveClass('gl-label-text-dark');
.find('span.gl-label-text')
.last()
.attr('style'),
).toBe(`color: ${label.text_color};`);
}); });
}); });
}); });
......
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