Skip to content

Commit 1e50cec

Browse files
silverwindwxiaoguang
silverwind
and
wxiaoguang
authored
Improve labels-list rendering (#34846)
Make labels list use consistent gap --------- Co-authored-by: wxiaoguang <[email protected]>
1 parent aa9d867 commit 1e50cec

File tree

19 files changed

+185
-115
lines changed

19 files changed

+185
-115
lines changed

‎modules/htmlutil/html.go

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ func HTMLFormat(s template.HTML, rawArgs ...any) template.HTML {
4242
// for most basic types (including template.HTML which is safe), just do nothing and use it
4343
case string:
4444
args[i] = template.HTMLEscapeString(v)
45+
case template.URL:
46+
args[i] = template.HTMLEscapeString(string(v))
4547
case fmt.Stringer:
4648
args[i] = template.HTMLEscapeString(v.String())
4749
default:

‎modules/htmlutil/html_test.go

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@ import (
1010
"github.com/stretchr/testify/assert"
1111
)
1212

13+
type testStringer struct{}
14+
15+
func (t testStringer) String() string {
16+
return "&StringMethod"
17+
}
18+
1319
func TestHTMLFormat(t *testing.T) {
1420
assert.Equal(t, template.HTML("<a>&lt; < 1</a>"), HTMLFormat("<a>%s %s %d</a>", "<", template.HTML("<"), 1))
21+
assert.Equal(t, template.HTML("%!s(<nil>)"), HTMLFormat("%s", nil))
22+
assert.Equal(t, template.HTML("&lt;&gt;"), HTMLFormat("%s", template.URL("<>")))
23+
assert.Equal(t, template.HTML("&amp;StringMethod &amp;StringMethod"), HTMLFormat("%s %s", testStringer{}, &testStringer{}))
1524
}

‎modules/templates/util_render.go

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,23 @@ func (ut *RenderUtils) RenderIssueSimpleTitle(text string) template.HTML {
122122
return ret
123123
}
124124

125-
// RenderLabel renders a label
125+
func (ut *RenderUtils) RenderLabelWithLink(label *issues_model.Label, link any) template.HTML {
126+
var attrHref template.HTML
127+
switch link.(type) {
128+
case template.URL, string:
129+
attrHref = htmlutil.HTMLFormat(`href="%s"`, link)
130+
default:
131+
panic(fmt.Sprintf("unexpected type %T for link", link))
132+
}
133+
return ut.renderLabelWithTag(label, "a", attrHref)
134+
}
135+
126136
func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
137+
return ut.renderLabelWithTag(label, "span", "")
138+
}
139+
140+
// RenderLabel renders a label
141+
func (ut *RenderUtils) renderLabelWithTag(label *issues_model.Label, tagName, tagAttrs template.HTML) template.HTML {
127142
locale := ut.ctx.Value(translation.ContextKey).(translation.Locale)
128143
var extraCSSClasses string
129144
textColor := util.ContrastColor(label.Color)
@@ -137,8 +152,8 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
137152

138153
if labelScope == "" {
139154
// Regular label
140-
return htmlutil.HTMLFormat(`<div class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s">%s</div>`,
141-
extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name))
155+
return htmlutil.HTMLFormat(`<%s %s class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s"><span class="gt-ellipsis">%s</span></%s>`,
156+
tagName, tagAttrs, extraCSSClasses, textColor, label.Color, descriptionText, ut.RenderEmoji(label.Name), tagName)
142157
}
143158

144159
// Scoped label
@@ -152,7 +167,7 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
152167
// Ensure we add the same amount of contrast also near 0 and 1.
153168
darken := contrast + math.Max(luminance+contrast-1.0, 0.0)
154169
lighten := contrast + math.Max(contrast-luminance, 0.0)
155-
// Compute factor to keep RGB values proportional.
170+
// Compute the factor to keep RGB values proportional.
156171
darkenFactor := math.Max(luminance-darken, 0.0) / math.Max(luminance, 1.0/255.0)
157172
lightenFactor := math.Min(luminance+lighten, 1.0) / math.Max(luminance, 1.0/255.0)
158173

@@ -173,26 +188,29 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
173188

174189
if label.ExclusiveOrder > 0 {
175190
// <scope> | <label> | <order>
176-
return htmlutil.HTMLFormat(`<span class="ui label %s scope-parent" data-tooltip-content title="%s">`+
191+
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
177192
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
178193
`<div class="ui label scope-middle" style="color: %s !important; background-color: %s !important">%s</div>`+
179194
`<div class="ui label scope-right">%d</div>`+
180-
`</span>`,
195+
`</%s>`,
196+
tagName, tagAttrs,
181197
extraCSSClasses, descriptionText,
182198
textColor, scopeColor, scopeHTML,
183199
textColor, itemColor, itemHTML,
184-
label.ExclusiveOrder)
200+
label.ExclusiveOrder,
201+
tagName)
185202
}
186203

