diff options
| author | silverwind <me@silverwind.io> | 2024-05-29 08:08:45 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-29 06:08:45 +0000 |
| commit | 7034efc7dc0e355c63b11f0f633216d489d254be (patch) | |
| tree | 0dba463c043feca6e1db34e48f3fa052335bd28b | |
| parent | c93cbc991e99a937223844e072a054cf76e815ca (diff) | |
| download | gitea-7034efc7dc0e355c63b11f0f633216d489d254be.tar.gz gitea-7034efc7dc0e355c63b11f0f633216d489d254be.zip | |
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.
| -rw-r--r-- | templates/repo/diff/blob_excerpt.tmpl | 18 | ||||
| -rw-r--r-- | templates/repo/diff/section_split.tmpl | 9 | ||||
| -rw-r--r-- | templates/repo/diff/section_unified.tmpl | 9 | ||||
| -rw-r--r-- | web_src/css/review.css | 5 |
4 files changed, 25 insertions, 16 deletions
diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index a80abe263f..2874ac6a55 100644 --- 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 349f0c3dfc..37b42bcb37 100644 --- 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 ec59f4d42e..708b333291 100644 --- 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 6337748939..0d69e36681 100644 --- 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); |