From 5c7d30cf521a66ecab7aa95ee2713785957604c1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 1 Apr 2021 07:04:47 +0200
Subject: [PATCH] Diff box fixes (#15214) (#15227)

- 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 f93dac9b4d..32e21202ff 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}}
@@ -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>
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 0aaa806450..2231b39ec2 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 fde20b986e..42eb5f8f5a 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;
-          }
         }
       }
     }
@@ -1576,9 +1567,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;
   }
 }