Commit Graph

24 Commits

Author SHA1 Message Date
silverwind e2e8509239 Replace Monaco with CodeMirror (#36764)
- Replace monaco-editor with CodeMirror 6
- Add `--color-syntax-*` CSS variables for all syntax token types,
shared by CodeMirror, Chroma and EasyMDE
- Consolidate chroma CSS into a single theme-independent file
(`modules/chroma.css`)
- Syntax colors in the code editor now match the code view and
light/dark themes
- Code editor is now 12px instead of 14px font size to match code view
and GitHub
- Use a global style for kbd elements
- When editing existing files, focus will be on codemirror instead of
filename input.
- Keyboard shortcuts are roughtly the same as VSCode
- Add a "Find" button, useful for mobile
- Add context menu similar to Monaco
- Add a command palette (Ctrl/Cmd+Shift+P or F1) or via button
- Add clickable URLs via Ctrl/Cmd+click
- Add e2e test for the code editor
- Remove `window.codeEditors` global
- The main missing Monaco features are hover types and semantic rename
but these were not fully working because monaco operated only on single
files and only for JS/TS/HTML/CSS/JSON.

| | Monaco (main) | CodeMirror (cm) | Delta |
|---|---|---|---|
| **Build time** | 7.8s | 5.3s | **-32%** |
| **JS output** | 25 MB | 14 MB | **-44%** |
| **CSS output** | 1.2 MB | 1012 KB | **-17%** |
| **Total (no maps)** | 23.3 MB | 12.1 MB | **-48%** |

Fixes: #36311
Fixes: #14776
Fixes: #12171

<img width="1333" height="555" alt="image"
src="https://github.com/user-attachments/assets/f0fe3a28-1ed9-4f22-bf25-2b161501d7ce"
/>

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2026-03-31 21:50:45 +00:00
silverwind 47b387921a Add code editor setting dropdowns (#36534)
Adds three `<select>` controls on top right for indent style, indent
size, and line wrap to the code editor (`_edit`), diff patch editor
(`_diffpatch`) and git hook editor (`/settings/hooks/git/pre-receive`).

The git hooks editor is restyled to wrap the content in a box. Also
included is a bugfix for the git hooks editor where monaco was not
initialized correctly.

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-02-12 03:55:46 +08:00
silverwind 42d294941c Replace CSRF cookie with CrossOriginProtection (#36183)
Removes the CSRF cookie in favor of
[`CrossOriginProtection`](https://pkg.go.dev/net/http#CrossOriginProtection)
which relies purely on HTTP headers.

Fixes: https://github.com/go-gitea/gitea/issues/11188
Fixes: https://github.com/go-gitea/gitea/issues/30333
Helps: https://github.com/go-gitea/gitea/issues/35107

TODOs:

- [x] Fix tests
- [ ] Ideally add tests to validates the protection

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-12-25 12:33:34 +02:00
silverwind ec3d467f15 Migrate gt-hidden to tw-hidden (#30046)
We have to define this one in helpers.css because tailwind only
generates a single class but certain things rely on this being
double-class. Command ran:

```sh
perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/*

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-24 18:23:38 +00:00
delvh 7960ba7e2b Always use ctx.Locale.Tr inside templates (#27231) 2023-09-25 08:56:50 +00:00
silverwind 8099238618 Change green buttons to primary color (#27099)
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">
2023-09-18 22:05:31 +00:00
Hester Gong 44e0cfa96e Change to vertical navbar layout for secondary navbar for repo/user/admin settings (#24246)
Co-Author: @wxiaoguang 

This is the first step of #24229. And this PR will only includes html
changes, and followed by other PRs that fine tune css and change to
submenus.

After:

Admin Level

<img width="1400" alt="Screen Shot 2023-04-21 at 10 07 16"
src="https://user-images.githubusercontent.com/17645053/233523870-f848b61d-056a-4b41-9760-a9a49fea1fe8.png">

User Level

<img width="1422" alt="Screen Shot 2023-04-21 at 10 07 23"
src="https://user-images.githubusercontent.com/17645053/233523878-979adb20-a657-43d9-99a6-ad414010c0ef.png">

Repo Level

<img width="1404" alt="Screen Shot 2023-04-21 at 10 07 07"
src="https://user-images.githubusercontent.com/17645053/233523863-337440bd-c03a-4dfd-87fa-cef40300bfe0.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-23 18:21:21 +08:00
wxiaoguang d32af84a10 Refactor hiding-methods, remove jQuery show/hide, remove .hide class, remove inline style=display:none (#22950)
Close #22847

This PR:

* introduce Gitea's own `showElem` and related functions
* remove jQuery show/hide
* remove .hide class
* remove inline style=display:none 

From now on:

do not use:
* "[hidden]" attribute: it's too weak, can not be applied to an element
with "display: flex"
* ".hidden" class: it has been polluted by Fomantic UI in many cases
* inline style="display: none": it's difficult to tweak
* jQuery's show/hide/toggle: it can not show/hide elements with
"display: xxx !important"

only use:
* this ".gt-hidden" class
* showElem/hideElem/toggleElem functions in "utils/dom.js"

cc: @silverwind , this is the all-in-one PR
2023-02-19 12:06:14 +08:00
Felipe Leopoldo Sologuren Gutiérrez 15c035775a Add main landmark to templates and adjust titles (#22670)
* Add main aria landmark to templates
 * Adjust some titles to improve understanding of location in navigation

Contributed by @Forgejo
2023-02-01 22:56:10 +00:00
Gusted d55a0b7238 Refactor i18n to locale (#20153)
* Refactor `i18n` to `locale`

- Currently we're using the `i18n` variable naming for the `locale`
struct. This contains locale's specific information and cannot be used
for general i18n purpose, therefore refactoring it to `locale` makes
more sense.
- Ref: https://github.com/go-gitea/gitea/pull/20096#discussion_r906699200

* Update routers/install/install.go
2022-06-27 15:58:46 -05:00
silverwind b1cf7f4df1 Add class to page content to unify top margin (#13766)
* Add class to page content to unify top margin

Previously pages would individually set this margin but some didn't so
content would stick to the header without any space. Resolve this by
adding a new class that is added on all pages. The only place where we
remove this margin again is on the pages with menu or wrapper in the
header.

* fix admin notices

* fix team pages

* fix loading segment on gitgraph for arc-green

* fix last missing case

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-11-30 23:00:14 -05:00
silverwind 374ff60465 Use monaco for the git hook editor (#13552)
Migrate git hook editor to monaco, replacing CodeMirror. Had to do a few
refactors to make the monaco instantiation generic enough to be of use.

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-11-13 22:57:34 -05:00
Patrick G efbb895ebe Cleaner ui for admin, repo settings, and user settings page (#1269) (#1270) 2017-03-15 23:39:38 +01:00
Unknwon 9a5a27ea8d Improve repository lable style
- add border-radius to filter list items
- use color as background of label for issue/pull view page
2016-03-15 19:52:40 -04:00
Adam Strzelecki da2585c11e Indent all templates with tabs
This commit improves templates readability, since all of them use consistent
indent with all template command blocks indented too.

1. Indents both HTML containers such as <div>, <p> and Go HTML template blocks
   such as {{if}} {{with}}

2. Cleans all trailing white-space

3. Adds trailing last line-break to each file
2015-12-08 00:57:46 +01:00
Adam Strzelecki 2580e7b57e UI: Always show menu on repo pages
Merges repo/sidebar.tmpl with repo/header.tmpl and makes every repo page use
middleware.RepoRef() necessary to display information on this menu.
2015-12-03 02:16:18 +01:00
Adam Strzelecki 3eae4ecde7 UI: Make repository menu divide header and content
This is more inline with way GitHub looks like and feels much more natural and
in style with rest of the interface.
2015-12-02 22:40:22 +01:00
Unknwon 7c80eba77f minor UI fix and fix ssh race 2015-11-14 13:21:31 -05:00
Unknwon c6b039c6f9 new repo options UI 2015-08-30 03:21:59 +08:00
Unknwon c08600c59b new edit webhook UI 2015-08-27 01:04:23 +08:00
Unknwon 2881456421 new webhooks list UI 2015-08-26 21:45:51 +08:00
Unknwon 1cb03135b7 new repo git hooks UI 2015-08-26 18:03:30 +08:00
Unknwon 4447a20f87 UI: issues - finish basic frame 2015-07-24 04:50:05 +08:00
Unknwon 64c68220d2 Fix #264 2014-10-06 17:50:00 -04:00