Use vertical layout for multiple code expander buttons (#31122) (#31152)

Backport #31122 by @silverwind

Fixes: https://github.com/go-gitea/gitea/issues/31068
- Now it only does a single call to `GetExpandDirection` per line
instead of multiples.
- Exposed `data-expand-direction` to frontend so it can correctly size
the buttons (it's a pain to do in tables).

<img width="142" alt="Screenshot 2024-05-27 at 20 44 56"
src="https://github.com/go-gitea/gitea/assets/115237/8b0b45a6-8e50-4081-8822-5e0775d8d941">
<img width="142" alt="Screenshot 2024-05-27 at 20 44 51"
src="https://github.com/go-gitea/gitea/assets/115237/b7ba2c57-8f55-4e9f-9606-c96d16b77892">
<img width="132" alt="Screenshot 2024-05-27 at 20 44 46"
src="https://github.com/go-gitea/gitea/assets/115237/0e838fb8-5e8c-4250-9843-a68b88d5418b">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 33"
src="https://github.com/go-gitea/gitea/assets/115237/da6c7f83-c160-4389-8ab2-889d0568cbe8">
<img width="80" alt="Screenshot 2024-05-27 at 20 44 26"
src="https://github.com/go-gitea/gitea/assets/115237/cdb490b2-5040-484a-92e5-46fc5e37c199">
<img width="78" alt="Screenshot 2024-05-27 at 20 44 20"
src="https://github.com/go-gitea/gitea/assets/115237/d2978ab0-764e-41ff-922c-25f8fe749f28">

Would backport as trivial enhancement.

Co-authored-by: silverwind <me@silverwind.io>

diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index a80abe263f8d7a1679cdcc063de9f2bd726c8b69..2874ac6a55c61f8ab59fd9b88a86dc441f70c7d8 100644 (file)
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -2,19 +2,20 @@
        {{range $k, $line := $.section.Lines}}
        <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
                {{if eq .GetType 4}}
+                       {{$expandDirection := $line.GetExpandDirection}}
                        <td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
-                               <div class="tw-flex">
-                               {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+                               <div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+                               {{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                {{svg "octicon-fold-down"}}
                                        </button>
                                {{end}}
-                               {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+                               {{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                {{svg "octicon-fold-up"}}
                                        </button>
                                {{end}}
-                               {{if eq $line.GetExpandDirection 2}}
+                               {{if eq $expandDirection 2}}
                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                {{svg "octicon-fold"}}
                                        </button>
@@ -48,19 +49,20 @@
        {{range $k, $line := $.section.Lines}}
        <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
                {{if eq .GetType 4}}
+                       {{$expandDirection := $line.GetExpandDirection}}
                        <td colspan="2" class="lines-num">
-                               <div class="tw-flex">
-                                       {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+                               <div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+                                       {{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                        {{svg "octicon-fold-down"}}
                                                </button>
                                        {{end}}
-                                       {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+                                       {{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                        {{svg "octicon-fold-up"}}
                                                </button>
                                        {{end}}
-                                       {{if eq $line.GetExpandDirection 2}}
+                                       {{if eq $expandDirection 2}}
                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
                                                        {{svg "octicon-fold"}}
                                                </button>

diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 349f0c3dfcc9cde9cc828a2e4dc06d2d17eb62c3..37b42bcb376abaa975cef0975379396aedb3f59d 100644 (file)
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -16,19 +16,20 @@
                {{if or (ne .GetType 2) (not $hasmatch)}}
                        <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
                                {{if eq .GetType 4}}
+                                       {{$expandDirection := $line.GetExpandDirection}}
                                        <td class="lines-num lines-num-old">
-                                               <div class="tw-flex">
-                                               {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+                                               <div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+                                               {{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
                                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                {{svg "octicon-fold-down"}}
                                                        </button>
                                                {{end}}
-                                               {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+                                               {{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
                                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                {{svg "octicon-fold-up"}}
                                                        </button>
                                                {{end}}
-                                               {{if eq $line.GetExpandDirection 2}}
+                                               {{if eq $expandDirection 2}}
                                                        <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                {{svg "octicon-fold"}}
                                                        </button>

diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index ec59f4d42e0c75cacc9c97245941ca49190c40aa..708b33329164103a9fbb9919d12b00e90a74a781 100644 (file)
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -12,19 +12,20 @@
                <tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
                        {{if eq .GetType 4}}
                                {{if $.root.AfterCommitID}}
+                                       {{$expandDirection := $line.GetExpandDirection}}
                                        <td colspan="2" class="lines-num">
-                                               <div class="tw-flex">
-                                                       {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+                                               <div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+                                                       {{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
                                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                        {{svg "octicon-fold-down"}}
                                                                </button>
                                                        {{end}}
-                                                       {{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+                                                       {{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
                                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                        {{svg "octicon-fold-up"}}
                                                                </button>
                                                        {{end}}
-                                                       {{if eq $line.GetExpandDirection 2}}
+                                                       {{if eq $expandDirection 2}}
                                                                <button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
                                                                        {{svg "octicon-fold"}}
                                                                </button>

diff --git a/web_src/css/review.css b/web_src/css/review.css
index 6337748939234a6eeed852b1cfa349bf6d381030..0d69e36681a8cf13a580aee1b4bffdc33fdd0ce7 100644 (file)
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -164,6 +164,11 @@
   flex: 1;
 }
 
+/* expand direction 3 is both ways with two buttons */
+.code-expander-buttons[data-expand-direction="3"] .code-expander-button {
+  height: 18px;
+}
+
 .code-expander-button:hover {
   background: var(--color-primary);
   color: var(--color-primary-contrast);