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>
go-gitea · May 10, 2023 · ae0fa64 · ae0fa64
1 parent 8bbbf7e
commit ae0fa64
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 71 deletions.
diff --git a/models/issues/review.go b/models/issues/review.go
@@ -189,6 +189,20 @@ func (r *Review) LoadAttributes(ctx context.Context) (err error) {
 	return err
 }
 
+func (r *Review) HTMLTypeColorName() string {
+	switch r.Type {
+	case ReviewTypeApprove:
+		return "green"
+	case ReviewTypeComment:
+		return "grey"
+	case ReviewTypeReject:
+		return "red"
+	case ReviewTypeRequest:
+		return "yellow"
+	}
+	return "grey"
+}
+
 // GetReviewByID returns the review by the given ID
 func GetReviewByID(ctx context.Context, id int64) (*Review, error) {
 	review := new(Review)

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
@@ -372,7 +372,10 @@
 				<div class="timeline-item event">
 					{{if .OriginalAuthor}}
 					{{else}}
-					<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
+					{{/* Some timeline avatars need a offset to correctly allign with their speech
+							bubble. The condition depends on review type and for positive reviews whether
+							there is a comment element or not */}}
+					<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}}>
 						{{avatar $.Context .Poster}}
 					</a>
 					{{end}}
@@ -408,6 +411,11 @@
 					<div class="content comment-container">
 						<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
 							<div class="comment-header-left gt-df gt-ac">
+								{{if gt .Poster.ID 0}}
+									<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
+										{{avatar $.Context .Poster}}
+									</a>
+								{{end}}
 								<span class="text grey muted-links">
 									{{if .OriginalAuthor}}
 										<span class="text black gt-bold">
@@ -763,6 +771,7 @@
 						<img src="{{.Poster.AvatarLink $.Context}}">
 					</a>
 					<span class="badge grey">{{svg "octicon-x" 16}}</span>
+					{{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}}
 					<span class="text grey muted-links">
 						{{template "shared/user/authorlink" .Poster}}
 						{{$reviewerName := ""}}
@@ -777,7 +786,12 @@
 				{{if .Content}}
 					<div class="timeline-item comment">
 						<div class="content">
-							<div class="ui top attached header arrow-top">
+							<div class="ui top attached header comment-header-left gt-df gt-ac arrow-top">
+								{{if gt .Poster.ID 0}}
+									<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
+										{{avatar $.Context .Poster}}
+									</a>
+								{{end}}
 								<span class="text grey muted-links">
 									{{$.locale.Tr "action.review_dismissed_reason"}}
 								</span>

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
@@ -1,5 +1,5 @@
 {{if or .PullReviewers .OriginalReviews}}
-	<div class="comment box">
+	<div class="comment box timeline-item gt-pt-3 gt-pb-0">
 		<div class="content">
 			<div class="ui segment">
 				<h4>{{$.locale.Tr "repo.issues.review.reviewers"}}</h4>
@@ -8,9 +8,12 @@
 					<div class="ui divider"></div>
 					<div class="review-item">
 						<div class="review-item-left">
+							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
+								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
+							</span>
 							{{if .User}}
 								<a href="{{.User.HomeLink}}">
-									{{avatar $.Context .User}}
+									{{avatar $.Context .User 20}}
 								</a>
 							{{end}}
 							<span class="gt-ml-2">
@@ -34,13 +37,13 @@
 						</div>
 						<div class="review-item-right">
 							{{if .Review.Stale}}
