git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki Activity

ui: update styling of comment headers and role labels (#6816)

Browse source 
## 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

![b1.webp](/attachments/626a8c26-ba21-4920-810e-2bd924997cdb)

![b2.webp](/attachments/389995d3-70d2-480f-8c75-56c59a659569)

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>
This commit is contained in:
0ko 2025-02-07 01:07:16 +00:00 • committed by Otto
commit 5961db5aa7
8 changed files with 11 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
options/locale/locale_en-US.ini
View file

@ -1831,7 +1831,6 @@ issues.review.remove_review_request_self = refused to review %s
issues.review.add_remove_review_requests = requested reviews from %[1]s and removed review requests for %[2]s %[3]s
issues.review.pending = Pending
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.
issues.review.review = Review
issues.review.reviewers = Reviewers
issues.review.outdated = Outdated
issues.review.outdated_description = Content has changed since this comment was made

8
templates/repo/diff/comments.tmpl
View file

@ -33,19 +33,15 @@
<div class="comment-header-right actions tw-flex tw-items-center">
{{if .Invalidated}}
{{$referenceUrl := printf "%s#%s" $.root.Issue.Link .HashTag}}
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label basic small" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
</a>
{{end}}
{{if and .Review}}
{{if eq .Review.Type 0}}
<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")}}">
<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")}}">
{{ctx.Locale.Tr "repo.issues.review.pending"}}
</div>
{{else}}
<div class="ui label basic small">
{{ctx.Locale.Tr "repo.issues.review.review"}}
</div>
{{end}}
{{end}}
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}

2
templates/repo/diff/conversation.tmpl
View file

@ -14,7 +14,7 @@
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).
The case $resolved=false and $invalid=true is handled in repo/diff/comments.tmpl
-->
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label basic small tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
<a href="{{AppSubUrl}}{{$referenceUrl}}" class="ui label tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
</a>
{{end}}

2
templates/repo/issue/view_content/conversation.tmpl
View file

@ -7,7 +7,7 @@
<div class="tw-flex tw-items-center">
<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment tw-ml-2 tw-break-anywhere">{{(index .comments 0).TreePath}}</a>
{{if $invalid}}
<span class="ui label basic small tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
<span class="ui label tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
</span>
{{end}}

4
templates/repo/issue/view_content/show_role.tmpl
View file

@ -1,5 +1,5 @@
{{if and .ShowRole.IsPoster (not .IgnorePoster)}}
<div class="ui basic label role-label" data-tooltip-content="
<div class="ui label role-label" data-tooltip-content="
{{if .IsPull}}
{{ctx.Locale.Tr "repo.issues.author.tooltip.pr"}}
{{else}}
@ -9,7 +9,7 @@
</div>
{{end}}
{{if .ShowRole.RoleInRepo}}
<div class="ui basic label role-label" data-tooltip-content="{{.ShowRole.RoleInRepo.LocaleHelper ctx.Locale}}">
<div class="ui label role-label" data-tooltip-content="{{.ShowRole.RoleInRepo.LocaleHelper ctx.Locale}}">
{{.ShowRole.RoleInRepo.LocaleString ctx.Locale}}
</div>
{{end}}

2
web_src/css/repo.css
View file

@ -2248,7 +2248,7 @@ details.repo-search-result summary::marker {
}
.timeline .ui.comment-header {
padding: 0.5rem 1rem;
padding: 0.25rem 0.75rem;
}
.comment-header::before,

4
web_src/css/themes/theme-forgejo-dark.css
View file

@ -326,8 +326,8 @@ i.grey.icon.icon.icon.icon {
.ui.ui.ui.basic.primary.label {
color: var(--color-text-dark) !important;
}
.ui.basic.yellow.label.pending-label {
background: var(--color-light) !important;
.ui.yellow.label.pending-label {
color: var(--color-warning-text) !important;
}
::selection {
background: var(--steel-100) !important;

5
web_src/css/themes/theme-forgejo-light.css
View file

@ -314,10 +314,9 @@
.ui.ui.ui.basic.primary.label {
color: var(--color-text-dark) !important;
}
.ui.basic.yellow.label.pending-label {
.ui.yellow.label.pending-label {
background: var(--color-warning-bg) !important;
color: var(--color-warning-text) !important;
border-color: var(--color-yellow-light) !important;
color: var(--color-text-dark) !important;
}
::selection {
background: var(--steel-450) !important;