From db1a36673ecfa7f680d271e29aa9b1b64ce59d9a Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Mon, 1 Apr 2024 17:17:12 +0500 Subject: [PATCH] Add opacity and grayscale to archived labels Co-authored-by: Gusted (cherry picked from commit 1060b7cfa89158ad40f412981ba5441b4e332964) --- modules/templates/util_render.go | 24 +++++++++++++++++++++--- web_src/css/repo.css | 4 ++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/modules/templates/util_render.go b/modules/templates/util_render.go index c167b32123..f593e1b897 100644 --- a/modules/templates/util_render.go +++ b/modules/templates/util_render.go @@ -105,6 +105,18 @@ func RenderCodeBlock(htmlEscapedTextToRender template.HTML) template.HTML { 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 func RenderIssueTitle(ctx context.Context, text string, metas map[string]string) template.HTML { renderedText, err := markup.RenderIssueTitle(&markup.RenderContext{ @@ -126,9 +138,10 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m textColor = "#111" labelScope = label.ExclusiveScope() ) - r, g, b := util.HexToRBGColor(label.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) { textColor = "#eee" } @@ -142,8 +155,10 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m if labelScope == "" { // Regular label + + labelColor := label.Color + hex.EncodeToString([]byte{GetLabelOpacityByte(label.IsArchived())}) s := fmt.Sprintf("
%s
", - archivedCSSClass, textColor, label.Color, description, RenderEmoji(ctx, label.Name)) + archivedCSSClass, textColor, labelColor, description, RenderEmoji(ctx, label.Name)) 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) lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0) + opacity := GetLabelOpacityByte(label.IsArchived()) scopeBytes := []byte{ uint8(math.Min(math.Round(r*darkenFactor), 255)), uint8(math.Min(math.Round(g*darkenFactor), 255)), uint8(math.Min(math.Round(b*darkenFactor), 255)), + opacity, } itemBytes := []byte{ uint8(math.Min(math.Round(r*lightenFactor), 255)), uint8(math.Min(math.Round(g*lightenFactor), 255)), uint8(math.Min(math.Round(b*lightenFactor), 255)), + opacity, } - itemColor := "#" + hex.EncodeToString(itemBytes) scopeColor := "#" + hex.EncodeToString(scopeBytes) + itemColor := "#" + hex.EncodeToString(itemBytes) s := fmt.Sprintf(""+ "
%s
"+ diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 03e4f1d74b..565645bc7b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2435,6 +2435,10 @@ margin-left: 0; } +.archived-label { + filter: grayscale(0.25) saturate(0.75); +} + .repo-button-row { margin: 10px 0; display: flex;