diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-02-19 12:06:14 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-02-19 12:06:14 +0800 |
| commit | d32af84a1002ceb235c86e4ac569c866ab7816d4 (patch) | |
| tree | 3832638122aac31fdc2215f85873629fd8ef2fd2 | |
| parent | 6221a6fd5450692ae27e5602b41fc9ebd9150736 (diff) | |
| download | gitea-d32af84a1002ceb235c86e4ac569c866ab7816d4.tar.gz gitea-d32af84a1002ceb235c86e4ac569c866ab7816d4.zip | |
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
89 files changed, 369 insertions, 281 deletions
diff --git a/.eslintrc.yaml b/.eslintrc.yaml index fdd86a4647..a73df2ee34 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 337499c953..23be6c6773 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 a3c94a6cc2..36d335f323 100644 --- a/templates/admin/auth/edit.tmpl +++ b/templates/admin/auth/edit.tmpl @@ -45,7 +45,7 @@ <label for="port">{{.locale.Tr "admin.auths.port"}}</label> <input id="port" name="port" value="{{$cfg.Port}}" placeholder="e.g. 636" required> </div> - <div class="has-tls inline field {{if not .HasTLS}}hide{{end}}"> + <div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}"> <div class="ui checkbox"> <label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label> <input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}> @@ -152,7 +152,7 @@ <input id="use_paged_search" name="use_paged_search" type="checkbox" {{if $cfg.UsePagedSearch}}checked{{end}}> </div> </div> - <div class="field required search-page-size{{if not $cfg.UsePagedSearch}} hide{{end}}"> + <div class="field required search-page-size{{if not $cfg.UsePagedSearch}} gt-hidden{{end}}"> <label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label> <input id="search_page_size" name="search_page_size" value="{{if $cfg.UsePagedSearch}}{{$cfg.SearchPageSize}}{{end}}"> </div> @@ -209,7 +209,7 @@ </div> <p class="help">{{.locale.Tr "admin.auths.force_smtps_helper"}}</p> </div> - <div class="has-tls inline field {{if not .HasTLS}}hide{{end}}"> + <div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}"> <div class="ui checkbox"> <label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label> <input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}> diff --git a/templates/admin/auth/new.tmpl b/templates/admin/auth/new.tmpl index ab84dfccaf..9078fda469 100644 --- a/templates/admin/auth/new.tmpl +++ b/templates/admin/auth/new.tmpl @@ -36,13 +36,13 @@ {{template "admin/auth/source/smtp" .}} <!-- PAM --> - <div class="pam required field {{if not (eq .type 4)}}hide{{end}}"> + <div class="pam required field {{if not (eq .type 4)}}gt-hidden{{end}}"> <label for="pam_service_name">{{.locale.Tr "admin.auths.pam_service_name"}}</label> <input id="pam_service_name" name="pam_service_name" value="{{.pam_service_name}}" /> <label for="pam_email_domain">{{.locale.Tr "admin.auths.pam_email_domain"}}</label> <input id="pam_email_domain" name="pam_email_domain" value="{{.pam_email_domain}}"> </div> - <div class="pam optional field {{if not (eq .type 4)}}hide{{end}}"> + <div class="pam optional field {{if not (eq .type 4)}}gt-hidden{{end}}"> <div class="ui checkbox"> <label for="skip_local_two_fa"><strong>{{.locale.Tr "admin.auths.skip_local_two_fa"}}</strong></label> <input id="skip_local_two_fa" name="skip_local_two_fa" type="checkbox" {{if .skip_local_two_fa}}checked{{end}}> @@ -62,7 +62,7 @@ <input name="attributes_in_bind" type="checkbox" {{if .attributes_in_bind}}checked{{end}}> </div> </div> - <div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}"> + <div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}"> <div class="ui checkbox"> <label><strong>{{.locale.Tr "admin.auths.syncenabled"}}</strong></label> <input name="is_sync_enabled" type="checkbox" {{if .is_sync_enabled}}checked{{end}}> diff --git a/templates/admin/auth/source/ldap.tmpl b/templates/admin/auth/source/ldap.tmpl index 8d199854ae..902cfcbcce 100644 --- a/templates/admin/auth/source/ldap.tmpl +++ b/templates/admin/auth/source/ldap.tmpl @@ -1,4 +1,4 @@ -<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}hide{{end}}"> +<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}gt-hidden{{end}}"> <div class="inline required field {{if .Err_SecurityProtocol}}error{{end}}"> <label>{{.locale.Tr "admin.auths.security_protocol"}}</label> <div class="ui selection security-protocol dropdown"> @@ -20,17 +20,17 @@ <label for="port">{{.locale.Tr "admin.auths.port"}}</label> <input id="port" name="port" value="{{.port}}" placeholder="e.g. 636"> </div> - <div class="has-tls inline field {{if not .HasTLS}}hide{{end}}"> + <div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}"> <div class="ui checkbox"> <label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label> <input name="skip_verify" type="checkbox" {{if .skip_verify}}checked{{end}}> </div> </div> - <div class="ldap field {{if not (eq .type 2)}}hide{{end}}"> + <div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}"> <label for="bind_dn">{{.locale.Tr "admin.auths.bind_dn"}}</label> <input id="bind_dn" name="bind_dn" value="{{.bind_dn}}" placeholder="e.g. cn=Search,dc=mydomain,dc=com"> </div> - <div class="ldap field {{if not (eq .type 2)}}hide{{end}}"> + <div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}"> <label for="bind_password">{{.locale.Tr "admin.auths.bind_password"}}</label> <input id="bind_password" name="bind_password" type="password" autocomplete="off" value="{{.bind_password}}"> </div> @@ -38,7 +38,7 @@ <label for="user_base">{{.locale.Tr "admin.auths.user_base"}}</label> <input id="user_base" name="user_base" value="{{.user_base}}" placeholder="e.g. ou=Users,dc=mydomain,dc=com"> </div> - <div class="dldap required field {{if not (eq .type 5)}}hide{{end}}"> + <div class="dldap required field {{if not (eq .type 5)}}gt-hidden{{end}}"> <label for="user_dn">{{.locale.Tr "admin.auths.user_dn"}}</label> <input id="user_dn" name="user_dn" value="{{.user_dn}}" placeholder="e.g. uid=%s,ou=Users,dc=mydomain,dc=com"> </div> @@ -115,13 +115,13 @@ </div> <!-- ldap group end --> - <div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}"> + <div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}"> <div class="ui checkbox"> <label for="use_paged_search"><strong>{{.locale.Tr "admin.auths.use_paged_search"}}</strong></label> <input id="use_paged_search" name="use_paged_search" class="use-paged-search" type="checkbox" {{if .use_paged_search}}checked{{end}}> </div> </div> - <div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}hide{{end}}"> + <div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}gt-hidden{{end}}"> <label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label> <input id="search_page_size" name="search_page_size" value="{{.search_page_size}}"> </div> diff --git a/templates/admin/auth/source/oauth.tmpl b/templates/admin/auth/source/oauth.tmpl index 85c77343a5..b7ee00822f 100644 --- a/templates/admin/auth/source/oauth.tmpl +++ b/templates/admin/auth/source/oauth.tmpl @@ -1,4 +1,4 @@ -<div class="oauth2 field {{if not (eq .type 6)}}hide{{end}}"> +<div class="oauth2 field {{if not (eq .type 6)}}gt-hidden{{end}}"> <div class="inline required field"> <label>{{.locale.Tr "admin.auths.oauth2_provider"}}</label> <div class="ui selection type dropdown"> diff --git a/templates/admin/auth/source/smtp.tmpl b/templates/admin/auth/source/smtp.tmpl index 2d577412c1..e83f7afb69 100644 --- a/templates/admin/auth/source/smtp.tmpl +++ b/templates/admin/auth/source/smtp.tmpl @@ -1,4 +1,4 @@ -<div class="smtp field {{if not (eq .type 3)}}hide{{end}}"> +<div class="smtp field {{if not (eq .type 3)}}gt-hidden{{end}}"> <div class="inline required field"> <label>{{.locale.Tr "admin.auths.smtp_auth"}}</label> <div class="ui selection type dropdown"> diff --git a/templates/admin/auth/source/sspi.tmpl b/templates/admin/auth/source/sspi.tmpl index dee40d9fd5..9608616e1b 100644 --- a/templates/admin/auth/source/sspi.tmpl +++ b/templates/admin/auth/source/sspi.tmpl @@ -1,4 +1,4 @@ -<div class="sspi field {{if not (eq .type 7)}}hide{{end}}"> +<div class="sspi field {{if not (eq .type 7)}}gt-hidden{{end}}"> <div class="field"> <div class="ui checkbox"> <label for="sspi_auto_create_users"><strong>{{.locale.Tr "admin.auths.sspi_auto_create_users"}}</strong></label> diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl index 6191efcd5e..7d31eb4d2b 100644 --- a/templates/admin/user/edit.tmpl +++ b/templates/admin/user/edit.tmpl @@ -56,7 +56,7 @@ </div> </div> - <div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}hide{{end}}"> + <div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}gt-hidden{{end}}"> <label for="login_name">{{.locale.Tr "admin.users.auth_login_name"}}</label> <input id="login_name" name="login_name" value="{{.User.LoginName}}" autofocus> </div> @@ -68,7 +68,7 @@ <label for="email">{{.locale.Tr "email"}}</label> <input id="email" name="email" type="email" value="{{.User.Email}}" autofocus required> </div> - <div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}hide{{end}}"> + <div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}gt-hidden{{end}}"> <label for="password">{{.locale.Tr "password"}}</label> <input id="password" name="password" type="password" autocomplete="new-password"> <p class="help">{{.locale.Tr "admin.users.password_helper"}}</p> @@ -116,7 +116,7 @@ <input name="restricted" type="checkbox" {{if .User.IsRestricted}}checked{{end}}> </div> </div> - <div class="inline field"{{if DisableGitHooks}} hidden{{end}}> + <div class="inline field {{if DisableGitHooks}}gt-hidden{{end}}"> <div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}"> <label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label> <input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}> diff --git a/templates/install.tmpl b/templates/install.tmpl index cfcb7bb374..2e10b006b2 100644 --- a/templates/install.tmpl +++ b/templates/install.tmpl @@ -28,7 +28,7 @@ </div> </div> - <div class="hide" data-db-setting-for="common-host"> + <div class="gt-hidden" data-db-setting-for="common-host"> <div class="inline required field {{if .Err_DbSetting}}error{{end}}"> <label for="db_host">{{.locale.Tr "install.host"}}</label> <input id="db_host" name="db_host" value="{{.db_host}}"> @@ -48,7 +48,7 @@ </div> </div> - <div class="hide" data-db-setting-for="postgres"> + <div class="gt-hidden" data-db-setting-for="postgres"> <div class="inline required field"> <label>{{.locale.Tr "install.ssl_mode"}}</label> <div class="ui selection database type dropdown"> @@ -69,7 +69,7 @@ </div> </div> - <div class="hide" data-db-setting-for="mysql"> + <div class="gt-hidden" data-db-setting-for="mysql"> <div class="inline required field"> <label>{{.locale.Tr "install.charset"}}</label> <div class="ui selection database type dropdown"> @@ -83,7 +83,7 @@ </div> </div> - <div class="hide" data-db-setting-for="sqlite3"> + <div class="gt-hidden" data-db-setting-for="sqlite3"> <div class="inline required field {{if or .Err_DbPath .Err_DbSetting}}error{{end}}"> <label for="db_path">{{.locale.Tr "install.path"}}</label> <input id="db_path" name="db_path" value="{{.db_path}}"> @@ -346,5 +346,5 @@ </div> </div> </div> -<img style="display: none" src="{{AssetUrlPrefix}}/img/loading.png"/> +<img class="gt-hidden" src="{{AssetUrlPrefix}}/img/loading.png"/> {{template "base/footer" .}} diff --git a/templates/org/settings/options.tmpl b/templates/org/settings/options.tmpl index 1f4a75ab1b..c1623db4d7 100644 --- a/templates/org/settings/options.tmpl +++ b/templates/org/settings/options.tmpl @@ -14,8 +14,8 @@ {{.CsrfTokenHtml}} <div class="required field {{if .Err_Name}}error{{end}}"> <label for="org_name">{{.locale.Tr "org.org_name_holder"}} - <span class="text red hide" id="org-name-change-prompt"> {{.locale.Tr "org.settings.change_orgname_prompt"}}</span> - <span class="text red hide" id="org-name-change-redirect-prompt"> {{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}</span> + <span class="text red gt-hidden" id="org-name-change-prompt"> {{.locale.Tr "org.settings.change_orgname_prompt"}}</span> + <span class="text red gt-hidden" id="org-name-change-redirect-prompt"> {{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}</span> </label> <input id="org_name" name="name" value="{{.Org.Name}}" data-org-name="{{.Org.Name}}" autofocus required> </div> diff --git a/templates/org/team/new.tmpl b/templates/org/team/new.tmpl index 719ca4397d..a9fed40c5e 100644 --- a/templates/org/team/new.tmpl +++ b/templates/org/team/new.tmpl @@ -71,7 +71,7 @@ </div> <div class="ui divider"></div> - <div class="team-units required grouped field"{{if eq .Team.AccessMode 3}} style="display: none"{{end}}> + <div class="team-units required grouped field {{if eq .Team.AccessMode 3}}gt-hidden{{end}}"> <label>{{.locale.Tr "org.team_unit_desc"}}</label> <table class="ui celled table"> <thead> diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl index 56198df07f..70f47aeb9c 100644 --- a/templates/repo/blame.tmpl +++ b/templates/repo/blame.tmpl @@ -12,7 +12,7 @@ <a class="ui tiny button" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.normal_view"}}</a> <a class="ui tiny button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.file_history"}}</a> <a class="ui tiny button unescape-button">{{.locale.Tr "repo.unescape_control_characters"}}</a> - <a class="ui tiny button escape-button" style="display: none;">{{.locale.Tr "repo.escape_control_characters"}}</a> + <a class="ui tiny button escape-button gt-hidden">{{.locale.Tr "repo.escape_control_characters"}}</a> </div> </div> </h4> diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl index e07021bd20..89d65146a9 100644 --- a/templates/repo/branch_dropdown.tmpl +++ b/templates/repo/branch_dropdown.tmpl @@ -27,7 +27,7 @@ </span> {{svg "octicon-triangle-down" 14 "dropdown icon"}} </button> - <div class="data" style="display: none" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}"> + <div class="data gt-hidden" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}"> {{if $showBranchesInDropdown}} {{range .root.Branches}} <div class="item branch {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div> diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl index 4341a428b7..eaf86ab4e1 100644 --- a/templates/repo/commits_list.tmpl +++ b/templates/repo/commits_list.tmpl @@ -72,7 +72,7 @@ {{end}} {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}} {{if IsMultilineCommitMessage .Message}} - <pre class="commit-body" style="display: none;">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre> + <pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre> {{end}} </td> {{if .Committer}} diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 49457b47fc..7c34a8f09e 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -52,7 +52,7 @@ <button class="ui button ellipsis-button" aria-expanded="false">...</button> {{end}} {{if IsMultilineCommitMessage .Message}} - <pre class="commit-body" style="display: none;">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre> + <pre class="commit-body gt-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre> {{end}} </div> {{end}} diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl index 1f8e1f59df..3887706c27 100644 --- a/templates/repo/create.tmpl +++ b/templates/repo/create.tmpl @@ -73,7 +73,7 @@ </div> </div> - <div id="template_units" style="display: none;"> + <div id="template_units" class="gt-hidden"> <div class="inline field"> <label>{{.locale.Tr "repo.template.items"}}</label> <div class="ui checkbox"> diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 319fdb58f8..62cc069555 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -67,7 +67,7 @@ </script> <div id="diff-file-list"></div> <div id="diff-container"> - <div id="diff-file-tree" class="hide"></div> + <div id="diff-file-tree" class="gt-hidden"></div> <div id="diff-file-boxes" class="sixteen wide column"> {{range $i, $file := .Diff.Files}} {{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}} @@ -116,7 +116,7 @@ {{end}} {{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}} <a class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</a> - <a class="ui basic tiny button escape-button" style="display: none;">{{$.locale.Tr "repo.escape_control_characters"}}</a> + <a class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</a> {{end}} {{if and (not $file.IsSubmodule) (not $.PageIsWiki)}} {{if $file.IsDeleted}} @@ -136,7 +136,7 @@ </div> </h4> <div class="diff-file-body ui attached unstackable table segment" {{if $file.IsViewed}}data-folded="true"{{end}}> - <div id="diff-source-{{$file.NameHash}}" class="file-body file-code unicode-escaped code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} hide{{end}}"> + <div id="diff-source-{{$file.NameHash}}" class="file-body file-code unicode-escaped code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} gt-hidden{{end}}"> {{if or $file.IsIncomplete $file.IsBin}} <div class="diff-file-body binary" style="padding: 5px 10px;"> {{if $file.IsIncomplete}} @@ -187,7 +187,7 @@ </div> {{if not $.Repository.IsArchived}} - <div class="hide" id="edit-content-form"> + <div class="gt-hidden" id="edit-content-form"> <div class="ui comment form"> <div class="ui top attached tabular menu"> <a class="active write item">{{$.locale.Tr "write"}}</a> diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl index 2ce0612e63..407f84e5c9 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -1,5 +1,5 @@ {{if and $.root.SignedUserID (not $.Repository.IsArchived)}} - <form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post"> + <form class="ui form {{if $.hidden}}gt-hidden comment-form comment-form-reply{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post"> {{$.root.CsrfTokenHtml}} <input type="hidden" name="origin" value="{{if $.root.PageIsPullFiles}}diff{{else}}timeline{{end}}"> <input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/> diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index ebed33bf21..a6f191728c 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -54,8 +54,8 @@ <span class="no-content">{{$.root.locale.Tr "repo.issues.no_content"}}</span> {{end}} </div> - <div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div> - <div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.root.RepoLink}}/comments/{{.ID}}" data-context="{{$.root.RepoLink}}"></div> + <div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div> + <div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.root.RepoLink}}/comments/{{.ID}}" data-context="{{$.root.RepoLink}}"></div> </div> {{$reactions := .Reactions.GroupByType}} {{if $reactions}} diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl index 16749bacbf..c7538a7969 100644 --- a/templates/repo/diff/compare.tmpl +++ b/templates/repo/diff/compare.tmpl @@ -88,7 +88,7 @@ {{end}} {{end}} </div> - <div class="scrolling menu reference-list-menu base-tag-list" style="display: none"> + <div class="scrolling menu reference-list-menu base-tag-list gt-hidden"> {{range .Tags}} <div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments .}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}">{{$BaseCompareName}}:{{.}}</div> {{end}} @@ -157,7 +157,7 @@ {{end}} {{end}} </div> - <div class="scrolling menu reference-list-menu head-tag-list" style="display: none"> + <div class="scrolling menu reference-list-menu head-tag-list gt-hidden"> {{range .HeadTags}} <div class="{{if eq $.HeadBranch .}}selected{{end}} item" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments $.BaseBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments .}}">{{$HeadCompareName}}:{{.}}</div> {{end}} @@ -184,10 +184,10 @@ {{if .IsNothingToCompare}} {{if and $.IsSigned $.AllowEmptyPr (not .Repository.IsArchived)}} <div class="ui segment">{{.locale.Tr "repo.pulls.nothing_to_compare_and_allow_empty_pr"}}</div> - <div class="ui info message show-form-container" {{if .Flash}}style="display: none"{{end}}> + <div class="ui info message show-form-container {{if .Flash}}gt-hidden{{end}}"> <button class="ui button green show-form">{{.locale.Tr "repo.pulls.new"}}</button> </div> - <div class="pullrequest-form" {{if not .Flash}}style="display: none"{{end}}> + <div class="pullrequest-form {{if not .Flash}}gt-hidden{{end}}"> {{template "repo/issue/new_form" .}} </div> {{else}} @@ -214,7 +214,7 @@ </div> {{else}} {{if and $.IsSigned (not .Repository.IsArchived)}} - <div class="ui info message show-form-container" {{if .Flash}}style="display: none"{{end}}> + <div class="ui info message show-form-container {{if .Flash}}gt-hidden{{end}}"> <button class="ui button green show-form">{{.locale.Tr "repo.pulls.new"}}</button> </div> {{else if .Repository.IsArchived}} @@ -223,7 +223,7 @@ </div> {{end}} {{if $.IsSigned}} - <div class="pullrequest-form" {{if not .Flash}}style="display: none"{{end}}> + <div class="pullrequest-form {{if not .Flash}}gt-hidden{{end}}"> {{template "repo/issue/new_form" .}} </div> {{end}} diff --git a/templates/repo/diff/conversation.tmpl b/templates/repo/diff/conversation.tmpl index b6d577ee5a..999197f94a 100644 --- a/templates/repo/diff/conversation.tmpl +++ b/templates/repo/diff/conversation.tmpl @@ -13,14 +13,14 @@ {{svg "octicon-unfold" 16 "gt-mr-3"}} {{$.locale.Tr "repo.issues.review.show_resolved"}} </button> - <button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated gt-df gt-ac"> + <button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button hide-outdated gt-df gt-ac gt-hidden"> {{svg "octicon-fold" 16 "gt-mr-3"}} {{$.locale.Tr "repo.issues.review.hide_resolved"}} </button> </div> </div> {{end}} - <div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}"> + <div id="code-comments-{{(index .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}gt-hidden{{end}}"> <div class="comment-list"> <ui class="ui comments"> {{template "repo/diff/comments" dict "root" $ "comments" .comments}} diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl index d068a12d13..2d4a731758 100644 --- a/templates/repo/diff/image_diff.tmpl +++ b/templates/repo/diff/image_diff.tmpl @@ -11,7 +11,7 @@ {{end}} </div> </div> - <div class="hide"> + <div class="gt-hidden"> <div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}"> <div class="diff-side-by-side"> {{if .blobBase}} diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index c4a48af9f5..992ccee8e4 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -36,7 +36,7 @@ {{end}} </div> <div class="ui bottom attached active tab segment" data-tab="write"> - <textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-{{.TreePath}}" + <textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}" data-url="{{.Repository.Link}}/markdown" data-context="{{.RepoLink}}" data-markdown-file-exts="{{.MarkdownFileExts}}" diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl index a271ab597b..bbd5c2dbde 100644 --- a/templates/repo/editor/patch.tmpl +++ b/templates/repo/editor/patch.tmpl @@ -25,7 +25,7 @@ <a class="active item" data-tab="write">{{svg "octicon-code" 16 "gt-mr-2"}}{{.locale.Tr "repo.editor.new_patch"}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="write"> - <textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-patch" + <textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-patch" data-context="{{.RepoLink}}" data-line-wrap-extensions="{{.LineWrapExtensions}}"> {{.FileContent}}</textarea> diff --git a/templates/repo/find/files.tmpl b/templates/repo/find/files.tmpl index 5ad7fa1915..dab46cf362 100644 --- a/templates/repo/find/files.tmpl +++ b/templates/repo/find/files.tmpl @@ -13,7 +13,7 @@ <tbody> </tbody> </table> - <div id="repo-find-file-no-result" class="ui row center gt-mt-5" hidden> + <div id="repo-find-file-no-result" class="ui row center gt-mt-5 gt-hidden"> <h3>{{.locale.Tr "repo.find_file.no_matching"}}</h3> </div> </div> diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 26f3823668..181aba4972 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -51,7 +51,7 @@ </div> </h2> <div class="ui dividing"></div> - <div class="ui segment loading hide" id="loading-indicator"></div> + <div class="ui segment loading gt-hidden" id="loading-indicator"></div> {{template "repo/graph/svgcontainer" .}} {{template "repo/graph/commits" .}} </div> diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index fb33441d54..075b859a04 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -34,7 +34,7 @@ </div> {{end}} {{if and .Permission.IsAdmin (not .Repository.IsArchived)}} - <div class="ui repo-topic-edit grid form" id="topic_edit" style="display:none"> + <div class="ui repo-topic-edit grid form gt-hidden" id="topic_edit"> <div class="fourteen wide column"> <div class="field"> <div class="ui fluid multiple search selection dropdown"> @@ -52,7 +52,7 @@ </div> </div> {{end}} - <div class="hide" id="validate_prompt"> + <div class="gt-hidden" id="validate_prompt"> <span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span> <span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span> </div> diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl index 0d87b0687c..51eb5e26a0 100644 --- a/templates/repo/issue/branch_selector_field.tmpl +++ b/templates/repo/issue/branch_selector_field.tmpl @@ -39,7 +39,7 @@ <div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div> {{end}} </div> - <div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}" style="display: none"> + <div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} gt-hidden"> {{if .Reference}} <div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{.locale.Tr "repo.clear_ref"}}</a></strong></div> {{end}} diff --git a/templates/repo/issue/labels/label.tmpl b/templates/repo/issue/labels/label.tmpl index 87d8f0c41c..6e9177aec2 100644 --- a/templates/repo/issue/labels/label.tmpl +++ b/templates/repo/issue/labels/label.tmpl @@ -1,5 +1,5 @@ <a - class="item {{if not .label.IsChecked}}hide{{end}}" + class="item {{if not .label.IsChecked}}gt-hidden{{end}}" id="label_{{.label.ID}}" href="{{.root.RepoLink}}/{{if or .root.IsPull .root.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.label.ID}}"{{/* FIXME: use .root.Issue.Link or create .root.Link */}} > diff --git a/templates/repo/issue/labels/labels_sidebar.tmpl b/templates/repo/issue/labels/labels_sidebar.tmpl index e2ef38d625..bd878d6f5c 100644 --- a/templates/repo/issue/labels/labels_sidebar.tmpl +++ b/templates/repo/issue/labels/labels_sidebar.tmpl @@ -1,5 +1,5 @@ <div class="ui labels list"> - <span class="no-select item {{if .ctx.HasSelectedLabel}}hide{{end}}">{{.ctx.locale.Tr "repo.issues.new.no_label"}}</span> + <span class="no-select item {{if .ctx.HasSelectedLabel}}gt-hidden{{end}}">{{.ctx.locale.Tr "repo.issues.new.no_label"}}</span> <span class="labels-list"> {{range .ctx.Labels}} {{template "repo/issue/labels/label" dict "root" $.root "label" .}} diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 0e4969a706..2b1bea822f 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -199,7 +199,7 @@ </div> </div> </div> - <div id="issue-actions" class="ui stackable grid hide"> + <div id="issue-actions" class="ui stackable grid gt-hidden"> <div class="six wide column"> {{template "repo/issue/openclose" .}} </div> diff --git a/templates/repo/issue/milestone_issues.tmpl b/templates/repo/issue/milestone_issues.tmpl index 57012bddb6..fca9597446 100644 --- a/templates/repo/issue/milestone_issues.tmpl +++ b/templates/repo/issue/milestone_issues.tmpl @@ -135,7 +135,7 @@ </div> </div> </div> - <div id="issue-actions" class="ui stackable grid hide"> + <div id="issue-actions" class="ui stackable grid gt-hidden"> <div class="six wide column"> {{template "repo/issue/openclose" .}} </div> diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl index 2a6fcaa995..8346d07a13 100644 --- a/templates/repo/issue/new_form.tmpl +++ b/templates/repo/issue/new_form.tmpl @@ -134,7 +134,7 @@ </div> </div> <div class="ui select-milestone list"> - <span class="no-select item {{if .Milestone}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span> + <span class="no-select item {{if .Milestone}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span> <div class="selected"> {{if .Milestone}} <a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}"> @@ -198,7 +198,7 @@ </div> </div> <div class="ui select-project list"> - <span class="no-select item {{if .Project}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span> + <span class="no-select item {{if .Project}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span> <div class="selected"> {{if .Project}} <a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}"> @@ -236,11 +236,11 @@ </div> </div> <div class="ui assignees list"> - <span class="no-select item {{if .HasSelectedLabel}}hide{{end}}"> + <span class="no-select item {{if .HasSelectedLabel}}gt-hidden{{end}}"> {{.locale.Tr "repo.issues.new.no_assignees"}} </span> {{range .Assignees}} - <a class="hide item gt-p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}"> + <a class="item gt-p-2 muted gt-hidden" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}"> {{avatar $.Context . 28 "gt-mr-3 gt-vm"}}{{.GetDisplayName}} </a> {{end}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index ab419472ed..887dd2c42d 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -77,8 +77,8 @@ <span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span> {{end}} </div> - <div id="issue-{{.Issue.ID}}-raw" class="raw-content hide">{{.Issue.Content}}</div> - <div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div> + <div id="issue-{{.Issue.ID}}-raw" class="raw-content gt-hidden">{{.Issue.Content}}</div> + <div class="edit-content-zone gt-hidden" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div> {{if .Issue.Attachments}} {{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments "Content" .Issue.RenderedContent}} {{end}} @@ -194,7 +194,7 @@ {{template "repo/issue/view_content/sidebar" .}} </div> -<div class="hide" id="edit-content-form"> +<div class="gt-hidden" id="edit-content-form"> <div class="ui comment form"> <div class="ui top tabular menu"> <a class="active write item">{{$.locale.Tr "write"}}</a> @@ -224,7 +224,7 @@ {{template "repo/issue/view_content/reference_issue_dialog" .}} -<div class="hide" id="no-content"> +<div class="gt-hidden" id="no-content"> <span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span> </div> diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index 5bd5c8b48e..b81c3c7f03 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -77,8 +77,8 @@ <span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span> {{end}} </div> - <div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div> - <div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> + <div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div> + <div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> {{if .Attachments}} {{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}} {{end}} @@ -449,8 +449,8 @@ <span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span> {{end}} </div> - <div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div> - <div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> + <div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div> + <div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> {{if .Attachments}} {{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}} {{end}} @@ -576,8 +576,8 @@ <span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span> {{end}} </div> - <div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div> - <div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> + <div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div> + <div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div> </div> {{$reactions := .Reactions.GroupByType}} {{if $reactions}} diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl index dff6b5daaa..862d5d9a1b 100644 --- a/templates/repo/issue/view_content/pull.tmpl +++ b/templates/repo/issue/view_content/pull.tmpl @@ -456,7 +456,7 @@ {{if $.StillCanManualMerge}} <div class="ui divider"></div> - <div class="ui form manually-merged-fields" style="display: none"> + <div class="ui form manually-merged-fields gt-hidden"> <form action="{{.Link}}/merge" method="post"> {{.CsrfTokenHtml}} <div class="field"> diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl index 5a7f6e867b..78deed9567 100644 --- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl +++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl @@ -1,6 +1,6 @@ <div class="ui divider"></div> <div class="instruct-toggle"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div> -<div class="instruct-content gt-mt-3" style="display:none"> +<div class="instruct-content gt-mt-3 gt-hidden"> <div><h3 class="gt-di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div> <div class="ui secondary segment"> {{if eq $.Issue.PullRequest.Flow 0}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 8cd34ede6e..2b24825b5f 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -50,7 +50,7 @@ </div> <div class="ui assignees list"> - <span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span> + <span class="no-select item {{if or .OriginalReviews .PullReviewers}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span> <div class="selected"> {{range .PullReviewers}} <div class="item gt-mb-2"> @@ -202,7 +202,7 @@ </div> </div> <div class="ui select-milestone list"> - <span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span> + <span class="no-select item {{if .Issue.Milestone}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span> <div class="selected"> {{if .Issue.Milestone}} <a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}"> @@ -259,7 +259,7 @@ </div> </div> <div class="ui select-project list"> - <span class="no-select item {{if .Issue.ProjectID}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span> + <span class="no-select item {{if .Issue.ProjectID}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span> <div class="selected"> {{if .Issue.ProjectID}} <a class="item muted sidebar-item-link" href="{{.Issue.Project.Link}}"> @@ -308,7 +308,7 @@ </div> </div> <div class="ui assignees list"> - <span class="no-select item {{if .Issue.Assignees}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_assignees"}}</span> + <span class="no-select item {{if .Issue.Assignees}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_assignees"}}</span> <div class="selected"> {{range .Issue.Assignees}} <div class="item"> @@ -423,7 +423,7 @@ <div class="ui divider"></div> <span class="text"><strong>{{.locale.Tr "repo.issues.due_date"}}</strong></span> <div class="ui form" id="deadline-loader"> - <div class="ui negative message" id="deadline-err-invalid-date" style="display: none;"> + <div class="ui negative message gt-hidden" id="deadline-err-invalid-date"> {{svg "octicon-x" 16 "close icon"}} {{.locale.Tr "repo.issues.due_date_invalid"}} </div> @@ -447,7 +447,7 @@ {{end}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - <div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm"> + <div {{if ne .Issue.DeadlineUnix 0}} class="gt-hidden"{{end}} id="deadlineForm"> <form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/{{PathEscape .Repository.Owner.Name}}/{{PathEscape .Repository.Name}}/issues/{{.Issue.Index}}/deadline" method="post" id="update-issue-deadline-form"> {{$.CsrfTokenHtml}} <input required placeholder="{{.locale.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate"> diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index 7ba6198b62..b43253f90b 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -8,14 +8,14 @@ <h1> <span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span> <span class="index">#{{.Issue.Index}}</span> - <div id="edit-title-input" class="ui input gt-ml-4" style="display: none"> + <div id="edit-title-input" class="ui input gt-ml-4 gt-hidden"> <input value="{{.Issue.Title}}" maxlength="255" autocomplete="off"> </div> </h1> {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} <div class="edit-buttons"> - <button id="cancel-edit-title" class="ui basic button secondary in-edit" style="display: none">{{.locale.Tr "repo.issues.cancel"}}</button> - <button id="save-edit-title" class="ui primary button in-edit" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button> + <button id="cancel-edit-title" class="ui basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button> + <button id="save-edit-title" class="ui primary button in-edit gt-hidden" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button> </div> {{end}} </div> @@ -61,7 +61,7 @@ {{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}} </span> {{end}} - <span id="pull-desc-edit" style="display: none"> + <span id="pull-desc-edit gt-hidden"> <div class="ui floating filter dropdown"> <div class="ui basic small button"> <span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span> diff --git a/templates/repo/migrate/migrating.tmpl b/templates/repo/migrate/migrating.tmpl index e6d329a1ab..a3552610c4 100644 --- a/templates/repo/migrate/migrating.tmpl +++ b/templates/repo/migrate/migrating.tmpl @@ -12,7 +12,7 @@ <img src="{{AssetUrlPrefix}}/img/loading.png"/> </div> </div> - <div id="repo_migrating_failed_image" class="sixteen wide center aligned centered column" style="display: none;"> + <div id="repo_migrating_failed_image" class="sixteen wide center aligned centered column gt-hidden"> <div> <img src="{{AssetUrlPrefix}}/img/failed.png"/> </div> @@ -24,7 +24,7 @@ <p>{{.locale.Tr "repo.migrate.migrating" .CloneAddr | Safe}}</p> <p id="repo_migrating_progress_message"></p> </div> - <div id="repo_migrating_failed" hidden> + <div id="repo_migrating_failed" class="gt-hidden"> {{if .CloneAddr}} <p>{{.locale.Tr "repo.migrate.migrating_failed" .CloneAddr | Safe}}</p> {{else}} diff --git a/templates/repo/migrate/options.tmpl b/templates/repo/migrate/options.tmpl index 5fdf6c7ab4..d39caf01b4 100644 --- a/templates/repo/migrate/options.tmpl +++ b/templates/repo/migrate/options.tmpl @@ -14,9 +14,9 @@ <input id="lfs" name="lfs" type="checkbox" {{if .lfs}} checked{{end}}> <label>{{.locale.Tr "repo.migrate_options_lfs"}}</label> </div> - <span id="lfs_settings" style="display:none">(<a id="lfs_settings_show" href="#">{{.locale.Tr "repo.settings.advanced_settings"}}</a>)</span> + <span id="lfs_settings" class="gt-hidden">(<a id="lfs_settings_show" href="#">{{.locale.Tr "repo.settings.advanced_settings"}}</a>)</span> </div> -<div id="lfs_endpoint" style="display:none"> +<div id="lfs_endpoint" class="gt-hidden"> <span class="help">{{.locale.Tr "repo.migrate_options_lfs_endpoint.description" "https://github.com/git-lfs/git-lfs/blob/main/docs/api/server-discovery.md#server-discovery" | Str2html}}{{if .ContextUser.CanImportLocal}} {{.locale.Tr "repo.migrate_options_lfs_endpoint.description.local"}}{{end}}</span> <div class="inline field {{if .Err_LFSEndpoint}}error{{end}}"> <label>{{.locale.Tr "repo.migrate_options_lfs_endpoint.label"}}</label> diff --git a/templates/repo/settings/deploy_keys.tmpl b/templates/repo/settings/deploy_keys.tmpl index 26d2c5a2f2..22fddeb4df 100644 --- a/templates/repo/settings/deploy_keys.tmpl +++ b/templates/repo/settings/deploy_keys.tmpl @@ -15,7 +15,7 @@ </div> </h4> <div class="ui attached segment"> - <div class="{{if not .HasError}}hide{{end}} gt-mb-4" id="add-deploy-key-panel"> + <div class="{{if not .HasError}}gt-hidden{{end}} gt-mb-4" id="add-deploy-key-panel"> <form class="ui form" action="{{.Link}}" method="post"> {{.CsrfTokenHtml}} <div class="field"> diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl index a4f8778225..d4df95b29a 100644 --- a/templates/repo/settings/githook_edit.tmpl +++ b/templates/repo/settings/githook_edit.tmpl @@ -18,7 +18,7 @@ </div> <div class="field"> <label for="content">{{$.locale.Tr "repo.settings.githook_content"}}</label> - <textarea id="content" name="content" class="hide">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea> + <textarea id="content" name="content" class="gt-hidden">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea> <div class="editor-loading is-loading"></div> </div> <div class="inline field"> diff --git a/templates/repo/settings/lfs_file.tmpl b/templates/repo/settings/lfs_file.tmpl index 54b40bd004..450601dc9b 100644 --- a/templates/repo/settings/lfs_file.tmpl +++ b/templates/repo/settings/lfs_file.tmpl @@ -9,7 +9,7 @@ <a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.LFSFile.Oid}}</span> <div class="ui right"> {{if .EscapeStatus.Escaped}} - <a class="ui mini basic button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a> + <a class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a> <a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a> {{end}} <a class="ui primary show-panel button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{$.locale.Tr "repo.settings.lfs_findcommits"}}</a> diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl index 767d66114c..bf7fe05de2 100644 --- a/templates/repo/settings/webhook/history.tmpl +++ b/templates/repo/settings/webhook/history.tmpl @@ -25,7 +25,7 @@ </span> </div> </div> - <div class="info hide" id="info-{{.ID}}"> + <div class="info gt-hidden" id="info-{{.ID}}"> <div class="ui top attached tabular menu"> <a class="item active" data-tab="request-{{.ID}}">{{$.locale.Tr "repo.settings.webhook.request"}}</a> <a class="item" data-tab="response-{{.ID}}"> diff --git a/templates/repo/settings/webhook/settings.tmpl b/templates/repo/settings/webhook/settings.tmpl index 5183401de1..57745c0401 100644 --- a/templates/repo/settings/webhook/settings.tmpl +++ b/templates/repo/settings/webhook/settings.tmpl @@ -22,7 +22,7 @@ </div> </div> - <div class="events fields ui grid" {{if not .Webhook.ChooseEvents}}style="display:none"{{end}}> + <div class="events fields ui grid {{if not .Webhook.ChooseEvents}}gt-hidden{{end}}"> <!-- Repository Events --> <div class="fourteen wide column"> <label>{{.locale.Tr "repo.settings.event_header_repository"}}</label> diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index 5442307961..5c1688d019 100644 --- a/templates/repo/sub_menu.tmpl +++ b/templates/repo/sub_menu.tmpl @@ -21,7 +21,7 @@ </div> </div> {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} - <div class="ui segment sub-menu language-stats-details" style="display: none"> + <div class="ui segment sub-menu language-stats-details gt-hidden"> <div class="ui horizontal center link list"> {{range .LanguageStats}} <div class="item gt-df gt-ac gt-jc"> diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 5c2c953a5b..2e0f4d65fd 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -33,7 +33,7 @@ {{end}} <a class="ui mini basic button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_history"}}</a> {{if .EscapeStatus.Escaped}} - <a class="ui mini basic button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a> + <a class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a> <a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a> {{end}} </div> @@ -52,7 +52,7 @@ {{end}} {{end}} {{else if .EscapeStatus.Escaped}} - <a class="ui mini basic button unescape-button gt-mr-2" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a> + <a class="ui mini basic button unescape-button gt-mr-2 gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a> <a class="ui mini basic button escape-button gt-mr-2">{{.locale.Tr "repo.escape_control_characters"}}</a> {{end}} </div> diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index ab7065015c..6fcf60daef 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -29,7 +29,7 @@ <span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span> {{if IsMultilineCommitMessage .LatestCommit.Message}} <button class="ui button ellipsis-button" aria-expanded="false">...</button> - <pre class="commit-body" style="display: none;">{{RenderCommitBody $.Context .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> + <pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> {{end}} </span> {{end}} diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl index e56c66fa4a..15553cedd8 100644 --- a/templates/repo/wiki/view.tmpl +++ b/templates/repo/wiki/view.tmpl @@ -47,7 +47,7 @@ </div> <div class="eight wide right aligned column"> {{if .EscapeStatus.Escaped}} - <a class="ui small button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a> + <a class="ui small button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a> <a class="ui small button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a> {{end}} {{if and .CanWriteWiki (not .Repository.IsMirror)}} diff --git a/templates/shared/secrets/add_list.tmpl b/templates/shared/secrets/add_list.tmpl index 27d415be81..9105b7ad9b 100644 --- a/templates/shared/secrets/add_list.tmpl +++ b/templates/shared/secrets/add_list.tmpl @@ -5,7 +5,7 @@ </div> </h4> <div class="ui attached segment"> - <div class="{{if not .HasError}}hide {{end}}gt-mb-4" id="add-secret-panel"> + <div class="{{if not .HasError}}gt-hidden {{end}}gt-mb-4" id="add-secret-panel"> <form class="ui form" action="{{.Link}}" method="post"> {{.CsrfTokenHtml}} <div class="field"> diff --git a/templates/user/auth/webauthn_error.tmpl b/templates/user/auth/webauthn_error.tmpl index c3cae710f1..447d289a28 100644 --- a/templates/user/auth/webauthn_error.tmpl +++ b/templates/user/auth/webauthn_error.tmpl @@ -5,18 +5,18 @@ <div class="header"> {{.locale.Tr "webauthn_error"}} </div> - <div class="hide" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div> - <div class="hide" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div> - <div class="hide" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div> - <div class="hide" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div> - <div class="hide" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div> - <div class="hide" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div> - <div class="hide" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div> - <div class="hide" data-webauthn-error-msg="general"></div> + <div class="gt-hidden" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div> + <div class="gt-hidden" data-webauthn-error-msg="general"></div> </div> </div> <div class="actions"> - <button onclick="window.location.reload()" class="success ui button hide webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button> + <button onclick="window.location.reload()" class="success ui button gt-hidden webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button> <div class="ui cancel button">{{.locale.Tr "cancel"}}</div> </div> </div> diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl index 8dae8baa28..c8db659c13 100644 --- a/templates/user/notification/notification_div.tmpl +++ b/templates/user/notification/notification_div.tmpl @@ -13,7 +13,7 @@ {{if and (eq .Status 1)}} <form action="{{AppSubUrl}}/notifications/purge" method="POST" style="margin-left: auto;"> {{$.CsrfTokenHtml}} - <div class="{{if not $notificationUnreadCount}}hide{{end}}"> + <div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}"> <button class="ui mini button primary" title='{{$.locale.Tr "notification.mark_all_as_read"}}'> {{svg "octicon-checklist"}} </button> diff --git a/templates/user/settings/keys_gpg.tmpl b/templates/user/settings/keys_gpg.tmpl index b200a49374..c80890940a 100644 --- a/templates/user/settings/keys_gpg.tmpl +++ b/templates/user/settings/keys_gpg.tmpl @@ -5,7 +5,7 @@ </div> </h4> <div class="ui attached segment"> - <div class="{{if not .HasGPGError}}hide{{end}} gt-mb-4" id="add-gpg-key-panel"> + <div class="{{if not .HasGPGError}}gt-hidden{{end}} gt-mb-4" id="add-gpg-key-panel"> <form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post"> {{.CsrfTokenHtml}} <input type="hidden" name="title" value="none"> diff --git a/templates/user/settings/keys_principal.tmpl b/templates/user/settings/keys_principal.tmpl index b0cacbe54c..cc1152b739 100644 --- a/templates/user/settings/keys_principal.tmpl +++ b/templates/user/settings/keys_principal.tmpl @@ -34,7 +34,7 @@ </div> <br> - <div {{if not .HasPrincipalError}}class="hide"{{end}} id="add-ssh-principal-panel"> + <div {{if not .HasPrincipalError}}class="gt-hidden"{{end}} id="add-ssh-principal-panel"> <h4 class="ui top attached header"> {{.locale.Tr "settings.add_new_principal"}} </h4> diff --git a/templates/user/settings/keys_ssh.tmpl b/templates/user/settings/keys_ssh.tmpl index 8228a1b7f2..891959d351 100644 --- a/templates/user/settings/keys_ssh.tmpl +++ b/templates/user/settings/keys_ssh.tmpl @@ -11,7 +11,7 @@ </div> </h4> <div class="ui attached segment"> - <div class="{{if not .HasSSHError}}hide{{end}} gt-mb-4" id="add-ssh-key-panel"> + <div class="{{if not .HasSSHError}}gt-hidden{{end}} gt-mb-4" id="add-ssh-key-panel"> <form class="ui form" action="{{.Link}}" method="post"> {{.CsrfTokenHtml}} <div class="field {{if .Err_Title}}error{{end}}"> diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl index ea9a8bba6d..240a579fb7 100644 --- a/templates/user/settings/profile.tmpl +++ b/templates/user/settings/profile.tmpl @@ -12,8 +12,8 @@ {{.CsrfTokenHtml}} <div class="required field {{if .Err_Name}}error{{end}}"> <label for="username">{{.locale.Tr "username"}} - <span class="text red hide" id="name-change-prompt"> {{.locale.Tr "settings.change_username_prompt"}}</span> - <span class="text red hide" id="name-change-redirect-prompt"> {{.locale.Tr "settings.change_username_redirect_prompt"}}</span> + <span class="text red gt-hidden" id="name-change-prompt"> {{.locale.Tr "settings.change_username_prompt"}}</span> + <span class="text red gt-hidden" id="name-change-redirect-prompt"> {{.locale.Tr "settings.change_username_redirect_prompt"}}</span> </label> <input id="username" name="name" value="{{.SignedUser.Name}}" data-name="{{.SignedUser.Name}}" autofocus required {{if or (not .SignedUser.IsLocal) .IsReverseProxy}}disabled{{end}}> {{if or (not .SignedUser.IsLocal) .IsReverseProxy}} diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 3742f3a53f..fa59768ee5 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -113,11 +113,11 @@ export default { }, adjustToggleButton(visible) { const [toShow, toHide] = document.querySelectorAll('.diff-toggle-file-tree-button .icon'); - toShow.classList.toggle('hide', visible); // hide the toShow icon if the tree is visible - toHide.classList.toggle('hide', !visible); // similarly + toShow.classList.toggle('gt-hidden', visible); // hide the toShow icon if the tree is visible + toHide.classList.toggle('gt-hidden', !visible); // similarly const diffTree = document.getElementById('diff-file-tree'); - diffTree.classList.toggle('hide', !visible); + diffTree.classList.toggle('gt-hidden', !visible); }, loadMoreData() { this.isLoadingNewData = true; diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js index d0b3e461d5..092cf770be 100644 --- a/web_src/js/features/admin/common.js +++ b/web_src/js/features/admin/common.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {checkAppUrl} from '../common-global.js'; +import {hideElem, showElem, toggleElem} from '../../utils/dom.js'; const {csrfToken} = window.config; @@ -18,8 +19,8 @@ export function initAdminCommon() { if ($(this).val().substring(0, 1) === '0') { $('#user_name').removeAttr('disabled'); $('#login_name').removeAttr('required'); - $('.non-local').hide(); - $('.local').show(); + hideElem($('.non-local')); + showElem($('.local')); $('#user_name').focus(); if ($(this).data('password') === 'required') { @@ -30,8 +31,8 @@ export function initAdminCommon() { $('#user_name').attr('disabled', 'disabled'); } $('#login_name').attr('required', 'required'); - $('.non-local').show(); - $('.local').hide(); + showElem($('.non-local')); + hideElem($('.local')); $('#login_name').focus(); $('#password').removeAttr('required'); @@ -41,38 +42,38 @@ export function initAdminCommon() { function onSecurityProtocolChange() { if ($('#security_protocol').val() > 0) { - $('.has-tls').show(); + showElem($('.has-tls')); } else { - $('.has-tls').hide(); + hideElem($('.has-tls')); } } function onUsePagedSearchChange() { if ($('#use_paged_search').prop('checked')) { - $('.search-page-size').show() + showElem($('.search-page-size')) .find('input').attr('required', 'required'); } else { - $('.search-page-size').hide() + hideElem($('.search-page-size')) .find('input').removeAttr('required'); } } function onOAuth2Change(applyDefaultValues) { - $('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide(); + hideElem($('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url')); $('.open_id_connect_auto_discovery_url input[required]').removeAttr('required'); const provider = $('#oauth2_provider').val(); switch (provider) { case 'openidConnect': $('.open_id_connect_auto_discovery_url input').attr('required', 'required'); - $('.open_id_connect_auto_discovery_url').show(); + showElem($('.open_id_connect_auto_discovery_url')); break; default: if ($(`#${provider}_customURLSettings`).data('required')) { $('#oauth2_use_custom_url').attr('checked', 'checked'); } if ($(`#${provider}_customURLSettings`).data('available')) { - $('.oauth2_use_custom_url').show(); + showElem($('.oauth2_use_custom_url')); } } onOAuth2UseCustomURLChange(applyDefaultValues); @@ -80,7 +81,7 @@ export function initAdminCommon() { function onOAuth2UseCustomURLChange(applyDefaultValues) { const provider = $('#oauth2_provider').val(); - $('.oauth2_use_custom_url_field').hide(); + hideElem($('.oauth2_use_custom_url_field')); $('.oauth2_use_custom_url_field input[required]').removeAttr('required'); if ($('#oauth2_use_custom_url').is(':checked')) { @@ -90,20 +91,20 @@ export function initAdminCommon() { } if ($(`#${provider}_${custom}`).data('available')) { $(`.oauth2_${custom} input`).attr('required', 'required'); - $(`.oauth2_${custom}`).show(); + showElem($(`.oauth2_${custom}`)); } } } } function onEnableLdapGroupsChange() { - $('#ldap-group-options').toggle($('.js-ldap-group-toggle').is(':checked')); + toggleElem($('#ldap-group-options'), $('.js-ldap-group-toggle').is(':checked')); } // New authentication if ($('.admin.new.authentication').length > 0) { $('#auth_type').on('change', function () { - $('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide(); + hideElem($('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi')); $('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required'); $('.binddnrequired').removeClass('required'); @@ -111,30 +112,30 @@ export function initAdminCommon() { const authType = $(this).val(); switch (authType) { case '2': // LDAP - $('.ldap').show(); + showElem($('.ldap')); $('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required'); $('.binddnrequired').addClass('required'); break; case '3': // SMTP - $('.smtp').show(); - $('.has-tls').show(); + showElem($('.smtp')); + showElem($('.has-tls')); $('.smtp div.required input, .has-tls').attr('required', 'required'); break; case '4': // PAM - $('.pam').show(); + showElem($('.pam')); $('.pam input').attr('required', 'required'); break; case '5': // LDAP - $('.dldap').show(); + showElem($('.dldap')); $('.dldap div.required:not(.ldap) input').attr('required', 'required'); break; case '6': // OAuth2 - $('.oauth2').show(); + showElem($('.oauth2')); $('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required'); onOAuth2Change(true); break; case '7': // SSPI - $('.sspi').show(); + showElem($('.sspi')); $('.sspi div.required input').attr('required', 'required'); break; } diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index c0acf091c7..57a429ed9f 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -8,6 +8,7 @@ import {attachCheckboxAria, attachDropdownAria} from './aria.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {initTooltip} from '../modules/tippy.js'; import {svg} from '../svg.js'; +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; const {appUrl, csrfToken} = window.config; @@ -118,7 +119,7 @@ export function initGlobalCommon() { $('.tabable.menu .item').tab(); $('.toggle.button').on('click', function () { - $($(this).data('target')).slideToggle(100); + toggleElem($($(this).data('target'))); }); // make table <tr> and <td> elements clickable like a link @@ -317,7 +318,7 @@ export function initGlobalLinkActions() { export function initGlobalButtons() { $('.show-panel.button').on('click', function () { - $($(this).data('panel')).show(); + showElem($(this).data('panel')); }); $('.hide-panel.button').on('click', function (event) { @@ -325,12 +326,12 @@ export function initGlobalButtons() { event.preventDefault(); let sel = $(this).attr('data-panel'); if (sel) { - $(sel).hide(); + hideElem($(sel)); return; } sel = $(this).attr('data-panel-closest'); if (sel) { - $(this).closest(sel).hide(); + hideElem($(this).closest(sel)); return; } // should never happen, otherwise there is a bug in code diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js index f53dd5081b..0965caef15 100644 --- a/web_src/js/features/common-issue.js +++ b/web_src/js/features/common-issue.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {updateIssuesMeta} from './repo-issue.js'; +import {toggleElem} from '../utils/dom.js'; export function initCommonIssue() { const $issueSelectAllWrapper = $('.issue-checkbox-all'); @@ -19,8 +20,8 @@ export function initCommonIssue() { $issueSelectAll.prop({'checked': false, 'indeterminate': false}); } // if any issue is selected, show the action panel, otherwise show the filter panel - $('#issue-filters').toggle(!anyChecked); - $('#issue-actions').toggle(anyChecked); + toggleElem($('#issue-filters'), !anyChecked); + toggleElem($('#issue-actions'), anyChecked); // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper); }; diff --git a/web_src/js/features/common-organization.js b/web_src/js/features/common-organization.js index 218c039041..1796efc6a8 100644 --- a/web_src/js/features/common-organization.js +++ b/web_src/js/features/common-organization.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {initCompLabelEdit} from './comp/LabelEdit.js'; +import {hideElem, showElem} from '../utils/dom.js'; export function initCommonOrganization() { if ($('.organization').length === 0) { @@ -11,11 +12,11 @@ export function initCommonOrganization() { const $prompt = $('#org-name-change-prompt'); const $prompt_redirect = $('#org-name-change-redirect-prompt'); if ($(this).val().toString().toLowerCase() !== $(this).data('org-name').toString().toLowerCase()) { - $prompt.show(); - $prompt_redirect.show(); + showElem($prompt); + showElem($prompt_redirect); } else { - $prompt.hide(); - $prompt_redirect.hide(); + hideElem($prompt); + hideElem($prompt_redirect); } }); } diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js index cda0fa3910..f4c82898fd 100644 --- a/web_src/js/features/comp/WebHookEditor.js +++ b/web_src/js/features/comp/WebHookEditor.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem, toggleElem} from '../../utils/dom.js'; const {csrfToken} = window.config; @@ -9,18 +10,18 @@ export function initCompWebHookEditor() { $('.events.checkbox input').on('change', function () { if ($(this).is(':checked')) { - $('.events.fields').show(); + showElem($('.events.fields')); } }); $('.non-events.checkbox input').on('change', function () { if ($(this).is(':checked')) { - $('.events.fields').hide(); + hideElem($('.events.fields')); } }); const updateContentType = function () { const visible = $('#http_method').val() === 'POST'; - $('#content_type').parent().parent()[visible ? 'show' : 'hide'](); + toggleElem($('#content_type').parent().parent(), visible); }; updateContentType(); $('#http_method').on('change', () => { diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 250ea95798..7a285f1f8d 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem} from '../utils/dom.js'; function getDefaultSvgBoundsIfUndefined(svgXml, src) { const DefaultSize = 300; @@ -104,7 +105,7 @@ export function initImageDiff() { if (bounds) { info.$image.attr('width', bounds.width); info.$image.attr('height', bounds.height); - info.$boundsInfo.hide(); + hideElem(info.$boundsInfo); } } } @@ -128,8 +129,8 @@ export function initImageDiff() { initOverlay(createContext($imageAfter[2], $imageBefore[2])); } - $container.find('> .loader').hide(); - $container.find('> .hide').removeClass('hide'); + hideElem($container.find('> .loader')); + $container.find('> .gt-hidden').removeClass('gt-hidden'); } function initSideBySide(sizes) { diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js index 9468ba9c42..2ba6fe1279 100644 --- a/web_src/js/features/install.js +++ b/web_src/js/features/install.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; export function initInstall() { if ($('.page-content.install').length === 0) { @@ -21,12 +22,12 @@ export function initInstall() { // Database type change detection. $('#db_type').on('change', function () { const dbType = $(this).val(); - $('div[data-db-setting-for]').hide(); - $(`div[data-db-setting-for=${dbType}]`).show(); + hideElem($('div[data-db-setting-for]')); + showElem($(`div[data-db-setting-for=${dbType}]`)); if (dbType !== 'sqlite3') { // for most remote database servers - $(`div[data-db-setting-for=common-host]`).show(); + showElem($(`div[data-db-setting-for=common-host]`)); const lastDbHost = $dbHost.val(); const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost); if (isDbHostDefault) { diff --git a/web_src/js/features/org-team.js b/web_src/js/features/org-team.js index 9e6c3c7ff1..3640bb96f7 100644 --- a/web_src/js/features/org-team.js +++ b/web_src/js/features/org-team.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl} = window.config; @@ -7,9 +8,9 @@ export function initOrgTeamSettings() { $('.organization.new.team input[name=permission]').on('change', () => { const val = $('input[name=permission]:checked', '.organization.new.team').val(); if (val === 'admin') { - $('.organization.new.team .team-units').hide(); + hideElem($('.organization.new.team .team-units')); } else { - $('.organization.new.team .team-units').show(); + showElem($('.organization.new.team .team-units')); } }); } diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 3aba850911..e2eef3ee59 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {createTippy} from '../modules/tippy.js'; +import {toggleElem} from '../utils/dom.js'; const {csrfToken} = window.config; @@ -7,7 +8,7 @@ export function initRepoEllipsisButton() { $('.ellipsis-button').on('click', function (e) { e.preventDefault(); const expanded = $(this).attr('aria-expanded') === 'true'; - $(this).parent().find('.commit-body').toggle(); + toggleElem($(this).parent().find('.commit-body')); $(this).attr('aria-expanded', String(!expanded)); }); } diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js index a218c5b307..1a32d7cb64 100644 --- a/web_src/js/features/repo-common.js +++ b/web_src/js/features/repo-common.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; const {csrfToken} = window.config; @@ -76,8 +77,8 @@ export function initRepoCommonBranchOrTagDropdown(selector) { $(selector).each(function () { const $dropdown = $(this); $dropdown.find('.reference.column').on('click', function () { - $dropdown.find('.scrolling.reference-list-menu').hide(); - $($(this).data('target')).show(); + hideElem($dropdown.find('.scrolling.reference-list-menu')); + showElem($($(this).data('target'))); return false; }); }); @@ -102,7 +103,7 @@ export function initRepoCommonLanguageStats() { if ($('.language-stats').length > 0) { $('.language-stats').on('click', (e) => { e.preventDefault(); - $('.language-stats-details, .repository-menu').slideToggle(); + toggleElem($('.language-stats-details, .repository-menu')); }); } } diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 9b5da7de82..d2559b1237 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -35,8 +35,8 @@ export function initRepoDiffFileViewToggle() { $this.addClass('active'); const $target = $($this.data('toggle-selector')); - $target.parent().children().addClass('hide'); - $target.removeClass('hide'); + $target.parent().children().addClass('gt-hidden'); + $target.removeClass('gt-hidden'); }); } @@ -92,7 +92,7 @@ export function initRepoDiffConversationNav() { // Previous/Next code review conversation $(document).on('click', '.previous-conversation', (e) => { const $conversation = $(e.currentTarget).closest('.comment-code-cloud'); - const $conversations = $('.comment-code-cloud:not(.hide)'); + const $conversations = $('.comment-code-cloud:not(.gt-hidden)'); const index = $conversations.index($conversation); const previousIndex = index > 0 ? index - 1 : $conversations.length - 1; const $previousConversation = $conversations.eq(previousIndex); @@ -101,7 +101,7 @@ export function initRepoDiffConversationNav() { }); $(document).on('click', '.next-conversation', (e) => { const $conversation = $(e.currentTarget).closest('.comment-code-cloud'); - const $conversations = $('.comment-code-cloud:not(.hide)'); + const $conversations = $('.comment-code-cloud:not(.gt-hidden)'); const index = $conversations.index($conversation); const nextIndex = index < $conversations.length - 1 ? index + 1 : 0; const $nextConversation = $conversations.eq(nextIndex); diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js index f32bdbb8c3..a9d143847d 100644 --- a/web_src/js/features/repo-editor.js +++ b/web_src/js/features/repo-editor.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import {htmlEscape} from 'escape-goat'; import {initMarkupContent} from '../markup/content.js'; import {createCodeEditor} from './codeeditor.js'; +import {hideElem, showElem} from '../utils/dom.js'; const {csrfToken} = window.config; let previewFileModes; @@ -81,10 +82,10 @@ export function initRepoEditor() { $('.js-quick-pull-choice-option').on('change', function () { if ($(this).val() === 'commit-to-new-branch') { - $('.quick-pull-branch-name').show(); + showElem($('.quick-pull-branch-name')); $('.quick-pull-branch-name input').prop('required', true); } else { - $('.quick-pull-branch-name').hide(); + hideElem($('.quick-pull-branch-name')); $('.quick-pull-branch-name input').prop('required', false); } $('#commit-button').text($(this).attr('button_text')); diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js index 0eae4a75db..093f90fe8e 100644 --- a/web_src/js/features/repo-findfile.js +++ b/web_src/js/features/repo-findfile.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {svg} from '../svg.js'; +import {toggleElem} from '../utils/dom.js'; const {csrf} = window.config; @@ -83,7 +84,7 @@ function filterRepoFiles(filter) { const filterResult = filterRepoFilesWeighted(files, filter); const tmplRow = `<tr><td><a></a></td></tr>`; - $repoFindFileNoResult.toggle(filterResult.length === 0); + toggleElem($repoFindFileNoResult, filterResult.length === 0); for (const r of filterResult) { const $row = $(tmplRow); const $a = $row.find('a'); diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js index 16d35e66f2..e445ae1103 100644 --- a/web_src/js/features/repo-graph.js +++ b/web_src/js/features/repo-graph.js @@ -56,17 +56,17 @@ export function initRepoGraphGit() { ajaxUrl.searchParams.set('div-only', 'true'); window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname); $('#pagination').empty(); - $('#rel-container').addClass('hide'); - $('#rev-container').addClass('hide'); - $('#loading-indicator').removeClass('hide'); + $('#rel-container').addClass('gt-hidden'); + $('#rev-container').addClass('gt-hidden'); + $('#loading-indicator').removeClass('gt-hidden'); (async () => { const div = $(await $.ajax(String(ajaxUrl))); $('#pagination').html(div.find('#pagination').html()); $('#rel-container').html(div.find('#rel-container').html()); $('#rev-container').html(div.find('#rev-container').html()); - $('#loading-indicator').addClass('hide'); - $('#rel-container').removeClass('hide'); - $('#rev-container').removeClass('hide'); + $('#loading-indicator').addClass('gt-hidden'); + $('#rel-container').removeClass('gt-hidden'); + $('#rev-container').removeClass('gt-hidden'); })(); }; const dropdownSelected = params.getAll('branch'); diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index c4bdf3d450..dfccffc794 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {stripTags} from '../utils.js'; +import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl, csrfToken} = window.config; @@ -13,12 +14,12 @@ export function initRepoTopicBar() { const topicPrompts = getPrompts(); mgrBtn.on('click', () => { - viewDiv.hide(); - editDiv.css('display', ''); // show Semantic UI Grid + hideElem(viewDiv); + showElem(editDiv); }); function getPrompts() { - const hidePrompt = $('div.hide#validate_prompt'); + const hidePrompt = $('#validate_prompt'); const prompts = { countPrompt: hidePrompt.children('#count_prompt').text(), formatPrompt: hidePrompt.children('#format_prompt').text() @@ -47,8 +48,8 @@ export function initRepoTopicBar() { link.insertBefore(last); } } - editDiv.css('display', 'none'); - viewDiv.show(); + hideElem(editDiv); + showElem(viewDiv); } }).fail((xhr) => { if (xhr.status === 422) { diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index a96da53f24..87295573e8 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -16,7 +16,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH ${svg('octicon-x', 16, 'close icon inside')} <div class="header gt-df gt-ac gt-sb"> <div>${itemTitleHtml}</div> - <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide"> + <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 gt-hidden"> ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')} <div class="menu"> <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div> @@ -62,7 +62,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH $dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml); // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden. if (resp.canSoftDelete) { - $dialog.find('.dialog-header-options').removeClass('hide'); + $dialog.find('.dialog-header-options').removeClass('gt-hidden'); } }); }, diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 135e3384ad..179ca9b726 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -5,6 +5,7 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js'; +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; const {appSubUrl, csrfToken} = window.config; @@ -40,7 +41,7 @@ export function initRepoIssueTimeTracking() { } function updateDeadline(deadlineString) { - $('#deadline-err-invalid-date').hide(); + hideElem($('#deadline-err-invalid-date')); $('#deadline-loader').addClass('loading'); let realDeadline = null; @@ -49,7 +50,7 @@ function updateDeadline(deadlineString) { if (Number.isNaN(newDate)) { $('#deadline-loader').removeClass('loading'); - $('#deadline-err-invalid-date').show(); + showElem($('#deadline-err-invalid-date')); return false; } realDeadline = new Date(newDate); @@ -69,7 +70,7 @@ function updateDeadline(deadlineString) { }, error() { $('#deadline-loader').removeClass('loading'); - $('#deadline-err-invalid-date').show(); + showElem($('#deadline-err-invalid-date')); }, }); } @@ -213,8 +214,8 @@ export function initRepoIssueCodeCommentCancel() { $(document).on('click', '.cancel-code-comment', (e) => { const form = $(e.currentTarget).closest('form'); if (form.length > 0 && form.hasClass('comment-form')) { - form.addClass('hide'); - form.closest('.comment-code-cloud').find('button.comment-form-reply').show(); + form.addClass('gt-hidden'); + showElem(form.closest('.comment-code-cloud').find('button.comment-form-reply')); } else { form.closest('.comment-code-cloud').remove(); } @@ -269,7 +270,7 @@ export function initRepoPullRequestUpdate() { export function initRepoPullRequestMergeInstruction() { $('.show-instruction').on('click', () => { - $('.instruct-content').toggle(); + toggleElem($('.instruct-content')); }); } @@ -455,9 +456,9 @@ export function initRepoPullRequestReview() { $(document).on('click', 'button.comment-form-reply', async function (e) { e.preventDefault(); - $(this).hide(); + hideElem($(this)); const form = $(this).closest('.comment-code-cloud').find('.comment-form'); - form.removeClass('hide'); + form.removeClass('gt-hidden'); const $textarea = form.find('textarea'); let easyMDE = getAttachedEasyMDE($textarea); if (!easyMDE) { @@ -488,10 +489,10 @@ export function initRepoPullRequestReview() { $('.btn-review').on('click', function (e) { e.preventDefault(); - $(this).closest('.dropdown').find('.menu').toggle('visible'); + $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line }).closest('.dropdown').find('.close').on('click', function (e) { e.preventDefault(); - $(this).closest('.menu').toggle('visible'); + $(this).closest('.menu').toggle('visible'); // eslint-disable-line }); $(document).on('click', 'a.add-code-comment', async function (e) { @@ -551,7 +552,7 @@ export function initRepoIssueReferenceIssue() { // Reference issue $(document).on('click', '.reference-issue', function (event) { const $this = $(this); - $this.closest('.dropdown').find('.menu').toggle('visible'); + $this.closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line const content = $(`#${$this.data('target')}`).text(); const poster = $this.data('poster-username'); @@ -587,12 +588,12 @@ export function initRepoIssueTitleEdit() { const $editInput = $('#edit-title-input input'); const editTitleToggle = function () { - $issueTitle.toggle(); - $('.not-in-edit').toggle(); - $('#edit-title-input').toggle(); - $('#pull-desc').toggle(); - $('#pull-desc-edit').toggle(); - $('.in-edit').toggle(); + toggleElem($issueTitle); + toggleElem($('.not-in-edit')); + toggleElem($('#edit-title-input')); + toggleElem($('#pull-desc')); + toggleElem($('#pull-desc-edit')); + toggleElem($('.in-edit')); $('#issue-title-wrapper').toggleClass('edit-active'); $editInput.focus(); return false; diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 2cf4963b6a..e1dc514320 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -25,6 +25,7 @@ import {initCommentContent, initMarkupContent} from '../markup/content.js'; import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoSettingBranches} from './repo-settings.js'; import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js'; +import {hideElem, showElem} from '../utils/dom.js'; const {csrfToken} = window.config; @@ -55,9 +56,9 @@ export function initRepoCommentForm() { } }); $selectBranch.find('.reference.column').on('click', function () { - $selectBranch.find('.scrolling.reference-list-menu').css('display', 'none'); + hideElem($selectBranch.find('.scrolling.reference-list-menu')); $selectBranch.find('.reference .text').removeClass('black'); - $($(this).data('target')).css('display', 'block'); + showElem($($(this).data('target'))); $(this).find('.text').addClass('black'); return false; }); @@ -174,15 +175,15 @@ export function initRepoCommentForm() { $(this).parent().find('.item').each(function () { if ($(this).hasClass('checked')) { listIds.push($(this).data('id')); - $($(this).data('id-selector')).removeClass('hide'); + $($(this).data('id-selector')).removeClass('gt-hidden'); } else { - $($(this).data('id-selector')).addClass('hide'); + $($(this).data('id-selector')).addClass('gt-hidden'); } }); if (listIds.length === 0) { - $noSelect.removeClass('hide'); + $noSelect.removeClass('gt-hidden'); } else { - $noSelect.addClass('hide'); + $noSelect.addClass('gt-hidden'); } $($(this).parent().data('id')).val(listIds.join(',')); return false; @@ -208,9 +209,9 @@ export function initRepoCommentForm() { } $list.find('.item').each(function () { - $(this).addClass('hide'); + $(this).addClass('gt-hidden'); }); - $noSelect.removeClass('hide'); + $noSelect.removeClass('gt-hidden'); $($(this).parent().data('id')).val(''); }); } @@ -257,7 +258,7 @@ export function initRepoCommentForm() { </a> `); - $(`.ui${select_id}.list .no-select`).addClass('hide'); + $(`.ui${select_id}.list .no-select`).addClass('gt-hidden'); $(input_id).val($(this).data('id')); }); $menu.find('.no-select.item').on('click', function () { @@ -275,7 +276,7 @@ export function initRepoCommentForm() { } $list.find('.selected').html(''); - $list.find('.no-select').removeClass('hide'); + $list.find('.no-select').removeClass('gt-hidden'); $(input_id).val(''); }); } @@ -290,7 +291,7 @@ export function initRepoCommentForm() { async function onEditContent(event) { event.preventDefault(); - $(this).closest('.dropdown').find('.menu').toggle('visible'); + $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line const $segment = $(this).closest('.header').next(); const $editContentZone = $segment.find('.edit-content-zone'); const $renderContent = $segment.find('.render-content'); @@ -387,16 +388,16 @@ async function onEditContent(event) { }); $editContentZone.find('.cancel.button').on('click', () => { - $renderContent.show(); - $editContentZone.hide(); + showElem($renderContent); + hideElem($editContentZone); if (dz) { dz.emit('reload'); } }); $saveButton.on('click', () => { - $renderContent.show(); - $editContentZone.hide(); + showElem($renderContent); + hideElem($editContentZone); const $attachments = $dropzone.find('.files').find('[name=files]').map(function () { return $(this).val(); }).get(); @@ -438,8 +439,8 @@ async function onEditContent(event) { } // Show write/preview tab and copy raw content as needed - $editContentZone.show(); - $renderContent.hide(); + showElem($editContentZone); + hideElem($renderContent); if ($textarea.val().length === 0) { $textarea.val($rawContent.text()); easyMDE.value($rawContent.text()); @@ -558,10 +559,10 @@ export function initRepository() { // show pull request form $repoComparePull.find('button.show-form').on('click', function (e) { e.preventDefault(); - $(this).parent().hide(); + hideElem($(this).parent()); const $form = $repoComparePull.find('.pullrequest-form'); - $form.show(); + showElem($form); $form.find('textarea.edit_area').each(function() { const easyMDE = getAttachedEasyMDE($(this)); if (easyMDE) { @@ -583,7 +584,7 @@ function initRepoIssueCommentEdit() { // Quote reply $(document).on('click', '.quote-reply', function (event) { - $(this).closest('.dropdown').find('.menu').toggle('visible'); + $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line const target = $(this).data('target'); const quote = $(`#${target}`).text().replace(/\n/g, '\n> '); const content = `> ${quote}\n\n`; diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js index d44f540c46..93d1390b4b 100644 --- a/web_src/js/features/repo-migrate.js +++ b/web_src/js/features/repo-migrate.js @@ -1,12 +1,13 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl, csrfToken} = window.config; export function initRepoMigrationStatusChecker() { const migrating = $('#repo_migrating'); - $('#repo_migrating_failed').hide(); - $('#repo_migrating_failed_image').hide(); - $('#repo_migrating_progress_message').hide(); + hideElem($('#repo_migrating_failed')); + hideElem($('#repo_migrating_failed_image')); + hideElem($('#repo_migrating_progress_message')); if (migrating) { const task = migrating.attr('task'); if (task === undefined) { @@ -24,15 +25,15 @@ export function initRepoMigrationStatusChecker() { window.location.reload(); return; } else if (xhr.responseJSON.status === 3) { - $('#repo_migrating_progress').hide(); - $('#repo_migrating').hide(); - $('#repo_migrating_failed').show(); - $('#repo_migrating_failed_image').show(); + hideElem($('#repo_migrating_progress')); + hideElem($('#repo_migrating')); + showElem($('#repo_migrating_failed')); + showElem($('#repo_migrating_failed_image')); $('#repo_migrating_failed_error').text(xhr.responseJSON.message); return; } if (xhr.responseJSON.message) { - $('#repo_migrating_progress_message').show(); + showElem($('#repo_migrating_progress_message')); $('#repo_migrating_progress_message').text(xhr.responseJSON.message); } setTimeout(() => { @@ -40,10 +41,10 @@ export function initRepoMigrationStatusChecker() { }, 2000); return; } - $('#repo_migrating_progress').hide(); - $('#repo_migrating').hide(); - $('#repo_migrating_failed').show(); - $('#repo_migrating_failed_image').show(); + hideElem($('#repo_migrating_progress')); + hideElem($('#repo_migrating')); + showElem($('#repo_migrating_failed')); + showElem($('#repo_migrating_failed_image')); } }); } diff --git a/web_src/js/features/repo-migration.js b/web_src/js/features/repo-migration.js index c317c7245c..ee2ec01943 100644 --- a/web_src/js/features/repo-migration.js +++ b/web_src/js/features/repo-migration.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem, toggleElem} from '../utils/dom.js'; const $service = $('#service_type'); const $user = $('#auth_username'); @@ -18,7 +19,7 @@ export function initRepoMigration() { $pass.on('keyup', () => {checkItems(false)}); $token.on('keyup', () => {checkItems(true)}); $mirror.on('change', () => {checkItems(true)}); - $('#lfs_settings_show').on('click', () => { $lfsEndpoint.show(); return false }); + $('#lfs_settings_show').on('click', () => { showElem($lfsEndpoint); return false }); $lfs.on('change', setLFSSettingsVisibility); const $cloneAddr = $('#clone_addr'); @@ -57,6 +58,6 @@ function checkItems(tokenAuth) { function setLFSSettingsVisibility() { const visible = $lfs.is(':checked'); - $lfsSettings.toggle(visible); - $lfsEndpoint.hide(); + toggleElem($lfsSettings, visible); + hideElem($lfsEndpoint); } diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js index 7589d108f9..a061c6b23f 100644 --- a/web_src/js/features/repo-release.js +++ b/web_src/js/features/repo-release.js @@ -3,13 +3,14 @@ import {attachTribute} from './tribute.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {createCommentEasyMDE} from './comp/EasyMDE.js'; +import {hideElem} from '../utils/dom.js'; export function initRepoRelease() { $(document).on('click', '.remove-rel-attach', function() { const uuid = $(this).data('uuid'); const id = $(this).data('id'); $(`input[name='attachment-del-${uuid}']`).attr('value', true); - $(`#attachment-${id}`).hide(); + hideElem($(`#attachment-${id}`)); }); } diff --git a/web_src/js/features/repo-template.js b/web_src/js/features/repo-template.js index dc4ae1e268..0c5ea5233a 100644 --- a/web_src/js/features/repo-template.js +++ b/web_src/js/features/repo-template.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {htmlEscape} from 'escape-goat'; +import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl} = window.config; @@ -9,11 +10,11 @@ export function initRepoTemplateSearch() { const $templateUnits = $('#template_units'); const $nonTemplate = $('#non_template'); if ($repoTemplate.val() !== '' && $repoTemplate.val() !== '0') { - $templateUnits.show(); - $nonTemplate.hide(); + showElem($templateUnits); + hideElem($nonTemplate); } else { - $templateUnits.hide(); - $nonTemplate.show(); + hideElem($templateUnits); + showElem($nonTemplate); } }; $repoTemplate.on('change', checkTemplate); diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js index f97bcc7ee7..67f2df1d9a 100644 --- a/web_src/js/features/repo-unicode-escape.js +++ b/web_src/js/features/repo-unicode-escape.js @@ -1,17 +1,18 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; export function initUnicodeEscapeButton() { $(document).on('click', 'a.escape-button', (e) => { e.preventDefault(); $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped'); - $(e.target).hide(); - $(e.target).siblings('a.unescape-button').show(); + hideElem($(e.target)); + showElem($(e.target).siblings('a.unescape-button')); }); $(document).on('click', 'a.unescape-button', (e) => { e.preventDefault(); $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped'); - $(e.target).hide(); - $(e.target).siblings('a.escape-button').show(); + hideElem($(e.target)); + showElem($(e.target).siblings('a.escape-button')); }); $(document).on('click', 'a.toggle-escape-button', (e) => { e.preventDefault(); @@ -19,12 +20,12 @@ export function initUnicodeEscapeButton() { const fileView = fileContent.find('.file-code, .file-view'); if (fileView.hasClass('unicode-escaped')) { fileView.removeClass('unicode-escaped'); - fileContent.find('a.unescape-button').hide(); - fileContent.find('a.escape-button').show(); + hideElem(fileContent.find('a.unescape-button')); + showElem(fileContent.find('a.escape-button')); } else { fileView.addClass('unicode-escaped'); - fileContent.find('a.unescape-button').show(); - fileContent.find('a.escape-button').hide(); + showElem(fileContent.find('a.unescape-button')); + hideElem(fileContent.find('a.escape-button')); } }); } diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js index 9c9fffd995..f30017afc6 100644 --- a/web_src/js/features/user-auth-webauthn.js +++ b/web_src/js/features/user-auth-webauthn.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import {encode, decode} from 'uint8-to-base64'; +import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl, csrfToken} = window.config; @@ -132,16 +133,18 @@ function webauthnRegistered(newCredential) { } function webAuthnError(errorType, message) { - $('#webauthn-error [data-webauthn-error-msg]').hide(); + hideElem($('#webauthn-error [data-webauthn-error-msg]')); const $errorGeneral = $(`#webauthn-error [data-webauthn-error-msg=general]`); if (errorType === 'general') { - $errorGeneral.show().text(message || 'unknown error'); + showElem($errorGeneral); + $errorGeneral.text(message || 'unknown error'); } else { const $errorTyped = $(`#webauthn-error [data-webauthn-error-msg=${errorType}]`); if ($errorTyped.length) { - $errorTyped.show(); + showElem($errorTyped); } else { - $errorGeneral.show().text(`unknown error type: ${errorType}`); + showElem($errorGeneral); + $errorGeneral.text(`unknown error type: ${errorType}`); } } $('#webauthn-error').modal('show'); diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js index 55aace3bcd..34e773fe7d 100644 --- a/web_src/js/features/user-auth.js +++ b/web_src/js/features/user-auth.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; export function initUserAuthOauth2() { const $oauth2LoginNav = $('#oauth2-login-navigator'); @@ -8,14 +9,14 @@ export function initUserAuthOauth2() { const oauthLoader = $('#oauth2-login-loader'); const oauthNav = $('#oauth2-login-navigator'); - oauthNav.hide(); + hideElem(oauthNav); oauthLoader.removeClass('disabled'); setTimeout(() => { // recover previous content to let user try again // usually redirection will be performed before this action oauthLoader.addClass('disabled'); - oauthNav.show(); + showElem(oauthNav); }, 5000); }); } diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js index 3ed29f39b1..d49bf39275 100644 --- a/web_src/js/features/user-settings.js +++ b/web_src/js/features/user-settings.js @@ -1,4 +1,5 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; export function initUserSettings() { if ($('.user.settings.profile').length > 0) { @@ -6,11 +7,11 @@ export function initUserSettings() { const $prompt = $('#name-change-prompt'); const $prompt_redirect = $('#name-change-redirect-prompt'); if ($(this).val().toString().toLowerCase() !== $(this).data('name').toString().toLowerCase()) { - $prompt.show(); - $prompt_redirect.show(); + showElem($prompt); + showElem($prompt_redirect); } else { - $prompt.hide(); - $prompt_redirect.hide(); + hideElem($prompt); + hideElem($prompt_redirect); } }); } diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js new file mode 100644 index 0000000000..8872a9e4ab --- /dev/null +++ b/web_src/js/utils/dom.js @@ -0,0 +1,65 @@ +function getComputedStyleProperty(el, prop) { + const cs = el ? window.getComputedStyle(el) : null; + return cs ? cs[prop] : null; +} + +function isShown(el) { + return getComputedStyleProperty(el, 'display') !== 'none'; +} + +function assertShown(el, expectShown) { + if (window.config.runModeIsProd) return; + + // to help developers to catch display bugs, this assertion can be removed after next release cycle or if it has been proved that there is no bug. + if (expectShown && !isShown(el)) { + throw new Error('element is hidden but should be shown'); + } else if (!expectShown && isShown(el)) { + throw new Error('element is shown but should be hidden'); + } +} + +function elementsCall(el, func, ...args) { + if (el instanceof String) { + el = document.querySelectorAll(el); + } + if (el instanceof Node) { + func(el, ...args); + } else if (el.length !== undefined) { + // this works for: NodeList, HTMLCollection, Array, jQuery + for (const e of el) { + func(e, ...args); + } + } else { + throw new Error('invalid argument to be shown/hidden'); + } +} + +function toggleShown(el, force) { + if (force === true) { + el.classList.remove('gt-hidden'); + assertShown(el, true); + } else if (force === false) { + el.classList.add('gt-hidden'); + assertShown(el, false); + } else if (force === undefined) { + const wasShown = window.config.runModeIsProd ? undefined : isShown(el); + el.classList.toggle('gt-hidden'); + if (wasShown !== undefined) { + assertShown(el, !wasShown); + } + } else { + throw new Error('invalid force argument'); + } +} + +export function showElem(el) { + elementsCall(el, toggleShown, true); +} + +export function hideElem(el) { + elementsCall(el, toggleShown, false); +} + +export function toggleElem(el, force) { + elementsCall(el, toggleShown, force); +} diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 771049ad39..fae29d0d60 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1812,11 +1812,6 @@ footer { } } -// TODO: refactor to use ".gt-hidden" instead (a simple search&replace should do the trick) -.hide { - display: none; -} - .center:not(.popup) { text-align: center; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index b2c4cdcdfb..f489335712 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -106,10 +106,6 @@ margin-right: 8.75px; } - .hide { - display: none !important; - } - .dependency { padding: 0; white-space: nowrap; @@ -2592,18 +2588,10 @@ } } -#issue-filters.hide { - display: none; -} - #issue-actions { margin-top: -1rem !important; // counteract padding from Semantic } -#issue-actions.hide { - display: none; -} - .ui.menu .item > img:not(.ui) { width: auto; } diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 2b09780fb8..9cabe01626 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -181,5 +181,15 @@ .gt-js-small { justify-content: flex-start !important; } } -// gt-hidden must be placed after all other "display: xxx !important" classes to win the hidden chance +/* +gt-hidden must be placed after all other "display: xxx !important" classes to win the chance +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" +*/ .gt-hidden { display: none !important; } |