summaryrefslogtreecommitdiffstats
path: root/web_src/js
Commit message (Collapse)AuthorAgeFilesLines
* Introduce GiteaLocaleNumber custom element to handle number localization on ↵wxiaoguang2023-04-037-34/+25
| | | | | | | | | | | | | | | | | | | | | | | pages. (#23861) Follow #21429 & #22861 Use `<gitea-locale-number>` instead of backend `PrettyNumber`. All old `PrettyNumber` related functions are removed. A lot of code could be simplified. And some functions haven't been used for long time (dead code), so they are also removed by the way (eg: `SplitStringAtRuneN`, `Dedent`) This PR only tries to improve the `PrettyNumber` rendering problem, it doesn't touch the "plural" problem. Screenshot: ![image](https://user-images.githubusercontent.com/2114189/229290804-1f63db65-1e34-4a54-84ba-e00b44331b17.png) ![image](https://user-images.githubusercontent.com/2114189/229290911-c88dea00-b11d-48dd-accb-9f52edd73ce4.png)
* Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)wxiaoguang2023-04-0314-703/+531
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png) ![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png) ![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png) ![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
* Append `(comment)` when a link points at a comment rather than the whole ↵Hester Gong2023-04-033-1/+10
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | issue (#23734) Close #23671 For the feature mentioned above, this PR append ' (comment)' to the rendered html if it is a hashcomment. After the PR, type in the following ``` pull request from other repo: http://localhost:3000/testOrg/testOrgRepo/pulls/2 pull request from this repo: http://localhost:3000/aaa/testA/pulls/2 issue comment from this repo: http://localhost:3000/aaa/testA/issues/1#issuecomment-18 http://localhost:3000/aaa/testA/pulls/2#issue-9 issue comment from other repo: http://localhost:3000/testOrg/testOrgRepo/pulls/2#issuecomment-24 http://localhost:3000/testOrg/testOrgRepo/pulls/2#issue ``` Gives: <img width="687" alt="截屏2023-03-27 13 53 06" src="https://user-images.githubusercontent.com/17645053/227852387-2b218e0d-3468-4d90-ad81-d702ddd17fd2.png"> Other than the above feature, this PR also includes two other changes: 1 Right now, the render of links from file changed tab in pull request might not be very proper, for example, if type in the following. (not sure if this is an issue or design, if not an issue, I will revert the changes). example on [try.gitea.io](https://try.gitea.io/HesterG/testrepo/pulls/1) ``` https://try.gitea.io/HesterG/testrepo/pulls/1/files#issuecomment-162725 https://try.gitea.io/HesterG/testrepo/pulls/1/files ``` it will render the following <img width="899" alt="截屏2023-03-24 15 41 37" src="https://user-images.githubusercontent.com/17645053/227456117-5eccedb7-9118-4540-929d-aee9a76de852.png"> In this PR, skip processing the link into a ref issue if it is a link from files changed tab in pull request After: type in following ``` hash comment on files changed tab: http://localhost:3000/testOrg/testOrgRepo/pulls/2/files#issuecomment-24 files changed link: http://localhost:3000/testOrg/testOrgRepo/pulls/2/files ``` Gives <img width="708" alt="截屏2023-03-27 22 09 02" src="https://user-images.githubusercontent.com/17645053/227964273-5dc06c50-3713-489c-b05d-d95367d0ab0f.png"> 2 Right now, after editing the comment area, there will not be tippys attached to `ref-issue`; and no tippy attached on preview as well. example: https://user-images.githubusercontent.com/17645053/227850540-5ae34e2d-b1d7-4d0d-9726-7701bf825d1f.mov In this PR, in frontend, make sure tippy is added after editing the comment, and to the comment on preview tab After: https://user-images.githubusercontent.com/17645053/227853777-06f56b4c-1148-467c-b6f7-f79418e67504.mov
* Use clippie module to copy to clipboard (#23801)silverwind2023-04-023-45/+6
| | | | | | | | | | | | Externalize clipboard copying to the [clippie](https://github.com/silverwind/clippie) module which I feel I can maintain outside this repo for shared benefit with my other projects. The module is feature-equivalent to the previous code and has one improvement where it sets `aria-hidden` on the fallback textarea, preventing screen readers from picking it up. Also it support `Array` of `content` as well to copy multiple items at once, in case it's ever needed.
* Remove assertion debug code for show/hide refactoring (#23576)wxiaoguang2023-04-021-26/+0
| | | | | | | | | | | | | | | | | | | | When doing the refactoring: * #22950 I added some debug mode code (assertShown) to help to catch bugs, it did catch some bugs like: * #23074 If it has been proved that there is no more bugs, this assertion could be removed easily and clearly. Feel free to decide when to remove it (feel free to convert it from Draft to Ready for Review). cc: @silverwind
* Remove jQuery ready usage (#23858)silverwind2023-04-012-2/+10
| | | | Replace it with equal function of our own and enable the eslint rule to forbid future usage.
* Fix JS error when changing PR's target branch (#23862)wxiaoguang2023-04-011-2/+0
| | | | | | | | | | | | | | Caught by @justusbunsi An old bug from #6488 In `pullrequest_targetbranch_change`, the `data` might be empty, because `UpdatePullRequestTarget` may respond `http.StatusNoContent`. And the old code's `$branchTarget.text(data.base_branch);` doesn't make sense, because in the end, the page will be always reloaded. So, just remove the `$branchTarget.text(data.base_branch);`, everything should be fine.
* Improve action log display with control chars (#23820)wxiaoguang2023-04-012-3/+75
| | | | | | | | | | | Close #23680 Some CLI programs use "\r" and control chars to print new content in current line. So, the strings in one line are actually from `\rReading...1%\rReading...5%\rReading...100%` This PR tries to make the output better.
* Fix dropdown direction behavior (#23806)wxiaoguang2023-03-302-5/+8
| | | | | | | | | | | Close #23803 More details in the comment. ![image](https://user-images.githubusercontent.com/2114189/228728786-7ec942b0-1f21-432d-93eb-575c77508b14.png) ![image](https://user-images.githubusercontent.com/2114189/228728825-62afb85e-7bfb-4702-a8bc-6c2160429978.png)
* Convert issue list checkboxes to native (#23596)silverwind2023-03-301-18/+4
| | | | | | | | | | | | | | | | | | | | | | | | Use native instead of fomantic checkboxes in issue list. Benefits include no more JS pop-in on load and perfect a11y. Before, with JS pop-in: <img width="92" alt="Screenshot 2023-03-20 at 17 02 02" src="https://user-images.githubusercontent.com/115237/226398955-99029a1c-1150-449c-821b-e4165e7446a8.png"> After, Firefox on macOS: <img width="126" alt="Screenshot 2023-03-20 at 17 01 26" src="https://user-images.githubusercontent.com/115237/226399018-58df2c32-c2b2-4c78-b7df-7b76523abe21.png"> After, Chrome on macOS: <img width="79" alt="Screenshot 2023-03-20 at 17 01 42" src="https://user-images.githubusercontent.com/115237/226399074-947e6279-8dc3-42c2-90b5-b106c471b23d.png"> I opted to not do styling yet but I see that the inconsistency between browsers may already be reason enough on doing it. I think if we style them, there should be one global style, including markdown ones which currently have custom styling.
* Fix checks for `needs` in Actions (#23789)Jason Song2023-03-301-3/+2
| | | | | | | | | | | | | | | | | Fix: - https://gitea.com/gitea/act_runner/issues/77 - https://gitea.com/gitea/act_runner/issues/81 Before: <img width="1489" alt="image" src="https://user-images.githubusercontent.com/9418365/228501567-f752cf87-a7ed-42c6-8f3d-ba741795c1fe.png"> Highlights: - Upgrade act to make things doable, related to - https://gitea.com/gitea/act/pulls/32 - https://gitea.com/gitea/act/pulls/33 - https://gitea.com/gitea/act/pulls/35 - Make `needs` works - Sort jobs in the original order in the workflow files
* Diff improvements (#23553)silverwind2023-03-302-20/+23
| | | | | | | | | | | | | | | | | | | | | | | | | | | | - 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`).
* Fix issue due date edit toggle bug (#23723)wxiaoguang2023-03-281-1/+1
| | | | | | | Use `toggleElem` instead of jQuery's `fadeToggle`, which can't be caught by eslint jquery plugin. Hopefully this could be the last bug for the jQuery show/hide refactoring.
* Add commit info in action page (#23210)yp053272023-03-271-0/+27
| | | | | Add more commit info in action detail page. ![image](https://user-images.githubusercontent.com/18380374/222069905-a5ab28b1-1cea-4eec-b3b9-f1c74145cb82.png)
* Fix incorrect `toggle` buttons (#23676)wxiaoguang2023-03-261-5/+8
| | | | | | | | | | | | | | | | Some of those are still Copy&Paste problems. This PR: * Only cleans the legacy incorrect code, doesn't change or improve the "action" logic. * Remove the redundant `$('.toggle.button').on('click')`, now `$('.show-panel.button').on('click')` handles that kinds of buttons Actually, there is only one correct "toggle button" in code, the one on the webhook page. No need to backport.
* Fine tune more downdrop settings, use SVG for labels, improve Repo Topic ↵wxiaoguang2023-03-265-34/+52
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Edit form (#23626) Although it seems that some different purposes are mixed in this PR, however, they are all related, and can be tested together, so I put them together to save everyone's time. Diff: `+79 −84`, everything becomes much better. ### Improve the dropdown settings. Move all fomantic-init related code into our `fomantic.js` Fine-tune some dropdown global settings, see the comments. Also help to fix the first problem in #23625 , cc: @yp05327 The "language" menu has been simplified, and it works with small-height window better. ### Use SVG instead of `<i class="delete icon">` It's also done by `$.fn.dropdown.settings.templates.label` , cc: @silverwind ### Remove incorrect `tabable` CSS class It doesn't have CSS styles, and it was only in Vue. So it's totally unnecessary, remove it by the way. ### Improve the Repo Topic Edit form * Simplify the code * Add a "Cancel" button * Align elements Before: <details> ![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png) </details> After: ![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
* Allow new file and edit file preview if it has editable extension (#23624)Hester Gong2023-03-261-14/+27
| | | | | | | | | | | | | | | | Close #23579 Inspired by [idea](https://github.com/go-gitea/gitea/issues/23579#issuecomment-1475429247) from @brechtvl In this PR, the behavior is when extension switches from writatble to not, preview will hide, and vice versa. demo: https://user-images.githubusercontent.com/17645053/226786119-d20063da-8763-41ce-9b00-ae34929120e1.mov --------- Co-authored-by: silverwind <me@silverwind.io>
* Remove row clicking from notification table (#22695)John Olheiser2023-03-251-15/+0
| | | | | | | | | | | | Resolves #22692 I don't think there's a need for this entire row to be clickable (and even different links depending on which segment you click) The links still point to the same spot, so no information is lost here. --------- Signed-off-by: jolheiser <john.olheiser@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Use data-tooltip-content for tippy tooltip (#23649)wxiaoguang2023-03-246-25/+12
| | | | | | | | | | | | | | | | | 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)
* Add aria attributes to interactive time tooltips. (#23661)Felipe Leopoldo Sologuren Gutiérrez2023-03-241-1/+1
| | | | | | Fixes #23645 * Added `describedby` attribute to the reference element. * Eliminated `aria-expanded` attribute to the reference element in order to conform strictly with WCAG 2.1 rules.
* Fix cancel button in the page of project edit not work (#23655)sillyguodong2023-03-241-1/+1
| | | | | | | | | | | | | | | | Before, in project edit page, the cancel button is not work. https://user-images.githubusercontent.com/33891828/227182731-6478e29f-0e52-48c4-beb0-6a7d1dda6a1d.mov 1. The wrong classname `cancel` was added to the `<a>` tag. That classname caused the default click event of `<a>` tag to be cancelled. Because we have the following settings in the global. So I remove the classname `cancel`. https://github.com/go-gitea/gitea/blob/9be90a58754061171bbd5025d85d2b891364efd3/web_src/js/features/common-global.js#L325-L327 2. Another change is that page will redirect to the previous page. https://user-images.githubusercontent.com/33891828/227187326-c653c6d6-9715-440f-a732-ba0a6f012c81.mov
* Editor preview support for external renderers (#23333)Brecht Van Lommel2023-03-242-9/+8
| | | | | | | | | | | | | | | | | | | | | | | | Remove `[repository.editor] PREVIEWABLE_FILE_MODES` setting that seemed like it was intended to support this but did not work. Instead, whenever viewing a file shows a preview, also have a Preview tab in the file editor. Add new `/markup` web and API endpoints with `comment`, `gfm`, `markdown` and new `file` mode that uses a file path to determine the renderer. Remove `/markdown` web endpoint but keep the API for backwards and GitHub compatibility. ## ⚠️ BREAKING ⚠️ The `[repository.editor] PREVIEWABLE_FILE_MODES` setting was removed. This setting served no practical purpose and was not working correctly. Instead a preview tab is always shown in the file editor when supported. --------- Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Use a general approach to show tooltip, fix temporary tooltip bug (#23574)wxiaoguang2023-03-239-54/+101
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ## 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`.
* Improve `<SvgIcon>` to make it output `svg` node and optimize performance ↵wxiaoguang2023-03-234-8/+73
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | (#23570) Before, the Vue `<SvgIcon>` always outputs DOM nodes like: ```html <span class="outer-class"> <svg class="class-name-defined" ...></svg> </span> ``` The `span` is redundant and I guess such layout and the inconsistent `class/class-name` attributes would cause bugs sooner or later. This PR makes the `<SvgIcon>` clear, and it's faster than before, because it doesn't need to parse the whole SVG string. Before: <details> ![image](https://user-images.githubusercontent.com/2114189/226156474-ce2c57cd-b869-486a-b75b-1eebdac8cdf7.png) </details> After: ![image](https://user-images.githubusercontent.com/2114189/226155774-108f49ed-7512-40c3-94a2-a6e8da18063d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
* Use a general approch to improve a11y for all checkboxes and dropdowns. (#23542)wxiaoguang2023-03-226-94/+196
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR follows #22599 and #23450 The major improvements: 1. The `aria-*.js` are totally transparent now, no need to call `attachDropdownAria` explicitly anymore. * It hooks the `$.fn.checkbox` and `$.fn.dropdown`, then our patch works. * It makes all dynamically generated checkbox/dropdown work with a11y without any change * eg: the `conversation.find('.dropdown').dropdown();` in `repo-diff.js` 2. Since it's totally transparent now, it could be easier to modify or remove in the future. 3. It handles all selection labels as well (by onLabelCreate), so it supports "multiple selection dropdown" now. * It partially completes one of my TODOs: `TODO: multiple selection is not supported yet.` 4. The code structure is clearer, code blocks are splitted into different functions. * The old `attachOneDropdownAria` was splitted into separate functions. * It makes it easier to add more fine tunes in the future, and co-work with contributors. 6. The code logic is similar as before, only two new parts: 1. the `ariaCheckboxFn` and `ariaDropdownFn` functions 2. the `onLabelCreate` and `updateSelectionLabel` functions In `aria-dropdown.js` I had to mix jQuery and Vanilla JS somewhat, I think the code is still understandable, otherwise the code would be much more complex to read. Thanks to fsologureng for the idea about "improving the 'delete icon' with aria attributes". If there is anything unclear or incorrect, feel free to ask and discuss, or propose new PRs for it.
* Polyfill the window.customElements (#23592)wxiaoguang2023-03-201-0/+2
| | | | | | | | | | | | | | | | | | | | Related: #23590 Reference: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs It seems that there are some users using old browsers, so the `window.customElements` need polyfill. The Custom Elements would help a lot for Gitea's UI problems, including: * `<span class="js-pretty-number">` * `<time data-format>` So it's worth get polyfill. --------- Co-authored-by: delvh <dev.lh@web.de>
* Fix JS error on compare page (#23551)silverwind2023-03-181-13/+15
| | | | | | | | | Fix regression from #23271. This code apparently runs on the compare page where there is no review button so check for existance of both button and content. <img width="1226" alt="Screenshot 2023-03-17 at 21 42 47" src="https://user-images.githubusercontent.com/115237/226040001-ec097edd-d926-4c80-9962-526f9b7eff19.png"> Fixes #23562
* Fix diff detail buttons wrapping, use tippy for review box (#23271)silverwind2023-03-171-6/+17
| | | | | | | | | | | | | | | | Fix visual regression introduced by https://github.com/go-gitea/gitea/pull/22986. Before: <img width="1277" alt="image" src="https://user-images.githubusercontent.com/115237/222792814-d70c2173-0c7c-4db2-8839-95be63cdc8ee.png"> <img width="649" alt="image" src="https://user-images.githubusercontent.com/115237/222792989-9b1f5e12-becd-40cc-b02c-e9f59a8e72a4.png"> After: <img width="1274" alt="image" src="https://user-images.githubusercontent.com/115237/222792769-e7a9702f-4b6a-46c4-9385-da103ed4dff0.png"> <img width="565" alt="image" src="https://user-images.githubusercontent.com/115237/222793084-6de6482b-11dc-4d38-b514-15884d20e140.png">
* Imrove scroll behavior to hash issuecomment(scroll position, auto expand if ↵Hester Gong2023-03-171-1/+21
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | file is folded, and on refreshing) (#23513) Close #23466 Right now on pull request "files Changed" tab, if a file is viewed, when the comments' links are visited, the comment will not be shown as the file is folded after viewed. This PR is to improve the behavior, to make the comment seen even the related file is folded, like on github. And right now scroll position will be remembered and hence it won’t scroll to hashed comment after refreshing, this PR also adjust the scroll position remembering behavior: When there is hash comment in url, do not remember the scroll position. Before: https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov After: https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov Update - long comment's behavior after using `scrollTop ` (Comment div scroll to the position which is 30px below the diff header, or 30px below top on conversation tab): https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
* Remove stars in dashboard repo list (#23530)yp053272023-03-171-5/+1
| | | Discussion is here: https://github.com/go-gitea/gitea/pull/22816
* Fix aria.js bugs: incorrect role element problem, mobile focus problem, ↵wxiaoguang2023-03-175-86/+199
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | tippy problem (#23450) This PR is extracted from #23346 to address some unclear (I don't understand) code-belonging concerns. This PR needs to be backported, otherwise the `aria.js` is too buggy in some cases. Since there would be two minor conflicts, I will do the backport manually. Before: the `aria.js` is still buggy in some cases. After: tested with AppleVoice, Android TalkBack * Fix incorrect dropdown init code * Fix incorrect role element (the menu role should be on the `$menu` element, but not on the `$focusable`) * Fix the focus-show-click-hide problem on mobile. Now the language menu works as expected * Fix incorrect dropdown template function setting * Clarify the logic in aria.js * Hide item's tippy after menu gets hidden * Fix incorrect tippy `setProps` after `destroy` * Fix UI lag problem when page gets redirected during menu hiding animation with screen reader * Improve comments * Implement the layout proposed by #19861 <details> https://github.com/go-gitea/gitea/blob/d74a7efb60f94a4b8e6e5f65332f94f1be31b761/web_src/js/features/aria.md?plain=1#L38-L47 </details>
* Make time tooltips interactive (#23526)silverwind2023-03-161-0/+1
| | | | | | Fixes https://codeberg.org/forgejo/forgejo/issues/511 <img width="379" alt="Screenshot 2023-03-16 at 20 23 10" src="https://user-images.githubusercontent.com/115237/225731294-4c6e4f44-bdcc-4c8c-86e2-49f7c03b377d.png">
* Replace Less with CSS (#23481)silverwind2023-03-141-128/+139
| | | | | | | | | | | | Ran most of the Less files through the Less compiler and Prettier and then followed up with a round of manual fixes. The Less compiler had unfortunately stripped all `//` style comments that I had to restore (It did preserve `/* */` comments). Other fixes include duplicate selector removal which were revealed after the transpilation and which weren't caught by stylelint before but now are. Fixes: https://github.com/go-gitea/gitea/issues/15565
* Refactor branch/tag selector to Vue SFC (#23421)wxiaoguang2023-03-1410-233/+323
| | | | | | | | | | | | | | | Follow #23394 There were many bad smells in old code. This PR only moves the code into Vue SFC, doesn't touch the unrelated logic. update: after https://github.com/go-gitea/gitea/pull/23421/commits/5f23218c851e12132f538a404c946bbf6ff38e62 , there should be no usage of the vue-rumtime-compiler anymore (hopefully), so I think this PR could close #19851 --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Refactor dashboard repo list to Vue SFC (#23405)wxiaoguang2023-03-147-405/+463
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Similar to #23394 The dashboard repo list mixes jQuery/Fomantic UI/Vue together, it's very diffcult to maintain and causes unfixable a11y problems. This PR uses two steps to refactor the repo list: 1. move `data-` attributes to JS object and use Vue data as much as possible https://github.com/go-gitea/gitea/pull/23405/commits/d3adc0dcacf7de87b9819277e6598ac3993bbfa3 2. move the code into a Vue SFC https://github.com/go-gitea/gitea/pull/23405/commits/7ebe55df6e67adfd272a4bf0a96ad6688edf661f Total: +516 −585 Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/224271457-a23e05be-d7d3-4247-a803-f0ee30c36f44.png) ![image](https://user-images.githubusercontent.com/2114189/224271504-76fbd3da-4d7a-4725-b0d1-fbff83caac63.png) ![image](https://user-images.githubusercontent.com/2114189/224271845-f007cadf-6c49-46bd-a65c-a3fc75bdba3b.png) </details> --------- Co-authored-by: John Olheiser <john.olheiser@gmail.com>
* Convert `<div class="button">` to `<button class="button">` (#23337)delvh2023-03-145-12/+26
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This improves a lot of accessibility shortcomings. Every possible instance of `<div class="button">` matching the command `ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'` has been converted when possible. divs with the `dropdown` class and their children were omitted as 1. more analysis must be conducted whether the dropdowns still work as intended when they are a `button` instead of a `div`. 2. most dropdowns have `div`s as children. The HTML standard disallows `div`s inside `button`s. 3. When a dropdown child that's part of the displayed text content is converted to a `button`, the dropdown can be focused twice Further changes include that all "gitea-managed" buttons with JS code received an `e.preventDefault()` so that they don't accidentally submit an underlying form, which would execute instead of cancel the action. Lastly, some minor issues were fixed as well during the refactoring. ## Future improvements As mentioned in https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391, `<a>`s without `href` attribute are not focusable. They should later on be converted to `<button>`s. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Fix actions frontend bugs (pagination, long name alignment) and small ↵Hester Gong2023-03-131-2/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | simplify (#23370) 1 Right now on actions page, the action list will not be aligned if commit message is long. In this PR, the changes are: - The branch tag is moved to bottom row - Width percentage is given to make them aligned - Show "..." if commit is longer than two lines. - Align the status icon with the commit message with baseline Before: <img width="1068" alt="截屏2023-03-08 12 23 22" src="https://user-images.githubusercontent.com/17645053/223628534-6b9472cb-29f5-40a3-9714-c5152553049e.png"> After: <img width="756" alt="截屏2023-03-08 13 34 28" src="https://user-images.githubusercontent.com/17645053/223628571-da94698b-0e0a-43e3-ae82-34d8c780e5ba.png"> 2 Right now the actions list's pagination is not working properly because Param is not passed to pagination template, in this PR Param Strings are passed to the pager Before: <img width="1176" alt="截屏2023-03-08 12 23 50" src="https://user-images.githubusercontent.com/17645053/223629207-8b67ce74-2342-4259-bc81-036e37752716.png"> After: <img width="1343" alt="截屏2023-03-08 13 11 54" src="https://user-images.githubusercontent.com/17645053/223629321-4f538f8a-45dc-4d6f-ae60-2c82680ae3e7.png"> 3 A small simplify in `RepoActionView.vue` . --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Sync the class change of Edit Column Button to JS code (#23400)yp053272023-03-121-26/+22
| | | | | | | | | | In #22767, we changed the class of `Edit Column` button from `red` to `primary` But `red` is used to find this button in js..... --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: zeripath <art27@cantab.net>
* Refactor branch/tag selector dropdown (first step) (#23394)wxiaoguang2023-03-112-41/+28
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow: * #23345 The branch/tag selector dropdown mixes jQuery/Fomantic UI/Vue together, it's very diffcult to maintain and causes unfixable a11y problems. It also causes problems like #19851 #21314 #21952 This PR is the first step for the refactoring, move `data-` attributes to JS object and use Vue data as much as possible. The old selector `'.choose.reference .dropdown'` was also wrong, it hits `<div class="choose reference"><svg class="dropdown icon">` and would cause undefined behaviors. I have done some quick tests and it works. After this PR gets merged, I will move the code into a Vue SFC in next PR. ![image](https://user-images.githubusercontent.com/2114189/224099638-378a8a86-0865-47d1-bcba-f972506374c7.png) ![image](https://user-images.githubusercontent.com/2114189/224099690-70276cf5-b1e4-404a-b0c6-582448abf40e.png) --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Hide target selector if tag exists when creating new release (#23171)Zettat1232023-03-102-4/+39
| | | | | | | | | | | | | | | Close #22649. |status|screenshot| |-|-| |empty tag name|<img src="https://user-images.githubusercontent.com/15528715/221490165-fd3abd2e-6dc5-4562-bece-d1d6a305479e.png" width="300px"/>| |new tag|<img src="https://user-images.githubusercontent.com/15528715/221490450-49b2a48e-b206-49f4-bd79-34b1ea64156f.png" width="300px"/>| |existing tag|<img src="https://user-images.githubusercontent.com/15528715/221490301-4d1879dd-4947-4abc-9b9a-e77be1806981.png" width="300px"/>|
* Fix incorrect display for comment context menu (#23343)wxiaoguang2023-03-081-2/+3
| | | | | | | | | | | Replace #23342 Fix a regression of #23014: the `a` couldn't be used here because Fomantic UI has style conflicts: `.ui.comments .comment .actions a { display: inline-block; }` And complete one more of my TODOs: "in the future there could be a special CSS class for it"
* Fix adding of empty class name (#23352)Hester Gong2023-03-071-1/+2
| | | | | | | | | | | | | This PR is to fix the error shown below. The reason is because [`class-name` prop](https://github.com/go-gitea/gitea/blob/main/web_src/js/components/ActionRunStatus.vue#L6) given to `svg` component has a space, and classList cannot add empty string. https://user-images.githubusercontent.com/17645053/223346720-c7f9de43-5e69-4ecf-93c0-90bf04090693.mov --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Fix various ImageDiff/SVG bugs (#23312)wxiaoguang2023-03-071-8/+7
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Replace #23310, Close #19733 And fix various UI problems, including regressions from #22959 #22950 and more. ## SVG Detection The old regexp may mismatch non-SVG files. This PR adds new tests for those cases. ## UI Changes ### Before ![image](https://user-images.githubusercontent.com/2114189/222967716-f6ad8721-f46a-4a3f-9eb0-a89e488d3436.png) ![image](https://user-images.githubusercontent.com/2114189/222967780-8af8981a-e69d-4304-9dc4-0235582fa4f4.png) ### After ![image](https://user-images.githubusercontent.com/2114189/222967575-c21c23d4-0200-4e09-aac3-57895e853000.png) ![image](https://user-images.githubusercontent.com/2114189/222967585-8b8da262-bc96-441a-9851-8d3845f2659d.png) ![image](https://user-images.githubusercontent.com/2114189/222967595-58d9bea5-6df4-41fa-bf8a-86704117959d.png) ![image](https://user-images.githubusercontent.com/2114189/222967608-38757c1a-b8bd-4ebf-b7a8-3b30edb7f303.png) ![image](https://user-images.githubusercontent.com/2114189/222967623-9849a339-6fae-4484-8fa5-939e2fdacbf5.png) ![image](https://user-images.githubusercontent.com/2114189/222967633-4383d7dd-62ba-47a3-8c10-86f7ca7757ae.png) --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Add ActionRunStatus component (#23259)yp053272023-03-062-16/+35
| | | | | | | | | | Related to: https://github.com/go-gitea/gitea/pull/23212#discussion_r1122856231 Decrease duplication of SvgIcon when display a run status svg. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Scoped labels: don't require holding alt key to remove (#23303)Brecht Van Lommel2023-03-061-6/+1
| | | | | | | | | Alt doesn't work on all browsers, the simplest solution for v1.19 is to just not require it and toggle the label by just clicking. Part of #22974 Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Change interactiveBorder to fix popup preview (#23169)Hester Gong2023-03-051-0/+1
| | | | | | | | | Close #23073. Used the solution as reference to the reply: https://github.com/go-gitea/gitea/issues/23073#issuecomment-1440124609 Here made the change inside the `contextpopup.js` because this is where the popup component is created and tippy configuration is given. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Improve the frontend guideline (#23298)wxiaoguang2023-03-052-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ### The CustomEvent prefix There was already `ce-quick-submit`, the `ce-` prefix seems better than `us-`. Rename the only `us-` prefixed `us-load-context-popup` to `ce-` prefixed. ### Styles and Attributes in Go HTML Template https://github.com/go-gitea/gitea/pull/21855#issuecomment-1429643073 Suggest to stick to `class="c1 {{if $var}}c2{{end}}"` The readability and maintainability should be applied to the code which is read by developers, but not for the generated outputs. The template code is the code for developers, while the generated HTML are only for browsers. The `class="c1 {{if $var}}c2{{end}}"` style is clearer for developers and more intuitive, and the generated HTML also makes browsers happy (a few spaces do not affect anything) Think about a more complex case: * `class="{{if $active}}active{{end}} menu item {{if $show}}show{{end}} {{if $warn}}warn{{end}}"` * --vs-- * `class="{{if $active}}active {{end}}menu item{{if $show}} show{{end}}{{if $warn}} warn{{end}}"` The first style make it clearer to see each CSS class name with its `{{if}}` block. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Scoped labels: set aria-disabled on muted Exclusive option for a11y (#23306)Brecht Van Lommel2023-03-051-0/+2
| | | | | | | | | It is convenient to be able to toggle off this option after removing / from the name. This ensures the muted state is communicated to blind users even when the input is not fully disabled. Part of #22974 Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Make Ctrl+Enter submit a pending comment (starting review) instead of ↵wxiaoguang2023-03-042-5/+11
| | | | | | | | | | | | | | | | | | submitting a single comment (#23245) Close #23241 Before: press Ctrl+Enter in the Code Review Form, a single comment will be added. After: press Ctrl+Enter in the Code Review Form, start the review with pending comments. The old name `is_review` is not clear, so the new code use `pending_review` as the new name. Co-authored-by: delvh <leon@kske.dev> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Add run status in action view page (#23212)yp053272023-03-041-2/+13
| | | | | | | | | | | | | | | | | Before: ![image](https://user-images.githubusercontent.com/18380374/222084932-a7643fbe-2d9f-48db-b25d-74ace49e03f4.png) ![image](https://user-images.githubusercontent.com/18380374/222084887-fde3500d-dad3-4902-9c82-c4f71f23f83b.png) After: ![image](https://user-images.githubusercontent.com/18380374/222084565-eeef1110-9d9d-40b4-a26b-fbd5a307f14e.png) ![image](https://user-images.githubusercontent.com/18380374/222084728-6c96d7c1-a399-43d5-8369-392ad5017b7f.png) --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-21 07:48:05 +0000