summaryrefslogtreecommitdiffstats
path: root/templates/base
Commit message (Collapse)AuthorAgeFilesLines
* Button and color enhancements (#24989) (#25176)silverwind2023-06-111-1/+1
| | | | | | | | | | | | | | | | | | Backport #24989. Clean cherry-pick aside from one small conflict with divider. - 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">
* Fix mobile navbar and misc cleanups (#25134) (#25169)Giteabot2023-06-111-78/+67
| | | | | | | | | | | | | | | Backport #25134 by @silverwind - 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">
* Improve notification icon and navbar (#25111) (#25124)Giteabot2023-06-082-7/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Backport #25111 by @silverwind Improvements to the notification icon and `<nav>`: - Add a opaque color for header hover and use it, allowing the border to be the right color on hover (sadly, not otherwise possible with CSS, not even `color-mix`). - Increase font size by 1px - Use flexbox for slightly better text centering - Reduce padding of user and add repo button, add margin on right side of user menu - Remove the `following bar` wrapper on navbar <img width="176" alt="Screenshot 2023-06-07 at 00 07 08" src="https://github.com/go-gitea/gitea/assets/115237/23cdc3d6-7f63-49df-bec3-f2e75e32a304"> <img width="63" alt="Screenshot 2023-06-07 at 00 07 14" src="https://github.com/go-gitea/gitea/assets/115237/fae602c2-4467-4d50-b1ec-56317843f9a2"> <img width="84" alt="Screenshot 2023-06-07 at 00 07 36" src="https://github.com/go-gitea/gitea/assets/115237/c48141b8-0b3c-48cc-846a-3a272524dbdb"> <img width="329" alt="Screenshot 2023-06-07 at 00 25 10" src="https://github.com/go-gitea/gitea/assets/115237/cda612f1-426e-466b-a351-fc992bfd18fd"> <img width="186" alt="Screenshot 2023-06-07 at 00 35 45" src="https://github.com/go-gitea/gitea/assets/115237/04484a2e-9bbf-493c-aa26-8e936da008fa"> <img width="797" alt="Screenshot 2023-06-07 at 16 57 40" src="https://github.com/go-gitea/gitea/assets/115237/e7ccb672-5807-4cb6-b306-b18ae0c7e321"> --------- Co-authored-by: silverwind <me@silverwind.io>
* Remove the service worker (#25010)silverwind2023-05-311-1/+0
| | | | | | | | | | | | | It's been disabled by default since 1.17 (https://github.com/go-gitea/gitea/pull/18914), and it never really delivered any benefit except being another cache layer that has its own unsolved invalidation issues. HTTP cache works, we don't need two cache layers at the browser for assets. ## :warning: BREAKING You can remove the config `[ui].USE_SERVICE_WORKER` from your `app.ini` now.
* Remove meta tags `theme-color` and `default-theme` (#24960)silverwind2023-05-282-3/+1
| | | | | | | | | | | | | | | | As discussed in https://github.com/go-gitea/gitea/pull/24953#issuecomment-1565630156. ## :warning: BREAKING :warning: 1. The `ui.THEME_COLOR_META_TAG` setting has been removed. If you still need to set the `theme-color` meta tag, add it via `$GITEA_CUSTOM/templates/custom/header.tmpl` instead. 2. The non-standard `default-theme` meta-tag added in https://github.com/go-gitea/gitea/pull/13809 has been removed. Third party code that needs to obtain the currently loaded theme should use the `theme-<name>` class on the `<html>` node instead, which reflect the currently active theme.
* Make the 500 page load themes (#24953)silverwind2023-05-272-10/+11
| | | | | | | | | | | | | | The 500 page was not loading theme CSS, so always appeared in light theme. This extracts the stylesheets into a shared template used by all pages. <img width="1262" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/72222b8d-a523-40d0-aa91-b9db32e5625d"> Small related rant: I think there should only be one `<head>` in all of the templates, but I see it was deliberatly done that the 500 page has its own `<head>` because "it should only depend the minimal template functions", but I disagree because we are missing a lot of things that are in the regular `<head>`.
* Remove meta charset from HTML5 documents (#24744)silverwind2023-05-161-1/+0
| | | | | | | When `<!DOCTYPE html>` is present, the default (and only valid) charset it `utf-8` so it does not need to be specified. Also we do serve with HTML with `Content-Type: text/html; charset=utf-8`, so it is duplicate info anyways.
* Improve template system and panic recovery (#24461)wxiaoguang2023-05-041-1/+0
| | | | | | | | | | | | | | | | | | | | | | | | | Partially for #24457 Major changes: 1. The old `signedUserNameStringPointerKey` is quite hacky, use `ctx.Data[SignedUser]` instead 2. Move duplicate code from `Contexter` to `CommonTemplateContextData` 3. Remove incorrect copying&pasting code `ctx.Data["Err_Password"] = true` in API handlers 4. Use one unique `RenderPanicErrorPage` for panic error page rendering 5. Move `stripSlashesMiddleware` to be the first middleware 6. Install global panic recovery handler, it works for both `install` and `web` 7. Make `500.tmpl` only depend minimal template functions/variables, avoid triggering new panics Screenshot: <details> ![image](https://user-images.githubusercontent.com/2114189/235444895-cecbabb8-e7dc-4360-a31c-b982d11946a7.png) </details>
* Clean up polluted styles and remove dead CSS code (#24497)wxiaoguang2023-05-031-4/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follow #24393 The funny history: * At the beginning, `.ui.message` was polluted by `text-align: center` * Then people do `<div class="ui ... message text left">` * But `.ui.left` is polluted by `float: left` * Then people do `#xxx .ui.message { width: 100% !important;}` The code just becomes more and more hacky. After removing the pollution, everything becomes clear and straight. And, this PR also does: 1. Remove the `package.css`, its styles could be provided by `top aligned` 2. Remove `#avatar-arrow`, dead code Screenshot: ![image](https://user-images.githubusercontent.com/2114189/235862130-a9eb5d8f-7d01-457c-99f7-21d0abc3075e.png) ![image](https://user-images.githubusercontent.com/2114189/235862222-139709a7-95c2-4f89-a40f-100b2d76d9bb.png) Co-authored-by: Giteabot <teabot@gitea.io>
* Start cleaning the messy ".ui.left / .ui.right", improve label list page, ↵wxiaoguang2023-04-292-4/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | fix stackable menu (#24393) Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right". Fomantic UI doesn't work this way, it just conflicts with many Fomantic definitions. This PR starts the cleaning work of such techinical debts. And, the "label list" page has been quite messy for long time, for example, why "li" appears in "div" ...... And fix #24296 <details> ![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png) ![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png) ![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png) ![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png) ![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png) </details>
* Don't set meta `theme-color` by default (#24340)silverwind2023-04-261-1/+1
| | | | | | | | | | | Fixes https://github.com/go-gitea/gitea/issues/24321. By not setting this meta tag, Safari will use body color for chrome and out-of-viewport areas, which looks much better then static mismatching green. As per [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) it's really only Apple browsers who still support this tag, most others have dropped support.
* Improve some modal action buttons (#24289)wxiaoguang2023-04-241-10/+27
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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. ![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png) And add GitHub-like single danger button (context: https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312) ![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png) --------- Co-authored-by: silverwind <me@silverwind.io>
* Refactor delete_modal_actions template and use it for project column related ↵Hester Gong2023-04-232-10/+21
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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](https://github.com/go-gitea/gitea/blob/4299c3b7db61f8741eca0ba3d663bb65745a4acc/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>
* Refactor `setting.Other` and remove unused `SHOW_FOOTER_BRANDING` (#24270)wxiaoguang2023-04-221-3/+0
| | | | | | | | | | The `SHOW_FOOTER_BRANDING` came from year 2015, and it seems nobody ever uses it. It only shows an GitHub icon which seems unrelated to Gitea, it doesn't do what document says. So, remove it. ## :warning: Breaking Users can now remove the key `[other].SHOW_FOOTER_BRANDING` from their app.ini.
* Fix footer display (#24251)wxiaoguang2023-04-221-29/+27
| | | | | | | | | | | | | | | | | | | | | | | Fix #24249 Diff with ignoring spaces: https://github.com/go-gitea/gitea/pull/24251/files?diff=split&w=1 Screenshots: <details> <img width="1440" alt="image" src="https://user-images.githubusercontent.com/2114189/233592840-d9ef7296-64eb-4e48-a598-300807a7c2f9.png"> <img width="923" alt="image" src="https://user-images.githubusercontent.com/2114189/233593015-16edc531-43c2-4ff0-b27e-ca75dbadce0c.png"> </details> --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix unclear "Owner" concept (#24233)wxiaoguang2023-04-201-5/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | | Some user/org pages use `Owner` variable. It's an incorrect concept since year 2016: what is a user's owner? Actually, new code is right: use `ContextUser`. This PR cleans all legacy "Owner" variables. ## Screenshots for related pages and test results All pages are as before: ### `web/org/home.go` ![image](https://user-images.githubusercontent.com/2114189/233366687-a3643025-1f78-474d-a901-deea35b72f4d.png) ### `web/user/profile.go` ![image](https://user-images.githubusercontent.com/2114189/233366812-2e5c2fbc-3f78-44e7-88c1-ec2f612c241e.png) ### `web/user/setting/profile.go` ![image](https://user-images.githubusercontent.com/2114189/233366928-7a1e52c9-b400-4379-a4be-af06a853c5fa.png)
* Show friendly 500 error page to users and developers (#24110)wxiaoguang2023-04-141-0/+1
| | | | | | | | | | | | | | | | | | | | | | Close #24104 This also introduces many tests to cover many complex error handling functions. ### Before The details are never shown in production. <details> ![image](https://user-images.githubusercontent.com/2114189/231805004-13214579-4fbe-465a-821c-be75c2749097.png) </details> ### After The details could be shown to site admin users. It is safe. ![image](https://user-images.githubusercontent.com/2114189/231803912-d5660994-416f-4b27-a4f1-a4cc962091d4.png)
* Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)wxiaoguang2023-04-031-14/+10
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Fine tune more downdrop settings, use SVG for labels, improve Repo Topic ↵wxiaoguang2023-03-261-3/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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)
* Use data-tooltip-content for tippy tooltip (#23649)wxiaoguang2023-03-241-11/+9
| | | | | | | | | | | | | | | | | Follow: * #23574 * Remove all ".tooltip[data-content=...]" Major changes: * Remove "tooltip" class, use "[data-tooltip-content=...]" instead of ".tooltip[data-content=...]" * Remove legacy `data-position`, it's dead code since last Fomantic Tooltip -> Tippy Tooltip refactoring * Rename reaction attribute from `data-content` to `data-reaction-content` * Add comments for some `data-content`: `{{/* used by the form */}}` * Remove empty "ui" class * Use "text color" for SVG icons (a few)
* Use a general approch to improve a11y for all checkboxes and dropdowns. (#23542)wxiaoguang2023-03-221-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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.
* Use `<nav>` instead of `<div>` in the global navbar (#23125)delvh2023-03-171-6/+6
| | | | | | | | | Furthermore improved/deleted some comments in the template. The appearance did not change. --------- Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Fix aria.js bugs: incorrect role element problem, mobile focus problem, ↵wxiaoguang2023-03-171-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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>
* Convert `<div class="button">` to `<button class="button">` (#23337)delvh2023-03-141-4/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | 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 various bugs for "install" page (#23194)wxiaoguang2023-03-041-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ## TLDR * Fix the broken page / broken image problem when click "Install" * Close #20089 * Fix the Password Hash Algorithm display problem for #22942 * Close #23183 * Close #23184 ## Details ### The broken page / broken image problem when click "Install" (Redirect failed after install gitea #23184) Before: when click "install", all new requests will fail, because the server has been restarted. Users just see a broken page with broken images, sometimes the server is not ready but the user would have been redirect to "/user/login" page, then the users see a new broken page (connection refused or something wrong ...) After: only check InstallLock=true for necessary handlers, and sleep for a while before restarting the server, then the browser has enough time to load the "post-install" page. And there is a script to check whether "/user/login" is ready, the user will only be redirected to the login page when the server is ready. ### During new instance setup make 'Gitea Base URL' filled from window.location.origin #20089 If the "app_url" input contains `localhost` (the default value from config), use current window's location href as the `app_url` (aka ROOT_URL) ### Fix the Password Hash Algorithm display problem for "Provide the ability to set password hash algorithm parameters #22942" Before: the UI shows `pbkdf2$50000$50` <details> ![image](https://user-images.githubusercontent.com/2114189/221917143-e1e54798-1698-4fee-a18d-00c48081fc39.png) </details> After: the UI shows `pbkdf2` <details> ![image](https://user-images.githubusercontent.com/2114189/221916999-97a15be8-2ebb-4a01-bf93-dac18e354fcc.png) </details> ### GET data: net::ERR_INVALID_URL #23183 Cause by empty `data:` in `<link rel="manifest" href="data:{{.ManifestData}}">` --------- Co-authored-by: Jason Song <i@wolfogre.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
* Add accessibility to the menu on the navbar (#23059)HesterG2023-02-221-2/+2
| | | | | | | | This PR is trying to add accessibility to the menu as mentioned in #23053 so the menu can be accessed using keyboard (A quick demo is added below), with a reference to [PR2612](https://github.com/go-gitea/gitea/pull/22612). The goal is to make the menu accessible merely using keyboard like shown below. And this PR might need confirmation from developers using screen readers.
* Introduce customized HTML elements, fix incorrect AppUrl usages in templates ↵wxiaoguang2023-02-171-0/+1
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | (#22861) This PR follows: * #21986 * #22831 This PR also introduce customized HTML elements, which would also help problems like: * #17760 * #21429 * #21440 With customized HTML elements, there won't be any load-search-replace operations, and it can avoid page flicking (which @silverwind cares a lot). Browser support: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements # FAQ ## Why the component has the prefix? As usual, I would strongly suggest to add prefixes for our own/private names. The dedicated prefix will avoid conflicts in the future, and it makes it easier to introduce various 3rd components, like GitHub's `relative-time` component. If there is no prefix, it's impossible to introduce another public component with the same name in the future. ## Why the `custcomp.js` is loaded before HTML body? The `index.js` is after HTML body. Customized components must be registered before the content loading. Otherwise there would be still some flicking. `custcomp.js` should have its own dependencies and should be very light, so it won't affect the page loading time too much. ## Why use `data-url` attribute but not use the `textContent`? According to the standard, the `connectedCallback` occurs on the tag-opening moment. The element's children are not ready yet. ## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide the absolute URL? It's difficult for backend to guess the correct protocol(scheme) correctly with zero configuration. Generating the absolute URL from frontend can guarantee that the URL is 100% correct -- since the user is visiting it. # Screenshot <details> ![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png) </details>
* Add context cache as a request level cache (#22294)Lunny Xiao2023-02-153-8/+8
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | To avoid duplicated load of the same data in an HTTP request, we can set a context cache to do that. i.e. Some pages may load a user from a database with the same id in different areas on the same page. But the code is hidden in two different deep logic. How should we share the user? As a result of this PR, now if both entry functions accept `context.Context` as the first parameter and we just need to refactor `GetUserByID` to reuse the user from the context cache. Then it will not be loaded twice on an HTTP request. But of course, sometimes we would like to reload an object from the database, that's why `RemoveContextData` is also exposed. The core context cache is here. It defines a new context ```go type cacheContext struct { ctx context.Context data map[any]map[any]any lock sync.RWMutex } var cacheContextKey = struct{}{} func WithCacheContext(ctx context.Context) context.Context { return context.WithValue(ctx, cacheContextKey, &cacheContext{ ctx: ctx, data: make(map[any]map[any]any), }) } ``` Then you can use the below 4 methods to read/write/del the data within the same context. ```go func GetContextData(ctx context.Context, tp, key any) any func SetContextData(ctx context.Context, tp, key, value any) func RemoveContextData(ctx context.Context, tp, key any) func GetWithContextCache[T any](ctx context.Context, cacheGroupKey string, cacheTargetID any, f func() (T, error)) (T, error) ``` Then let's take a look at how `system.GetString` implement it. ```go func GetSetting(ctx context.Context, key string) (string, error) { return cache.GetWithContextCache(ctx, contextCacheKey, key, func() (string, error) { return cache.GetString(genSettingCacheKey(key), func() (string, error) { res, err := GetSettingNoCache(ctx, key) if err != nil { return "", err } return res.SettingValue, nil }) }) } ``` First, it will check if context data include the setting object with the key. If not, it will query from the global cache which may be memory or a Redis cache. If not, it will get the object from the database. In the end, if the object gets from the global cache or database, it will be set into the context cache. An object stored in the context cache will only be destroyed after the context disappeared.
* Move helpers to be prefixed with `gt-` (#22879)zeripath2023-02-132-20/+20
| | | | | | | | | | | | | | | | | | | | As discussed in #22847 the helpers in helpers.less need to have a separate prefix as they are causing conflicts with fomantic styles This will allow us to have the `.gt-hidden { display:none !important; }` style that is needed to for the reverted PR. Of note in doing this I have noticed that there was already a conflict with at least one chroma style which this PR now avoids. I've also added in the `gt-hidden` style that matches the tailwind one and switched the code that needed it to use that. Signed-off-by: Andrew Thornton <art27@cantab.net> --------- Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Improve notification and stopwatch styles (#22169)silverwind2023-02-091-24/+24
| | | | | | | | | | | | | | | - Add dot-style indicators to notification and time tracker - Slightly reduce whitespace between right-aligned icons - Move notification icon to right on mobile - Switch menu icon to SVG <img width="270" alt="Screenshot 2022-12-19 at 19 40 32" src="https://user-images.githubusercontent.com/115237/208496795-ce8734a0-f109-47b7-8eb8-96931e867b23.png"> <img width="607" alt="Screenshot 2022-12-19 at 19 41 04" src="https://user-images.githubusercontent.com/115237/208496797-2ff68197-f520-4174-927e-ead15addd63e.png"> --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Add new captcha: cloudflare turnstile (#22369)ByLCY2023-02-051-2/+5
| | | | | | | | | Added a new captcha(cloudflare turnstile) and its corresponding document. Cloudflare turnstile official instructions are here: https://developers.cloudflare.com/turnstile Signed-off-by: ByLCY <bylcy@bylcy.dev> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Jason Song <i@wolfogre.com>
* Improve accessibility of navigation bar and footer (#22635)Felipe Leopoldo Sologuren Gutiérrez2023-01-292-4/+4
| | | | | | | | | | Added ARIA navigation landmark to navigation bar and aria label for both nav bar and footer. Contributed by @forgejo. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* Simplify the error message when `index.js` couldn't be loaded (#22354)wxiaoguang2023-01-171-1/+1
| | | | | | | | | | | In some cases, the loading failure of `index.js` is not related to the ROOT_URL directly, ex: https://gitea.com/gitea/helm-chart/issues/392 If the user's reversed proxy is mis-configured: `http://public-domain/gitea/xxx` -> `http://gitea:3000/gitea/xxx`, it also causes the loading failure. So this PR removes the ROOT_URL related tip from the error message.
* fix wrong theme class when logged out if default theme is changed (#22408)crystal2023-01-121-1/+1
| | | | | If you don't use the `auto` theme as the default, the `<html>` tag has `theme-auto` as it's class when users are logged out. This PR changes it to use the correct theme class for the default theme when logged out.
* Don't display stop watch top bar icon when disabled and hidden when click ↵Lunny Xiao2023-01-091-0/+2
| | | | | | | | | | | other place (#22374) Fix #22286 When timetracking is disabled, the stop watch top bar icon should be hidden. When the stop watch recording popup, it should be allowed to hide with some operation. Now click any place on this page will hide the popup window.
* Optimize html templates (#22080)Jason Song2022-12-092-3/+3
| | | Replace `active{{end}} item` with `active{{end}} item`.
* fix(web): keep the pages of the navigation in the center (#21867)Percy Ma2022-11-251-1/+1
| | | | | | | | | | | | | | | | | | | | | | | | Keep the pages of the navigation in the center <table> <tr> <th>Before</th> <th>After</th> </tr> <tr> <td> <img width="200" alt="image" src="https://user-images.githubusercontent.com/45708948/202838756-d6d57b3f-8144-4a43-a33b-ea7c8ab3a495.png"> </td> <td> <img width="192" alt="image" src="https://user-images.githubusercontent.com/45708948/202838740-bbae1e86-b14c-421d-92d4-d0e53d5952a2.png"> </td> </tr> </table> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: John Olheiser <john.olheiser@gmail.com>
* Allow disable RSS/Atom feed (#21622)Xinyu Zhou2022-11-211-1/+1
| | | | | | | This patch provide a mechanism to disable RSS/Atom feed. Signed-off-by: Xinyu Zhou <i@sourcehut.net> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: 6543 <6543@obermui.de>
* Remove useless `appVer` from JS `window.config` (#21445)wxiaoguang2022-10-141-1/+0
| | | | The only usage of `appVer` was in serviceworker.js, while indeed it needs the asset version.
* Removed one extra whitespace in footer after "Template" (#21364)Michael Horstmann2022-10-081-2/+1
|
* Fix default theme-auto selector when nologin (#21346)rock2dust2022-10-061-1/+1
| | | | | | | | | | the bug is theme selector is `theme-` when not login to Gitea ![theme-auto](https://user-images.githubusercontent.com/76462613/194099390-0ff6854a-1eb9-4dba-bb28-fd238f2225f8.png) Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Remove extra space from title element (#21345)rock2dust2022-10-051-1/+1
| | | | | Removes a spurious additional space in the head template. ![](https://user-images.githubusercontent.com/76462613/194077336-1e757242-6f92-4238-8856-746b2e9a1a2c.png)
* Add pages to view watched repos and subscribed issues/PRs (#17156)qwerty2872022-09-291-0/+4
| | | | | | | | | | | | | | | | | Adds GitHub-like pages to view watched repos and subscribed issues/PRs This is my second try to fix this, but it is better than the first since it doesn't uses a filter option which could be slow when accessing `/issues` or `/pulls` and it shows both pulls and issues (the first try is #17053). Closes #16111 Replaces and closes #17053 ![Screenshot](https://user-images.githubusercontent.com/80460567/134782937-3112f7da-425a-45b6-9511-5c9695aee896.png) Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Remove fomantic image module (#21145)silverwind2022-09-121-1/+1
| | | | | | | | | Remove this small, but unnecessary [module](https://fomantic-ui.com/elements/image.html) and use `img` selector over previous `.image`. Did a few tests, could not notice any visual regression. Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lauris BH <lauris@nix.lv>
* Support Issue forms and PR forms (#20987)Jason Song2022-09-021-0/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | * feat: extend issue template for yaml * feat: support yaml template * feat: render form to markdown * feat: support yaml template for pr * chore: rename to Fields * feat: template unmarshal * feat: split template * feat: render to markdown * feat: use full name as template file name * chore: remove useless file * feat: use dropdown of fomantic ui * feat: update input style * docs: more comments * fix: render text without render * chore: fix lint error * fix: support use description as about in markdown * fix: add field class in form * chore: generate swagger * feat: validate template * feat: support is_nummber and regex * test: fix broken unit tests * fix: ignore empty body of md template * fix: make multiple easymde editors work in one page * feat: better UI * fix: js error in pr form * chore: generate swagger * feat: support regex validation * chore: generate swagger * fix: refresh each markdown editor * chore: give up required validation * fix: correct issue template candidates * fix: correct checkboxes style * chore: ignore .hugo_build.lock in docs * docs: separate out a new doc for merge templates * docs: introduce syntax of yaml template * feat: show a alert for invalid templates * test: add case for a valid template * fix: correct attributes of required checkbox * fix: add class not-under-easymde for dropzone * fix: use more back-quotes * chore: remove translation in zh-CN * fix EasyMDE statusbar margin * fix: remove repeated blocks * fix: reuse regex for quotes Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Add whitespace removal inside template curly brackes (#20853)silverwind2022-08-253-9/+9
|
* Enable contenthash in filename for dynamic assets (#20813)silverwind2022-08-233-4/+5
| | | | | This should solve the main problem of dynamic assets getting stale after a version upgrade. Everything not affected will use query-string based cache busting, which includes files loaded via HTML or worker scripts.
* Move the official website link at the footer of gitea (#20777)PEN²2022-08-121-2/+1
|
* Use separate class for tippy targets (#20742)silverwind2022-08-101-1/+1
| | | | | | Previous solution that re-purposed the 'hide' class by making it `!important` had various unintended side-effects where jQuery .show() was not able to outweight it. Use a separate class to prevent these interactions.
* Replace fomantic popup module with tippy.js (#20428)silverwind2022-08-091-2/+4
| | | | | | | | - replace fomantic popup module with tippy.js - fix chaining and add comment - add 100ms delay to tooltips - stopwatch improvments, raise default maxWidth - update web_src/js/features/common-global.js - use type=submit instead of js