Skip to content

Commit 2a9b8d1

Browse files
silverwindzeripath
silverwind
and
zeripath
authored
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 <[email protected]>
1 parent 24ad131 commit 2a9b8d1

File tree

7 files changed

+65
-41
lines changed

7 files changed

+65
-41
lines changed

‎templates/repo/diff/comment_form.tmpl‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
{{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
2-
{{if $.hidden}}
3-
<button class="comment-form-reply ui green labeled icon tiny button">
4-
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.root.i18n.Tr "repo.diff.comment.reply"}}
5-
</button>
6-
{{end}}
72
<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
83
{{$.root.CsrfTokenHtml}}
94
<input type="hidden" name="origin" value="{{if $.root.PageIsPullFiles}}diff{{else}}timeline{{end}}">
@@ -26,7 +21,7 @@
2621
{{.i18n.Tr "loading"}}
2722
</div>
2823
</div>
29-
<div class="field footer">
24+
<div class="field footer mx-3">
3025
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.i18n.Tr "repo.diff.comment.markup_info"}}</span>
3126
<div class="ui right">
3227
{{if $.reply}}

‎templates/repo/diff/conversation.tmpl‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{{if $resolved}}
66
<div class="ui attached header resolved-placeholder df ac sb">
77
<div class="ui grey text">
8+
{{svg "octicon-check" 16 "icon mr-2"}}
89
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
910
</div>
1011
<div>
@@ -25,15 +26,22 @@
2526
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
2627
</ui>
2728
</div>
29+
<div class="df je ac fw mt-3">
30+
{{if and $.CanMarkConversation $isNotPending}}
31+
<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">
32+
{{if $resolved}}
33+
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
34+
{{else}}
35+
{{$.i18n.Tr "repo.issues.review.resolve_conversation"}}
36+
{{end}}
37+
</button>
38+
{{end}}
39+
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
40+
<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
41+
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.i18n.Tr "repo.diff.comment.reply"}}
42+
</button>
43+
{{end}}
44+
</div>
2845
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index .comments 0).ReviewID "root" $ "comment" (index .comments 0)}}
29-
{{if and $.CanMarkConversation $isNotPending}}
30-
<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" >
31-
{{if $resolved}}
32-
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
33-
{{else}}
34-
{{$.i18n.Tr "repo.issues.review.resolve_conversation"}}
35-
{{end}}
36-
</button>
37-
{{end}}
3846
</div>
3947
</div>

‎templates/repo/issue/view_content/comments.tmpl‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -508,11 +508,11 @@
508508
</div>
509509
</div>
510510
{{end}}
511-
<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} py-3">
511+
<div id="code-comments-{{(index $comms 0).ID}}" class="comment-code-cloud ui segment{{if $resolved}} hide{{end}} p-3">
512512
<div class="ui comments mb-0">
513513
{{range $comms}}
514514
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
515-
<div class="comment code-comment" id="{{.HashTag}}">
515+
<div class="comment code-comment pb-4" id="{{.HashTag}}">
516516
<div class="content">
517517
<div class="header comment-header">
518518
<div class="comment-header-left df ac">
@@ -572,21 +572,33 @@
572572
</div>
573573
{{end}}
574574
</div>
575-
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}}
576-
577-
{{if and $.CanMarkConversation $isNotPending}}
578-
<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" >
575+
<div class="df ac fw mt-3 mb-2 mx-3">
576+
<div class="f1">
579577
{{if $resolved}}
580-
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
581-
{{else}}
582-
{{$.i18n.Tr "repo.issues.review.resolve_conversation"}}
578+
<div class="ui grey text">
579+
{{svg "octicon-check" 16 "mr-2"}}
580+
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
581+
</div>
583582
{{end}}
584-
</button>
585-
{{end}}
586-
587-
{{if $resolved}}
588-
<span class="ui grey text"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
589-
{{end}}
583+
</div>
584+
<div>
585+
{{if and $.CanMarkConversation $isNotPending}}
586+
<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">
587+
{{if $resolved}}
588+
{{$.i18n.Tr "repo.issues.review.un_resolve_conversation"}}
589+
{{else}}
590+
{{$.i18n.Tr "repo.issues.review.resolve_conversation"}}
591+
{{end}}
592+
</button>
593+
{{end}}
594+
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
595+
<button class="comment-form-reply ui green tiny labeled icon button ml-2 mr-0">
596+
{{svg "octicon-reply" 16 "reply icon mr-2"}}{{$.i18n.Tr "repo.diff.comment.reply"}}
597+
</button>
598+
{{end}}
599+
</div>
600+
</div>
601+
{{template "repo/diff/comment_form_datahandler" dict "hidden" true "reply" (index $comms 0).ReviewID "root" $ "comment" (index $comms 0)}}
590602
</div>
591603
</div>
592604
{{end}}

