- 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>tags/v1.14.0
@@ -43,7 +43,7 @@ | |||
</ol> | |||
{{range $i, $file := .Diff.Files}} | |||
{{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"> | |||
<a role="button" class="fold-file muted mr-2"> | |||
{{svg "octicon-chevron-down" 18}} | |||
@@ -70,7 +70,7 @@ | |||
</h4> | |||
</div> | |||
{{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"> | |||
<div class="df ac"> | |||
{{$isImage := false}} | |||
@@ -128,7 +128,7 @@ | |||
{{end}} | |||
{{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"> | |||
{{$.i18n.Tr "repo.diff.too_many_files"}} | |||
</h4> |
@@ -3,16 +3,20 @@ | |||
{{$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}}"> | |||
{{if $resolved}} | |||
<div class="ui attached header resolved-placeholder"> | |||
<span class="ui grey text left"><b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}}</span> | |||
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated"> | |||
{{svg "octicon-unfold"}} | |||
{{$.i18n.Tr "repo.issues.review.show_resolved"}} | |||
</button> | |||
<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-fold"}} | |||
{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | |||
</button> | |||
<div class="ui attached header resolved-placeholder df ac sb"> | |||
<div class="ui grey text"> | |||
<b>{{$resolveDoer.Name}}</b> {{$.i18n.Tr "repo.issues.review.resolved_by"}} | |||
</div> | |||
<div> | |||
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button show-outdated df ac"> | |||
{{svg "octicon-unfold" 16 "mr-3"}} | |||
{{$.i18n.Tr "repo.issues.review.show_resolved"}} | |||
</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> | |||
{{end}} | |||
<div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}"> | |||
@@ -32,4 +36,4 @@ | |||
</button> | |||
{{end}} | |||
</div> | |||
</div> | |||
</div> |
@@ -459,35 +459,39 @@ | |||
{{ range $filename, $lines := .Review.CodeComments}} | |||
{{range $line, $comms := $lines}} | |||
<div class="ui segments"> | |||
<div class="ui segment py-3"> | |||
<div class="ui segment py-3 df ac sb"> | |||
{{$invalid := (index $comms 0).Invalidated}} | |||
{{$resolved := (index $comms 0).IsResolved}} | |||
{{$resolveDoer := (index $comms 0).ResolveDoer}} | |||
{{$isNotPending := (not (eq (index $comms 0).Review.Type 0))}} | |||
{{if or $invalid $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"> | |||
{{svg "octicon-unfold"}} | |||
{{if $resolved}} | |||
{{$.i18n.Tr "repo.issues.review.show_resolved"}} | |||
{{else}} | |||
{{$.i18n.Tr "repo.issues.review.show_outdated"}} | |||
<div class="df ac"> | |||
<a href="{{(index $comms 0).CodeCommentURL}}" class="file-comment ml-3">{{$filename}}</a> | |||
{{if $invalid }} | |||
<span class="ui label basic small ml-3"> | |||
{{$.i18n.Tr "repo.issues.review.outdated"}} | |||
</span> | |||
{{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"> | |||
{{svg "octicon-fold"}} | |||
{{if $resolved}} | |||
{{$.i18n.Tr "repo.issues.review.hide_resolved"}} | |||
{{else}} | |||
{{$.i18n.Tr "repo.issues.review.hide_outdated"}} | |||
</div> | |||
<div> | |||
{{if or $invalid $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"> | |||
{{svg "octicon-unfold" 16 "mr-3"}} | |||
{{if $resolved}} | |||
{{$.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}} | |||
</button> | |||
{{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))}} | |||
{{if $diff}} |
@@ -1107,15 +1107,6 @@ | |||
.segments { | |||
box-shadow: none; | |||
.show-outdated, | |||
.hide-outdated { | |||
display: block; | |||
} | |||
.label { | |||
margin-left: 6px; | |||
} | |||
} | |||
} | |||
} | |||
@@ -1576,9 +1567,6 @@ | |||
} | |||
.diff-file-box { | |||
margin-top: 1rem; | |||
margin-bottom: 1rem; | |||
.header { | |||
background-color: var(--color-box-header); | |||
} |
@@ -35,11 +35,15 @@ | |||
&:not(.top) { | |||
margin-bottom: .5em; | |||
} | |||
} | |||
.show-outdated, | |||
.hide-outdated { | |||
display: block !important; | |||
user-select: none !important; | |||
.show-outdated, | |||
.hide-outdated { | |||
display: block; | |||
margin-left: auto; | |||
&:hover { | |||
text-decoration: underline; | |||
} | |||
} | |||