From 2a9b8d173a286a7155306d7d1df6328d1eb98199 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 8 May 2021 17:28:25 +0200 Subject: [PATCH] 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 --- templates/repo/diff/comment_form.tmpl | 7 +--- templates/repo/diff/conversation.tmpl | 26 ++++++++---- .../repo/issue/view_content/comments.tmpl | 42 ++++++++++++------- web_src/js/index.js | 4 +- web_src/less/_base.less | 9 ++++ web_src/less/_repository.less | 8 +++- web_src/less/_review.less | 10 ++--- 7 files changed, 65 insertions(+), 41 deletions(-) diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index 628cd52dc2..93e4e5a226 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -1,9 +1,4 @@ {{if and $.root.SignedUserID (not $.Repository.IsArchived)}} - {{if $.hidden}} - - {{end}}
{{$.root.CsrfTokenHtml}} @@ -26,7 +21,7 @@ {{.i18n.Tr "loading"}} -
+
{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}
{{if $.reply}} diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl index 7b447d01bf..ea268c5c17 100644 --- a/templates/repo/diff/conversation.tmpl +++ b/templates/repo/diff/conversation.tmpl @@ -5,6 +5,7 @@ {{if $resolved}}
+ {{svg "octicon-check" 16 "icon mr-2"}} {{$resolveDoer.Name}} {{$.i18n.Tr "repo.issues.review.resolved_by"}}
@@ -25,15 +26,22 @@ {{template "repo/diff/comments" dict "root" $ "comments" .comments}}
+
+ {{if and $.CanMarkConversation $isNotPending}} + + {{end}} + {{if and $.SignedUserID (not $.Repository.IsArchived)}} + + {{end}} +
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index .comments 0).ReviewID "root" $ "comment" (index .comments 0)}} - {{if and $.CanMarkConversation $isNotPending}} - - {{end}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 4863f7f2f1..e02f3ddc89 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -508,11 +508,11 @@
{{end}} -
+
{{range $comms}} {{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }} -
+
@@ -572,21 +572,33 @@
{{end}}
- {{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}} - - {{if and $.CanMarkConversation $isNotPending}} - - {{end}} - - {{if $resolved}} - {{$resolveDoer.Name}} {{$.i18n.Tr "repo.issues.review.resolved_by"}} - {{end}} +
+
+ {{if and $.CanMarkConversation $isNotPending}} + + {{end}} + {{if and $.SignedUserID (not $.Repository.IsArchived)}} + + {{end}} +
+
+ {{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}}
{{end}} diff --git a/web_src/js/index.js b/web_src/js/index.js index 5249b88516..d7fa9c8b9b 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -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; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index d85f13cb33..0499547291 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -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, diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 549bd4d7e5..c0b91451c6 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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; } } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 2b8700a745..9197050913 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -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 {