Skip to content

Commit d32af84

Browse files
wxiaoguangwxiaoguang
authored
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
1 parent 6221a6f commit d32af84

File tree

89 files changed

+369
-281
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+369
-281
lines changed

‎.eslintrc.yaml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ rules:
149149
jquery/no-global-eval: [2]
150150
jquery/no-grep: [2]
151151
jquery/no-has: [2]
152-
jquery/no-hide: [0]
152+
jquery/no-hide: [2]
153153
jquery/no-html: [0]
154154
jquery/no-in-array: [2]
155155
jquery/no-is-array: [2]
@@ -166,13 +166,13 @@ rules:
166166
jquery/no-proxy: [2]
167167
jquery/no-ready: [0]
168168
jquery/no-serialize: [2]
169-
jquery/no-show: [0]
169+
jquery/no-show: [2]
170170
jquery/no-size: [2]
171171
jquery/no-sizzle: [0]
172172
jquery/no-slide: [0]
173173
jquery/no-submit: [0]
174174
jquery/no-text: [0]
175-
jquery/no-toggle: [0]
175+
jquery/no-toggle: [2]
176176
jquery/no-trigger: [0]
177177
jquery/no-trim: [2]
178178
jquery/no-val: [0]

‎docs/content/doc/developers/guidelines-frontend.en-us.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ However, there are still some special cases, so the current guideline is:
9393
* `node.dataset` should not be used, use `node.getAttribute` instead.
9494
* never bind any user data to a DOM node, use a suitable design pattern to describe the relation between node and data.
9595

96+
### Show/Hide Elements
97+
98+
* Vue components are recommended to use `v-if` and `v-show` to show/hide elements.
99+
* Go template code should use Gitea's `.gt-hidden` and `showElem()/hideElem()/toggleElem()`, see more details in `.gt-hidden`'s comment.
100+
96101
### Legacy Code
97102

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

‎templates/admin/auth/edit.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<label for="port">{{.locale.Tr "admin.auths.port"}}</label>
4646
<input id="port" name="port" value="{{$cfg.Port}}" placeholder="e.g. 636" required>
4747
</div>
48-
<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
48+
<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
4949
<div class="ui checkbox">
5050
<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
5151
<input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}>
@@ -152,7 +152,7 @@
152152
<input id="use_paged_search" name="use_paged_search" type="checkbox" {{if $cfg.UsePagedSearch}}checked{{end}}>
153153
</div>
154154
</div>
155-
<div class="field required search-page-size{{if not $cfg.UsePagedSearch}} hide{{end}}">
155+
<div class="field required search-page-size{{if not $cfg.UsePagedSearch}} gt-hidden{{end}}">
156156
<label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label>
157157
<input id="search_page_size" name="search_page_size" value="{{if $cfg.UsePagedSearch}}{{$cfg.SearchPageSize}}{{end}}">
158158
</div>
@@ -209,7 +209,7 @@
209209
</div>
210210
<p class="help">{{.locale.Tr "admin.auths.force_smtps_helper"}}</p>
211211
</div>
212-
<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
212+
<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
213213
<div class="ui checkbox">
214214
<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
215215
<input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}>

‎templates/admin/auth/new.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@
3636
{{template "admin/auth/source/smtp" .}}
3737

3838
<!-- PAM -->
39-
<div class="pam required field {{if not (eq .type 4)}}hide{{end}}">
39+
<div class="pam required field {{if not (eq .type 4)}}gt-hidden{{end}}">
4040
<label for="pam_service_name">{{.locale.Tr "admin.auths.pam_service_name"}}</label>
4141
<input id="pam_service_name" name="pam_service_name" value="{{.pam_service_name}}" />
4242
<label for="pam_email_domain">{{.locale.Tr "admin.auths.pam_email_domain"}}</label>
4343
<input id="pam_email_domain" name="pam_email_domain" value="{{.pam_email_domain}}">
4444
</div>
45-
<div class="pam optional field {{if not (eq .type 4)}}hide{{end}}">
45+
<div class="pam optional field {{if not (eq .type 4)}}gt-hidden{{end}}">
4646
<div class="ui checkbox">
4747
<label for="skip_local_two_fa"><strong>{{.locale.Tr "admin.auths.skip_local_two_fa"}}</strong></label>
4848
<input id="skip_local_two_fa" name="skip_local_two_fa" type="checkbox" {{if .skip_local_two_fa}}checked{{end}}>
@@ -62,7 +62,7 @@
6262
<input name="attributes_in_bind" type="checkbox" {{if .attributes_in_bind}}checked{{end}}>
6363
</div>
6464
</div>
65-
<div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}">
65+
<div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}">
6666
<div class="ui checkbox">
6767
<label><strong>{{.locale.Tr "admin.auths.syncenabled"}}</strong></label>
6868
<input name="is_sync_enabled" type="checkbox" {{if .is_sync_enabled}}checked{{end}}>

