From ebd797acff84a442123fd1f7cfb9bd6656d7dee4 Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sat, 18 Feb 2023 11:20:29 +0100 Subject: [PATCH 1/7] Deduplicate template code for labels selection menu --- .../issue/labels/labels_selector_field.tmpl | 47 +++++++++++++++++++ templates/repo/issue/new_form.tmpl | 47 +------------------ .../repo/issue/view_content/sidebar.tmpl | 44 +---------------- 3 files changed, 49 insertions(+), 89 deletions(-) create mode 100644 templates/repo/issue/labels/labels_selector_field.tmpl diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl new file mode 100644 index 000000000000..c9fdbbf9f29a --- /dev/null +++ b/templates/repo/issue/labels/labels_selector_field.tmpl @@ -0,0 +1,47 @@ +
+ + {{.locale.Tr "repo.issues.new.labels"}} + {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} + {{svg "octicon-gear" 16 "gt-ml-2"}} + {{end}} + + {{if .Issue}} +
+ {{else}} +
+ {{end}} +
{{.locale.Tr "repo.issues.new.add_labels_title"}}
+ {{if or .Labels .OrgLabels}} +
+ {{svg "octicon-search" 16}} + +
+ {{end}} + {{.locale.Tr "repo.issues.new.clear_labels"}} + {{if or .Labels .OrgLabels}} + {{$previousExclusiveScope := "_no_scope"}} + {{range .Labels}} + {{$exclusiveScope := .ExclusiveScope}} + {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} +
+ {{end}} + {{$previousExclusiveScope = $exclusiveScope}} + {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} + {{if .Description}}
{{.Description | RenderEmoji}}{{end}} + {{end}} +
+ {{$previousExclusiveScope := "_no_scope"}} + {{range .OrgLabels}} + {{$exclusiveScope := .ExclusiveScope}} + {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} +
+ {{end}} + {{$previousExclusiveScope = $exclusiveScope}} + {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} + {{if .Description}}
{{.Description | RenderEmoji}}{{end}} + {{end}} + {{else}} +
{{.locale.Tr "repo.issues.new.no_items"}}
+ {{end}} +
+
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index 8346d07a13c6..20f371cbb339 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -34,52 +34,7 @@
{{template "repo/issue/branch_selector_field" .}} - - -
- - {{.locale.Tr "repo.issues.new.labels"}} - {{if .HasIssuesOrPullsWritePermission}} - {{svg "octicon-gear"}} - {{end}} - -
-
{{.locale.Tr "repo.issues.new.add_labels_title"}}
- {{if or .Labels .OrgLabels}} -
- {{svg "octicon-search" 16}} - -
- {{end}} -
{{.locale.Tr "repo.issues.new.clear_labels"}}
- {{if or .Labels .OrgLabels}} - {{$previousExclusiveScope := "_no_scope"}} - {{range .Labels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} -
- {{end}} - {{$previousExclusiveScope = $exclusiveScope}} - {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} - {{if .Description}}
{{.Description | RenderEmoji}}{{end}} - {{end}} - -
- {{$previousExclusiveScope := "_no_scope"}} - {{range .OrgLabels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} -
- {{end}} - {{$previousExclusiveScope = $exclusiveScope}} - {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} - {{if .Description}}
{{.Description | RenderEmoji}}{{end}} - {{end}} - {{else}} -
{{.locale.Tr "repo.issues.new.no_items"}}
- {{end}} -
-
+ {{template "repo/issue/labels/labels_selector_field" .}} {{template "repo/issue/labels/labels_sidebar" dict "root" $ "ctx" .}}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index d9c506243705..320d87165b50 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -106,49 +106,7 @@
{{end}} -
- - {{.locale.Tr "repo.issues.new.labels"}} - {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - {{svg "octicon-gear" 16 "gt-ml-2"}} - {{end}} - -
-
{{.locale.Tr "repo.issues.new.add_labels_title"}}
- {{if or .Labels .OrgLabels}} -
- {{svg "octicon-search" 16}} - -
- {{end}} - {{.locale.Tr "repo.issues.new.clear_labels"}} - {{if or .Labels .OrgLabels}} - {{$previousExclusiveScope := "_no_scope"}} - {{range .Labels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} -
- {{end}} - {{$previousExclusiveScope = $exclusiveScope}} - {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} - {{if .Description}}
{{.Description | RenderEmoji}}{{end}} - {{end}} -
- {{$previousExclusiveScope := "_no_scope"}} - {{range .OrgLabels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} -
- {{end}} - {{$previousExclusiveScope = $exclusiveScope}} - {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} - {{if .Description}}
{{.Description | RenderEmoji}}{{end}} - {{end}} - {{else}} -
{{.locale.Tr "repo.issues.new.no_items"}}
- {{end}} -
-
+ {{template "repo/issue/labels/labels_selector_field" .}} {{template "repo/issue/labels/labels_sidebar" dict "root" $ "ctx" .}}
From c278def8e3441783b1c07c67bd4bf208d487950b Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sun, 26 Feb 2023 13:22:20 +0100 Subject: [PATCH 2/7] Use scoped label display and menu grouping also for non-exclusive labels --- models/issues/label.go | 13 ++++++++---- modules/templates/helper.go | 2 +- .../issue/labels/labels_selector_field.tmpl | 14 +++++++------ templates/repo/issue/list.tmpl | 20 +++++++++---------- 4 files changed, 28 insertions(+), 21 deletions(-) diff --git a/models/issues/label.go b/models/issues/label.go index 90e4eb458f84..879b575f5cc9 100644 --- a/models/issues/label.go +++ b/models/issues/label.go @@ -190,10 +190,7 @@ func (label *Label) UseLightTextColor() bool { } // Return scope substring of label name, or empty string if none exists -func (label *Label) ExclusiveScope() string { - if !label.Exclusive { - return "" - } +func (label *Label) Scope() string { lastIndex := strings.LastIndex(label.Name, "/") if lastIndex == -1 || lastIndex == 0 || lastIndex == len(label.Name)-1 { return "" @@ -201,6 +198,14 @@ func (label *Label) ExclusiveScope() string { return label.Name[:lastIndex] } +// Return scope for exclusive labels, or empty string if none exists +func (label *Label) ExclusiveScope() string { + if !label.Exclusive { + return "" + } + return label.Scope() +} + // NewLabel creates a new label func NewLabel(ctx context.Context, label *Label) error { if !LabelColorPattern.MatchString(label.Color) { diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 17ac68dc6bcf..ba7cbf0eb295 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -809,7 +809,7 @@ func RenderIssueTitle(ctx context.Context, text, urlPrefix string, metas map[str // RenderLabel renders a label func RenderLabel(label *issues_model.Label) string { - labelScope := label.ExclusiveScope() + labelScope := label.Scope() textColor := "#111" if label.UseLightTextColor() { diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl index c9fdbbf9f29a..9884bf24d23a 100644 --- a/templates/repo/issue/labels/labels_selector_field.tmpl +++ b/templates/repo/issue/labels/labels_selector_field.tmpl @@ -19,24 +19,26 @@ {{end}} {{.locale.Tr "repo.issues.new.clear_labels"}} {{if or .Labels .OrgLabels}} - {{$previousExclusiveScope := "_no_scope"}} + {{$previousScope := "_no_scope"}} {{range .Labels}} + {{$scope := .Scope}} {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} + {{if and (ne $previousScope "_no_scope") (ne $previousScope $scope)}}
{{end}} - {{$previousExclusiveScope = $exclusiveScope}} + {{$previousScope = $scope}} {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} {{if .Description}}
{{.Description | RenderEmoji}}{{end}} {{end}}
- {{$previousExclusiveScope := "_no_scope"}} + {{$previousScope := "_no_scope"}} {{range .OrgLabels}} + {{$scope := .Scope}} {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} + {{if and (ne $previousScope "_no_scope") (ne $previousScope $scope)}}
{{end}} - {{$previousExclusiveScope = $exclusiveScope}} + {{$previousScope = $scope}} {{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}  {{RenderLabel .}} {{if .Description}}
{{.Description | RenderEmoji}}{{end}} {{end}} diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 23a8a1d0e1bf..89496c47dd0a 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -50,14 +50,14 @@
{{.locale.Tr "repo.issues.filter_label_exclude" | Safe}} {{.locale.Tr "repo.issues.filter_label_no_select"}} - {{$previousExclusiveScope := "_no_scope"}} + {{$previousScope := "_no_scope"}} {{range .Labels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} + {{$scope := .Scope}} + {{if and (ne $previousScope "_no_scope") (ne $previousScope $scope)}}
{{end}} - {{$previousExclusiveScope = $exclusiveScope}} - {{if .IsExcluded}}{{svg "octicon-circle-slash"}}{{else if .IsSelected}}{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel .}} + {{$previousScope = $scope}} + {{if .IsExcluded}}{{svg "octicon-circle-slash"}}{{else if .IsSelected}}{{if .ExclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel .}} {{end}}
@@ -224,15 +224,15 @@ {{svg "octicon-triangle-down" 14 "dropdown icon"}}
- {{$previousExclusiveScope := "_no_scope"}} + {{$previousScope := "_no_scope"}} {{range .Labels}} - {{$exclusiveScope := .ExclusiveScope}} - {{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}} + {{$scope := .Scope}} + {{if and (ne $previousScope "_no_scope") (ne $previousScope $scope)}}
{{end}} - {{$previousExclusiveScope = $exclusiveScope}} + {{$previousScope = $scope}}
- {{if contain $.SelLabelIDs .ID}}{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel .}} + {{if contain $.SelLabelIDs .ID}}{{if .ExclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel .}}
{{end}}
From 7ebea3d40757b63600a720890e25f75c9a2d5049 Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sun, 26 Feb 2023 14:37:12 +0100 Subject: [PATCH 3/7] Remove slanted divider in scoped label display, make it straight --- modules/templates/helper.go | 2 -- web_src/less/_repository.less | 11 ----------- 2 files changed, 13 deletions(-) diff --git a/modules/templates/helper.go b/modules/templates/helper.go index ba7cbf0eb295..b807713d5523 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -859,12 +859,10 @@ func RenderLabel(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 4862e30962a3..830b8a9d378a 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2838,23 +2838,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; } From bc7a351851de845ba50a812de8c80c82a30a6cbf Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sun, 26 Feb 2023 15:24:03 +0100 Subject: [PATCH 4/7] Fix scoped label left and right part breaking across lines --- web_src/less/_repository.less | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 830b8a9d378a..4d996f7b3801 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2833,6 +2833,7 @@ .scope-parent { background: none !important; padding: 0 !important; + white-space: nowrap; // Don't break left and right part across lines } .ui.label.scope-left { From f25778c4c4d5dbf9206634881f6a8e5c5da84fa8 Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Tue, 28 Feb 2023 00:12:31 +0100 Subject: [PATCH 5/7] Better fix for scoped label break across lines using inline-flex --- web_src/less/_repository.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 4d996f7b3801..48a646bde353 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2825,15 +2825,14 @@ .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; - white-space: nowrap; // Don't break left and right part across lines } .ui.label.scope-left { From 8a402d0d6ff8aa4b79d8d00c6be29181e39cd87c Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sun, 5 Mar 2023 14:12:01 +0100 Subject: [PATCH 6/7] Reduce contrast between scope and item background colors Still seems enough, and decreases probability of ending up with difficult to read text and background color combination. --- modules/templates/helper.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/templates/helper.go b/modules/templates/helper.go index b807713d5523..a9f945a0c871 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -834,7 +834,7 @@ func RenderLabel(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) From beb683e51538096316f9666b80bfc678266bdeef Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Sun, 12 Mar 2023 13:47:04 +0100 Subject: [PATCH 7/7] Address comments --- templates/repo/issue/labels/labels_selector_field.tmpl | 6 +----- templates/repo/issue/new_form.tmpl | 2 ++ 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/templates/repo/issue/labels/labels_selector_field.tmpl b/templates/repo/issue/labels/labels_selector_field.tmpl index 4483a2b39325..e003e79b5677 100644 --- a/templates/repo/issue/labels/labels_selector_field.tmpl +++ b/templates/repo/issue/labels/labels_selector_field.tmpl @@ -5,11 +5,7 @@ {{svg "octicon-gear" 16 "gt-ml-2"}} {{end}} - {{if .Issue}} -
- {{else}} -
- {{end}} +
{{.locale.Tr "repo.issues.new.add_labels_title"}}
{{if or .Labels .OrgLabels}}
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index c8f463f1ce12..a99ceb045148 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -34,6 +34,8 @@
{{template "repo/issue/branch_selector_field" .}} + + {{template "repo/issue/labels/labels_selector_field" .}} {{template "repo/issue/labels/labels_sidebar" dict "root" $}}