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>

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 368fc2c444473905ac52cf660e7c1b1a853fbcb9..2dcad2ba9d03fc9e0bdb9514eb60864432da8745 100644 (file)
--- 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 4dd7de0fc129ecf0c181f9d71f43480e0872cb14..7b447d01bfc88b6d6035dfa1f7171e7c1174bc37 100644 (file)
--- 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 0cae8bdf955c3a0aa86dcca6c107cac4e3b4f24c..f84981c1c6541038d502a31aad7e3838261a4f9f 100644 (file)
--- 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 5503c80288872e8e5041cc77ecd0bdd5853e6cda..f2234c855817c3fec8d18ab517ac3fa3e0171403 100644 (file)
--- 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 059e3d0ff569881f91091cc5383e3a9de93035c9..f6f5df20a21e219969f2f5e364e1e64177bf6aee 100644 (file)
--- 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 !important;
+  user-select: none !important;
 
-  .show-outdated,
-  .hide-outdated {
-    display: block;
-    margin-left: auto;
+  &:hover {
+    text-decoration: underline;
   }
 }