mirror of https://github.com/go-gitea/gitea.git
Use vertical layout for multiple code expander buttons (#31122)
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.
This commit is contained in:
parent
c93cbc991e
commit
7034efc7dc
|
@ -2,19 +2,20 @@
|
||||||
{{range $k, $line := $.section.Lines}}
|
{{range $k, $line := $.section.Lines}}
|
||||||
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
|
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
|
||||||
{{if eq .GetType 4}}
|
{{if eq .GetType 4}}
|
||||||
|
{{$expandDirection := $line.GetExpandDirection}}
|
||||||
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
|
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
|
||||||
<div class="tw-flex">
|
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
|
||||||
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-down"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-up"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold"}}
|
||||||
</button>
|
</button>
|
||||||
|
@ -48,19 +49,20 @@
|
||||||
{{range $k, $line := $.section.Lines}}
|
{{range $k, $line := $.section.Lines}}
|
||||||
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
|
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
|
||||||
{{if eq .GetType 4}}
|
{{if eq .GetType 4}}
|
||||||
|
{{$expandDirection := $line.GetExpandDirection}}
|
||||||
<td colspan="2" class="lines-num">
|
<td colspan="2" class="lines-num">
|
||||||
<div class="tw-flex">
|
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
|
||||||
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-down"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-up"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold"}}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -16,19 +16,20 @@
|
||||||
{{if or (ne .GetType 2) (not $hasmatch)}}
|
{{if or (ne .GetType 2) (not $hasmatch)}}
|
||||||
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
|
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
|
||||||
{{if eq .GetType 4}}
|
{{if eq .GetType 4}}
|
||||||
|
{{$expandDirection := $line.GetExpandDirection}}
|
||||||
<td class="lines-num lines-num-old">
|
<td class="lines-num lines-num-old">
|
||||||
<div class="tw-flex">
|
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
|
||||||
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-down"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-up"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold"}}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -12,19 +12,20 @@
|
||||||
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
|
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
|
||||||
{{if eq .GetType 4}}
|
{{if eq .GetType 4}}
|
||||||
{{if $.root.AfterCommitID}}
|
{{if $.root.AfterCommitID}}
|
||||||
|
{{$expandDirection := $line.GetExpandDirection}}
|
||||||
<td colspan="2" class="lines-num">
|
<td colspan="2" class="lines-num">
|
||||||
<div class="tw-flex">
|
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
|
||||||
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-down"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold-up"}}
|
||||||
</button>
|
</button>
|
||||||
{{end}}
|
{{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}}">
|
<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"}}
|
{{svg "octicon-fold"}}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -164,6 +164,11 @@
|
||||||
flex: 1;
|
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 {
|
.code-expander-button:hover {
|
||||||
background: var(--color-primary);
|
background: var(--color-primary);
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
|
|
Loading…
Reference in New Issue