Show file tree by default (#25052)

Feel free to close this if there isn't interest.

The tree view looks amazing, and all of our users are really enjoying it
(major kudos to developers!), but only IF I tell them it exists!

Essentially, the file tree view as it is effectively undiscoverable.  

This PR changes the default state for the tree view to open, which
should significantly help with discoverability.

An alternative could be to reserve more horizontal space, as a typical
accordion panel would look (eg. VS Code), eg.

![image](https://github.com/go-gitea/gitea/assets/12700993/505ea40c-42b1-4111-b306-48e51e8e2130)
This commit is contained in:
Kyle D 2023-06-02 11:39:01 -04:00 committed by GitHub
parent e3897148f9
commit 72eedfb915
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions

View file

@ -21,7 +21,8 @@
{{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}} {{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
</button> </button>
<script> <script>
const diffTreeVisible = localStorage?.getItem('diff_file_tree_visible') === 'true'; // Default to true if unset
const diffTreeVisible = localStorage?.getItem('diff_file_tree_visible') !== 'false';
const diffTreeBtn = document.querySelector('.diff-toggle-file-tree-button'); const diffTreeBtn = document.querySelector('.diff-toggle-file-tree-button');
const diffTreeIcon = `.octicon-sidebar-${diffTreeVisible ? 'expand' : 'collapse'}`; const diffTreeIcon = `.octicon-sidebar-${diffTreeVisible ? 'expand' : 'collapse'}`;
diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden'); diffTreeBtn.querySelector(diffTreeIcon).classList.remove('gt-hidden');

View file

@ -89,7 +89,8 @@ export default {
} }
}, },
mounted() { mounted() {
this.store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) === 'true'; // Default to true if unset
this.store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false';
document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility); document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
this.hashChangeListener = () => { this.hashChangeListener = () => {