aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js/components/DiffFileList.vue
Commit message (Collapse)AuthorAgeFilesLines
* Migrate font-family to tailwind (#30118)silverwind2024-03-281-1/+1
| | | | | | | | | | | Enable us to use tailwind's [`font-family`](https://tailwindcss.com/docs/font-family) classes as well as remove `gt-mono` in favor of `tw-font-mono`. I also merged the "compensation" to one selector, previously this was two different values 0.9em and 0.95em. I did not declare a `serif` font because I don't think there will ever be a use case for those. Command ran: ```sh perl -p -i -e 's#gt-mono#tw-font-mono#g' web_src/js/**/* templates/**/*
* Migrate margin and padding helpers to tailwind (#30043)silverwind2024-03-241-4/+4
| | | | | | | | | | | | | 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}/**/* ```
* Migrate font-weight helpers to tailwind (#30027)silverwind2024-03-231-1/+1
| | | | | | | | | | | Commands ran: ```sh perl -p -i -e 's#gt-font-light#tw-font-light#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-normal#tw-font-normal#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-medium#tw-font-medium#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-semibold#tw-font-semibold#g' web_src/js/**/* templates/**/* perl -p -i -e 's#gt-font-bold#tw-font-bold#g' web_src/js/**/* templates/**/* ```
* Fix incorrect tailwind migration (#30007)silverwind2024-03-221-2/+2
| | | | | | | | | | | Fixes https://github.com/go-gitea/gitea/issues/30005. Regression from https://github.com/go-gitea/gitea/pull/29945. There was only once instance of `tw-content-center` before that PR, so I just ran below command and reverted that one instance. ```sh perl -p -i -e 's#tw-content-center#tw-items-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/* ```
* Enforce trailing comma in JS on multiline (#30002)silverwind2024-03-221-1/+1
| | | | | | | | 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.
* Replace 10 more gt- classes with tw- (#29945)silverwind2024-03-221-2/+2
| | | | | | | | | | | | | | | | | | | | Likely the biggest change of the tailwind refactors. Only thing of note is that `tw-flex-1` resolves to `flex: 1 1 0%` while our `gt-f1` was `flex: 1 1 0`, I don't think it will make any difference. Commands I've ran: ```sh perl -p -i -e 's#gt-vm#tw-align-middle#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fw#tw-flex-wrap#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-f1#tw-flex-1#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fc#tw-flex-col#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-sb#tw-justify-between#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-je#tw-justify-end#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-jc#tw-justify-center#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-ac#tw-content-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-df#tw-flex#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-dib#tw-inline-block#g' web_src/js/**/* templates/**/* models/**/* tests/**/* Co-authored-by: wxiaoguang <wxiaoguang@gmail.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-22/+21
| | | | | | | | | | | | | 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>
* Refactor diffFileInfo / DiffTreeStore (#24998)wxiaoguang2023-05-301-16/+12
| | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Enable `vue/html-closing-bracket-spacing` eslint rule (#24987)silverwind2023-05-291-1/+1
| | | | | | Enable [`vue/html-closing-bracket-spacing`](https://eslint.vuejs.org/rules/html-closing-bracket-spacing.html) and set it to never add any useless spaces inside tags. All issues were fixed automatically with `make lint-js-fix`.
* Change `--font-weight-bold` to `--font-weight-semibold` and 600 value, ↵silverwind2023-05-211-1/+1
| | | | | | | | | | | | | introduce new font weight variables (#24827) There was some recent discussion about this in Discord `ui-design` channel and the conclusion was that https://github.com/go-gitea/gitea/issues/24305 should have fixed their OS font installation to have semibold weights. I have now tested this 601 weight on a Windows 10 machine on Firefox myself, and I immediately noticed that bold was excessivly bold and rendering as 700 because browsers are biased towards bolder fonts. So revert this back to the previous value.
* Use data-tooltip-content for tippy tooltip (#23649)wxiaoguang2023-03-241-2/+2
| | | | | | | | | | | | | | | | | Follow: * #23574 * Remove all ".tooltip[data-content=...]" Major changes: * Remove "tooltip" class, use "[data-tooltip-content=...]" instead of ".tooltip[data-content=...]" * Remove legacy `data-position`, it's dead code since last Fomantic Tooltip -> Tippy Tooltip refactoring * Rename reaction attribute from `data-content` to `data-reaction-content` * Add comments for some `data-content`: `{{/* used by the form */}}` * Remove empty "ui" class * Use "text color" for SVG icons (a few)
* Use a general approach to show tooltip, fix temporary tooltip bug (#23574)wxiaoguang2023-03-231-12/+0
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ## TLDR * Improve performance: lazy creating the tippy instances. * Transparently support all "tooltip" elements, no need to call `initTooltip` again and again. * Fix a temporary tooltip re-entrance bug, which causes showing temp content forever. * Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init (initHeatmap time decreases from 100ms to 50ms) ## Details ### The performance Creating a lot of tippy tooltip instances is expensive. This PR doesn't create all tippy tooltip instances, instead, it only adds "mouseover" event listener to necessary elements, and then switches to the tippy tooltip ### The general approach for all tooltips Before, dynamically generated tooltips need to be called with `initTooltip`. After, use MutationObserver to: * Attach the event listeners to newly created tooltip elements, work for Vue (easier than before) * Catch changed attributes and update the tooltip content (better than before) It does help a lot, eg: https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36 ### Temporary tooltip re-entrance bug To reproduce, on try.gitea.io, click the "copy clone url" quickly, then the tooltip will be "Copied!" forever. After this PR, with the help of `attachTippyTooltip`, the tooltip content could be reset to the default correctly. ### Other changes * `data-tooltip-content` is preferred from now on, the old `data-content` may cause conflicts with other modules. * `data-placement` was only used for tooltip, so it's renamed to `data-tooltip-placement`, and removed from `createTippy`.
* Move helpers to be prefixed with `gt-` (#22879)zeripath2023-02-131-7/+7
| | | | | | | | | | | | | | | | | | | | 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>
* JS refactors (#22227)silverwind2022-12-241-6/+0
| | | | | | - 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-2/+2
| | | Close #19902
* Add filetree on left of diff view (#21012)sebastian-sauer2022-09-271-0/+81
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>