Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Diff box fixes (#15214)

Browse source 
- 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>
This commit is contained in:
silverwind 2021-04-01 00:19:53 +02:00 committed by GitHub
parent 8d9f191195
commit aee5ef0051
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
templates/repo/diff/box.tmpl
View file

@ -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>

26
templates/repo/diff/conversation.tmpl
View file

@ -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}}">
@ -32,4 +36,4 @@
</button> </button>
{{end}} {{end}}
</div> </div>
</div> </div>

50
templates/repo/issue/view_content/comments.tmpl
View file

@ -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}}

12
web_src/less/_repository.less
View file

@ -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);
} }

12
web_src/less/_review.less
View file

@ -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;
} }
} }