From a8e13e64da7f9dc6176365e6b9295981af5d81ea Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel 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 --- 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 bf07c074edc6..8e5ff1cf8d9f 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 19893c7c9d4d..822bbbd9b17c 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(""+ "
%s
"+ - "
 
"+ "
%s
"+ "", description, textColor, scopeColor, scopeText, - itemColor, scopeColor, textColor, itemColor, itemText) } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 2c47135a2452..0069a31cecb4 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; }