loading up the forgejo repo on tangled to test page performance
ui: update styling of comment headers and role labels (#6816)
## Changes
* same as https://codeberg.org/forgejo/forgejo/pulls/6201, but for role labels
* remove border
* decrease paddings
* all by simply removing `basic`
* I did check that no important properties were added by that class
* make the header itself more compact by decreasing paddings here too
* it's really large currently - being as high as single line content
* removed "review" label by @fnetX request
There was no heavy consideration behind these changes. I was just poking around the area from time to time and finally decided to submit something. If you think there's more consideration needed, please tell!
## Preview
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6816
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
+11
-17
-1
options/locale/locale_en-US.ini
-1
options/locale/locale_en-US.ini
···
1831
1831
issues.review.add_remove_review_requests = requested reviews from %[1]s and removed review requests for %[2]s %[3]s
1832
1832
issues.review.pending = Pending
1833
1833
issues.review.pending.tooltip = This comment is not currently visible to other users. To submit your pending comments, select "%s" -> "%s/%s/%s" at the top of the page.
1834
-
issues.review.review = Review
1835
1834
issues.review.reviewers = Reviewers
1836
1835
issues.review.outdated = Outdated
1837
1836
issues.review.outdated_description = Content has changed since this comment was made
+2
-6
templates/repo/diff/comments.tmpl
+2
-6
templates/repo/diff/comments.tmpl
···
33
33
<div class="comment-header-right actions tw-flex tw-items-center">
34
34
{{if .Invalidated}}
35
35
{{$referenceUrl := printf "%s#%s" $.root.Issue.Link .HashTag}}
36
-
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label basic small" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
36
+
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
37
37
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
38
38
</a>
39
39
{{end}}
40
40
{{if and .Review}}
41
41
{{if eq .Review.Type 0}}
42
-
<div class="ui label basic small yellow pending-label" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.pending.tooltip" (ctx.Locale.Tr "repo.diff.review") (ctx.Locale.Tr "repo.diff.review.approve") (ctx.Locale.Tr "repo.diff.review.comment") (ctx.Locale.Tr "repo.diff.review.reject")}}">
42
+
<div class="ui label yellow pending-label" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.pending.tooltip" (ctx.Locale.Tr "repo.diff.review") (ctx.Locale.Tr "repo.diff.review.approve") (ctx.Locale.Tr "repo.diff.review.comment") (ctx.Locale.Tr "repo.diff.review.reject")}}">
43
43
{{ctx.Locale.Tr "repo.issues.review.pending"}}
44
-
</div>
45
-
{{else}}
46
-
<div class="ui label basic small">
47
-
{{ctx.Locale.Tr "repo.issues.review.review"}}
48
44
</div>
49
45
{{end}}
50
46
{{end}}
+1
-1
templates/repo/diff/conversation.tmpl
+1
-1
templates/repo/diff/conversation.tmpl
···
14
14
We only handle the case $resolved=true and $invalid=true in this template because if the comment is not resolved it has the outdated label in the comments area (not the header above).
15
15
The case $resolved=false and $invalid=true is handled in repo/diff/comments.tmpl
16
16
-->
17
-
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label basic small tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
17
+
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
18
18
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
19
19
</a>
20
20
{{end}}
+1
-1
templates/repo/issue/view_content/conversation.tmpl
+1
-1
templates/repo/issue/view_content/conversation.tmpl
···
7
7
<div class="tw-flex tw-items-center">
8
8
<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment tw-ml-2 tw-break-anywhere">{{(index .comments 0).TreePath}}</a>
9
9
{{if $invalid}}
10
-
<span class="ui label basic small tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
10
+
<span class="ui label tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
11
11
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
12
12
</span>
13
13
{{end}}
+2
-2
templates/repo/issue/view_content/show_role.tmpl
+2
-2
templates/repo/issue/view_content/show_role.tmpl
···
1
1
{{if and .ShowRole.IsPoster (not .IgnorePoster)}}
2
-
<div class="ui basic label role-label" data-tooltip-content="
2
+
<div class="ui label role-label" data-tooltip-content="
3
3
{{if .IsPull}}
4
4
{{ctx.Locale.Tr "repo.issues.author.tooltip.pr"}}
5
5
{{else}}
···
9
9
</div>
10
10
{{end}}
11
11
{{if .ShowRole.RoleInRepo}}
12
-
<div class="ui basic label role-label" data-tooltip-content="{{.ShowRole.RoleInRepo.LocaleHelper ctx.Locale}}">
12
+
<div class="ui label role-label" data-tooltip-content="{{.ShowRole.RoleInRepo.LocaleHelper ctx.Locale}}">
13
13
{{.ShowRole.RoleInRepo.LocaleString ctx.Locale}}
14
14
</div>
15
15
{{end}}
+1
-1
web_src/css/repo.css
+1
-1
web_src/css/repo.css
+2
-2
web_src/css/themes/theme-forgejo-dark.css
+2
-2
web_src/css/themes/theme-forgejo-dark.css
···
326
326
.ui.ui.ui.basic.primary.label {
327
327
color: var(--color-text-dark) !important;
328
328
}
329
-
.ui.basic.yellow.label.pending-label {
330
-
background: var(--color-light) !important;
329
+
.ui.yellow.label.pending-label {
330
+
color: var(--color-warning-text) !important;
331
331
}
332
332
::selection {
333
333
background: var(--steel-100) !important;
+2
-3
web_src/css/themes/theme-forgejo-light.css
+2
-3
web_src/css/themes/theme-forgejo-light.css
···
314
314
.ui.ui.ui.basic.primary.label {
315
315
color: var(--color-text-dark) !important;
316
316
}
317
-
.ui.basic.yellow.label.pending-label {
317
+
.ui.yellow.label.pending-label {
318
318
background: var(--color-warning-bg) !important;
319
-
color: var(--color-warning-text) !important;
320
-
border-color: var(--color-yellow-light) !important;
319
+
color: var(--color-text-dark) !important;
321
320
}
322
321
::selection {
323
322
background: var(--steel-450) !important;