Skip to content

Fix some UI problems (install/checkbox) #30854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions templates/install.tmpl
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@


<!-- 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}}">
Expand Down Expand Up @@ -319,6 +319,9 @@
<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 -->
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions web_src/css/install.css
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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;
} }


Expand All @@ -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;
} }
Expand Down
2 changes: 1 addition & 1 deletion web_src/css/modules/checkbox.css
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
14 changes: 7 additions & 7 deletions web_src/js/features/repo-issue.js
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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;
} }
}); });
} }
Expand Down