Skip to content

Commit ae0fa64

Browse files
silverwindGiteaBot
silverwind
and
GiteaBot
authored
Review fixes and enhancements (#24526)
- Fix regression with icons wrapping from #24459 - Fix box misalignment on small screen - Fix avatar misalignment on review comment - Fix incorrect underline hover effect on review icons - Move status icon to left side in review box - Enhance review icon colors, add helper function for it - Add missing inline avatars in review comments - Tweak icon sizes because some octicons have inconsistent sizing ### Before <img width="655" alt="Screenshot 2023-05-04 at 20 50 28" src="https://user-images.githubusercontent.com/115237/236301230-92325507-6e03-47ac-bfb4-c9ddde310571.png"> <img width="260" alt="Screenshot 2023-05-04 at 20 50 42" src="https://user-images.githubusercontent.com/115237/236301236-0dfa50e7-b8fc-4179-ae68-d872bc90f1f3.png"> ### After <img width="498" alt="Screenshot 2023-05-04 at 20 55 08" src="https://user-images.githubusercontent.com/115237/236301810-23862c2c-c0a9-43a4-a3eb-ee611c14a7f4.png"> <img width="219" alt="Screenshot 2023-05-04 at 20 55 16" src="https://user-images.githubusercontent.com/115237/236301817-d0de02ea-6ab5-43e1-9183-6b3848b72995.png"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
1 parent 8bbbf7e commit ae0fa64

File tree

5 files changed

+74
-71
lines changed

5 files changed

+74
-71
lines changed

‎models/issues/review.go

+14
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,20 @@ func (r *Review) LoadAttributes(ctx context.Context) (err error) {
189189
return err
190190
}
191191

192+
func (r *Review) HTMLTypeColorName() string {
193+
switch r.Type {
194+
case ReviewTypeApprove:
195+
return "green"
196+
case ReviewTypeComment:
197+
return "grey"
198+
case ReviewTypeReject:
199+
return "red"
200+
case ReviewTypeRequest:
201+
return "yellow"
202+
}
203+
return "grey"
204+
}
205+
192206
// GetReviewByID returns the review by the given ID
193207
func GetReviewByID(ctx context.Context, id int64) (*Review, error) {
194208
review := new(Review)

‎templates/repo/issue/view_content/comments.tmpl

+16-2
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,10 @@
372372
<div class="timeline-item event">
373373
{{if .OriginalAuthor}}
374374
{{else}}
375-
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
375+
{{/* Some timeline avatars need a offset to correctly allign with their speech
376+
bubble. The condition depends on review type and for positive reviews whether
377+
there is a comment element or not */}}
378+
<a class="timeline-avatar{{if or (and (eq .Review.Type 1) (or .Content .Attachments)) (eq .Review.Type 2) (eq .Review.Type 3)}} timeline-avatar-offset{{end}}"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
376379
{{avatar $.Context .Poster}}
377380
</a>
378381
{{end}}
@@ -408,6 +411,11 @@
408411
<div class="content comment-container">
409412
<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
410413
<div class="comment-header-left gt-df gt-ac">
414+
{{if gt .Poster.ID 0}}
415+
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
416+
{{avatar $.Context .Poster}}
417+
</a>
418+
{{end}}
411419
<span class="text grey muted-links">
412420
{{if .OriginalAuthor}}
413421
<span class="text black gt-bold">
@@ -763,6 +771,7 @@
763771
<img src="{{.Poster.AvatarLink $.Context}}">
764772
</a>
765773
<span class="badge grey">{{svg "octicon-x" 16}}</span>
774+
{{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}}
766775
<span class="text grey muted-links">
767776
{{template "shared/user/authorlink" .Poster}}
768777
{{$reviewerName := ""}}
@@ -777,7 +786,12 @@
777786
{{if .Content}}
778787
<div class="timeline-item comment">
779788
<div class="content">
780-
<div class="ui top attached header arrow-top">
789+
<div class="ui top attached header comment-header-left gt-df gt-ac arrow-top">
790+
{{if gt .Poster.ID 0}}
791+
<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
792+
{{avatar $.Context .Poster}}
793+
</a>
794+
{{end}}
781795
<span class="text grey muted-links">
782796
{{$.locale.Tr "action.review_dismissed_reason"}}
783797
</span>

‎templates/repo/issue/view_content/pull.tmpl

+19-32
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if or .PullReviewers .OriginalReviews}}
2-
<div class="comment box">
2+
<div class="comment box timeline-item gt-pt-3 gt-pb-0">
33
<div class="content">
44
<div class="ui segment">
55
<h4>{{$.locale.Tr "repo.issues.review.reviewers"}}</h4>
@@ -8,9 +8,12 @@
88
<div class="ui divider"></div>
99
<div class="review-item">
1010
<div class="review-item-left">
11+
<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
12+
{{svg (printf "octicon-%s" .Review.Type.Icon)}}
13+
</span>
1114
{{if .User}}
1215
<a href="{{.User.HomeLink}}">
13-
{{avatar $.Context .User}}
16+
{{avatar $.Context .User 20}}
1417
</a>
1518
{{end}}
1619
<span class="gt-ml-2">
@@ -34,13 +37,13 @@
3437
</div>
3538
<div class="review-item-right">
3639
{{if .Review.Stale}}
37-
<span class="ui type-icon text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
40+
<span class="ui text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
3841
{{svg "octicon-hourglass" 16 "icon"}}
3942
</span>
4043
{{end}}
4144
{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
42-
<a href="#" class="ui muted icon dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
43-
{{svg "octicon-x" 16}}
45+
<a href="#" class="ui muted icon gt-df gt-ac dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
46+
{{svg "octicon-x" 20}}
4447
</a>
4548
<div class="ui small modal" id="dismiss-review-modal">
4649
<div class="header">
@@ -65,19 +68,9 @@
6568
</div>
6669
</div>
6770
{{end}}
68-
<span class="type-icon text {{if eq .Review.Type 1}}green
69-
{{- else if eq .Review.Type 2}}grey
70-
{{- else if eq .Review.Type 3}}red
71-
{{- else if eq .Review.Type 4}}yellow
72-
{{else}}grey{{end}}">
73-
74-
{{if .CanChange}}
75-
<a href="#" class="ui icon re-request-review {{if .Checked}}checked{{end}}" data-issue-id="{{$.Issue.ID}}" data-tooltip-content="{{if .Checked}} {{$.locale.Tr "repo.issues.remove_request_review"}} {{else}} {{$.locale.Tr "repo.issues.re_request_review"}} {{end}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
76-
{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
77-
</a>
78-
{{end}}
79-
{{svg (printf "octicon-%s" .Review.Type.Icon)}}
80-
</span>
71+
{{if .CanChange}}
72+
<a href="#" class="ui icon muted gt-df gt-ac re-request-review{{if .Checked}} checked{{end}}" data-issue-id="{{$.Issue.ID}}" data-tooltip-content="{{if .Checked}}{{$.locale.Tr "repo.issues.remove_request_review"}}{{else}}{{$.locale.Tr "repo.issues.re_request_review"}}{{end}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{if .Checked}}{{svg "octicon-trash"}}{{else}}{{svg "octicon-sync"}}{{end}}</a>
73+
{{end}}
8174
</div>
8275
</div>
8376
{{end}}
@@ -86,22 +79,16 @@
8679
<div class="ui divider"></div>
8780
<div class="review-item">
8881
<div class="review-item-left">
82+
<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
83+
{{svg (printf "octicon-%s" .Type.Icon)}}
84+
</span>
8985
<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
90-
<span class="text black ">
86+
<span class="text black">
9187
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
9288
{{.OriginalAuthor}}
9389
</span>
9490
</a>
9591
</div>
96-
<div class="review-item-right">
97-
<span class="type-icon text {{if eq .Type 1}}green
98-
{{- else if eq .Type 2}}grey
99-
{{- else if eq .Type 3}}red
100-
{{- else if eq .Type 4}}yellow
101-
{{else}}grey{{end}}">
102-
{{svg (printf "octicon-%s" .Type.Icon)}}
103-
</span>
104-
</div>
10592
</div>
10693
{{end}}
10794
</div>
@@ -204,7 +191,7 @@
204191
</div>
205192
{{else if .Issue.PullRequest.IsAncestor}}
206193
<div class="item">
207-
<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
194+
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
208195
{{$.locale.Tr "repo.pulls.is_ancestor"}}
209196
</div>
210197
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
@@ -230,7 +217,7 @@
230217
</div>
231218
{{else if .IsBlockedByChangedProtectedFiles}}
232219
<div class="item">
233-
<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
220+
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
234221
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
235222
<ul>
236223
{{range .ChangedProtectedFiles}}
@@ -294,7 +281,7 @@
294281
<div class="ui divider"></div>
295282

296283
<div class="item">
297-
<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
284+
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
298285
{{$.locale.Tr "repo.pulls.is_empty"}}
299286
</div>
300287
{{end}}
@@ -430,7 +417,7 @@
430417
</div>
431418
{{else if .IsBlockedByChangedProtectedFiles}}
432419
<div class="item text red">
433-
<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
420+
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
434421
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
435422
<ul>
436423
{{range .ChangedProtectedFiles}}

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

+6-16
Original file line numberDiff line numberDiff line change
@@ -54,37 +54,27 @@
5454
{{range .PullReviewers}}
5555
<div class="item gt-mb-2">
5656
{{if .User}}
57-
<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
58-
{{avatar $.Context .User 28 "gt-mr-3"}}
59-
{{.User.GetDisplayName}}
60-
</a>
57+
<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{avatar $.Context .User 28 "gt-mr-3"}}{{.User.GetDisplayName}}</a>
6158
{{else if .Team}}
6259
<span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
6360
{{end}}
64-
<span class="ui right type-icon text {{if eq .Review.Type 1}}green
65-
{{- else if eq .Review.Type 2}}grey
66-
{{- else if eq .Review.Type 3}}red
67-
{{- else if eq .Review.Type 4}}yellow
68-
{{- else}}grey{{end}} right ">
69-
61+
<span class="ui right gt-df gt-ac gt-gap-3">
7062
{{if .CanChange}}
71-
<a href="#" class="ui icon re-request-review {{if .Checked}}checked{{end}}" data-tooltip-content="{{if .Checked}} {{$.locale.Tr "repo.issues.remove_request_review"}} {{else}} {{$.locale.Tr "repo.issues.re_request_review"}} {{end}}" data-issue-id="{{$.Issue.ID}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
72-
{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
73-
</a>
63+
<a href="#" class="ui muted icon re-request-review{{if .Checked}} checked{{end}}" data-tooltip-content="{{if .Checked}}{{$.locale.Tr "repo.issues.remove_request_review"}}{{else}}{{$.locale.Tr "repo.issues.re_request_review"}}{{end}}" data-issue-id="{{$.Issue.ID}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{if .Checked}}{{svg "octicon-trash"}}{{else}}{{svg "octicon-sync"}}{{end}}</a>
7464
{{end}}
75-
{{svg (printf "octicon-%s" .Review.Type.Icon)}}
65+
{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
7666
</span>
7767
</div>
7868
{{end}}
7969
{{range .OriginalReviews}}
80-
<div class="item" style="margin-bottom: 10px;">
70+
<div class="item gt-mb-3">
8171
<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
8272
<span class="text black">
8373
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
8474
{{.OriginalAuthor}}
8575
</span>
8676
</a>
87-
<span class="ui right type-icon text {{if eq .Type 1}}green
77+
<span class="ui right text {{if eq .Type 1}}green
8878
{{- else if eq .Type 2}}grey
8979
{{- else if eq .Type 3}}red
9080
{{- else if eq .Type 4}}yellow

‎web_src/css/repository.css

+19-21
Original file line numberDiff line numberDiff line change
@@ -691,49 +691,41 @@
691691
margin-right: 5px;
692692
}
693693

694-
.repository.view.issue .pull .merge.box .timeline-avatar {
694+
.repository.view.issue .merge.box .timeline-avatar {
695695
margin-top: 3px;
696696
margin-left: 4px;
697697
}
698698

699-
.repository.view.issue .pull .merge.box .branch-update.grid .row {
699+
.repository.view.issue .merge.box .branch-update.grid .row {
700700
padding-bottom: 1rem;
701701
}
702702

703-
.repository.view.issue .pull .merge.box .branch-update.grid .row .icon {
703+
.repository.view.issue .merge.box .branch-update.grid .row .icon {
704704
margin-top: 1.1rem;
705705
}
706706

707-
.repository.view.issue .pull .review-item {
707+
.repository.view.issue .review-item {
708708
display: flex;
709709
justify-content: space-between;
710710
align-items: center;
711711
}
712712

713-
.repository.view.issue .pull .review-item .review-item-left,
714-
.repository.view.issue .pull .review-item .review-item-right {
713+
.review-item-left,
714+
.review-item-right {
715715
display: flex;
716716
align-items: center;
717717
}
718718

719-
.repository.view.issue .pull .review-item .text {
720-
margin: 0.3em 0 0.5em 0.5em;
721-
}
722-
723-
.repository.view.issue .pull .review-item .type-icon {
724-
align-self: flex-start;
725-
margin-right: 1em;
726-
}
727-
728-
.repository.view.issue .pull .review-item .type-icon i {
729-
line-height: 1.8em;
719+
.review-item-right {
720+
gap: 8px;
721+
margin-left: 4px;
730722
}
731723

732-
.repository.view.issue .pull .review-item .divider {
724+
.repository.view.issue .review-item .divider {
733725
margin: 0.5rem 0;
734726
}
735727

736-
.repository.view.issue .pull .review-item .review-content {
728+
.repository.view.issue .review-item .review-content {
737729
padding: 1em 0 1em 3.8em;
738730
}
739731

@@ -782,6 +774,10 @@
782774
padding-bottom: 8px;
783775
}
784776

777+
.repository.view.issue .comment-list .timeline-avatar-offset {
778+
margin-top: 48px;
779+
}
780+
785781
.repository.view.issue .comment-list .timeline-item {
786782
margin-left: 16px;
787783
position: relative;
@@ -1098,8 +1094,8 @@
10981094
margin-left: 3em;
10991095
}
11001096

1101-
.repository.view.issue .comment-list .code-comment img.avatar,
1102-
.repository.view.issue .comment-list .comment img.avatar {
1097+
.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar,
1098+
.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar {
11031099
width: 28px;
11041100
height: 28px;
11051101
}
@@ -3261,6 +3257,8 @@ td.blob-excerpt {
32613257
.repository.view.issue .comment-list .timeline .inline-timeline-avatar {
32623258
display: flex;
32633259
margin-bottom: auto;
3260+
margin-left: 6px;
3261+
margin-right: 2px;
32643262
}
32653263
.repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar {
32663264
height: 24px;

0 commit comments

Comments
 (0)