From d32af84a1002ceb235c86e4ac569c866ab7816d4 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 19 Feb 2023 12:06:14 +0800 Subject: [PATCH] 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 --- .eslintrc.yaml | 6 +- .../developers/guidelines-frontend.en-us.md | 5 ++ templates/admin/auth/edit.tmpl | 6 +- templates/admin/auth/new.tmpl | 6 +- templates/admin/auth/source/ldap.tmpl | 14 ++-- templates/admin/auth/source/oauth.tmpl | 2 +- templates/admin/auth/source/smtp.tmpl | 2 +- templates/admin/auth/source/sspi.tmpl | 2 +- templates/admin/user/edit.tmpl | 6 +- templates/install.tmpl | 10 +-- templates/org/settings/options.tmpl | 4 +- templates/org/team/new.tmpl | 2 +- templates/repo/blame.tmpl | 2 +- templates/repo/branch_dropdown.tmpl | 2 +- templates/repo/commits_list.tmpl | 2 +- templates/repo/commits_list_small.tmpl | 2 +- templates/repo/create.tmpl | 2 +- templates/repo/diff/box.tmpl | 8 +-- templates/repo/diff/comment_form.tmpl | 2 +- templates/repo/diff/comments.tmpl | 4 +- templates/repo/diff/compare.tmpl | 12 ++-- templates/repo/diff/conversation.tmpl | 4 +- templates/repo/diff/image_diff.tmpl | 2 +- templates/repo/editor/edit.tmpl | 2 +- templates/repo/editor/patch.tmpl | 2 +- templates/repo/find/files.tmpl | 2 +- templates/repo/graph.tmpl | 2 +- templates/repo/home.tmpl | 4 +- .../repo/issue/branch_selector_field.tmpl | 2 +- templates/repo/issue/labels/label.tmpl | 2 +- .../repo/issue/labels/labels_sidebar.tmpl | 2 +- templates/repo/issue/list.tmpl | 2 +- templates/repo/issue/milestone_issues.tmpl | 2 +- templates/repo/issue/new_form.tmpl | 8 +-- templates/repo/issue/view_content.tmpl | 8 +-- .../repo/issue/view_content/comments.tmpl | 12 ++-- templates/repo/issue/view_content/pull.tmpl | 2 +- .../view_content/pull_merge_instruction.tmpl | 2 +- .../repo/issue/view_content/sidebar.tmpl | 12 ++-- templates/repo/issue/view_title.tmpl | 8 +-- templates/repo/migrate/migrating.tmpl | 4 +- templates/repo/migrate/options.tmpl | 4 +- templates/repo/settings/deploy_keys.tmpl | 2 +- templates/repo/settings/githook_edit.tmpl | 2 +- templates/repo/settings/lfs_file.tmpl | 2 +- templates/repo/settings/webhook/history.tmpl | 2 +- templates/repo/settings/webhook/settings.tmpl | 2 +- templates/repo/sub_menu.tmpl | 2 +- templates/repo/view_file.tmpl | 4 +- templates/repo/view_list.tmpl | 2 +- templates/repo/wiki/view.tmpl | 2 +- templates/shared/secrets/add_list.tmpl | 2 +- templates/user/auth/webauthn_error.tmpl | 18 ++--- .../user/notification/notification_div.tmpl | 2 +- templates/user/settings/keys_gpg.tmpl | 2 +- templates/user/settings/keys_principal.tmpl | 2 +- templates/user/settings/keys_ssh.tmpl | 2 +- templates/user/settings/profile.tmpl | 4 +- web_src/js/components/DiffFileTree.vue | 6 +- web_src/js/features/admin/common.js | 45 ++++++------- web_src/js/features/common-global.js | 9 +-- web_src/js/features/common-issue.js | 5 +- web_src/js/features/common-organization.js | 9 +-- web_src/js/features/comp/WebHookEditor.js | 7 +- web_src/js/features/imagediff.js | 7 +- web_src/js/features/install.js | 7 +- web_src/js/features/org-team.js | 5 +- web_src/js/features/repo-commit.js | 3 +- web_src/js/features/repo-common.js | 7 +- web_src/js/features/repo-diff.js | 8 +-- web_src/js/features/repo-editor.js | 5 +- web_src/js/features/repo-findfile.js | 3 +- web_src/js/features/repo-graph.js | 12 ++-- web_src/js/features/repo-home.js | 11 ++-- web_src/js/features/repo-issue-content.js | 4 +- web_src/js/features/repo-issue.js | 35 +++++----- web_src/js/features/repo-legacy.js | 41 ++++++------ web_src/js/features/repo-migrate.js | 25 +++---- web_src/js/features/repo-migration.js | 7 +- web_src/js/features/repo-release.js | 3 +- web_src/js/features/repo-template.js | 9 +-- web_src/js/features/repo-unicode-escape.js | 17 ++--- web_src/js/features/user-auth-webauthn.js | 11 ++-- web_src/js/features/user-auth.js | 5 +- web_src/js/features/user-settings.js | 9 +-- web_src/js/utils/dom.js | 65 +++++++++++++++++++ web_src/less/_base.less | 5 -- web_src/less/_repository.less | 12 ---- web_src/less/helpers.less | 12 +++- 89 files changed, 369 insertions(+), 281 deletions(-) create mode 100644 web_src/js/utils/dom.js diff --git a/.eslintrc.yaml b/.eslintrc.yaml index fdd86a464..a73df2ee3 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -149,7 +149,7 @@ rules: jquery/no-global-eval: [2] jquery/no-grep: [2] jquery/no-has: [2] - jquery/no-hide: [0] + jquery/no-hide: [2] jquery/no-html: [0] jquery/no-in-array: [2] jquery/no-is-array: [2] @@ -166,13 +166,13 @@ rules: jquery/no-proxy: [2] jquery/no-ready: [0] jquery/no-serialize: [2] - jquery/no-show: [0] + jquery/no-show: [2] jquery/no-size: [2] jquery/no-sizzle: [0] jquery/no-slide: [0] jquery/no-submit: [0] jquery/no-text: [0] - jquery/no-toggle: [0] + jquery/no-toggle: [2] jquery/no-trigger: [0] jquery/no-trim: [2] jquery/no-val: [0] diff --git a/docs/content/doc/developers/guidelines-frontend.en-us.md b/docs/content/doc/developers/guidelines-frontend.en-us.md index 337499c95..23be6c677 100644 --- a/docs/content/doc/developers/guidelines-frontend.en-us.md +++ b/docs/content/doc/developers/guidelines-frontend.en-us.md @@ -93,6 +93,11 @@ However, there are still some special cases, so the current guideline is: * `node.dataset` should not be used, use `node.getAttribute` instead. * never bind any user data to a DOM node, use a suitable design pattern to describe the relation between node and data. +### Show/Hide Elements + +* 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. + ### 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/templates/admin/auth/edit.tmpl b/templates/admin/auth/edit.tmpl index a3c94a6cc..36d335f32 100644 --- a/templates/admin/auth/edit.tmpl +++ b/templates/admin/auth/edit.tmpl @@ -45,7 +45,7 @@ -
+
@@ -152,7 +152,7 @@
-
+
@@ -209,7 +209,7 @@

{{.locale.Tr "admin.auths.force_smtps_helper"}}

-
+
diff --git a/templates/admin/auth/new.tmpl b/templates/admin/auth/new.tmpl index ab84dfcca..9078fda46 100644 --- a/templates/admin/auth/new.tmpl +++ b/templates/admin/auth/new.tmpl @@ -36,13 +36,13 @@ {{template "admin/auth/source/smtp" .}} -
+
-
+
@@ -62,7 +62,7 @@
-
+
diff --git a/templates/admin/auth/source/ldap.tmpl b/templates/admin/auth/source/ldap.tmpl index 8d199854a..902cfcbcc 100644 --- a/templates/admin/auth/source/ldap.tmpl +++ b/templates/admin/auth/source/ldap.tmpl @@ -1,4 +1,4 @@ -
+
-
+
-
+
-
+
@@ -38,7 +38,7 @@
-
+
@@ -115,13 +115,13 @@
-
+
-
+
diff --git a/templates/admin/auth/source/oauth.tmpl b/templates/admin/auth/source/oauth.tmpl index 85c77343a..b7ee00822 100644 --- a/templates/admin/auth/source/oauth.tmpl +++ b/templates/admin/auth/source/oauth.tmpl @@ -1,4 +1,4 @@ -
+