73 Commits (0c8b828f5d5ac7eb8e251edfb1f2536ce1c30336)

Author	SHA1	Message	Date
silverwind	69b1e2f103	Remove more unused Fomantic variants (#25292) ... Save another 50KB of CSS by removing unused and useless Fomantic variants. Removed the last instance if a `tertiary` button and fixed a TODO: <img width="509" alt="Screenshot 2023-06-15 at 22 34 36" src="https://github.com/go-gitea/gitea/assets/115237/8a16ae7b-2b17-439b-a096-60a52724e3d6">	1 year ago
wxiaoguang	46c17c8029	Use flex to align SVG and text (#25163) ... The code can be as simple as: ```html <div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div> <div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div> <div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div> ```  --------- Co-authored-by: Giteabot <teabot@gitea.io>	1 year ago
HesterG	a43ea22479	Change form actions to fetch for submit review box (#25219) ... Co-author: @wxiaoguang Close #25096 The way to fix it in this PR is to change form submit to fetch using formData, and add flags to avoid post repeatedly. Should be able to apply to more forms that have the same issue after this PR. In the demo below, 'approve' is clicked several times, and then 'comment' is clicked several time after 'request changes' clicked. After: https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0 Update: screenshots from /devtest >  > >  > >  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>	1 year ago
Jonathan Tran	a583c56306	Change access token UI to select dropdowns (#25109) ... The current UI to create API access tokens uses checkboxes that have a complicated relationship where some need to be checked and/or disabled in certain states. It also requires that a user interact with it to understand what their options really are. This branch changes to use `<select>`s. It better fits the available options, and it's closer to [GitHub's UI](https://github.com/settings/personal-access-tokens/new), which is good, in my opinion. It's more mobile friendly since the tap-areas are larger. If we ever add more permissions, like Maintainer, there's a natural place that doesn't take up more screen real-estate. This branch also fixes a few minor issues: - Hide the error about selecting at least one permission after second submission - Fix help description to call it "authorization" since that's what permissions are about (not authentication) Related: #24767. <img width="883" alt="Screenshot 2023-06-07 at 5 07 34 PM" src="https://github.com/go-gitea/gitea/assets/10803/6b63d807-c9be-4a4b-8e53-ecab6cbb8f76"> --- When it's open: <img width="881" alt="Screenshot 2023-06-07 at 5 07 59 PM" src="https://github.com/go-gitea/gitea/assets/10803/2432c6d0-39c2-4ca4-820e-c878ffdbfb69">	1 year ago
silverwind	6a075589bf	Fix mobile navbar and misc cleanups (#25134) ... - Fix and improve mobile navbar layout - Apply all cleanups suggested in https://github.com/go-gitea/gitea/pull/25111 - Make media query breakpoints match Fomantic's exactly - Clean up whitespace in class on navbar items Mobile navbar before and after: <img width="745" alt="Screenshot 2023-06-08 at 08 40 56" src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28"> <img width="739" alt="Screenshot 2023-06-08 at 08 41 23" src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>	1 year ago
silverwind	623b3b590e	Button and color enhancements (#24989) ... - Various corrections to button styles, especially secondary - Remove focus highlight, it's annoying when it stays on button after press - Clearly define ghost and link buttons with demos in devtest - Remove black, grey and tertiary buttons, they should not be used - Make `arc-green` slightly darker <img width="1226" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/8d89786a-01ab-40f8-ae5a-e17f40e35084"> <img width="1249" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/83651e6d-3c27-46ff-b8bd-ff344d70e949"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>	1 year ago
silverwind	c5ede35124	Add button on diff header to copy file name, misc diff header tweaks (#24986) ... 1. Add this button: <img width="232" alt="Screenshot 2023-05-29 at 15 21 47" src="https://github.com/go-gitea/gitea/assets/115237/5eaf6bd1-83db-4ffc-9503-eda0c59807d2"> <img width="297" alt="Screenshot 2023-05-29 at 15 20 22" src="https://github.com/go-gitea/gitea/assets/115237/708a344f-f6d7-4229-bfda-76e1571b42c8"> 2. Correct `button-link` styles to not have a background hover effect. 3. Tweak `.ui.container` padding to be the same for fluid and non-fluid. 4. Misc enhancements to diff header: Before: <img width="984" alt="Screenshot 2023-05-29 at 15 38 53" src="https://github.com/go-gitea/gitea/assets/115237/c7926f6a-bd0a-4b05-97ad-c91fc25c62d5"> After: <img width="987" alt="Screenshot 2023-05-29 at 15 43 10" src="https://github.com/go-gitea/gitea/assets/115237/0149f545-45f8-42cf-b443-e1c76bd5cdeb">	1 year ago
silverwind	79a4c80f8d	Rework button coloring, add focus and active colors (#24507) ... We were missing overrides for `:focus` and `:active` styles which I've added here along with two new color variants `dark-1` and `dark-2` for them. Fomantic UI has 4 different colors but I think 3 are sufficient. I also changed it on arc-green so button goes darker when pressed. <img width="129" alt="Screenshot 2023-05-04 at 01 21 43" src="https://user-images.githubusercontent.com/115237/236072060-7389276a-275b-4d3e-aa52-20b37c6e6d92.png"> <img width="130" alt="Screenshot 2023-05-04 at 01 17 59" src="https://user-images.githubusercontent.com/115237/236071818-0e46414a-33db-4bb2-a3bd-35b514a8a2d0.png"> <img width="129" alt="Screenshot 2023-05-04 at 01 18 07" src="https://user-images.githubusercontent.com/115237/236071819-562b1e38-541f-432b-b3b6-48e6d7594d00.png"> <img width="131" alt="Screenshot 2023-05-04 at 01 18 13" src="https://user-images.githubusercontent.com/115237/236071820-89b7dba9-ce6c-48e5-a075-9053063e6ad3.png"> <img width="133" alt="Screenshot 2023-05-04 at 01 18 30" src="https://user-images.githubusercontent.com/115237/236071823-b6fe2df4-b3f0-4dc8-97a8-f90ba6d19bec.png"> <img width="133" alt="Screenshot 2023-05-04 at 01 18 40" src="https://user-images.githubusercontent.com/115237/236071824-b02ce61a-2367-4c29-8a25-45f231f5e5ee.png"> One misc change includes some fixes to editor and slightly darker selection. <img width="1245" alt="Screenshot 2023-05-28 at 19 16 19" src="https://github.com/go-gitea/gitea/assets/115237/1ea4a4b6-26ba-45af-9cbc-5b8c476c2338">	1 year ago
silverwind	e4e98979ff	Add PDF rendering via PDFObject (#24086) ... Use [PDFObject](https://pdfobject.com/) to embed PDFs, replacing our outdated PDF.js copy we vendor (the last non-webpack vendoring). [Commit 1](673e0263da) is the PDFObject integration [Commit 2](9336f5769d) is the removal of PDF.js <img width="1251" alt="Screenshot 2023-05-27 at 09 57 52" src="https://github.com/go-gitea/gitea/assets/115237/169ce50c-bd1d-4bb0-86e5-1710bd0400a9"> <img width="1257" alt="Screenshot 2023-05-27 at 10 12 50" src="https://github.com/go-gitea/gitea/assets/115237/318f7ee9-fb11-4093-83e7-17475aa70629"> Fallback for unsupporting browsers (most mobile ones, except Firefox Mobile): <img width="358" alt="Screenshot 2023-05-27 at 09 43 34" src="https://github.com/go-gitea/gitea/assets/115237/8c12d7ba-57d6-4228-89a0-5fef9fad0cbb"> --------- Co-authored-by: Giteabot <teabot@gitea.io>	1 year ago
silverwind	a70d853d06	Consolidate the two review boxes into one (#24738) ... View diff: https://github.com/go-gitea/gitea/pull/24738/files?diff=unified&w=1 Improve layout and functionality in review area: <img width="439" alt="Screenshot 2023-05-15 at 20 10 01" src="https://github.com/go-gitea/gitea/assets/115237/be10452b-5829-4927-8801-7b26a57b3dbd"> Remove the "Reviewers" timeline box that appears before the merge box. it's a duplicate of the top-right review area and all functionality of it has been moved to the other box: <img width="868" alt="Screenshot 2023-05-15 at 19 39 31" src="https://github.com/go-gitea/gitea/assets/115237/35489445-e54b-40d3-b3cf-38d029478f96"> Increase timeline item vertical padding from 12px to 16px: <img width="449" alt="Screenshot 2023-05-15 at 19 43 50" src="https://github.com/go-gitea/gitea/assets/115237/919c4f9d-a485-4f51-b08c-2c0fc714a413"> --------- Co-authored-by: Giteabot <teabot@gitea.io>	1 year ago
silverwind	a2e5c3c963	Replace Fomantic reset module with our own (#24948) ... Replace the `reset` module with a modern version based on [modern-normalize](https://github.com/sindresorhus/modern-normalize). The only things I removed from that module are the `font-family` rules we don't need. Otherwise, it's similar to Fomantic's reset, but with the legacy IE stuff removed. I documented every change done to the module. Also this introduces a new `--tab-size` variable but it has no real effect on code yet.	1 year ago
silverwind	19993d8814	Change `--font-weight-bold` to `--font-weight-semibold` and 600 value, 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.	2 years ago
silverwind	1e1e8b5d43	Fix OAuth loading state (#24788) ... Fix regression from https://github.com/go-gitea/gitea/pull/24740 where the loading state was not showing because the `oauth-login-image` class was removed. Replaced the Fomantic loader with a pure CSS loader and cleaned up the HTML. Diff: https://github.com/go-gitea/gitea/pull/24788/files?diff=unified&w=1  Co-authored-by: Giteabot <teabot@gitea.io>	2 years ago
silverwind	b926f96da7	Reorganize CSS files (#24739) ... Reorganize various CSS files for clarity, group together by subdirectory in `index.css`. This reorders some of the rules, but I don't think it should introduce any issues because of that.	2 years ago
silverwind	b92c142c97	Clean up various avatar dimensions (#24701) ... Clean up a few cases where avatar dimensions were overwritten via CSS, which were no longer needed or were possible to set via HTML width. Also included are two small fixes: - Fix one more case of incorrect avatar offset on review timeline - Vertically center avatars in review sidebar There is more to be done here, but some of the work depends on Fomantic `comment` module removal, or in the case of org member lists, a refactor of the `avatarlink` template to accept a size. <img width="371" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/9c5902fb-2b89-4a7d-a152-60e74c3b2c56"> <img width="306" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/c8d92e2a-91c9-4f4a-a7de-6ae1a6bc0479"> --------- Co-authored-by: Giteabot <teabot@gitea.io>	2 years ago
silverwind	11552a779f	Remove Fomantic comment module (#24703) ... Remove the comment module and put the styles that we still need into a separate file, eliminating about 2/3 of the CSS in line count.	2 years ago
wxiaoguang	82224c54e0	Improve avatar uploading / resizing / compressing, remove Fomantic card module (#24653) ... Fixes: #8972 Fixes: #24263 And I think it also (partially) fix #24263 (no need to convert) , because users could upload any supported image format if it isn't larger than AVATAR_MAX_ORIGIN_SIZE The main idea: * if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE, use the origin * if the resized size is larger than the origin, use the origin Screenshots: JPG: <details>  </details> APNG: <details>   </details> WebP (animated) <details>  </details> The only exception: if a WebP image is larger than MaxOriginSize and it is animated, then current `webp` package can't decode it, so only in this case it isn't supported. IMO no need to support such case: why a user would upload a 1MB animated webp as avatar? crazy ..... --------- Co-authored-by: silverwind <me@silverwind.io>	2 years ago
yp05327	b5c26fa825	Add markdown preview to Submit Review Textarea (#24672) ... Before:  After:  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>	2 years ago
silverwind	5adf32b48e	Remove fomantic breadcrumb module (#24463) ... ### File path before/after <img width="522" alt="Screenshot 2023-05-01 at 13 23 33" src="https://user-images.githubusercontent.com/115237/235445636-57776038-c98e-4cab-8abe-045138a76958.png"> <img width="522" alt="Screenshot 2023-05-01 at 13 24 08" src="https://user-images.githubusercontent.com/115237/235445638-70bef62a-1b70-41f8-ba51-728db4d54402.png"> ### File edit before/after <img width="499" alt="Screenshot 2023-05-01 at 13 24 46" src="https://user-images.githubusercontent.com/115237/235445676-7b3cc23e-289b-40a6-8d4f-0d7fb2efb55e.png"> <img width="497" alt="Screenshot 2023-05-01 at 13 24 52" src="https://user-images.githubusercontent.com/115237/235445677-db9f3974-8456-46de-a32b-9198110c0540.png"> ### Cherry-pick before/after <img width="590" alt="Screenshot 2023-05-01 at 13 25 30" src="https://user-images.githubusercontent.com/115237/235445717-99445024-1bb2-46d4-9bd8-8086bad57d34.png"> <img width="582" alt="Screenshot 2023-05-01 at 13 25 37" src="https://user-images.githubusercontent.com/115237/235445720-9c1dc497-eb23-4e10-a727-27f4d6df69e6.png">	2 years ago
sillyguodong	e8173c2c33	Move `Rename branch` from repo settings page to the page of branches list (#24380) ... Co-Author: @wxiaoguang It is more convenient that user just need to enter a new branch name after he selects the branch which he want to rename. So this PR move the function of renaming branch to the page of branches list. This PR also restyle the button of `new branch`, `download`, `delete`.... https://user-images.githubusercontent.com/33891828/235277997-413060bb-759f-430a-b5c4-df5e40ffcd28.mov --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>	2 years ago
wxiaoguang	75c62054a6	Improve some modal action buttons (#24289) ... Follow #24097 and #24285 And add a devtest page for modal action button testing. http://localhost:3000/devtest/fomantic-modal Now the `modal_actions_confirm.tmpl` could support: green / blue / yellow positive buttons, the negative button is "secondary". ps: this PR is only a small improvement, there are still a lot of buttons not having proper colors. In the future these buttons could be improved by this approach. These buttons could also be improved according to the conclusion of #24285 in the future.  And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312)  --------- Co-authored-by: silverwind <me@silverwind.io>	2 years ago
Hester Gong	476a043a5f	Refactor delete_modal_actions template and use it for project column related actions (#24097) ... Co-Author: @wxiaoguang This PR is to fix https://github.com/go-gitea/gitea/issues/23318#issuecomment-1506275446 . The way to fix this in this PR is to use `delete_modal_actions.tmpl` here both to fix this issue and keep ui consistency (as suggested by [TODO here](4299c3b7db/templates/projects/view.tmpl (L161))) And this PR also refactors `delete_modal_actions.tmpl` and its related styles, and use the template for more modal actions: 1. Added template attributes: * locale * ModalButtonStyle: "yes" (default) or "confirm" * ModalButtonCancelText * ModalButtonOkText 2. Rename `delete_modal_actions.tmpl` template to `modal_actions_confirm.tmpl` because it is not only used for action modals deletion now. 3. Refactored css related to modals into `web_src/css/modules/modal.css` and improved the styles. 4. Also use the template for PR deletion modal and remove issue dependency modal. 5. Some modals should also use the template, but not sure how to open them, so mark these modal actions by `{{/* TODO: Convert to base/modal_actions_confirm */}}` After (Also tested on arc green): Hovering on the left buttons <img width="711" alt="Screen Shot 2023-04-23 at 15 17 12" src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png"> <img width="786" alt="Screen Shot 2023-04-23 at 15 17 21" src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png"> Test for functionalities: https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>	2 years ago
silverwind	202803fc69	Replace Less with CSS (#23481) ... 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	2 years ago