From a8e13e64da7f9dc6176365e6b9295981af5d81ea Mon Sep 17 00:00:00 2001
From: Brecht Van Lommel <brecht@blender.org>
Date: Mon, 13 Mar 2023 01:46:13 +0100
Subject: [PATCH] Scoped label display and documentation tweaks (#23430)
* Fix scoped label left and right part breaking across lines.
* Remove slanted divider in scoped label display, make it straight.
After using this for a while, this feels more visually noisy than
helpful.
* Reduce contrast between scope and item to reduce probability of
unreadable text on background.
* Change documentation to remove mention of non-exclusive scoped labels.
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
docs/content/doc/usage/labels.en-us.md | 8 +++-----
modules/templates/helper.go | 4 +---
web_src/less/_repository.less | 15 ++-------------
3 files changed, 6 insertions(+), 21 deletions(-)
diff --git a/docs/content/doc/usage/labels.en-us.md b/docs/content/doc/usage/labels.en-us.md
index bf07c074ed..8e5ff1cf8d 100644
--- a/docs/content/doc/usage/labels.en-us.md
+++ b/docs/content/doc/usage/labels.en-us.md
@@ -23,17 +23,15 @@ For repositories, labels can be created by going to `Issues` and clicking on `La
For organizations, you can define organization-wide labels that are shared with all organization repositories, including both already-existing repositories as well as newly created ones. Organization-wide labels can be created in the organization `Settings`.
-Labels have a mandatory name, a mandatory color, an optional description, and must either be exclusive or not (see `Scoped labels` below).
+Labels have a mandatory name, a mandatory color, an optional description, and must either be exclusive or not (see `Scoped Labels` below).
When you create a repository, you can ensure certain labels exist by using the `Issue Labels` option. This option lists a number of available label sets that are [configured globally on your instance](../customizing-gitea/#labels). Its contained labels will all be created as well while creating the repository.
## Scoped Labels
-A scoped label is a label that contains `/` in its name (not at either end of the name). For example labels `kind/bug` and `kind/enhancement` both have scope `kind`. Such labels will display the scope with slightly darker color.
+Scoped labels are used to ensure at most a single label with the same scope is assigned to an issue or pull request. For example, if labels `kind/bug` and `kind/enhancement` have the Exclusive option set, an issue can only be classified as a bug or an enhancement.
-The scope of a label is determined based on the **last** `/`, so for example the scope of label `scope/subscope/item` is `scope/subscope`.
-
-Scoped labels can be marked as exclusive. This ensures at most a single label with the same scope is assigned to an issue or pull request. For example, if `kind/bug` and `kind/enhancement` are marked exclusive, an issue can only be classified as a bug or an enhancement.
+A scoped label must contain `/` in its name (not at either end of the name). The scope of a label is determined based on the **last** `/`, so for example the scope of label `scope/subscope/item` is `scope/subscope`.
## Filtering by Label
diff --git a/modules/templates/helper.go b/modules/templates/helper.go
index 19893c7c9d..822bbbd9b1 100644
--- a/modules/templates/helper.go
+++ b/modules/templates/helper.go
@@ -834,7 +834,7 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) string {
// Make scope and item background colors slightly darker and lighter respectively.
// More contrast needed with higher luminance, empirically tweaked.
luminance := (0.299*r + 0.587*g + 0.114*b) / 255
- contrast := 0.01 + luminance*0.06
+ contrast := 0.01 + luminance*0.03
// Ensure we add the same amount of contrast also near 0 and 1.
darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
lighten := contrast + math.Max(contrast-luminance, 0.0)
@@ -859,12 +859,10 @@ func RenderLabel(ctx context.Context, label *issues_model.Label) string {
return fmt.Sprintf("<span class='ui label scope-parent' title='%s'>"+
"<div class='ui label scope-left' style='color: %s !important; background-color: %s !important'>%s</div>"+
- "<div class='ui label scope-middle' style='background: linear-gradient(-80deg, %s 48%%, %s 52%% 0%%);'> </div>"+
"<div class='ui label scope-right' style='color: %s !important; background-color: %s !important''>%s</div>"+
"</span>",
description,
textColor, scopeColor, scopeText,
- itemColor, scopeColor,
textColor, itemColor, itemText)
}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 2c47135a24..0069a31cec 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2838,11 +2838,11 @@
.labels-list .label {
margin: 2px 0;
- display: inline-block !important;
+ display: inline-flex !important;
line-height: 1.3em; // there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly
}
-// Scoped labels with different colors on left and right, and slanted divider in the middle
+// Scoped labels with different colors on left and right
.scope-parent {
background: none !important;
padding: 0 !important;
@@ -2851,23 +2851,12 @@
.ui.label.scope-left {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
- padding-right: 0;
- margin-right: 0;
-}
-
-.ui.label.scope-middle {
- width: 12px;
- border-radius: 0;
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
margin-right: 0;
}
.ui.label.scope-right {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
- padding-left: 0;
margin-left: 0;
}