aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js/components/DiffFileTree.vue
Commit message (Collapse)AuthorAgeFilesLines
* Migrate margin and padding helpers to tailwind (#30043)silverwind2024-03-241-1/+1
| | | | | | | | | | | | | This will conclude the refactor of 1:1 class replacements to tailwind, except `gt-hidden`. Commands ran: ```bash perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g' {web_src/js,templates,routers,services}/**/* perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g' {web_src/js,templates,routers,services}/**/* ```
* Enforce trailing comma in JS on multiline (#30002)silverwind2024-03-221-3/+3
| | | | | | | | To keep blame info accurate and to avoid [changes like this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359), it's good to always have a trailing comma, so let's enforce it in JS. This rule is completely automatically fixable with `make lint-js-fix` and that's what I did here.
* Improve diff tree spacing (#27714)silverwind2023-10-211-1/+9
| | | | | | | | | | | | | | | 1. Un-indent top-level items, matching GitHub rendering 2. Increase item padding and add 1px gap between items Before and After: <img width="247" alt="Screenshot 2023-10-20 at 18 37 32" src="https://github.com/go-gitea/gitea/assets/115237/43c1ce86-1814-4a8a-9dd2-0c4a82a2be7c"> <img width="241" alt="Screenshot 2023-10-20 at 18 40 46" src="https://github.com/go-gitea/gitea/assets/115237/b541b85b-c428-4903-becd-773ae5807495"> --------- Co-authored-by: 6543 <m.huber@kithara.com>
* Fix review UI (#27322)wxiaoguang2023-09-281-1/+1
| | | | | | | | | | | | | | | | | | Close #26730 1. The `diff-detail-box` was abused, it shouldn't be used for "DiffFileList/DiffFileTree". 2. Fix the sticky position for various screens. ![image](https://github.com/go-gitea/gitea/assets/2114189/558a5c06-c94c-4e5c-8395-d38473dd21c2) ![image](https://github.com/go-gitea/gitea/assets/2114189/3390fb0e-7dc7-457f-bd0c-398fdb6d24c0) ![image](https://github.com/go-gitea/gitea/assets/2114189/d19dd350-aecf-4909-8ef9-73b09d94560e)
* Reorder blocks in vue SFCs (#26874)silverwind2023-09-021-10/+9
| | | | | | | | | | | | | The [recommended order](https://vuejs.org/guide/scaling-up/sfc.html) for SFC blocks is script -> template -> style, which we were violating because template and script were swapped. I do find script first also easier to read because the imports are on top, letting me immideatly see a component's dependencies. This is a pure cut-paste refactor with some removal of some empty lines. --------- Co-authored-by: Lauris BH <lauris@nix.lv>
* Rewrite the DiffFileTreeItem and fix misalignment (#26565)wxiaoguang2023-08-181-3/+1
| | | | | | | | | | | | | | | Fix some layout / user-interaction problems and close #25650 , the code has been simplified (+46 −108) <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/55c38812-3338-4048-9137-0cae0ef213e8) </details> --------- Co-authored-by: delvh <dev.lh@web.de>
* Show file tree by default (#25052)Kyle D2023-06-021-1/+2
| | | | | | | | | | | | | | | | 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)
* Refactor diffFileInfo / DiffTreeStore (#24998)wxiaoguang2023-05-301-29/+13
| | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #21012, #22399 Replace #24983, fix #24938 Help #24956 Now, the `window.config.pageData.diffFileInfo` itself is a reactive store, so it's quite easy to sync values/states by it, no need to do "doLoadMoreFiles" or "callback". Screenshot: these two buttons both work. After complete loading, the UI is also right. <details> ![image](https://github.com/go-gitea/gitea/assets/2114189/cc6310fd-7f27-45ea-ab4f-24952a87b421) ![image](https://github.com/go-gitea/gitea/assets/2114189/4c11dd67-ac03-4568-8541-91204d27a4e3) ![image](https://github.com/go-gitea/gitea/assets/2114189/38a22cec-41be-41e6-a209-f347b7a4c1de) </details>
* Update the value of the `diffEnd` when click `Show More` btn in the ↵sillyguodong2023-04-121-0/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | DiffFileTree (#24069) In the component `DiffFileTree`,if don't update the value of the `diffEnd` in the callback of ajax request, click `Show More` btn will always return the same response, duplicate files are appended to the file list. Before: https://user-images.githubusercontent.com/33891828/231371188-82d169af-10bb-47e2-8aca-83ced2597f2d.mov After: https://user-images.githubusercontent.com/33891828/231369805-39a5a4d0-662c-4f08-bc5a-7d31e8782453.mov --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Expand selected file when clicking file tree (#24041)sillyguodong2023-04-121-0/+10
| | | | | | | Auto expand the selected file when clicking the file item of the file tree. This is consistent with Github's behavior. https://user-images.githubusercontent.com/33891828/231048124-61f180af-adba-42d7-9ffa-626e1de04aed.mov
* Use reactive store to share data between components (#23996)wxiaoguang2023-04-111-5/+6
| | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #23947 * Use reactive store to share data between components * Remove no-op `this.hashListener = window.addEventListener()` because `addEventListener` returns void/undefined. Reference: https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api Screenshot (the same as before): <details> <img width="565" alt="image" src="https://user-images.githubusercontent.com/2114189/230701282-bd61bfa3-7786-433b-9ad8-a88591112a02.png"> </details> --------- Co-authored-by: silverwind <me@silverwind.io>
* Highlight selected file in the PR file tree (#23947)yusifeng2023-04-071-2/+12
| | | | | | | | | before ![before](https://user-images.githubusercontent.com/36984894/230327904-6e712ca2-f777-4cad-99f3-53bc20008180.gif) after ![after](https://user-images.githubusercontent.com/36984894/230327966-6e5dd971-f0df-427a-a80b-6a9b6db6065d.gif)
* Diff improvements (#23553)silverwind2023-03-301-10/+11
| | | | | | | | | | | | | | | | | | | | | | | | | | | | - 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`).
* Refactor hiding-methods, remove jQuery show/hide, remove `.hide` class, ↵wxiaoguang2023-02-191-3/+3
| | | | | | | | | | | | | | | | | | | | | | | | | | | | remove inline style=display:none (#22950) Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: do not use: * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex" * ".hidden" class: it has been polluted by Fomantic UI in many cases * inline style="display: none": it's difficult to tweak * jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important" only use: * this ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PR
* Move helpers to be prefixed with `gt-` (#22879)zeripath2023-02-131-3/+3
| | | | | | | | | | | | | | | | | | | | As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles This will allow us to have the `.gt-hidden { display:none !important; }` style that is needed to for the reverted PR. Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids. I've also added in the `gt-hidden` style that matches the tailwind one and switched the code that needed it to use that. Signed-off-by: Andrew Thornton <art27@cantab.net> --------- Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Restore function to "Show more" buttons (#22399)zeripath2023-01-131-1/+4
| | | | | | | | | | | | | | | There was a serious regression in #21012 which broke the Show More button on the diff page, and the show more button was also broken on the file tree too. This PR fixes this by resetting the pageData.diffFiles as the vue watched value and reattachs a function to the show more button outside of the file tree view. Fix #22380 Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: John Olheiser <john.olheiser@gmail.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* JS refactors (#22227)silverwind2022-12-241-5/+1
| | | | | | - Replace all default exports with named exports, except for Vue SFCs - Remove names from Vue SFCs, they are automatically inferred from the filename - Misc whitespace-related tweaks
* Refactor from Vue2 to Vue3 (#20044)André Jaenisch2022-10-011-3/+5
| | | Close #19902
* Add filetree on left of diff view (#21012)sebastian-sauer2022-09-271-0/+129
This PR adds a filetree to the left side of the files/diff view. Initially the filetree will not be shown and may be shown via a new "Show file tree" button. Showing and hiding is using the same icon as github. Folders are collapsible. On small devices (max-width 991 PX) the file tree will be hidden. Close #18192 Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>