-								<span class="ui type-icon text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
+								<span class="ui text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
 									{{svg "octicon-hourglass" 16 "icon"}}
 								</span>
 							{{end}}
 							{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
-								<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"}}">
-									{{svg "octicon-x" 16}}
+								<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"}}">
+									{{svg "octicon-x" 20}}
 								</a>
 								<div class="ui small modal" id="dismiss-review-modal">
 									<div class="header">
@@ -65,19 +68,9 @@
 									</div>
 								</div>
 							{{end}}
-							<span class="type-icon text {{if eq .Review.Type 1}}green
-								{{- else if eq .Review.Type 2}}grey
-								{{- else if eq .Review.Type 3}}red
-								{{- else if eq .Review.Type 4}}yellow
-								{{else}}grey{{end}}">
-
-								{{if .CanChange}}
-									<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">
-										{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
-									</a>
-								{{end}}
-								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
-							</span>
+							{{if .CanChange}}
+								<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>
+							{{end}}
 						</div>
 					</div>
 				{{end}}
@@ -86,22 +79,16 @@
 					<div class="ui divider"></div>
 					<div class="review-item">
 						<div class="review-item-left">
+							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
+								{{svg (printf "octicon-%s" .Type.Icon)}}
+							</span>
 							<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
-								<span class="text black ">
+								<span class="text black">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
 							</a>
 						</div>
-						<div class="review-item-right">
-							<span class="type-icon text {{if eq .Type 1}}green
-								{{- else if eq .Type 2}}grey
-								{{- else if eq .Type 3}}red
-								{{- else if eq .Type 4}}yellow
-								{{else}}grey{{end}}">
-								{{svg (printf "octicon-%s" .Type.Icon)}}
-							</span>
-						</div>
 					</div>
 				{{end}}
 			</div>
@@ -204,7 +191,7 @@
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+					<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
 					{{$.locale.Tr "repo.pulls.is_ancestor"}}
 				</div>
 			{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
@@ -230,7 +217,7 @@
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
 						<ul>
 							{{range .ChangedProtectedFiles}}
@@ -294,7 +281,7 @@
 					<div class="ui divider"></div>
 
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-alert" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
 						{{$.locale.Tr "repo.pulls.is_empty"}}
 					</div>
 				{{end}}
@@ -430,7 +417,7 @@
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x" 16}}</i>
+						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
 						<ul>
 							{{range .ChangedProtectedFiles}}

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
@@ -54,37 +54,27 @@
 					{{range .PullReviewers}}
 						<div class="item gt-mb-2">
 							{{if .User}}
-								<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">
-									{{avatar $.Context .User 28 "gt-mr-3"}}
-									{{.User.GetDisplayName}}
-								</a>
+								<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{avatar $.Context .User 28 "gt-mr-3"}}{{.User.GetDisplayName}}</a>
 							{{else if .Team}}
 								<span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
 							{{end}}
-							<span class="ui right type-icon text {{if eq .Review.Type 1}}green
-								{{- else if eq .Review.Type 2}}grey
-								{{- else if eq .Review.Type 3}}red
-								{{- else if eq .Review.Type 4}}yellow
-								{{- else}}grey{{end}} right ">
-
+							<span class="ui right gt-df gt-ac gt-gap-3">
 								{{if .CanChange}}
-									<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">
-										{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
-									</a>
+									<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>
 								{{end}}
-								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
+								{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
 							</span>
 						</div>
 					{{end}}
 					{{range .OriginalReviews}}
-						<div class="item" style="margin-bottom: 10px;">
+						<div class="item gt-mb-3">
 							<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
 								<span class="text black">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
 							</a>
-							<span class="ui right type-icon text {{if eq .Type 1}}green
+							<span class="ui right text {{if eq .Type 1}}green
 								{{- else if eq .Type 2}}grey
 								{{- else if eq .Type 3}}red
 								{{- else if eq .Type 4}}yellow

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
@@ -691,49 +691,41 @@
   margin-right: 5px;
 }
 
-.repository.view.issue .pull .merge.box .timeline-avatar {
+.repository.view.issue .merge.box .timeline-avatar {
   margin-top: 3px;
   margin-left: 4px;
 }
 
-.repository.view.issue .pull .merge.box .branch-update.grid .row {
+.repository.view.issue .merge.box .branch-update.grid .row {
   padding-bottom: 1rem;
 }
 
-.repository.view.issue .pull .merge.box .branch-update.grid .row .icon {
+.repository.view.issue .merge.box .branch-update.grid .row .icon {
   margin-top: 1.1rem;
 }
 
-.repository.view.issue .pull .review-item {
+.repository.view.issue .review-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.repository.view.issue .pull .review-item .review-item-left,
-.repository.view.issue .pull .review-item .review-item-right {
+.review-item-left,
+.review-item-right {
   display: flex;
   align-items: center;
 }
 
-.repository.view.issue .pull .review-item .text {
-  margin: 0.3em 0 0.5em 0.5em;
-}
-
-.repository.view.issue .pull .review-item .type-icon {
-  align-self: flex-start;
-  margin-right: 1em;
-}
-
-.repository.view.issue .pull .review-item .type-icon i {
-  line-height: 1.8em;
+.review-item-right {
+  gap: 8px;
+  margin-left: 4px;
 }
 
-.repository.view.issue .pull .review-item .divider {
+.repository.view.issue .review-item .divider {
   margin: 0.5rem 0;
 }
 
-.repository.view.issue .pull .review-item .review-content {
+.repository.view.issue .review-item .review-content {
   padding: 1em 0 1em 3.8em;
 }
 
@@ -782,6 +774,10 @@
   padding-bottom: 8px;
 }
 
+.repository.view.issue .comment-list .timeline-avatar-offset {
+  margin-top: 48px;
+}
+
 .repository.view.issue .comment-list .timeline-item {
   margin-left: 16px;
   position: relative;
@@ -1098,8 +1094,8 @@
   margin-left: 3em;
 }
 
-.repository.view.issue .comment-list .code-comment img.avatar,
-.repository.view.issue .comment-list .comment img.avatar {
+.repository.view.issue .comment-code-cloud .comment-list .code-comment img.avatar,
+.repository.view.issue .comment-code-cloud .comment-list .comment img.avatar {
   width: 28px;
   height: 28px;
 }
@@ -3261,6 +3257,8 @@ td.blob-excerpt {
   .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
     display: flex;
     margin-bottom: auto;
+    margin-left: 6px;
+    margin-right: 2px;
   }
   .repository.view.issue .comment-list .timeline .inline-timeline-avatar img.avatar {
     height: 24px;