diff options
| author | silverwind <me@silverwind.io> | 2023-03-30 14:06:10 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-30 20:06:10 +0800 |
| commit | aa4d1d94f79e8edd9fa9ff2813fea12b085b2cae (patch) | |
| tree | 2197145a72c7e8efecb101acc176a9cb7da274c5 /templates | |
| parent | 35cb786ca1dd6d12963ac7067945065b271f36ad (diff) | |
| download | gitea-aa4d1d94f79e8edd9fa9ff2813fea12b085b2cae.tar.gz gitea-aa4d1d94f79e8edd9fa9ff2813fea12b085b2cae.zip | |
Diff improvements (#23553)
- Avoid flash of wrong tree toggle icon on page load by setting icon
based on sync state
- Avoid "pop-in" of tree on page load by leaving space based on sync
state
- Use the same border/box-shadow combo used on comment `:target` also
for file `:target`.
- Refactor `DiffFileTree.vue` to use `toggleElem` instead of hardcoded
class name.
- Left-align inline comment boxes and make them fit the same amount of
markup content on a line as GitHub.
- Fix height of `diff-file-list`
Fixes: https://github.com/go-gitea/gitea/issues/23593
<img width="1250" alt="Screenshot 2023-03-18 at 00 52 04"
src="https://user-images.githubusercontent.com/115237/226071392-6789a644-aead-4756-a77e-aba3642150a0.png">
<img width="1246" alt="Screenshot 2023-03-18 at 00 59 43"
src="https://user-images.githubusercontent.com/115237/226071443-8bcba924-458b-48bd-b2f0-0de59cb180ac.png">
<img width="1250" alt="Screenshot 2023-03-18 at 01 27 14"
src="https://user-images.githubusercontent.com/115237/226073121-ccb99f9a-d3ac-40b7-9589-43580c4a01c9.png">
<img width="1231" alt="Screenshot 2023-03-19 at 21 44 16"
src="https://user-images.githubusercontent.com/115237/226207951-81bcae1b-6b41-4e39-83a7-0f37951df6be.png">
(Yes I'm aware the border-radius in bottom corners is suboptimal, but
this would be notorously hard to fix without relying on `overflow:
hidden`).
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/repo/diff/box.tmpl | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 4a5fc4b7cf..36e669276e 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -15,11 +15,18 @@ <div> <div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw"> <div class="gt-df gt-ac gt-fw"> - <a class="diff-toggle-file-tree-button muted gt-df gt-ac"> + <button class="diff-toggle-file-tree-button gt-df gt-ac" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}"> {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}} - {{svg "octicon-sidebar-collapse" 20 "icon hide"}} - {{svg "octicon-sidebar-expand" 20 "icon"}} - </a> + {{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}} + {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}} + </button> + <script> + const diffTreeVisible = localStorage?.getItem('diff_file_tree_visible') === 'true'; + const diffTreeBtn = document.querySelector('.diff-toggle-file-tree-button'); + const diffTreeIcon = `.octicon-sidebar-${diffTreeVisible ? 'expand' : 'collapse'}`; + diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden'); + diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text')); + </script> <div class="diff-detail-stats gt-df gt-ac gt-ml-3"> {{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} </div> @@ -68,6 +75,9 @@ <div id="diff-file-list"></div> <div id="diff-container"> <div id="diff-file-tree" class="gt-hidden"></div> + <script> + if (diffTreeVisible) document.getElementById('diff-file-tree').classList.remove('gt-hidden'); + </script> <div id="diff-file-boxes" class="sixteen wide column"> {{range $i, $file := .Diff.Files}} {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} |