mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-09-28 21:55:55 +00:00
ui: refactor display of review threads on pr view (#8138)
* refactored to untangle comment headers of different styles of comments from each other * fixed misalignments * improved consistency * fixed missing avatar rounding * made reactions aligned with content * fixed text in the "Outdated" label overflowing into the toggle icon Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8138 Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko
parent
995dba14ec
commit
cd08265406
9 changed files with 171 additions and 128 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
|
||||
<form class="ui form {{if $.hidden}}tw-hidden comment-form{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post">
|
||||
<form class="ui form {{if $.hidden}}tw-hidden comment-form tw-mt-2{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post">
|
||||
{{$.root.CsrfTokenHtml}}
|
||||
<input type="hidden" name="origin" value="{{if $.root.PageIsPullFiles}}diff{{else}}timeline{{end}}">
|
||||
<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}">
|
||||
|
|
@ -25,22 +25,22 @@
|
|||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="field footer tw-mx-2">
|
||||
<div class="field footer">
|
||||
<span class="markup-info">{{svg "octicon-markdown"}} {{ctx.Locale.Tr "repo.diff.comment.markdown_info"}}</span>
|
||||
<div class="tw-text-right">
|
||||
<div class="right button-sequence">
|
||||
{{if $.reply}}
|
||||
<button class="ui submit primary tiny button btn-reply" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>
|
||||
<button class="ui submit primary tiny button" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>
|
||||
<input type="hidden" name="reply" value="{{$.reply}}">
|
||||
{{else}}
|
||||
{{if $.root.CurrentReview}}
|
||||
<button name="pending_review" type="submit" class="ui submit primary tiny button btn-add-comment">{{ctx.Locale.Tr "repo.diff.comment.add_review_comment"}}</button>
|
||||
<button name="pending_review" type="submit" class="ui submit primary tiny button">{{ctx.Locale.Tr "repo.diff.comment.add_review_comment"}}</button>
|
||||
{{else}}
|
||||
<button name="pending_review" type="submit" class="ui submit primary tiny button btn-start-review">{{ctx.Locale.Tr "repo.diff.comment.start_review"}}</button>
|
||||
<button name="pending_review" type="submit" class="ui submit primary tiny button">{{ctx.Locale.Tr "repo.diff.comment.start_review"}}</button>
|
||||
<button name="single_review" value="true" type="submit" class="ui submit tiny basic button btn-add-single">{{ctx.Locale.Tr "repo.diff.comment.add_single_comment"}}</button>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{if or (not $.HasComments) $.hidden}}
|
||||
<button type="button" class="ui submit tiny basic button btn-cancel cancel-code-comment">{{ctx.Locale.Tr "cancel"}}</button>
|
||||
<button type="button" class="ui submit tiny basic button cancel-code-comment">{{ctx.Locale.Tr "cancel"}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
{{$resolveDoer := (index .comments 0).ResolveDoer}}
|
||||
{{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
|
||||
<div class="ui segments conversation-holder">
|
||||
<div class="ui segment collapsible-comment-box tw-py-2 tw-flex tw-items-center tw-justify-between">
|
||||
<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>
|
||||
<div class="ui segment collapsible-comment-box tw-py-2 tw-gap-2 tw-flex tw-items-center tw-justify-between">
|
||||
<div class="tw-flex tw-items-center tw-gap-2">
|
||||
<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment tw-break-anywhere">{{(index .comments 0).TreePath}}</a>
|
||||
{{if $invalid}}
|
||||
<span class="ui label tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
|
||||
<span class="ui label" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
|
||||
{{ctx.Locale.Tr "repo.issues.review.outdated"}}
|
||||
</span>
|
||||
{{end}}
|
||||
|
|
@ -49,64 +49,62 @@
|
|||
</div>
|
||||
{{end}}
|
||||
<div id="code-comments-{{(index .comments 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} tw-hidden{{end}}">
|
||||
<div class="ui comments tw-mb-0">
|
||||
{{range .comments}}
|
||||
{{$createdSubStr:= DateUtils.TimeSince .CreatedUnix}}
|
||||
<div class="comment code-comment tw-pb-4" id="{{.HashTag}}">
|
||||
<div class="content">
|
||||
<div class="header comment-header">
|
||||
<div class="comment-header-left tw-flex tw-items-center">
|
||||
{{if not .OriginalAuthor}}
|
||||
<a class="avatar">
|
||||
{{ctx.AvatarUtils.Avatar .Poster 20}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
{{if .OriginalAuthor}}
|
||||
<span class="text black">
|
||||
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
|
||||
{{.OriginalAuthor}}
|
||||
</span>
|
||||
{{if $.Repository.OriginalURL}}
|
||||
<span class="migrate">({{ctx.Locale.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname}})</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
{{template "shared/user/authorlink" .Poster}}
|
||||
{{range .comments}}
|
||||
{{$createdSubStr:= DateUtils.TimeSince .CreatedUnix}}
|
||||
<div class="comment code-comment" id="{{.HashTag}}">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<div class="comment-header-left tw-flex">
|
||||
{{if not .OriginalAuthor}}
|
||||
<a class="avatar">
|
||||
{{ctx.AvatarUtils.Avatar .Poster 20}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links tw-self-center">
|
||||
{{if .OriginalAuthor}}
|
||||
<span class="text black">
|
||||
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
|
||||
{{.OriginalAuthor}}
|
||||
</span>
|
||||
{{if $.Repository.OriginalURL}}
|
||||
<span class="migrate">({{ctx.Locale.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname}})</span>
|
||||
{{end}}
|
||||
{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdSubStr}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="comment-header-right actions tw-flex tw-items-center">
|
||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole "IsPull" $.Issue.IsPull}}
|
||||
{{if not $.Repository.IsArchived}}
|
||||
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
|
||||
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
|
||||
{{else}}
|
||||
{{template "shared/user/authorlink" .Poster}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdSubStr}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text comment-content">
|
||||
<div id="issuecomment-{{.ID}}-content" class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent}}
|
||||
{{else}}
|
||||
<span class="no-content">{{ctx.Locale.Tr "repo.issues.no_content"}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div id="issuecomment-{{.ID}}-raw" class="raw-content tw-hidden">{{.Content}}</div>
|
||||
<div class="edit-content-zone tw-hidden" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-content-version="{{.ContentVersion}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
|
||||
{{if .Attachments}}
|
||||
{{template "repo/issue/view_content/attachments" dict "Attachments" .Attachments "RenderedContent" .RenderedContent}}
|
||||
<div class="comment-header-right actions tw-flex tw-items-center">
|
||||
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole "IsPull" $.Issue.IsPull}}
|
||||
{{if not $.Repository.IsArchived}}
|
||||
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
|
||||
{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{$reactions := .Reactions.GroupByType}}
|
||||
{{if $reactions}}
|
||||
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
|
||||
</div>
|
||||
<div class="text comment-content">
|
||||
<div id="issuecomment-{{.ID}}-content" class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent}}
|
||||
{{else}}
|
||||
<span class="no-content">{{ctx.Locale.Tr "repo.issues.no_content"}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div id="issuecomment-{{.ID}}-raw" class="raw-content tw-hidden">{{.Content}}</div>
|
||||
<div class="edit-content-zone tw-hidden" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-content-version="{{.ContentVersion}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
|
||||
{{if .Attachments}}
|
||||
{{template "repo/issue/view_content/attachments" dict "Attachments" .Attachments "RenderedContent" .RenderedContent}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{$reactions := .Reactions.GroupByType}}
|
||||
{{if $reactions}}
|
||||
{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="tw-flex tw-items-center tw-flex-wrap tw-mt-2">
|
||||
<div class="tw-flex-1">
|
||||
{{if $resolved}}
|
||||
<div class="ui grey text">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue