summaryrefslogtreecommitdiffstats
path: root/web_src
Commit message (Collapse)AuthorAgeFilesLines
* 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-252-34/+14
| | | | | | | | | | | | 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
* Fix long project name display in issue list and in related dropdown (#23653)Hester Gong2023-03-243-1/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR is to fix the second problem mentioned in #23625, along with the long texts problem in `issue-item-bottom-row` of `issuelist.tmpl` Main changes are: 1. Add `max-width` to the search dropdowns in issue list and make the possible long texts inside to show ellipsis if texts are long 2. Adjust the conditions in [issuelist.tmpl](https://github.com/go-gitea/gitea/blob/1d35fa0e784dffcadacb2322a3d7ac3ec2ff89b2/templates/shared/issuelist.tmpl#L146-L167) to fix the problem as mentioned by the [comment](https://github.com/go-gitea/gitea/issues/23625#issuecomment-1479281060) 3. Use `word-break: break-word;` in `issue-item-bottom-row` to break the possible long texts. After the PR issuelist in repo (similar for pr list): <img width="366" alt="截屏2023-03-23 17 42 40" src="https://user-images.githubusercontent.com/17645053/227163953-93e9adbd-5785-4c16-b538-9db901787775.png"> dropdowns with long name (Here take reference from github to deal with the long names cases: show ellipsis with no title, because all these options are clickable, and it might not be necessary to add titles to them ): <img width="370" alt="截屏2023-03-23 17 43 50" src="https://user-images.githubusercontent.com/17645053/227164215-df6fcaaa-9fee-4256-a57c-053fbcffafbb.png"> <img width="365" alt="截屏2023-03-23 17 43 56" src="https://user-images.githubusercontent.com/17645053/227164227-9c99abcd-f410-4e07-b5b8-cbce764eedcd.png"> issue page (similar for pr page): <img width="374" alt="截屏2023-03-23 17 45 37" src="https://user-images.githubusercontent.com/17645053/227164668-654a8188-dac8-4bbf-a6e3-f3768a644a1b.png"> on PC: <img width="1412" alt="截屏2023-03-23 17 47 20" src="https://user-images.githubusercontent.com/17645053/227166694-e7bcc6e5-9667-4cef-9fbf-db85640a2c6c.png"> <img width="1433" alt="截屏2023-03-23 17 46 40" src="https://user-images.githubusercontent.com/17645053/227165182-4e2a5d19-74bc-4c66-b73c-23cbca176ffe.png">
* 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>
* Fix new issue/pull request btn margin when it is next to sort (#23647)Hester Gong2023-03-231-0/+2
| | | | | | | | | | | | | | | | | | | | | Close #23627 Added margin left to the button when it is next to the svg, which has a margin-right of `-0.5rem` And here it might be better if `white-space: nowrap;` is added because otherwise it might look like below on pull requests page on smaller screen <img width="945" alt="截屏2023-03-23 09 57 41" src="https://user-images.githubusercontent.com/17645053/227079613-71c696ab-55ec-4641-acb9-622a8baebb31.png"> After: <img width="936" alt="截屏2023-03-23 10 08 27" src="https://user-images.githubusercontent.com/17645053/227080971-6bf2588e-40dd-4770-b0d1-45d7c63e0f48.png"> Pull Request on smaller screen <img width="922" alt="截屏2023-03-23 10 25 16" src="https://user-images.githubusercontent.com/17645053/227084144-0c2ed3e6-5c11-4252-bba2-b5f971b70f4a.png">
* 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-235-20/+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.
* Set opaque background on markup and images (#23578)silverwind2023-03-213-0/+18
| | | | | | | | | | | | | | | | | | | | | | - Set opaque background on markup images so they can visually break `<hr>` - Change padding of comment box so `padding` is provided by the `.markup` element instead of its parent, matching the file rendering view which does the same. Before: <img width="243" alt="Screenshot 2023-03-19 at 19 22 03" src="https://user-images.githubusercontent.com/115237/226198663-8ff4d940-6a15-452d-ac58-14485b37fbc7.png"> After: <img width="261" alt="Screenshot 2023-03-19 at 19 23 26" src="https://user-images.githubusercontent.com/115237/226198689-1bf56561-4726-46dc-b583-423d65e1e13a.png"> <img width="263" alt="image" src="https://user-images.githubusercontent.com/115237/226199002-e93c817d-6d9c-4b98-bad8-0aa0bd45b62f.png"> Example documents: https://try.gitea.io/silverwind/symlink-test/src/branch/master/test-page.md https://github.com/silverwind/symlink-test/blob/master/test-page.md
* Remove conflicting CSS rules on notifications, improve notifications table ↵silverwind2023-03-211-21/+9
| | | | | | | | | | | | | | | | | | (#23565) Dropdowns on `/notifications/subscriptions` before and after: <img width="157" alt="Screenshot 2023-03-18 at 20 37 12" src="https://user-images.githubusercontent.com/115237/226133906-e4ad6a0a-de24-4324-8e1d-94081d23fe85.png"> <img width="152" alt="Screenshot 2023-03-18 at 20 41 29" src="https://user-images.githubusercontent.com/115237/226134038-c3946c32-a424-4b92-ad15-890e1036cafe.png"> These selectors are meant to target the notification list which I improved: <img width="1145" alt="Screenshot 2023-03-19 at 01 52 11" src="https://user-images.githubusercontent.com/115237/226147907-1c35736a-4bc9-4698-9813-21a20a1d2106.png"> <img width="1148" alt="Screenshot 2023-03-19 at 01 54 17" src="https://user-images.githubusercontent.com/115237/226147920-626dbd84-11d3-48db-a177-6d808e3212c0.png">
* 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 dropdown icon misalignment when using fomantic icon (#23558)wxiaoguang2023-03-181-4/+4
| | | | | | | | | | | | | | | | There are still many dropdowns using fomantic icon. For example: new issue with issue template. Avoid polluting the fomantic styles. Before: ![image](https://user-images.githubusercontent.com/2114189/226101609-fa64178d-fed0-4541-bea2-72a250cb74db.png) After: ![image](https://user-images.githubusercontent.com/2114189/226101603-9507b275-fc5b-4a55-870d-db8c4486d80a.png)
* Fix sticky header in diff view (#23554)silverwind2023-03-181-2/+10
| | | | | | | | | | | | | | | Ressurection of #23549. Fix regression https://github.com/go-gitea/gitea/pull/23513#issuecomment-1474356817 from #23271. The previous sticky CSS did assume the content is always 2 rows, but since that PR, it's single-row above 993px width. Adjust the sticky offset to match and add a small tweak that hides content behind the `border-radius`. Single row: <img width="1264" alt="Screenshot 2023-03-17 at 21 33 05" src="https://user-images.githubusercontent.com/115237/226034050-a04b131d-fd3f-45c0-bc72-413738a59825.png"> Double row: <img width="1243" alt="Screenshot 2023-03-17 at 21 32 53" src="https://user-images.githubusercontent.com/115237/226034163-2f1c6aa9-fc72-432f-bc46-9a7119da8677.png">
* Fix some broken css (#23560)wxiaoguang2023-03-182-7/+5
| | | | | | | | | 1. The "close" inside "modal" are likely broken for long time * There is no var called `--body-color` * There is no `fullscreen modal` * The `.ui.modal > .close.inside` doesn't seem to match most icons. It only matches a few like "fork-repo-modal" or "adopt repo". Other places are just buggy code copied again and again. 2. Convert the legacy `&:hover` LESS syntax to CSS syntax
* 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 long name ui issues and label ui issue (#23541)Hester Gong2023-03-184-3/+18
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | This PR fixes some ui problems as mentioned in the two issues below. 1. Long file path has no word break ## Before <img width="1357" alt="截屏2023-03-17 17 49 43" src="https://user-images.githubusercontent.com/17645053/225873491-27c7bf9a-d5d5-4065-9e4a-ff228e935abf.png"> ## After <img width="1248" alt="截屏2023-03-17 17 51 22" src="https://user-images.githubusercontent.com/17645053/225873562-93b87af7-9c83-43f8-aa0d-36a9174d25ac.png"> on mobile <img width="408" alt="截屏2023-03-17 17 51 15" src="https://user-images.githubusercontent.com/17645053/225873554-1b8c8999-1dfc-4251-a7fc-20ecd3444cb0.png"> 2. Texts in labels ## Before <img width="1219" alt="截屏2023-03-17 17 49 24" src="https://user-images.githubusercontent.com/17645053/225873369-812b1b52-c104-4e32-988f-c3e55ad2f844.png"> ## After <img width="1259" alt="截屏2023-03-17 17 51 31" src="https://user-images.githubusercontent.com/17645053/225873317-9717fd2c-e9e1-4a00-a27d-6bdc5933c3ca.png"> with two labels <img width="1258" alt="截屏2023-03-17 17 51 53" src="https://user-images.githubusercontent.com/17645053/225873323-13198192-71de-472d-8e78-6fd86ddba3d9.png"> In explore and star pages <img width="896" alt="截屏2023-03-17 18 25 00" src="https://user-images.githubusercontent.com/17645053/225878962-9e26e3aa-cff0-451c-9133-19f4ad1507a4.png"> <img width="913" alt="截屏2023-03-17 18 25 09" src="https://user-images.githubusercontent.com/17645053/225878967-6adaa414-136e-43c2-87d0-7e46a0da112e.png"> 3. Long name repository on creating new fork page ## Before <img width="919" alt="截屏2023-03-17 17 50 01" src="https://user-images.githubusercontent.com/17645053/225873723-5c4ea137-3b51-4074-a458-ef442e330ddf.png"> ## After <img width="907" alt="截屏2023-03-17 17 50 37" src="https://user-images.githubusercontent.com/17645053/225873772-fc4a52c3-49c6-4ca6-903d-a13707f2a98b.png"> <img width="383" alt="截屏2023-03-17 17 50 48" src="https://user-images.githubusercontent.com/17645053/225873779-6de1dfde-5c05-4ae9-89e1-85c25b3a1682.png"> Closes #23535 Closes #23534
* Fix diff detail buttons wrapping, use tippy for review box (#23271)silverwind2023-03-172-14/+21
| | | | | | | | | | | | | | | | 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
* Increase horizontal page padding (#23507)silverwind2023-03-171-3/+10
| | | | | | | | | | | | | | | | | Add a bit more empty space on left and right side of page content for a more pleasant viewing experience. Also tweaked the mobile navbar to match. Before: <img width="1276" alt="Screenshot 2023-03-16 at 00 58 23" src="https://user-images.githubusercontent.com/115237/225473942-f544106f-1b61-456a-99fb-3ba136cabc8d.png"> After: <img width="1270" alt="Screenshot 2023-03-16 at 00 58 37" src="https://user-images.githubusercontent.com/115237/225473959-8b555359-a08d-48e1-9476-2710aabb1166.png"> Mobile Navbar: <img width="673" alt="Screenshot 2023-03-16 at 01 05 12" src="https://user-images.githubusercontent.com/115237/225473966-adccef2b-4d34-44ed-8c75-d4ca46d96cf3.png">
* 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">
* Update mini-css-extract-plugin, remove postcss (#23520)silverwind2023-03-161-1/+0
| | | | | | | | | | | | | | | Follow-up and proper fix for https://github.com/go-gitea/gitea/pull/23504 Update to [mini-css-extract-plugin@2.7.4](https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.7.4) which fixes our specific issue described in https://github.com/webpack-contrib/css-loader/issues/1503 and which allows us to again drop the postcss dependency. Backport of this is not necessary as I have included it in https://github.com/go-gitea/gitea/pull/23508. Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Fix review comment context menu clipped bug (#23523)wxiaoguang2023-03-162-4/+1
| | | | | | | | | | | | | | | | | | | | This is another regression of #22959 (the first regression has been fixed by the Image Diff fix) Close #23517 This is a quick fix. Luckily, there is no "dropdown menu" for image/csv view, so we could only add the "overflow-x: scroll" to the image/csv view. After fix: ![image](https://user-images.githubusercontent.com/2114189/225643575-9e964b4f-5543-4a69-86c2-2ffc8e40d9a6.png) ![image](https://user-images.githubusercontent.com/2114189/225643670-f0e575d0-f4af-41f4-b023-2d9ddb6462e9.png) Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
* Allow both fullname and username search when `DEFAULT_SHOW_FULL_NAME` is ↵Hester Gong2023-03-161-0/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | true (#23463) This PR adds the ability to search both fullname and username for assignees, reviewers and author search boxes when the config [`DEFAULT_SHOW_FULL_NAME`](https://github.com/go-gitea/gitea/blob/6ff5400af91aefb02cbc7dd59f6be23cc2bf7865/custom/conf/app.example.ini#L1238) in `app.ini` is set to `true`. Which is originally raised [here](https://projects.blender.org/infrastructure/blender-projects-platform/issues/14) And if `DEFAULT_SHOW_FULL_NAME` is set to `false`(default value), these search boxes will only show username. Example: When `DEFAULT_SHOW_FULL_NAME = true` <img width="1220" alt="截屏2023-03-14 14 28 06" src="https://user-images.githubusercontent.com/17645053/224914546-80ef2837-ab72-4d66-9f00-6eb77ed4baaa.png"> When `DEFAULT_SHOW_FULL_NAME = false` (default value) <img width="1243" alt="截屏2023-03-14 14 29 37" src="https://user-images.githubusercontent.com/17645053/224914798-f69ec8a2-0929-4330-827c-3e30188f9b47.png"> The specific search boxes that adapts these changes include: 1. Author, Assignee search boxes in pull requests tab and issues tab in repository <img width="1283" alt="截屏2023-03-14 14 35 01" src="https://user-images.githubusercontent.com/17645053/224916250-8e452525-71d6-4b48-bf1c-bf7a176abaaa.png"> 2. Assigee and Author on milestones issue page (Added missing search box for author here) <img width="1261" alt="截屏2023-03-14 14 38 20" src="https://user-images.githubusercontent.com/17645053/224916569-d3105619-7824-4bb8-a6d0-1a600eaa9963.png"> 3. Assignee on issues and PR Sidebar, Reviewer on PR Sidebar <img width="976" alt="截屏2023-03-14 14 41 06" src="https://user-images.githubusercontent.com/17645053/224917431-c45d821e-9660-4f58-a196-5979a0bb64ce.png"> <img width="1027" alt="截屏2023-03-14 14 41 58" src="https://user-images.githubusercontent.com/17645053/224917290-ad4dbc52-0c20-45c4-9fce-9dcd59ad7d47.png"> 4. Assignee when creating new issue <img width="961" alt="截屏2023-03-14 14 44 33" src="https://user-images.githubusercontent.com/17645053/224917694-34bee5a7-e975-4f37-8862-56ebc2556808.png"> 5. Whitelisted users for pushing, Whitelisted users for merging and Whitelisted reviewers in Protected branch settings <img width="920" alt="截屏2023-03-14 14 48 56" src="https://user-images.githubusercontent.com/17645053/224918551-9b46b44e-b075-4895-8d33-1aafc7d3c8e5.png"> <img width="901" alt="截屏2023-03-14 14 49 02" src="https://user-images.githubusercontent.com/17645053/224918584-efa66f23-a593-4e26-a3eb-bb1fbc5516ae.png"> <img width="944" alt="截屏2023-03-14 14 49 21" src="https://user-images.githubusercontent.com/17645053/224918591-be60455d-0513-4f66-84f6-b5e1bc40ff91.png"> 6. "Allowed users" in tags settings <img width="935" alt="截屏2023-03-14 14 50 11" src="https://user-images.githubusercontent.com/17645053/224918701-797699aa-c7e5-4290-b3fe-27dcead1c6c7.png">
* Fix theme-auto loading (#23504)silverwind2023-03-151-0/+1
| | | | | | | | | | | | | | | | | | | | | | | Fix regression from https://github.com/go-gitea/gitea/pull/23481. The conditional on the CSS import was being stripped away by webpack's `css-loader`, resulting in the dark theme always loading. The old syntax with `@import` nested inside `@media` also did not work as `css-loader` (rightfully) ignores such non-standard `@import` syntax that was previously supported by Less. Unfortunately, we have to re-introduce postcss to the CSS pipeline to fix this and I loaded only the minimal plugins to make it work. There is one variant of the fix that does work without postcss, which is to exclude the file from transpilation but I did not consider it as it would have meant the `@import` was being done without a version suffix in the URL, which would have caused cache issue. Related: https://github.com/webpack-contrib/css-loader/issues/1503 --------- Co-authored-by: John Olheiser <john.olheiser@gmail.com>
* Replace Less with CSS (#23481)silverwind2023-03-1466-7676/+8138
| | | | | | | | | | | | 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-1412-243/+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-146-12/+27
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Add Swift package registry (#22404)KN4CK3R2023-03-131-0/+5
| | | | | | This PR adds a [Swift](https://www.swift.org/) package registry. ![grafik](https://user-images.githubusercontent.com/1666336/211842523-07521cbd-8fb6-400f-820c-ee8048b05ae8.png)
* Fix actions frontend bugs (pagination, long name alignment) and small ↵Hester Gong2023-03-133-2/+18
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Scoped label display and documentation tweaks (#23430)Brecht Van Lommel2023-03-131-13/+2
| | | | | | | | | | | * Fix scoped label left and right part breaking across lines. * Remove slanted divider in scoped label display, make it straight. After using this for a while, this feels more visually noisy than helpful. * Reduce contrast between scope and item to reduce probability of unreadable text on background. * Change documentation to remove mention of non-exclusive scoped labels. 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 broken Chroma CSS styles (#23174)wxiaoguang2023-03-094-8/+99
| | | | | | | | | | | | | | | | | | | The CSS styles in Gitea themes are out-of-sync of Chroma's styles. This PR introduces a `chroma-style-diff.go` tool to compare the diff. The missing CSS styles have been added manually. They are left as empty to reduce arguments because there was no color for them before. And this PR fixes #22348, with just 2 lines changed: `.chroma .kt & .n`, these colors are taken from GitHub. It's good enough for #22348 ![image](https://user-images.githubusercontent.com/2114189/221551941-0d27d11d-e71e-498f-8e88-92b558fe4a18.png) --------- Co-authored-by: silverwind <me@silverwind.io>
* Fix and move "Use this template" button (#23398)silverwind2023-03-092-1/+22
| | | | | | | | | | | | | Before: <img width="1157" alt="Screenshot 2023-03-09 at 23 21 25" src="https://user-images.githubusercontent.com/115237/224174168-869966cc-fa59-4231-b449-23bd9db12862.png"> After: <img width="1145" alt="Screenshot 2023-03-09 at 23 24 34" src="https://user-images.githubusercontent.com/115237/224174173-7f5b9c22-44c4-4eed-990c-da49d749eb0e.png"> --------- Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* 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-072-10/+10
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Fix PR view misalignment caused by long name file (#23321)Hester Gong2023-03-061-2/+17
| | | | | | | | | Close #23248 The UI after this PR: https://user-images.githubusercontent.com/17645053/223009758-7f0c9f12-d346-4cb2-a605-729fddce732f.mov
* 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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-31 17:56:25 +0000