summaryrefslogtreecommitdiffstats
path: root/templates/base
Commit message (Collapse)AuthorAgeFilesLines
* Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419)silverwind2023-10-062-8/+2
| | | | | | | | | | | | | | | | | | | | | | | | | Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* Fix more "locale" usages (#27259)wxiaoguang2023-09-252-5/+5
|
* Always use `ctx.Locale.Tr` inside templates (#27231)delvh2023-09-254-54/+54
|
* cleanup locale function usage (#27227)Denys Konovalov2023-09-241-7/+4
|
* Change green buttons to primary color (#27099)silverwind2023-09-181-3/+3
| | | | | | | | | | | | | | | | | | | | | | | | I think it's better if the primary actions have primary color instead of green which fits better into the overall single-color UI design. This PR currently replaces every green button with primary: <img width="141" alt="Screenshot 2023-09-16 at 14 07 59" src="https://github.com/go-gitea/gitea/assets/115237/843c1e50-4fb2-4ec6-84ba-0efb9472dcbe"> <img width="161" alt="Screenshot 2023-09-16 at 14 07 51" src="https://github.com/go-gitea/gitea/assets/115237/9442195a-a3b2-4a42-b262-8377d6f5c0d1"> Modal actions now use uncolored/primary instead of previous green/red colors. I also removed the box-shadow on all basic buttons: <img width="259" alt="Screenshot 2023-09-16 at 14 16 39" src="https://github.com/go-gitea/gitea/assets/115237/5beea529-127a-44b0-8d4c-afa7b034a490"> <img width="261" alt="Screenshot 2023-09-16 at 14 17 42" src="https://github.com/go-gitea/gitea/assets/115237/4757f7b2-4d46-49bc-a797-38bb28437b88"> The change currently includes the "Merge PR" button, for which we might want to make an exception to match the icon color there: <img width="442" alt="Screenshot 2023-09-16 at 14 33 53" src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
* update footer link to new landing page (#26916)techknowlogick2023-09-051-1/+1
| | | | | as title Co-authored-by: Giteabot <teabot@gitea.io>
* Refactor `og:description` to limit the max length (#26876)wxiaoguang2023-09-031-5/+10
| | | | | | | | 1. The `og:description` should be "a one to two sentence description of your object" * It shouldn't output all the user inputted content -- it would be pretty huge. * Maybe it only needs at most 300 bytes. 2. Do not render commit message as HTML
* Improve opengraph previews (#26851)Linus Groh2023-09-012-36/+43
| | | | | | | | | | | | Add more useful Open Graph metadata for commit and file URLs: - Set `og:title` to the page title, which is a concise summary in both cases (`<commit message> · <commit hash>` and `<filename> at <branch>`, respectively) - Set `og:description` to the commit message body, if available - Set `og:url` to the relevant URLs instead of the repo URL Also move the relevant meta tags into a separate template as they now take up the majority of the base head template.
* Move licenses.txt to /assets directory (#26866)silverwind2023-09-011-1/+1
| | | | | | | | | Now that we have the `/assets` directory, we can put`licenses.txt` directly into it instead of incorrect `/js` path which was previously only done to avoid reserving a username. --------- Co-authored-by: Giteabot <teabot@gitea.io>
* Use docs.gitea.com instead of docs.gitea.io (#26739)Lunny Xiao2023-08-271-2/+2
|
* Check disabled workflow when rerun jobs (#26535)yp053272023-08-221-0/+2
| | | | | | | | In GitHub, we can not rerun jobs if the workflow is disabled. --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* Use template context function for avatar rendering (#26385)wxiaoguang2023-08-101-2/+2
| | | | Introduce `AvatarUtils`, no need to pass `$.Context` to every sub-template, and simplify the template helper functions.
* Start using template context function (#26254)wxiaoguang2023-08-082-7/+10
| | | | | | | | | | | | | | | | | | | | | | Before: * `{{.locale.Tr ...}}` * `{{$.locale.Tr ...}}` * `{{$.root.locale.Tr ...}}` * `{{template "sub" .}}` * `{{template "sub" (dict "locale" $.locale)}}` * `{{template "sub" (dict "root" $)}}` * ..... With context function: only need to `{{ctx.Locale.Tr ...}}` The "ctx" could be considered as a super-global variable for all templates including sub-templates. To avoid potential risks (any bug in the template context function package), this PR only starts using "ctx" in "head.tmpl" and "footer.tmpl" and it has a "DataRaceCheck". If there is anything wrong, the code can be fixed or reverted easily.
* Enable H014 and H023 djlint rules (#25786)silverwind2023-07-091-1/+0
| | | | | | | | | | | | Enable these rules: - H014 | More than 2 blank lines. - H023 | Do not use entity references. There are more potential rules to enable but they are blocked by bugs in the linter: - https://github.com/Riverside-Healthcare/djLint/issues/711 - https://github.com/Riverside-Healthcare/djLint/issues/712
* Align language menu icon and fit the footer area (#25556)wxiaoguang2023-06-281-1/+1
| | | | Close #25551
* Use JSON response for "user/logout" (#25522)wxiaoguang2023-06-261-2/+2
| | | | The request sent to "user/logout" is from "link-action", it expects to get JSON response.
* Navbar fixes (#25402)silverwind2023-06-241-3/+3
| | | | | | | | | | | | | | | | Fixes: https://github.com/go-gitea/gitea/issues/25444 Followup for some regressions from https://github.com/go-gitea/gitea/pull/25343. Before and after: <img width="219" alt="Screenshot 2023-06-21 at 00 25 20" src="https://github.com/go-gitea/gitea/assets/115237/08fe8e01-0a16-4cdf-ad4d-0a9048408e9e"> <img width="220" alt="Screenshot 2023-06-21 at 00 25 32" src="https://github.com/go-gitea/gitea/assets/115237/be25ae69-6ed0-4af5-8eeb-d7b210e7c124"> Fixes mobile button background and margins: <img width="836" alt="Screenshot 2023-06-21 at 00 39 58" src="https://github.com/go-gitea/gitea/assets/115237/d76ac1e9-747f-477c-9a42-b73e129b72ee">
* Navbar styling rework (#25343)silverwind2023-06-201-37/+38
| | | | | | | | | | | | | | | | | | | | | | | - Extract navbar CSS to own file - Reduce height from 52px to 50px - Give every item a hover effect of of 36px, including the logo and on mobile - Consistent horizontal padding of 10px left and right <img width="549" alt="Screenshot 2023-06-18 at 13 41 16" src="https://github.com/go-gitea/gitea/assets/115237/0b00d101-253e-4b1f-9ee2-322d60fb2e26"> <img width="98" alt="Screenshot 2023-06-18 at 14 03 43" src="https://github.com/go-gitea/gitea/assets/115237/4ef5d98b-4d1e-45de-822e-c2c844e19876"> <img width="234" alt="Screenshot 2023-06-18 at 14 03 18" src="https://github.com/go-gitea/gitea/assets/115237/a4d9b04b-83de-42aa-a9ce-f010a9690688"> <img width="873" alt="Screenshot 2023-06-18 at 13 58 28" src="https://github.com/go-gitea/gitea/assets/115237/8cb8e31e-2adf-40c8-ae3f-d00d011b4d1b"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
* rename tributeValues to mentionValues (#25375)silverwind2023-06-201-1/+1
| | | | Very simple change, just rename this variable so it does not feature the name of the module.
* Add template linting via djlint (#25212)silverwind2023-06-141-2/+2
| | | | | | | | | | | | | | | | | | So I found this [linter](https://github.com/Riverside-Healthcare/djlint) which features a mode for go templates, so I gave it a try and it did find a number of valid issue, like unbalanced tags etc. It also has a number of bugs, I had to disable/workaround many issues. Given that this linter is written in python, this does add a dependency on `python` >= 3.8 and `poetry` to the development environment to be able to run this linter locally. - `e.g.` prefixes on placeholders are removed because the linter had a false-positive on `placeholder="e.g. cn=Search"` for the `attr=value` syntax and it's not ideal anyways to write `e.g.` into a placeholder because a placeholder is meant to hold a sample value. - In `templates/repo/settings/options.tmpl` I simplified the logic to not conditionally create opening tags without closing tags because this stuff confuses the linter (and possibly the reader as well).
* Improve AJAX link and modal confirm dialog (#25210)wxiaoguang2023-06-131-5/+7
| | | | | | | | | | | | | | | | | | | | | | Clarify the "link-action" behavior: > // A "link-action" can post AJAX request to its "data-url" > // Then the browser is redirect to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading. And enhance the "link-action" to support showing a modal dialog for confirm. A similar general approach could also help PRs like https://github.com/go-gitea/gitea/pull/22344#discussion_r1062883436 > // If the "link-action" has "data-modal-confirm(-html)" attribute, a confirm modal dialog will be shown before taking action. And a lot of duplicate code can be removed now. A good framework design can help to avoid code copying&pasting. --------- Co-authored-by: silverwind <me@silverwind.io>
* Fix mobile navbar and misc cleanups (#25134)silverwind2023-06-091-78/+67
| | | | | | | | | | | | | | | | | | - 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>
* Button and color enhancements (#24989)silverwind2023-06-091-1/+1
| | | | | | | | | | | | | | | | | | - 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>
* Improve notification icon and navbar (#25111)v1.21.0-devsilverwind2023-06-072-7/+5
| | | | | | | | | | | | | | | | | | | | | | | | | | 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">
* 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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-06 14:12:28 +0000