diff options
-rw-r--r-- | docs/content/doc/developers/guidelines-frontend.en-us.md | 18 | ||||
-rw-r--r-- | web_src/js/components/ContextPopup.vue | 2 | ||||
-rw-r--r-- | web_src/js/features/contextpopup.js | 2 |
3 files changed, 20 insertions, 2 deletions
diff --git a/docs/content/doc/developers/guidelines-frontend.en-us.md b/docs/content/doc/developers/guidelines-frontend.en-us.md index 66d3e83e93..9ac317f401 100644 --- a/docs/content/doc/developers/guidelines-frontend.en-us.md +++ b/docs/content/doc/developers/guidelines-frontend.en-us.md @@ -47,6 +47,8 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h 7. Clarify variable types, prefer `elem.disabled = true` instead of `elem.setAttribute('disabled', 'anything')`, prefer `$el.prop('checked', var === 'yes')` instead of `$el.prop('checked', var)`. 8. Use semantic elements, prefer `<button class="ui button">` instead of `<div class="ui button">`. 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided. +10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event. +11. Custom event names are recommended to use `ce-` prefix. ### Accessibility / ARIA @@ -109,6 +111,22 @@ However, there are still some special cases, so the current guideline is: * Vue components are recommended to use `v-if` and `v-show` to show/hide elements. * Go template code should use Gitea's `.gt-hidden` and `showElem()/hideElem()/toggleElem()`, see more details in `.gt-hidden`'s comment. +### Styles and Attributes in Go HTML Template + +It's recommended to use: + +```html +<div class="gt-name1 gt-name2 {{if .IsFoo}}gt-foo{{end}}" {{if .IsFoo}}data-foo{{end}}></div> +``` + +instead of: + +```html +<div class="gt-name1 gt-name2{{if .IsFoo}} gt-foo{{end}}"{{if .IsFoo}} data-foo{{end}}></div> +``` + +to make the code more readable. + ### Legacy Code A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines. diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue index 3244034782..ad305b23a9 100644 --- a/web_src/js/components/ContextPopup.vue +++ b/web_src/js/components/ContextPopup.vue @@ -87,7 +87,7 @@ export default { } }, mounted() { - this.$refs.root.addEventListener('us-load-context-popup', (e) => { + this.$refs.root.addEventListener('ce-load-context-popup', (e) => { const data = e.detail; if (!this.loading && this.issue === null) { this.load(data); diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js index 61f7120908..21e6bec311 100644 --- a/web_src/js/features/contextpopup.js +++ b/web_src/js/features/contextpopup.js @@ -32,7 +32,7 @@ export function initContextPopups() { content: el, interactive: true, onShow: () => { - el.firstChild.dispatchEvent(new CustomEvent('us-load-context-popup', {detail: {owner, repo, index}})); + el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}})); } }); }); |