187204
// <scope> | <label>
188-
return htmlutil.HTMLFormat(`<span class="ui label %s scope-parent" data-tooltip-content title="%s">`+
205+
return htmlutil.HTMLFormat(`<%s %s class="ui label %s scope-parent" data-tooltip-content title="%s">`+
189206
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
190207
`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
191-
`</span>`,
208+
`</%s>`,
209+
tagName, tagAttrs,
192210
extraCSSClasses, descriptionText,
193211
textColor, scopeColor, scopeHTML,
194212
textColor, itemColor, itemHTML,
195-
)
213+
tagName)
196214
}
197215

198216
// RenderEmoji renders html text with emoji post processors
@@ -235,7 +253,8 @@ func (ut *RenderUtils) RenderLabels(labels []*issues_model.Label, repoLink strin
235253
if label == nil {
236254
continue
237255
}
238-
htmlCode += fmt.Sprintf(`<a href="%s?labels=%d">%s</a>`, baseLink, label.ID, ut.RenderLabel(label))
256+
link := fmt.Sprintf("%s?labels=%d", baseLink, label.ID)
257+
htmlCode += string(ut.RenderLabelWithLink(label, template.URL(link)))
239258
}
240259
htmlCode += "</span>"
241260
return template.HTML(htmlCode)

‎modules/templates/util_render_test.go

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,17 @@ func TestRenderLabels(t *testing.T) {
205205
issue = &issues.Issue{IsPull: true}
206206
expected = `/owner/repo/pulls?labels=123`
207207
assert.Contains(t, ut.RenderLabels([]*issues.Label{label}, "/owner/repo", issue), expected)
208+
209+
expectedLabel := `<a href="&lt;&gt;" class="ui label " style="color: #fff !important; background-color: label-color !important;" data-tooltip-content title=""><span class="gt-ellipsis">label-name</span></a>`
210+
assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "<>")))
211+
assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, template.URL("<>"))))
212+
213+
label = &issues.Label{ID: 123, Name: "</>", Exclusive: true}
214+
expectedLabel = `<a href="" class="ui label scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-right" style="color: #fff !important; background-color: #000000 !important">&gt;</div></a>`
215+
assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "")))
216+
label = &issues.Label{ID: 123, Name: "</>", Exclusive: true, ExclusiveOrder: 1}
217+
expectedLabel = `<a href="" class="ui label scope-parent" data-tooltip-content title=""><div class="ui label scope-left" style="color: #fff !important; background-color: #000000 !important">&lt;</div><div class="ui label scope-middle" style="color: #fff !important; background-color: #000000 !important">&gt;</div><div class="ui label scope-right">1</div></a>`
218+
assert.Equal(t, expectedLabel, string(ut.RenderLabelWithLink(label, "")))
208219
}
209220

210221
func TestUserMention(t *testing.T) {

‎templates/repo/home_sidebar_bottom.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
</a>
1111
</div>
1212
<div class="flex-item">
13-
<div class="flex-item-icon">
14-
{{svg "octicon-tag" 16}}
13+
<div class="flex-item-leading">
14+
<div class="tw-mt-1">{{svg "octicon-tag" 16}}</div>
1515
</div>
1616
<div class="flex-item-main">
1717
<div class="flex-item-header">

‎templates/repo/issue/card.tmpl

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,21 @@
6363

6464
{{if or .Labels .Assignees}}
6565
<div class="issue-card-bottom">
66-
<div class="labels-list">
67-
{{range .Labels}}
68-
<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{ctx.RenderUtils.RenderLabel .}}</a>
66+
{{/* the labels container must always be present, to help the assignees list right-aligned */}}
67+
<div class="issue-card-bottom-part labels-list">
68+
{{range $label := .Labels}}
69+
{{$link := print $.Issue.Repo.Link "/issues"}}
70+
{{$link = QueryBuild $link "labels" $label.ID}}
71+
{{ctx.RenderUtils.RenderLabelWithLink $label $link}}
6972
{{end}}
7073
</div>
71-
<div class="issue-card-assignees">
74+
{{if .Assignees}}
75+
<div class="issue-card-bottom-part tw-justify-end">
7276
{{range .Assignees}}
73-
<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28}}</a>
77+
<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 24}}</a>
7478
{{end}}
7579
</div>
80+
{{end}}
7681
</div>
7782
{{end}}
7883
{{end}}

‎templates/repo/issue/labels/label_list.tmpl

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="divider"></div>
2727
{{end}}
2828

29-
<ul class="issue-label-list">
29+
<ul class="issue-label-list muted-links">
3030
{{$canEditLabel := and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
3131
{{$canEditLabel = or $canEditLabel $.PageIsOrgSettingsLabels}}
3232
{{range .Labels}}
@@ -42,9 +42,8 @@
4242
<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
4343
{{end}}
4444
</div>
45-
<div class="label-operation tw-flex">
45+
<div class="label-operation">
4646
{{template "repo/issue/labels/label_archived" .}}
47-
<div class="tw-flex tw-ml-auto">
4847
{{if $canEditLabel}}
4948
<a class="edit-label-button" href="#"
5049
data-label-id="{{.ID}}" data-label-name="{{.Name}}" data-label-color="{{.Color}}"
@@ -57,7 +56,6 @@
5756
data-modal-confirm-content="{{ctx.Locale.Tr "repo.issues.label_deletion_desc"}}"
5857
>{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
5958
{{end}}
60-
</div>
6159
</div>
6260
</li>
6361
{{end}}

‎templates/repo/issue/sidebar/assignee_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
</div>
2828
</div>
2929
</div>
30-
<div class="ui list muted-links flex-items-block tw-flex tw-flex-col tw-gap-2">
30+
<div class="ui relaxed list muted-links flex-items-block">
3131
<span class="item empty-list {{if $issueAssignees}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_assignees"}}</span>
3232
{{range $issueAssignees}}
3333
<a class="item" href="{{$pageMeta.RepoLink}}/{{if $pageMeta.IsPullRequest}}pulls{{else}}issues{{end}}?assignee={{.ID}}">

‎templates/repo/issue/sidebar/label_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</div>
4444
</div>
4545

46-
<div class="ui list labels-list tw-my-2 tw-flex tw-gap-2">
46+
<div class="ui list labels-list">
4747
<span class="item empty-list {{if $data.SelectedLabelIDs}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
4848
{{range $data.AllLabels}}
4949
{{if .IsChecked}}

‎templates/repo/issue/sidebar/reviewer_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</div>
4444
</div>
4545

46-
<div class="ui relaxed list flex-items-block tw-my-4">
46+
<div class="ui relaxed list flex-items-block">
4747
<span class="item empty-list {{if or $data.OriginalReviews $data.CurrentPullReviewers}}tw-hidden{{end}}">
4848
{{ctx.Locale.Tr "repo.issues.new.no_reviewers"}}
4949
</span>

0 commit comments

Comments
 (0)