Skip to content

Commit d3e3da5

Browse files
silverwindsilverwind
committed
Diff box fixes
- Fix misaligned "Show Outdated" buttons via flexbox - Add hover effect to "Show Outdated" buttons - Remove overreaching margin from selector .diff-file-box and handle cases individually. Fixes: #15097
1 parent 1b762fc commit d3e3da5

File tree

5 files changed

+53
-53
lines changed

5 files changed

+53
-53
lines changed

‎templates/repo/diff/box.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</ol>
4444
{{range $i, $file := .Diff.Files}}
4545
{{if $file.IsIncomplete}}
46-
<div class="diff-file-box diff-box file-content">
46+
<div class="diff-file-box diff-box file-content mt-3">
4747
<h4 class="ui top attached normal header rounded">
4848
<a role="button" class="fold-file muted mr-2">
4949
{{svg "octicon-chevron-down" 18}}
@@ -70,7 +70,7 @@
7070
</h4>
7171
</div>
7272
{{else}}
73-
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
73+
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}">
7474
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
7575
<div class="df ac">
7676
{{$isImage := false}}
@@ -145,7 +145,7 @@
145145
{{end}}
146146

147147
{{if .Diff.IsIncomplete}}
148-
<div class="diff-file-box diff-box file-content">
148+
<div class="diff-file-box diff-box file-content mt-3">
149149
<h4 class="ui top attached normal header">
150150
{{$.i18n.Tr "repo.diff.too_many_files"}}
151151
</h4>

‎templates/repo/diff/conversation.tmpl

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,20 @@
33
{{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
44
<div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}">
55
{{if $resolved}}
6-
<div class="ui attached header resolved-placeholder">
7-
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
8-
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated">
9-
{{svg "octicon-unfold"}}
10-
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
11-
</button>
12-
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
13-
{{svg "octicon-fold"}}
14-
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
15-
</button>
6+
<div class="ui attached header resolved-placeholder df ac sb">
7+
<div class="ui grey text">
8+
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
9+
</div>
10+
<div>
11+
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac">
12+
{{svg "octicon-unfold" 16 "mr-3"}}
13+
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
14+
</button>
15+
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated df ac">
16+
{{svg "octicon-fold" 16 "mr-3"}}
17+
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
18+
</button>
19+
</div>
1620
</div>
1721
{{end}}
1822
<div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}">
@@ -32,4 +36,4 @@
3236
</button>
3337
{{end}}
3438
</div>
35-
</div>
39+
</div>

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

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -459,35 +459,39 @@
459459
{{ range $filename, $lines := .Review.CodeComments}}
460460
{{range $line, $comms := $lines}}
461461
<div class="ui segments">
462-
<div class="ui segment py-3">
462+
<div class="ui segment py-3 df ac sb">
463463
{{$invalid := (index $comms 0).Invalidated}}
464464
{{$resolved := (index $comms 0).IsResolved}}
465465
{{$resolveDoer := (index $comms 0).ResolveDoer}}
466466
{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
467-
{{if or $invalid $resolved}}
468-
<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated">
469-
{{svg "octicon-unfold"}}
470-
{{if $resolved}}
471-
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
472-
{{else}}
473-
{{$.i18n.Tr "repo.issues.review.show_outdated"}}
467+
<div class="df ac">
468+
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a>
469+
{{if $invalid }}
470+
<span class="ui label basic small ml-3">
471+
{{$.i18n.Tr "repo.issues.review.outdated"}}
472+
</span>
474473
{{end}}
475-
</button>
476-
<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated">
477-
{{svg "octicon-fold"}}
478-
{{if $resolved}}
479-
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
480-
{{else}}
481-
{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
474+
</div>
475+
<div>
476+
{{if or $invalid $resolved}}
477+
<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}hide {{end}}ui compact right labeled button show-outdated df ac">
478+
{{svg "octicon-unfold" 16 "mr-3"}}
479+
{{if $resolved}}
480+
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
481+
{{else}}
482+
{{$.i18n.Tr "repo.issues.review.show_outdated"}}
483+
{{end}}
484+
</button>
485+
<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}hide {{end}}ui compact right labeled button hide-outdated df ac">
486+
{{svg "octicon-fold" 16 "mr-3"}}
487+
{{if $resolved}}
488+
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
489+
{{else}}
490+
{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
491+
{{end}}
492+
</button>
482493
{{end}}
483-
</button>
484-
{{end}}
485-
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment">{{$filename}}</a>
486-
{{if $invalid }}
487-
<span class="ui label basic small yellow">
488-
{{$.i18n.Tr "repo.issues.review.outdated"}}
489-
</span>
490-
{{end}}
494+
</div>
491495
</div>
492496
{{$diff := (CommentMustAsDiff (index $comms 0))}}
493497
{{if $diff}}

‎web_src/less/_repository.less

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1107,15 +1107,6 @@
11071107

11081108
.segments {
11091109
box-shadow: none;
1110-
1111-
.show-outdated,
1112-
.hide-outdated {
1113-
display: block;
1114-
}
1115-
1116-
.label {
1117-
margin-left: 6px;
1118-
}
11191110
}
11201111
}
11211112
}
@@ -1635,9 +1626,6 @@
16351626
}
16361627

16371628
.diff-file-box {
1638-
margin-top: 1rem;
1639-
margin-bottom: 1rem;
1640-
16411629
.header {
16421630
background-color: var(--color-box-header);
16431631
}

‎web_src/less/_review.less

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,15 @@
3535
&:not(.top) {
3636
margin-bottom: .5em;
3737
}
38+
}
39+
40+
.show-outdated,
41+
.hide-outdated {
42+
display: block !important;
43+
user-select: none !important;
3844

39-
.show-outdated,
40-
.hide-outdated {
41-
display: block;
42-
margin-left: auto;
45+
&:hover {
46+
text-decoration: underline;
4347
}
4448
}
4549

0 commit comments

Comments
 (0)