Переглянути джерело

Fix doc and heatmap for the Vue3 refactoring (#21312)

tags/v1.18.0-rc0
wxiaoguang 1 рік тому
джерело
коміт
eaa67671cc
Аккаунт користувача з таким Email не знайдено

+ 4
- 4
docs/content/doc/developers/guidelines-frontend.md Переглянути файл



## Background ## Background


Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue2](https://vuejs.org/v2/guide/) for its frontend.
Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue3](https://vuejs.org/) for its frontend.


The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template). The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template).


4. jQuery events across different features could use their own namespaces if there are potential conflicts. 4. jQuery events across different features could use their own namespaces if there are potential conflicts.
5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names with 2-3 feature related keywords to overwrite framework styles. 5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names with 2-3 feature related keywords to overwrite framework styles.
6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}` 6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}`
7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue3.


### Framework Usage ### Framework Usage




A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines. A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines.


### Vue2/Vue3 and JSX
### Vue3 and JSX


Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.
Gitea is using Vue3 now. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.

+ 1
- 1
docs/content/page/index.en-us.md Переглянути файл

- UI frameworks: - UI frameworks:
- [jQuery](https://jquery.com) - [jQuery](https://jquery.com)
- [Fomantic UI](https://fomantic-ui.com) - [Fomantic UI](https://fomantic-ui.com)
- [Vue2](https://vuejs.org)
- [Vue3](https://vuejs.org)
- and various components (see package.json) - and various components (see package.json)
- Editors: - Editors:
- [CodeMirror](https://codemirror.net) - [CodeMirror](https://codemirror.net)

+ 1
- 1
docs/content/page/index.fr-fr.md Переглянути файл

- Interface graphique : - Interface graphique :
- [jQuery](https://jquery.com) - [jQuery](https://jquery.com)
- [Fomantic UI](https://fomantic-ui.com) - [Fomantic UI](https://fomantic-ui.com)
- [Vue2](https://vuejs.org)
- [Vue3](https://vuejs.org)
- [CodeMirror](https://codemirror.net) - [CodeMirror](https://codemirror.net)
- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor)
- [Monaco Editor](https://microsoft.github.io/monaco-editor) - [Monaco Editor](https://microsoft.github.io/monaco-editor)

+ 1
- 1
docs/content/page/index.zh-cn.md Переглянути файл

- UI 框架: - UI 框架:
- [jQuery](https://jquery.com) - [jQuery](https://jquery.com)
- [Fomantic UI](https://fomantic-ui.com) - [Fomantic UI](https://fomantic-ui.com)
- [Vue2](https://vuejs.org)
- [Vue3](https://vuejs.org)
- 更多组件参见 package.json - 更多组件参见 package.json
- 编辑器: - 编辑器:
- [CodeMirror](https://codemirror.net) - [CodeMirror](https://codemirror.net)

+ 1
- 1
docs/content/page/index.zh-tw.md Переглянути файл

- UI 元件: - UI 元件:
- [jQuery](https://jquery.com) - [jQuery](https://jquery.com)
- [Fomantic UI](https://fomantic-ui.com) - [Fomantic UI](https://fomantic-ui.com)
- [Vue2](https://vuejs.org)
- [Vue3](https://vuejs.org)
- [CodeMirror](https://codemirror.net) - [CodeMirror](https://codemirror.net)
- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor)
- [Monaco Editor](https://microsoft.github.io/monaco-editor) - [Monaco Editor](https://microsoft.github.io/monaco-editor)

+ 12
- 16
web_src/less/features/heatmap.less Переглянути файл

#user-heatmap { #user-heatmap {
width: 100%; width: 100%;
text-align: center;
font-size: 9px;
position: relative; position: relative;
min-height: 125px; min-height: 125px;
align-items: center;
justify-content: center;

text {
fill: currentcolor !important;
}


// for the "Less" and "More" legend // for the "Less" and "More" legend
.vch__legend .vch__legend {
display: flex;
font-size: 11px;
align-items: center;
justify-content: right;
}
.vch__legend .vch__legend div:first-child, .vch__legend .vch__legend div:first-child,
.vch__legend .vch__legend div:last-child { .vch__legend .vch__legend div:last-child {
display: inline-block; display: inline-block;
padding: 0 5px; padding: 0 5px;
} }


> svg {
width: 100%;
}

svg:not(:root) {
overflow: inherit;
padding: 0 !important;
}

text {
fill: currentcolor !important;
}

// move the "? contributions in the last ? months" text from top to bottom
.total-contributions { .total-contributions {
font-size: 11px; font-size: 11px;
position: absolute; position: absolute;

Завантаження…
Відмінити
Зберегти