From ce8b11ae131bef6cd7df0849ed39da7984953a4b Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 6 May 2024 14:32:05 +0800 Subject: [PATCH] Fix some UI problems (install/checkbox) (#30854) Fix the space between the box and label for checkboxes, and fix incorrect usages in "repo-issue.js" --- templates/install.tmpl | 314 +++++++++++++++--------------- web_src/css/install.css | 8 +- web_src/css/modules/checkbox.css | 2 +- web_src/js/features/repo-issue.js | 14 +- 4 files changed, 170 insertions(+), 168 deletions(-) diff --git a/templates/install.tmpl b/templates/install.tmpl index f3117af54..965e57f21 100644 --- a/templates/install.tmpl +++ b/templates/install.tmpl @@ -157,168 +157,171 @@

{{ctx.Locale.Tr "install.optional_title"}}

- - -
- - {{ctx.Locale.Tr "install.email_title"}} - -
- - -
-
- - -
-
- - - {{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}} -
-
- - -
-
- - -
-
-
- - +
+ +
+ + {{ctx.Locale.Tr "install.email_title"}} + +
+ +
-
-
-
- - +
+ +
-
-
- - -
- - {{ctx.Locale.Tr "install.server_service_title"}} - -
-
- - +
+ + + {{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}
-
-
-
- - +
+ +
-
-
-
- - +
+ +
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- - - {{ctx.Locale.Tr "install.no_reply_address_helper"}} -
-
- -
- -
{{.password_algorithm}}
- {{svg "octicon-triangle-down" 14 "dropdown icon"}} -
- {{range .PasswordHashAlgorithms}} -
{{.}}
- {{end}} +
+
+ +
- {{ctx.Locale.Tr "install.password_algorithm_helper"}} -
-
+
+
+ + +
+
+ - -
- - {{ctx.Locale.Tr "install.admin_title"}} - -

{{ctx.Locale.Tr "install.admin_setting_desc"}}

-
- - -
-
- - -
-
- - -
-
- - -
-
+ +
+ + {{ctx.Locale.Tr "install.server_service_title"}} + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + + {{ctx.Locale.Tr "install.no_reply_address_helper"}} +
+
+ +
+ +
{{.password_algorithm}}
+ {{svg "octicon-triangle-down" 14 "dropdown icon"}} +
+ {{range .PasswordHashAlgorithms}} +
{{.}}
+ {{end}} +
+
+ {{ctx.Locale.Tr "install.password_algorithm_helper"}} +
+
+ + +
+ + {{ctx.Locale.Tr "install.admin_title"}} + +

{{ctx.Locale.Tr "install.admin_setting_desc"}}

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
{{if .EnvConfigKeys}} @@ -333,12 +336,11 @@ {{end}} -
These configuration options will be written into: {{.CustomConfFile}}
-
+
diff --git a/web_src/css/install.css b/web_src/css/install.css index ee2395e6c..7ab729405 100644 --- a/web_src/css/install.css +++ b/web_src/css/install.css @@ -13,8 +13,7 @@ .page-content.install .ui.form .field > .help, .page-content.install .ui.form .field > .ui.checkbox:first-child, .page-content.install .ui.form .field > .right-content { - margin-left: 30%; - padding-left: 5px; + margin-left: calc(30% + 5px); width: auto; } @@ -24,10 +23,11 @@ } .page-content.install form.ui.form details.optional.field[open] { - border-bottom: 1px dashed var(--color-secondary); padding-bottom: 10px; } - +.page-content.install form.ui.form details.optional.field[open]:not(:last-child) { + border-bottom: 1px dashed var(--color-secondary); +} .page-content.install form.ui.form details.optional.field[open] summary { margin-bottom: 10px; } diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css index 8d73573bf..0a3a71aca 100644 --- a/web_src/css/modules/checkbox.css +++ b/web_src/css/modules/checkbox.css @@ -41,7 +41,7 @@ input[type="radio"] { .ui.checkbox label, .ui.radio.checkbox label { - margin-left: 1.85714em; + margin-left: 20px; } .ui.checkbox + label { diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 39c364ca5..d10d4dab8 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -299,23 +299,23 @@ export function initRepoPullRequestMergeInstruction() { export function initRepoPullRequestAllowMaintainerEdit() { const wrapper = document.getElementById('allow-edits-from-maintainers'); if (!wrapper) return; - - wrapper.querySelector('input[type="checkbox"]')?.addEventListener('change', async (e) => { - const checked = e.target.checked; + const checkbox = wrapper.querySelector('input[type="checkbox"]'); + checkbox.addEventListener('input', async () => { const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`; wrapper.classList.add('is-loading'); - e.target.disabled = true; try { - const response = await POST(url, {data: {allow_maintainer_edit: checked}}); - if (!response.ok) { + const resp = await POST(url, {data: new URLSearchParams({allow_maintainer_edit: checkbox.checked})}); + if (!resp.ok) { throw new Error('Failed to update maintainer edit permission'); } + const data = await resp.json(); + checkbox.checked = data.allow_maintainer_edit; } catch (error) { + checkbox.checked = !checkbox.checked; console.error(error); showTemporaryTooltip(wrapper, wrapper.getAttribute('data-prompt-error')); } finally { wrapper.classList.remove('is-loading'); - e.target.disabled = false; } }); }