‎web_src/js/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,7 +1175,7 @@ async function initRepository() {
11751175
const form = $(e.currentTarget).closest('form');
11761176
if (form.length > 0 && form.hasClass('comment-form')) {
11771177
form.addClass('hide');
1178-
form.parent().find('button.comment-form-reply').show();
1178+
form.closest('.comment-code-cloud').find('button.comment-form-reply').show();
11791179
} else {
11801180
form.closest('.comment-code-cloud').remove();
11811181
}
@@ -1339,7 +1339,7 @@ function initPullRequestReview() {
13391339
$(document).on('click', 'button.comment-form-reply', function (e) {
13401340
e.preventDefault();
13411341
$(this).hide();
1342-
const form = $(this).parent().find('.comment-form');
1342+
const form = $(this).closest('.comment-code-cloud').find('.comment-form');
13431343
form.removeClass('hide');
13441344
const $textarea = form.find('textarea');
13451345
let $simplemde;

‎web_src/less/_base.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,10 @@ a.ui.card:hover,
469469
border-top-color: var(--color-secondary-light-1) !important;
470470
}
471471

472+
.ui.comments .comment .text {
473+
margin: 0;
474+
}
475+
472476
.ui.comments .comment .text,
473477
.ui.comments .comment .author {
474478
color: var(--color-text);
@@ -1633,6 +1637,11 @@ a.ui.label:hover {
16331637
border-color: var(--color-light-border);
16341638
}
16351639

1640+
.ui.labeled.icon.buttons > .button > .icon,
1641+
.ui.labeled.icon.button > .icon {
1642+
background: var(--color-hover);
1643+
}
1644+
16361645
.ui.blue.button,
16371646
.ui.blue.buttons .button,
16381647
.ui.primary.button,

‎web_src/less/_repository.less‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1058,7 +1058,7 @@
10581058

10591059
.code-comment {
10601060
border: 1px solid transparent;
1061-
padding: .5rem 0;
1061+
padding: .25rem .5rem;
10621062
margin: 0;
10631063

10641064
.content {
@@ -1076,6 +1076,10 @@
10761076
}
10771077
}
10781078

1079+
.comment-content {
1080+
margin-left: 36px;
1081+
}
1082+
10791083
.avatar.image {
10801084
width: 28px;
10811085
height: 28px;
@@ -1094,7 +1098,7 @@
10941098
}
10951099

10961100
button.comment-form-reply {
1097-
margin-left: 0;
1101+
margin: 0;
10981102
}
10991103
}
11001104

‎web_src/less/_review.less‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,10 @@
112112
display: block;
113113
}
114114
}
115+
}
115116

116-
button.comment-form-reply {
117-
margin: .5em .5em .5em 4.5em;
118-
}
119-
120-
form.comment-form-reply {
121-
margin: 0 0 0 1em;
122-
}
117+
.diff-file-body .comment-form {
118+
margin: 0 0 0 3em;
123119
}
124120

125121
.file-comment {

0 commit comments

Comments
 (0)