‎templates/admin/auth/source/ldap.tmpl

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}hide{{end}}">
1+
<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}gt-hidden{{end}}">
22
<div class="inline required field {{if .Err_SecurityProtocol}}error{{end}}">
33
<label>{{.locale.Tr "admin.auths.security_protocol"}}</label>
44
<div class="ui selection security-protocol dropdown">
@@ -20,25 +20,25 @@
2020
<label for="port">{{.locale.Tr "admin.auths.port"}}</label>
2121
<input id="port" name="port" value="{{.port}}" placeholder="e.g. 636">
2222
</div>
23-
<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
23+
<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
2424
<div class="ui checkbox">
2525
<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
2626
<input name="skip_verify" type="checkbox" {{if .skip_verify}}checked{{end}}>
2727
</div>
2828
</div>
29-
<div class="ldap field {{if not (eq .type 2)}}hide{{end}}">
29+
<div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}">
3030
<label for="bind_dn">{{.locale.Tr "admin.auths.bind_dn"}}</label>
3131
<input id="bind_dn" name="bind_dn" value="{{.bind_dn}}" placeholder="e.g. cn=Search,dc=mydomain,dc=com">
3232
</div>
33-
<div class="ldap field {{if not (eq .type 2)}}hide{{end}}">
33+
<div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}">
3434
<label for="bind_password">{{.locale.Tr "admin.auths.bind_password"}}</label>
3535
<input id="bind_password" name="bind_password" type="password" autocomplete="off" value="{{.bind_password}}">
3636
</div>
3737
<div class="binddnrequired {{if (eq .type 2)}}required{{end}} field">
3838
<label for="user_base">{{.locale.Tr "admin.auths.user_base"}}</label>
3939
<input id="user_base" name="user_base" value="{{.user_base}}" placeholder="e.g. ou=Users,dc=mydomain,dc=com">
4040
</div>
41-
<div class="dldap required field {{if not (eq .type 5)}}hide{{end}}">
41+
<div class="dldap required field {{if not (eq .type 5)}}gt-hidden{{end}}">
4242
<label for="user_dn">{{.locale.Tr "admin.auths.user_dn"}}</label>
4343
<input id="user_dn" name="user_dn" value="{{.user_dn}}" placeholder="e.g. uid=%s,ou=Users,dc=mydomain,dc=com">
4444
</div>
@@ -115,13 +115,13 @@
115115
</div>
116116
<!-- ldap group end -->
117117

118-
<div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}">
118+
<div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}">
119119
<div class="ui checkbox">
120120
<label for="use_paged_search"><strong>{{.locale.Tr "admin.auths.use_paged_search"}}</strong></label>
121121
<input id="use_paged_search" name="use_paged_search" class="use-paged-search" type="checkbox" {{if .use_paged_search}}checked{{end}}>
122122
</div>
123123
</div>
124-
<div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}hide{{end}}">
124+
<div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}gt-hidden{{end}}">
125125
<label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label>
126126
<input id="search_page_size" name="search_page_size" value="{{.search_page_size}}">
127127
</div>

‎templates/admin/auth/source/oauth.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="oauth2 field {{if not (eq .type 6)}}hide{{end}}">
1+
<div class="oauth2 field {{if not (eq .type 6)}}gt-hidden{{end}}">
22
<div class="inline required field">
33
<label>{{.locale.Tr "admin.auths.oauth2_provider"}}</label>
44
<div class="ui selection type dropdown">

