Code comments improvements (#15722)
- Right-align the Reply and Resolve buttons - Center Resolved text and add some padding - Add padding to inline comments - Indent the comment content to align with author name - Re-parent form to allow better button layout space. Co-authored-by: zeripath <art27@cantab.net>
This commit is contained in:
silverwind
GitHub
parent
24ad131221
commit
2a9b8d173a
|
|
@ -1,9 +1,4 @@
|
|||
{{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
|
||||
{{if $.hidden}}
|
||||
<button class="comment-form-reply ui green labeled icon tiny button">
|
||||
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.root.i18n.Tr "repo.diff.comment.reply"}}
|
||||
</button>
|
||||
{{end}}
|
||||
<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
|
||||
{{$.root.CsrfTokenHtml}}
|
||||
<input type="hidden" name="origin" value="{{if $.root.PageIsPullFiles}}diff{{else}}timeline{{end}}">
|
||||
|
|
@ -26,7 +21,7 @@
|
|||
{{.i18n.Tr "loading"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field footer">
|
||||
<div class="field footer mx-3">
|
||||
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
|
||||
<div class="ui right">
|
||||
{{if $.reply}}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
{{if $resolved}}
|
||||
<div class="ui attached header resolved-placeholder df ac sb">
|
||||
<div class="ui grey text">
|
||||
{{svg "octicon-check" 16 "icon mr-2"}}
|
||||
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -25,9 +26,9 @@
|
|||
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
|
||||
</ui>
|
||||
</div>
|
||||
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index .comments 0).ReviewID "root" $ "comment" (index .comments 0)}}
|
||||
<div class="df je ac fw mt-3">
|
||||
{{if and $.CanMarkConversation $isNotPending}}
|
||||
<button class="ui icon tiny button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index .comments 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation" >
|
||||
<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index .comments 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
|
||||
{{if $resolved}}
|
||||
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
|
||||
{{else}}
|
||||
|
|
@ -35,5 +36,12 @@
|
|||
{{end}}
|
||||
</button>
|
||||
{{end}}
|
||||
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
|
||||
<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
|
||||
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.i18n.Tr "repo.diff.comment.reply"}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index .comments 0).ReviewID "root" $ "comment" (index .comments 0)}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -508,11 +508,11 @@
|
|||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} py-3">
|
||||
<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} p-3">
|
||||
<div class="ui comments mb-0">
|
||||
{{range $comms}}
|
||||
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
|
||||
<div class="comment code-comment" id="{{.HashTag}}">
|
||||
<div class="comment code-comment pb-4" id="{{.HashTag}}">
|
||||
<div class="content">
|
||||
<div class="header comment-header">
|
||||
<div class="comment-header-left df ac">
|
||||
|
|
@ -572,10 +572,18 @@
|
|||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}}
|
||||
|
||||
<div class="df ac fw mt-3 mb-2 mx-3">
|
||||
<div class="f1">
|
||||
{{if $resolved}}
|
||||
<div class="ui grey text">
|
||||
{{svg "octicon-check" 16 "mr-2"}}
|
||||
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div>
|
||||
{{if and $.CanMarkConversation $isNotPending}}
|
||||
<button class="ui tiny button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index $comms 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation" >
|
||||
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index $comms 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
|
||||
{{if $resolved}}
|
||||
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
|
||||
{{else}}
|
||||
|
|
@ -583,12 +591,16 @@
|
|||
{{end}}
|
||||
</button>
|
||||
{{end}}
|
||||
|
||||
{{if $resolved}}
|
||||
<span class="ui grey text"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
|
||||
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
|
||||
<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
|
||||
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.i18n.Tr "repo.diff.comment.reply"}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1175,7 +1175,7 @@ async function initRepository() {
|
|||
const form = $(e.currentTarget).closest('form');
|
||||
if (form.length > 0 && form.hasClass('comment-form')) {
|
||||
form.addClass('hide');
|
||||
form.parent().find('button.comment-form-reply').show();
|
||||
form.closest('.comment-code-cloud').find('button.comment-form-reply').show();
|
||||
} else {
|
||||
form.closest('.comment-code-cloud').remove();
|
||||
}
|
||||
|
|
@ -1339,7 +1339,7 @@ function initPullRequestReview() {
|
|||
$(document).on('click', 'button.comment-form-reply', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).hide();
|
||||
const form = $(this).parent().find('.comment-form');
|
||||
const form = $(this).closest('.comment-code-cloud').find('.comment-form');
|
||||
form.removeClass('hide');
|
||||
const $textarea = form.find('textarea');
|
||||
let $simplemde;
|
||||
|
|
|
|||
|
|
@ -469,6 +469,10 @@ a.ui.card:hover,
|
|||
border-top-color: var(--color-secondary-light-1) !important;
|
||||
}
|
||||
|
||||
.ui.comments .comment .text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui.comments .comment .text,
|
||||
.ui.comments .comment .author {
|
||||
color: var(--color-text);
|
||||
|
|
@ -1633,6 +1637,11 @@ a.ui.label:hover {
|
|||
border-color: var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.labeled.icon.buttons > .button > .icon,
|
||||
.ui.labeled.icon.button > .icon {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.ui.blue.button,
|
||||
.ui.blue.buttons .button,
|
||||
.ui.primary.button,
|
||||
|
|
|
|||
|
|
@ -1058,7 +1058,7 @@
|
|||
|
||||
.code-comment {
|
||||
border: 1px solid transparent;
|
||||
padding: .5rem 0;
|
||||
padding: .25rem .5rem;
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
|
|
@ -1076,6 +1076,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
margin-left: 36px;
|
||||
}
|
||||
|
||||
.avatar.image {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
|
@ -1094,7 +1098,7 @@
|
|||
}
|
||||
|
||||
button.comment-form-reply {
|
||||
margin-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -112,14 +112,10 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.comment-form-reply {
|
||||
margin: .5em .5em .5em 4.5em;
|
||||
}
|
||||
|
||||
form.comment-form-reply {
|
||||
margin: 0 0 0 1em;
|
||||
}
|
||||
.diff-file-body .comment-form {
|
||||
margin: 0 0 0 3em;
|
||||
}
|
||||
|
||||
.file-comment {
|
||||
|
|
|
|||
Loading…
Reference in a new issue