Add opacity and grayscale to archived labels

Co-authored-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2024-04-01 17:17:12 +05:00
parent cab47bbb0e
commit 1060b7cfa8
2 changed files with 25 additions and 3 deletions

View file

@ -105,6 +105,18 @@ func RenderCodeBlock(htmlEscapedTextToRender template.HTML) template.HTML {
return template.HTML(htmlWithCodeTags) return template.HTML(htmlWithCodeTags)
} }
const (
activeLabelOpacity = uint8(255)
archivedLabelOpacity = uint8(127)
)
func GetLabelOpacityByte(isArchived bool) uint8 {
if isArchived {
return archivedLabelOpacity
}
return activeLabelOpacity
}
// RenderIssueTitle renders issue/pull title with defined post processors // RenderIssueTitle renders issue/pull title with defined post processors
func RenderIssueTitle(ctx context.Context, text string, metas map[string]string) template.HTML { func RenderIssueTitle(ctx context.Context, text string, metas map[string]string) template.HTML {
renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{ renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{
@ -126,9 +138,10 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m
textColor = "#111" textColor = "#111"
labelScope = label.ExclusiveScope() labelScope = label.ExclusiveScope()
) )
r, g, b := util.HexToRBGColor(label.Color) r, g, b := util.HexToRBGColor(label.Color)
// Determine if label text should be light or dark to be readable on background color // Determine if label text should be light or dark to be readable on background color
// this doesn't account for saturation or transparency
if util.UseLightTextOnBackground(r, g, b) { if util.UseLightTextOnBackground(r, g, b) {
textColor = "#eee" textColor = "#eee"
} }
@ -142,8 +155,10 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m
if labelScope == "" { if labelScope == "" {
// Regular label // Regular label
labelColor := label.Color + hex.EncodeToString([]byte{GetLabelOpacityByte(label.IsArchived())})
s := fmt.Sprintf("<div class='ui label %s' style='color: %s !important; background-color: %s !important;' data-tooltip-content title='%s'>%s</div>", s := fmt.Sprintf("<div class='ui label %s' style='color: %s !important; background-color: %s !important;' data-tooltip-content title='%s'>%s</div>",
archivedCSSClass, textColor, label.Color, description, RenderEmoji(ctx, label.Name)) archivedCSSClass, textColor, labelColor, description, RenderEmoji(ctx, label.Name))
return template.HTML(s) return template.HTML(s)
} }
@ -162,19 +177,22 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m
darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0) darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0) lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
opacity := GetLabelOpacityByte(label.IsArchived())
scopeBytes := []byte{ scopeBytes := []byte{
uint8(math.Min(math.Round(r*darkenFactor), 255)), uint8(math.Min(math.Round(r*darkenFactor), 255)),
uint8(math.Min(math.Round(g*darkenFactor), 255)), uint8(math.Min(math.Round(g*darkenFactor), 255)),
uint8(math.Min(math.Round(b*darkenFactor), 255)), uint8(math.Min(math.Round(b*darkenFactor), 255)),
opacity,
} }
itemBytes := []byte{ itemBytes := []byte{
uint8(math.Min(math.Round(r*lightenFactor), 255)), uint8(math.Min(math.Round(r*lightenFactor), 255)),
uint8(math.Min(math.Round(g*lightenFactor), 255)), uint8(math.Min(math.Round(g*lightenFactor), 255)),
uint8(math.Min(math.Round(b*lightenFactor), 255)), uint8(math.Min(math.Round(b*lightenFactor), 255)),
opacity,
} }
itemColor := "#" + hex.EncodeToString(itemBytes)
scopeColor := "#" + hex.EncodeToString(scopeBytes) scopeColor := "#" + hex.EncodeToString(scopeBytes)
itemColor := "#" + hex.EncodeToString(itemBytes)
s := fmt.Sprintf("<span class='ui label %s scope-parent' data-tooltip-content title='%s'>"+ s := fmt.Sprintf("<span 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='color: %s !important; background-color: %s !important'>%s</div>"+

View file

@ -2399,6 +2399,10 @@
margin-left: 0; margin-left: 0;
} }
.archived-label {
filter: grayscale(0.25) saturate(0.75);
}
.repo-button-row { .repo-button-row {
margin: 10px 0; margin: 10px 0;
display: flex; display: flex;