‎templates/admin/auth/source/smtp.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="smtp field {{if not (eq .type 3)}}hide{{end}}">
1+
<div class="smtp field {{if not (eq .type 3)}}gt-hidden{{end}}">
22
<div class="inline required field">
33
<label>{{.locale.Tr "admin.auths.smtp_auth"}}</label>
44
<div class="ui selection type dropdown">

‎templates/admin/auth/source/sspi.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="sspi field {{if not (eq .type 7)}}hide{{end}}">
1+
<div class="sspi field {{if not (eq .type 7)}}gt-hidden{{end}}">
22
<div class="field">
33
<div class="ui checkbox">
44
<label for="sspi_auto_create_users"><strong>{{.locale.Tr "admin.auths.sspi_auto_create_users"}}</strong></label>

‎templates/admin/user/edit.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
</div>
5757
</div>
5858

59-
<div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}hide{{end}}">
59+
<div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}gt-hidden{{end}}">
6060
<label for="login_name">{{.locale.Tr "admin.users.auth_login_name"}}</label>
6161
<input id="login_name" name="login_name" value="{{.User.LoginName}}" autofocus>
6262
</div>
@@ -68,7 +68,7 @@
6868
<label for="email">{{.locale.Tr "email"}}</label>
6969
<input id="email" name="email" type="email" value="{{.User.Email}}" autofocus required>
7070
</div>
71-
<div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}hide{{end}}">
71+
<div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}gt-hidden{{end}}">
7272
<label for="password">{{.locale.Tr "password"}}</label>
7373
<input id="password" name="password" type="password" autocomplete="new-password">
7474
<p class="help">{{.locale.Tr "admin.users.password_helper"}}</p>
@@ -116,7 +116,7 @@
116116
<input name="restricted" type="checkbox" {{if .User.IsRestricted}}checked{{end}}>
117117
</div>
118118
</div>
119-
<div class="inline field"{{if DisableGitHooks}} hidden{{end}}>
119+
<div class="inline field {{if DisableGitHooks}}gt-hidden{{end}}">
120120
<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}">
121121
<label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label>
122122
<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>

‎templates/install.tmpl

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</div>
2929
</div>
3030

31-
<div class="hide" data-db-setting-for="common-host">
31+
<div class="gt-hidden" data-db-setting-for="common-host">
3232
<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
3333
<label for="db_host">{{.locale.Tr "install.host"}}</label>
3434
<input id="db_host" name="db_host" value="{{.db_host}}">
@@ -48,7 +48,7 @@
4848
</div>
4949
</div>
5050

51-
<div class="hide" data-db-setting-for="postgres">
51+
<div class="gt-hidden" data-db-setting-for="postgres">
5252
<div class="inline required field">
5353
<label>{{.locale.Tr "install.ssl_mode"}}</label>
5454
<div class="ui selection database type dropdown">
@@ -69,7 +69,7 @@
6969
</div>
7070
</div>
7171

72-
<div class="hide" data-db-setting-for="mysql">
72+
<div class="gt-hidden" data-db-setting-for="mysql">
7373
<div class="inline required field">
7474
<label>{{.locale.Tr "install.charset"}}</label>
7575
<div class="ui selection database type dropdown">
@@ -83,7 +83,7 @@
8383
</div>
8484
</div>
8585

86-
<div class="hide" data-db-setting-for="sqlite3">
86+
<div class="gt-hidden" data-db-setting-for="sqlite3">
8787
<div class="inline required field {{if or .Err_DbPath .Err_DbSetting}}error{{end}}">
8888
<label for="db_path">{{.locale.Tr "install.path"}}</label>
8989
<input id="db_path" name="db_path" value="{{.db_path}}">
@@ -346,5 +346,5 @@
346346
</div>
347347
</div>
348348
</div>
349-
<img style="display: none" src="{{AssetUrlPrefix}}/img/loading.png"/>
349+
<img class="gt-hidden" src="{{AssetUrlPrefix}}/img/loading.png"/>
350350
{{template "base/footer" .}}

0 commit comments

Comments
 (0)