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

Review fixes and enhancements (#24526)

Browse source 
- Fix regression with icons wrapping from
https://github.com/go-gitea/gitea/pull/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>
This commit is contained in:
silverwind 2023-05-10 11:16:44 +02:00 committed by GitHub
parent 8bbbf7e6b8
commit ae0fa64ef6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
models/issues/review.go
View file

@ -189,6 +189,20 @@ func (r *Review) LoadAttributes(ctx context.Context) (err error) {
return err 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 // GetReviewByID returns the review by the given ID
func GetReviewByID(ctx context.Context, id int64) (*Review, error) { func GetReviewByID(ctx context.Context, id int64) (*Review, error) {
review := new(Review) review := new(Review)

18
templates/repo/issue/view_content/comments.tmpl
View file

@ -372,7 +372,10 @@
<div class="timeline-item event"> <div class="timeline-item event">
{{if .OriginalAuthor}} {{if .OriginalAuthor}}
{{else}} {{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}} {{avatar $.Context .Poster}}
</a> </a>
{{end}} {{end}}
@ -408,6 +411,11 @@
<div class="content comment-container"> <div class="content comment-container">
<div class="ui top attached header comment-header gt-df gt-ac gt-sb"> <div class="ui top attached header comment-header gt-df gt-ac gt-sb">
<div class="comment-header-left gt-df gt-ac"> <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"> <span class="text grey muted-links">
{{if .OriginalAuthor}} {{if .OriginalAuthor}}
<span class="text black gt-bold"> <span class="text black gt-bold">
@ -763,6 +771,7 @@
<img src="{{.Poster.AvatarLink $.Context}}"> <img src="{{.Poster.AvatarLink $.Context}}">
</a> </a>
<span class="badge grey">{{svg "octicon-x" 16}}</span> <span class="badge grey">{{svg "octicon-x" 16}}</span>
{{template "shared/user/avatarlink" dict "Context" $.Context "user" .Poster}}
<span class="text grey muted-links"> <span class="text grey muted-links">
{{template "shared/user/authorlink" .Poster}} {{template "shared/user/authorlink" .Poster}}
{{$reviewerName := ""}} {{$reviewerName := ""}}
@ -777,7 +786,12 @@
{{if .Content}} {{if .Content}}
<div class="timeline-item comment"> <div class="timeline-item comment">
<div class="content"> <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"> <span class="text grey muted-links">
{{$.locale.Tr "action.review_dismissed_reason"}} {{$.locale.Tr "action.review_dismissed_reason"}}
</span> </span>

47
templates/repo/issue/view_content/pull.tmpl
View file

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

22
templates/repo/issue/view_content/sidebar.tmpl
View file

@ -54,37 +54,27 @@
{{range .PullReviewers}} {{range .PullReviewers}}
<div class="item gt-mb-2"> <div class="item gt-mb-2">
{{if .User}} {{if .User}}
<a class="muted sidebar-item-link" href="{{.User.HomeLink}}"> <a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{avatar $.Context .User 28 "gt-mr-3"}}{{.User.GetDisplayName}}</a>
{{avatar $.Context .User 28 "gt-mr-3"}}
{{.User.GetDisplayName}}
</a>
{{else if .Team}} {{else if .Team}}
<span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span> <span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
{{end}} {{end}}
<span class="ui right type-icon text {{if eq .Review.Type 1}}green <span class="ui right gt-df gt-ac gt-gap-3">
{{- 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 ">
{{if .CanChange}} {{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"> <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>
{{if .Checked}} {{svg "octicon-trash"}} {{else}} {{svg "octicon-sync"}} {{end}}
</a>
{{end}} {{end}}
{{svg (printf "octicon-%s" .Review.Type.Icon)}} {{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
</span> </span>
</div> </div>
{{end}} {{end}}
{{range .OriginalReviews}} {{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}}"> <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)}} {{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
{{.OriginalAuthor}} {{.OriginalAuthor}}
</span> </span>
</a> </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 2}}grey
{{- else if eq .Type 3}}red {{- else if eq .Type 3}}red
{{- else if eq .Type 4}}yellow {{- else if eq .Type 4}}yellow

40
web_src/css/repository.css
View file

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