Diff box fixes (#15214)
- 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: https://github.com/go-gitea/gitea/issues/15097 Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>release/v1.15
parent
8d9f191195
commit
aee5ef0051
|
@ -43,7 +43,7 @@
|
||||||
</ol>
|
</ol>
|
||||||
{{range $i, $file := .Diff.Files}}
|
{{range $i, $file := .Diff.Files}}
|
||||||
{{if $file.IsIncomplete}}
|
{{if $file.IsIncomplete}}
|
||||||
<div class="diff-file-box diff-box file-content">
|
<div class="diff-file-box diff-box file-content mt-3">
|
||||||
<h4 class="ui top attached normal header rounded">
|
<h4 class="ui top attached normal header rounded">
|
||||||
<a role="button" class="fold-file muted mr-2">
|
<a role="button" class="fold-file muted mr-2">
|
||||||
{{svg "octicon-chevron-down" 18}}
|
{{svg "octicon-chevron-down" 18}}
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
|
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} mt-3" id="diff-{{.Index}}">
|
||||||
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
|
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header df ac sb">
|
||||||
<div class="df ac">
|
<div class="df ac">
|
||||||
{{$isImage := false}}
|
{{$isImage := false}}
|
||||||
|
@ -145,7 +145,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
{{if .Diff.IsIncomplete}}
|
{{if .Diff.IsIncomplete}}
|
||||||
<div class="diff-file-box diff-box file-content">
|
<div class="diff-file-box diff-box file-content mt-3">
|
||||||
<h4 class="ui top attached normal header">
|
<h4 class="ui top attached normal header">
|
||||||
{{$.i18n.Tr "repo.diff.too_many_files"}}
|
{{$.i18n.Tr "repo.diff.too_many_files"}}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
|
@ -3,16 +3,20 @@
|
||||||
{{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
|
{{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
|
||||||
<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}}">
|
<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}}">
|
||||||
{{if $resolved}}
|
{{if $resolved}}
|
||||||
<div class="ui attached header resolved-placeholder">
|
<div class="ui attached header resolved-placeholder df ac sb">
|
||||||
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span>
|
<div class="ui grey text">
|
||||||
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated">
|
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}
|
||||||
{{svg "octicon-unfold"}}
|
</div>
|
||||||
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
|
<div>
|
||||||
</button>
|
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac">
|
||||||
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated">
|
{{svg "octicon-unfold" 16 "mr-3"}}
|
||||||
{{svg "octicon-fold"}}
|
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
|
||||||
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
|
</button>
|
||||||
</button>
|
<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">
|
||||||
|
{{svg "octicon-fold" 16 "mr-3"}}
|
||||||
|
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
<div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}">
|
<div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}">
|
||||||
|
|
|
@ -459,35 +459,39 @@
|
||||||
{{ range $filename, $lines := .Review.CodeComments}}
|
{{ range $filename, $lines := .Review.CodeComments}}
|
||||||
{{range $line, $comms := $lines}}
|
{{range $line, $comms := $lines}}
|
||||||
<div class="ui segments">
|
<div class="ui segments">
|
||||||
<div class="ui segment py-3">
|
<div class="ui segment py-3 df ac sb">
|
||||||
{{$invalid := (index $comms 0).Invalidated}}
|
{{$invalid := (index $comms 0).Invalidated}}
|
||||||
{{$resolved := (index $comms 0).IsResolved}}
|
{{$resolved := (index $comms 0).IsResolved}}
|
||||||
{{$resolveDoer := (index $comms 0).ResolveDoer}}
|
{{$resolveDoer := (index $comms 0).ResolveDoer}}
|
||||||
{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
|
{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}}
|
||||||
{{if or $invalid $resolved}}
|
<div class="df ac">
|
||||||
<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">
|
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a>
|
||||||
{{svg "octicon-unfold"}}
|
{{if $invalid }}
|
||||||
{{if $resolved}}
|
<span class="ui label basic small ml-3">
|
||||||
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
|
{{$.i18n.Tr "repo.issues.review.outdated"}}
|
||||||
{{else}}
|
</span>
|
||||||
{{$.i18n.Tr "repo.issues.review.show_outdated"}}
|
|
||||||
{{end}}
|
{{end}}
|
||||||
</button>
|
</div>
|
||||||
<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">
|
<div>
|
||||||
{{svg "octicon-fold"}}
|
{{if or $invalid $resolved}}
|
||||||
{{if $resolved}}
|
<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">
|
||||||
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
|
{{svg "octicon-unfold" 16 "mr-3"}}
|
||||||
{{else}}
|
{{if $resolved}}
|
||||||
{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
|
{{$.i18n.Tr "repo.issues.review.show_resolved"}}
|
||||||
|
{{else}}
|
||||||
|
{{$.i18n.Tr "repo.issues.review.show_outdated"}}
|
||||||
|
{{end}}
|
||||||
|
</button>
|
||||||
|
<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">
|
||||||
|
{{svg "octicon-fold" 16 "mr-3"}}
|
||||||
|
{{if $resolved}}
|
||||||
|
{{$.i18n.Tr "repo.issues.review.hide_resolved"}}
|
||||||
|
{{else}}
|
||||||
|
{{$.i18n.Tr "repo.issues.review.hide_outdated"}}
|
||||||
|
{{end}}
|
||||||
|
</button>
|
||||||
{{end}}
|
{{end}}
|
||||||
</button>
|
</div>
|
||||||
{{end}}
|
|
||||||
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment">{{$filename}}</a>
|
|
||||||
{{if $invalid }}
|
|
||||||
<span class="ui label basic small yellow">
|
|
||||||
{{$.i18n.Tr "repo.issues.review.outdated"}}
|
|
||||||
</span>
|
|
||||||
{{end}}
|
|
||||||
</div>
|
</div>
|
||||||
{{$diff := (CommentMustAsDiff (index $comms 0))}}
|
{{$diff := (CommentMustAsDiff (index $comms 0))}}
|
||||||
{{if $diff}}
|
{{if $diff}}
|
||||||
|
|
|
@ -1107,15 +1107,6 @@
|
||||||
|
|
||||||
.segments {
|
.segments {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
.show-outdated,
|
|
||||||
.hide-outdated {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1635,9 +1626,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.diff-file-box {
|
.diff-file-box {
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-color: var(--color-box-header);
|
background-color: var(--color-box-header);
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,11 +35,15 @@
|
||||||
&:not(.top) {
|
&:not(.top) {
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.show-outdated,
|
.show-outdated,
|
||||||
.hide-outdated {
|
.hide-outdated {
|
||||||
display: block;
|
display: block !important;
|
||||||
margin-left: auto;
|
user-select: none !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue