Skip to content

Commit a672f06

Browse files
GiteaBotsilverwind
GiteaBot
and
silverwind
authored
Use vertical layout for multiple code expander buttons (#31122) (#31152)
Backport #31122 by @silverwind Fixes: #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>
1 parent c6189cf commit a672f06

File tree

4 files changed

+25
-16
lines changed

4 files changed

+25
-16
lines changed

‎templates/repo/diff/blob_excerpt.tmpl

+10-8
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
{{range $k, $line := $.section.Lines}}
33
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
44
{{if eq .GetType 4}}
5+
{{$expandDirection := $line.GetExpandDirection}}
56
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
6-
<div class="tw-flex">
7-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
7+
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
8+
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
89
<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}}">
910
{{svg "octicon-fold-down"}}
1011
</button>
1112
{{end}}
12-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
13+
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
1314
<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}}">
1415
{{svg "octicon-fold-up"}}
1516
</button>
1617
{{end}}
17-
{{if eq $line.GetExpandDirection 2}}
18+
{{if eq $expandDirection 2}}
1819
<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}}">
1920
{{svg "octicon-fold"}}
2021
</button>
@@ -48,19 +49,20 @@
4849
{{range $k, $line := $.section.Lines}}
4950
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
5051
{{if eq .GetType 4}}
52+
{{$expandDirection := $line.GetExpandDirection}}
5153
<td colspan="2" class="lines-num">
52-
<div class="tw-flex">
53-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
54+
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
55+
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
5456
<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}}">
5557
{{svg "octicon-fold-down"}}
5658
</button>
5759
{{end}}
58-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
60+
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
5961
<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}}">
6062
{{svg "octicon-fold-up"}}
6163
</button>
6264
{{end}}
63-
{{if eq $line.GetExpandDirection 2}}
65+
{{if eq $expandDirection 2}}
6466
<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}}">
6567
{{svg "octicon-fold"}}
6668
</button>

‎templates/repo/diff/section_split.tmpl

+5-4
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,20 @@
1616
{{if or (ne .GetType 2) (not $hasmatch)}}
1717
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
1818
{{if eq .GetType 4}}
19+
{{$expandDirection := $line.GetExpandDirection}}
1920
<td class="lines-num lines-num-old">
20-
<div class="tw-flex">
21-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
21+
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
22+
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
2223
<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}}">
2324
{{svg "octicon-fold-down"}}
2425
</button>
2526
{{end}}
26-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
27+
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
2728
<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}}">
2829
{{svg "octicon-fold-up"}}
2930
</button>
3031
{{end}}
31-
{{if eq $line.GetExpandDirection 2}}
32+
{{if eq $expandDirection 2}}
3233
<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}}">
3334
{{svg "octicon-fold"}}
3435
</button>

‎templates/repo/diff/section_unified.tmpl

+5-4
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,20 @@
1212
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
1313
{{if eq .GetType 4}}
1414
{{if $.root.AfterCommitID}}
15+
{{$expandDirection := $line.GetExpandDirection}}
1516
<td colspan="2" class="lines-num">
16-
<div class="tw-flex">
17-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
17+
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
18+
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
1819
<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}}">
1920
{{svg "octicon-fold-down"}}
2021
</button>
2122
{{end}}
22-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
23+
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
2324
<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}}">
2425
{{svg "octicon-fold-up"}}
2526
</button>
2627
{{end}}
27-
{{if eq $line.GetExpandDirection 2}}
28+
{{if eq $expandDirection 2}}
2829
<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}}">
2930
{{svg "octicon-fold"}}
3031
</button>

‎web_src/css/review.css

+5
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,11 @@
164164
flex: 1;
165165
}
166166

167+
/* expand direction 3 is both ways with two buttons */
168+
.code-expander-buttons[data-expand-direction="3"] .code-expander-button {
169+
height: 18px;
170+
}
171+
167172
.code-expander-button:hover {
168173
background: var(--color-primary);
169174
color: var(--color-primary-contrast);

0 commit comments

Comments
 (0)