diff options
Diffstat (limited to 'app/assets/javascripts/labels_select.js')
-rw-r--r-- | app/assets/javascripts/labels_select.js | 34 |
1 files changed, 28 insertions, 6 deletions
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index f57febbda37..b8c8cc91f53 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -479,24 +479,46 @@ export default class LabelsSelect { // concatenation // see: http://2ality.com/2016/05/template-literal-whitespace.html#joining-arrays + 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 }) %>">'; + const spanOpenTag = + '<span class="gl-label-text" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">'; const labelTemplate = _.template( [ - '<a href="<%- issueUpdateURL.slice(0, issueUpdateURL.lastIndexOf("/")) %>?label_name[]=<%- encodeURIComponent(label.title) %>">', - '<span class="badge label has-tooltip color-label" <%= linkAttrs %> title="<%= tooltipTitleTemplate({ label, isScopedLabel, enableScopedLabels, escapeStr }) %>" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;">', + '<span class="gl-label">', + linkOpenTag, + spanOpenTag, '<%- label.title %>', '</span>', '</a>', + '</span>', ].join(''), ); const infoIconTemplate = _.template( [ - '<a href="<%= scopedLabelsDocumentationLink %>" class="label scoped-label" target="_blank" rel="noopener">', - '<i class="fa fa-question-circle" style="background-color: <%= escapeStr(label.color) %>; color: <%= escapeStr(label.text_color) %>;"></i>', + '<a href="<%= scopedLabelsDocumentationLink %>" class="gl-link gl-label-icon" target="_blank" rel="noopener">', + '<i class="fa fa-question-circle"></i>', '</a>', ].join(''), ); + const scopedLabelTemplate = _.template( + [ + '<span class="gl-label gl-label-scoped" style="color: <%= escapeStr(label.color) %>;">', + linkOpenTag, + spanOpenTag, + '<%- label.title.slice(0, label.title.lastIndexOf("::")) %>', + '</span>', + '<span class="gl-label-text" style="color: <%= escapeStr(label.color) %>;">', + '<%- label.title.slice(label.title.lastIndexOf("::") + 2) %>', + '</span>', + '</a>', + '<%= infoIconTemplate({ label, scopedLabelsDocumentationLink, escapeStr }) %>', + '</span>', + ].join(''), + ); + const tooltipTitleTemplate = _.template( [ '<% if (isScopedLabel(label) && enableScopedLabels) { %>', @@ -514,8 +536,7 @@ export default class LabelsSelect { '<% _.each(labels, function(label){ %>', '<% if (isScopedLabel(label) && enableScopedLabels) { %>', '<span class="d-inline-block position-relative scoped-label-wrapper">', - '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>', - '<%= infoIconTemplate({ label, scopedLabelsDocumentationLink, escapeStr }) %>', + '<%= scopedLabelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, infoIconTemplate, scopedLabelsDocumentationLink, tooltipTitleTemplate, escapeStr, linkAttrs: \'data-html="true"\' }) %>', '</span>', '<% } else { %>', '<%= labelTemplate({ label, issueUpdateURL, isScopedLabel, enableScopedLabels, tooltipTitleTemplate, escapeStr, linkAttrs: "" }) %>', @@ -528,6 +549,7 @@ export default class LabelsSelect { ...tplData, labelTemplate, infoIconTemplate, + scopedLabelTemplate, tooltipTitleTemplate, isScopedLabel, escapeStr: _.escape, |