From aee5ef00519cd199992bb7dc02b4fa22a392869e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 1 Apr 2021 00:19:53 +0200
Subject: [PATCH] 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>
---
templates/repo/diff/box.tmpl | 6 +--
templates/repo/diff/conversation.tmpl | 26 ++++++----
.../repo/issue/view_content/comments.tmpl | 50 ++++++++++---------
web_src/less/_repository.less | 12 -----
web_src/less/_review.less | 12 +++--
5 files changed, 53 insertions(+), 53 deletions(-)
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 368fc2c444..2dcad2ba9d 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -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}}
@@ -145,7 +145,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>
diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl
index 4dd7de0fc1..7b447d01bf 100644
--- a/templates/repo/diff/conversation.tmpl
+++ b/templates/repo/diff/conversation.tmpl
@@ -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>
\ No newline at end of file
+</div>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 0cae8bdf95..f84981c1c6 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -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}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5503c80288..f2234c8558 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1107,15 +1107,6 @@
.segments {
box-shadow: none;
-
- .show-outdated,
- .hide-outdated {
- display: block;
- }
-
- .label {
- margin-left: 6px;
- }
}
}
}
@@ -1635,9 +1626,6 @@
}
.diff-file-box {
- margin-top: 1rem;
- margin-bottom: 1rem;
-
.header {
background-color: var(--color-box-header);
}
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 059e3d0ff5..f6f5df20a2 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -35,11 +35,15 @@
&:not(.top) {
margin-bottom: .5em;
}
+}
- .show-outdated,
- .hide-outdated {
- display: block;
- margin-left: auto;
+.show-outdated,
+.hide-outdated {
+ display: block !important;
+ user-select: none !important;
+
+ &:hover {
+ text-decoration: underline;
}
}