feat(lored,labels): pass label colors via css variable
This commit is contained in:
@@ -152,7 +152,7 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
|
|||||||
|
|
||||||
if labelScope == "" {
|
if labelScope == "" {
|
||||||
// Regular label
|
// Regular label
|
||||||
return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
|
return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
|
||||||
tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
|
tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -189,8 +189,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
|
|||||||
if label.ExclusiveOrder > 0 {
|
if label.ExclusiveOrder > 0 {
|
||||||
// <scope> | <label> | <order>
|
// <scope> | <label> | <order>
|
||||||
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
|
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
|
||||||
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
|
`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
|
||||||
`<div class="ui label scope-middle" style="color: %s !important; background-color: %s !important">%s</div>`+
|
`<div class="ui label scope-middle" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
|
||||||
`<div class="ui label scope-right">%d</div>`+
|
`<div class="ui label scope-right">%d</div>`+
|
||||||
`</%s>`,
|
`</%s>`,
|
||||||
tagName, tagAttrs,
|
tagName, tagAttrs,
|
||||||
@@ -203,8 +203,8 @@ func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, ta
|
|||||||
|
|
||||||
// <scope> | <label>
|
// <scope> | <label>
|
||||||
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
|
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
|
||||||
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
|
`<div class="ui label scope-left" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
|
||||||
`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
|
`<div class="ui label scope-right" style="--custom-color-label-text: %s; --custom-color-label-bg: %s;">%s</div>`+
|
||||||
`</%s>`,
|
`</%s>`,
|
||||||
tagName, tagAttrs,
|
tagName, tagAttrs,
|
||||||
extraCSSClasses, descriptionText,
|
extraCSSClasses, descriptionText,
|
||||||
|
|||||||
@@ -8,8 +8,8 @@
|
|||||||
gap: var(--gap-inline);
|
gap: var(--gap-inline);
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
background: var(--color-label-bg);
|
background-color: var(--custom-color-label-bg, var(--color-label-bg));
|
||||||
color: var(--color-label-text);
|
color: var(--custom-color-label-text, var(--color-label-text));
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
font-size: var(--font-size-label);
|
font-size: var(--font-size-label);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
@@ -20,8 +20,19 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.ui.label {
|
.ui.label.scope-parent .ui.label.scope-left,
|
||||||
cursor: pointer;
|
.ui.label.scope-parent .ui.label.scope-middle,
|
||||||
|
.ui.label.scope-parent .ui.label.scope-right {
|
||||||
|
background-color: var(--custom-color-label-bg, var(--color-label-bg));
|
||||||
|
color: var(--custom-color-label-text, var(--color-label-text));
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.menu .item > .label:not(.scope-parent) {
|
||||||
|
background-color: var(
|
||||||
|
--custom-color-label-bg,
|
||||||
|
var(--color-label-bg)
|
||||||
|
) !important;
|
||||||
|
color: var(--custom-color-label-text, var(--color-label-text)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.label > a {
|
.ui.label > a {
|
||||||
@@ -288,7 +299,9 @@ a.ui.ui.ui.basic.grey.label:hover {
|
|||||||
If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
|
If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */
|
||||||
.labels-list {
|
.labels-list {
|
||||||
display: contents;
|
display: contents;
|
||||||
font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */
|
font-size: var(
|
||||||
|
--font-size-label
|
||||||
|
); /* it must match the label font size, otherwise the height mismatches */
|
||||||
}
|
}
|
||||||
|
|
||||||
.labels-list a {
|
.labels-list a {
|
||||||
|
|||||||
Reference in New Issue
Block a user