mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Fix some UI problems (install/checkbox) (#30854)

Browse Source 
Fix the space between the box and label for checkboxes, and fix incorrect usages in "repo-issue.js"
pull/30849/head^2
wxiaoguang 7 months ago committed by GitHub
parent 22c7b3a744
commit ce8b11ae13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 160 additions and 158 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 294
      templates/install.tmpl
  2. 8
      web_src/css/install.css
  3. 2
      web_src/css/modules/checkbox.css
  4. 14
      web_src/js/features/repo-issue.js

294
templates/install.tmpl
Unescape View File

@ -157,168 +157,171 @@
<!-- Optional Settings --> <!-- Optional Settings -->
<h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4> <h4 class="ui dividing header">{{ctx.Locale.Tr "install.optional_title"}}</h4>
<div>
<!-- Email --> <!-- Email -->
<details class="optional field"> <details class="optional field">
<summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}"> <summary class="right-content tw-py-2{{if .Err_SMTP}} text red{{end}}">
{{ctx.Locale.Tr "install.email_title"}} {{ctx.Locale.Tr "install.email_title"}}
</summary> </summary>
<div class="inline field"> <div class="inline field">
<label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label> <label for="smtp_addr">{{ctx.Locale.Tr "install.smtp_addr"}}</label>
<input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}"> <input id="smtp_addr" name="smtp_addr" value="{{.smtp_addr}}">
</div>
<div class="inline field">
<label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
<input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
</div>
<div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
<label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
</div>
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
</div>
<div class="inline field">
<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
</div>
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <label for="smtp_port">{{ctx.Locale.Tr "install.smtp_port"}}</label>
<div class="ui checkbox"> <input id="smtp_port" name="smtp_port" value="{{.smtp_port}}">
<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
</div> </div>
</div> <div class="inline field {{if .Err_SMTPFrom}}error{{end}}">
</details> <label for="smtp_from">{{ctx.Locale.Tr "install.smtp_from"}}</label>
<input id="smtp_from" name="smtp_from" value="{{.smtp_from}}">
<span class="help">{{ctx.Locale.TrString "install.smtp_from_helper"}}{{/* it contains lt/gt chars*/}}</span>
</div>
<div class="inline field {{if .Err_SMTPUser}}error{{end}}">
<label for="smtp_user">{{ctx.Locale.Tr "install.mailer_user"}}</label>
<input id="smtp_user" name="smtp_user" value="{{.smtp_user}}">
</div>
<div class="inline field">
<label for="smtp_passwd">{{ctx.Locale.Tr "install.mailer_password"}}</label>
<input id="smtp_passwd" name="smtp_passwd" type="password" value="{{.smtp_passwd}}">
</div>
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "install.register_confirm"}}</label>
<input name="register_confirm" type="checkbox" {{if .register_confirm}}checked{{end}}>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<label>{{ctx.Locale.Tr "install.mail_notify"}}</label>
<input name="mail_notify" type="checkbox" {{if .mail_notify}}checked{{end}}>
</div>
</div>
</details>
<!-- Server and other services --> <!-- Server and other services -->
<details class="optional field"> <details class="optional field">
<summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}"> <summary class="right-content tw-py-2{{if .Err_Services}} text red{{end}}">
{{ctx.Locale.Tr "install.server_service_title"}} {{ctx.Locale.Tr "install.server_service_title"}}
</summary> </summary>
<div class="inline field"> <div class="inline field">
<div class="ui checkbox" id="offline-mode"> <div class="ui checkbox" id="offline-mode">
<label data-tooltip-content="{{ctx.Locale.Tr "install.offline_mode_popup"}}">{{ctx.Locale.Tr "install.offline_mode"}}</label> <label data-tooltip-content="{{ctx.Locale.Tr "install.offline_mode_popup"}}">{{ctx.Locale.Tr "install.offline_mode"}}</label>
<input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}> <input name="offline_mode" type="checkbox" {{if .offline_mode}}checked{{end}}>
</div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="disable-gravatar">
<div class="ui checkbox" id="disable-gravatar"> <label data-tooltip-content="{{ctx.Locale.Tr "install.disable_gravatar_popup"}}">{{ctx.Locale.Tr "install.disable_gravatar"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_gravatar_popup"}}">{{ctx.Locale.Tr "install.disable_gravatar"}}</label> <input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}>
<input name="disable_gravatar" type="checkbox" {{if .disable_gravatar}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="federated-avatar-lookup">
<div class="ui checkbox" id="federated-avatar-lookup"> <label data-tooltip-content="{{ctx.Locale.Tr "install.federated_avatar_lookup_popup"}}">{{ctx.Locale.Tr "install.federated_avatar_lookup"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.federated_avatar_lookup_popup"}}">{{ctx.Locale.Tr "install.federated_avatar_lookup"}}</label> <input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}>
<input name="enable_federated_avatar" type="checkbox" {{if .enable_federated_avatar}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="enable-openid-signin">
<div class="ui checkbox" id="enable-openid-signin"> <label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signin_popup"}}">{{ctx.Locale.Tr "install.openid_signin"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signin_popup"}}">{{ctx.Locale.Tr "install.openid_signin"}}</label> <input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}>
<input name="enable_open_id_sign_in" type="checkbox" {{if .enable_open_id_sign_in}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="disable-registration">
<div class="ui checkbox" id="disable-registration"> <label data-tooltip-content="{{ctx.Locale.Tr "install.disable_registration_popup"}}">{{ctx.Locale.Tr "install.disable_registration"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.disable_registration_popup"}}">{{ctx.Locale.Tr "install.disable_registration"}}</label> <input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}>
<input name="disable_registration" type="checkbox" {{if .disable_registration}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="allow-only-external-registration">
<div class="ui checkbox" id="allow-only-external-registration"> <label data-tooltip-content="{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}">{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}">{{ctx.Locale.Tr "install.allow_only_external_registration_popup"}}</label> <input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}>
<input name="allow_only_external_registration" type="checkbox" {{if .allow_only_external_registration}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="enable-openid-signup">
<div class="ui checkbox" id="enable-openid-signup"> <label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signup_popup"}}">{{ctx.Locale.Tr "install.openid_signup"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.openid_signup_popup"}}">{{ctx.Locale.Tr "install.openid_signup"}}</label> <input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}>
<input name="enable_open_id_sign_up" type="checkbox" {{if .enable_open_id_sign_up}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox" id="enable-captcha">
<div class="ui checkbox" id="enable-captcha"> <label data-tooltip-content="{{ctx.Locale.Tr "install.enable_captcha_popup"}}">{{ctx.Locale.Tr "install.enable_captcha"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.enable_captcha_popup"}}">{{ctx.Locale.Tr "install.enable_captcha"}}</label> <input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}>
<input name="enable_captcha" type="checkbox" {{if .enable_captcha}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox">
<div class="ui checkbox"> <label data-tooltip-content="{{ctx.Locale.Tr "install.require_sign_in_view_popup"}}">{{ctx.Locale.Tr "install.require_sign_in_view"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.require_sign_in_view_popup"}}">{{ctx.Locale.Tr "install.require_sign_in_view"}}</label> <input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}>
<input name="require_sign_in_view" type="checkbox" {{if .require_sign_in_view}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox">
<div class="ui checkbox"> <label data-tooltip-content="{{ctx.Locale.Tr "install.default_keep_email_private_popup"}}">{{ctx.Locale.Tr "install.default_keep_email_private"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_keep_email_private_popup"}}">{{ctx.Locale.Tr "install.default_keep_email_private"}}</label> <input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}>
<input name="default_keep_email_private" type="checkbox" {{if .default_keep_email_private}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox">
<div class="ui checkbox"> <label data-tooltip-content="{{ctx.Locale.Tr "install.default_allow_create_organization_popup"}}">{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_allow_create_organization_popup"}}">{{ctx.Locale.Tr "install.default_allow_create_organization"}}</label> <input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}>
<input name="default_allow_create_organization" type="checkbox" {{if .default_allow_create_organization}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <div class="ui checkbox">
<div class="ui checkbox"> <label data-tooltip-content="{{ctx.Locale.Tr "install.default_enable_timetracking_popup"}}">{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label>
<label data-tooltip-content="{{ctx.Locale.Tr "install.default_enable_timetracking_popup"}}">{{ctx.Locale.Tr "install.default_enable_timetracking"}}</label> <input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}>
<input name="default_enable_timetracking" type="checkbox" {{if .default_enable_timetracking}}checked{{end}}> </div>
</div> </div>
</div> <div class="inline field">
<div class="inline field"> <label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label>
<label for="no_reply_address">{{ctx.Locale.Tr "install.no_reply_address"}}</label> <input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}">
<input id="_no_reply_address" name="no_reply_address" value="{{.no_reply_address}}"> <span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span>
<span class="help">{{ctx.Locale.Tr "install.no_reply_address_helper"}}</span> </div>
</div> <div class="inline field">
<div class="inline field"> <label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label>
<label for="password_algorithm">{{ctx.Locale.Tr "install.password_algorithm"}}</label> <div class="ui selection dropdown">
<div class="ui selection dropdown"> <input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}">
<input id="password_algorithm" type="hidden" name="password_algorithm" value="{{.password_algorithm}}"> <div class="text">{{.password_algorithm}}</div>
<div class="text">{{.password_algorithm}}</div> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}} <div class="menu">
<div class="menu"> {{range .PasswordHashAlgorithms}}
{{range .PasswordHashAlgorithms}} <div class="item" data-value="{{.}}">{{.}}</div>
<div class="item" data-value="{{.}}">{{.}}</div> {{end}}
{{end}} </div>
</div> </div>
<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span>
</div> </div>
<span class="help">{{ctx.Locale.Tr "install.password_algorithm_helper"}}</span> </details>
</div>
</details>
<!-- Admin --> <!-- Admin -->
<details class="optional field"> <details class="optional field">
<summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}"> <summary class="right-content tw-py-2{{if .Err_Admin}} text red{{end}}">
{{ctx.Locale.Tr "install.admin_title"}} {{ctx.Locale.Tr "install.admin_title"}}
</summary> </summary>
<p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p> <p class="center">{{ctx.Locale.Tr "install.admin_setting_desc"}}</p>
<div class="inline field {{if .Err_AdminName}}error{{end}}"> <div class="inline field {{if .Err_AdminName}}error{{end}}">
<label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label> <label for="admin_name">{{ctx.Locale.Tr "install.admin_name"}}</label>
<input id="admin_name" name="admin_name" value="{{.admin_name}}"> <input id="admin_name" name="admin_name" value="{{.admin_name}}">
</div> </div>
<div class="inline field {{if .Err_AdminEmail}}error{{end}}"> <div class="inline field {{if .Err_AdminEmail}}error{{end}}">
<label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label> <label for="admin_email">{{ctx.Locale.Tr "install.admin_email"}}</label>
<input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}"> <input id="admin_email" name="admin_email" type="email" value="{{.admin_email}}">
</div> </div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}"> <div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label> <label for="admin_passwd">{{ctx.Locale.Tr "install.admin_password"}}</label>
<input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}"> <input id="admin_passwd" name="admin_passwd" type="password" autocomplete="new-password" value="{{.admin_passwd}}">
</div> </div>
<div class="inline field {{if .Err_AdminPasswd}}error{{end}}"> <div class="inline field {{if .Err_AdminPasswd}}error{{end}}">
<label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label> <label for="admin_confirm_passwd">{{ctx.Locale.Tr "install.confirm_password"}}</label>
<input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}"> <input id="admin_confirm_passwd" name="admin_confirm_passwd" autocomplete="new-password" type="password" value="{{.admin_confirm_passwd}}">
</div> </div>
</details> </details>
</div>
<div class="divider"></div>
{{if .EnvConfigKeys}} {{if .EnvConfigKeys}}
<!-- Environment Config --> <!-- Environment Config -->
@ -333,12 +336,11 @@
</div> </div>
{{end}} {{end}}
<div class="divider"></div>
<div class="inline field"> <div class="inline field">
<div class="right-content"> <div class="right-content">
These configuration options will be written into: {{.CustomConfFile}} These configuration options will be written into: {{.CustomConfFile}}
</div> </div>
<div class="right-content tw-mt-2"> <div class="tw-mt-4 tw-mb-2 tw-text-center">
<button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button> <button class="ui primary button">{{ctx.Locale.Tr "install.install_btn_confirm"}}</button>
</div> </div>
</div> </div>

8
web_src/css/install.css
Unescape View File

@ -13,8 +13,7 @@
.page-content.install .ui.form .field > .help, .page-content.install .ui.form .field > .help,
.page-content.install .ui.form .field > .ui.checkbox:first-child, .page-content.install .ui.form .field > .ui.checkbox:first-child,
.page-content.install .ui.form .field > .right-content { .page-content.install .ui.form .field > .right-content {
margin-left: 30%; margin-left: calc(30% + 5px);
padding-left: 5px;
width: auto; width: auto;
} }
@ -24,10 +23,11 @@
} }
.page-content.install form.ui.form details.optional.field[open] { .page-content.install form.ui.form details.optional.field[open] {
border-bottom: 1px dashed var(--color-secondary);
padding-bottom: 10px; 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 { .page-content.install form.ui.form details.optional.field[open] summary {
margin-bottom: 10px; margin-bottom: 10px;
} }

2
web_src/css/modules/checkbox.css
Unescape View File

@ -41,7 +41,7 @@ input[type="radio"] {
.ui.checkbox label, .ui.checkbox label,
.ui.radio.checkbox label { .ui.radio.checkbox label {
margin-left: 1.85714em; margin-left: 20px;
} }
.ui.checkbox + label { .ui.checkbox + label {

14
web_src/js/features/repo-issue.js
Unescape View File

@ -299,23 +299,23 @@ export function initRepoPullRequestMergeInstruction() {
export function initRepoPullRequestAllowMaintainerEdit() { export function initRepoPullRequestAllowMaintainerEdit() {
const wrapper = document.getElementById('allow-edits-from-maintainers'); const wrapper = document.getElementById('allow-edits-from-maintainers');
if (!wrapper) return; if (!wrapper) return;
const checkbox = wrapper.querySelector('input[type="checkbox"]');
wrapper.querySelector('input[type="checkbox"]')?.addEventListener('change', async (e) => { checkbox.addEventListener('input', async () => {
const checked = e.target.checked;
const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`; const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`;
wrapper.classList.add('is-loading'); wrapper.classList.add('is-loading');
e.target.disabled = true;
try { try {
const response = await POST(url, {data: {allow_maintainer_edit: checked}}); const resp = await POST(url, {data: new URLSearchParams({allow_maintainer_edit: checkbox.checked})});
if (!response.ok) { if (!resp.ok) {
throw new Error('Failed to update maintainer edit permission'); throw new Error('Failed to update maintainer edit permission');
} }
const data = await resp.json();
checkbox.checked = data.allow_maintainer_edit;
} catch (error) { } catch (error) {
checkbox.checked = !checkbox.checked;
console.error(error); console.error(error);
showTemporaryTooltip(wrapper, wrapper.getAttribute('data-prompt-error')); showTemporaryTooltip(wrapper, wrapper.getAttribute('data-prompt-error'));
} finally { } finally {
wrapper.classList.remove('is-loading'); wrapper.classList.remove('is-loading');
e.target.disabled = false;
} }
}); });
} }

Write Preview
Loading…
Cancel
Save