nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-09-19 04:59:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

templates: Make toggle button responsive

Browse Source 
- Immediately after submitting a form with a toggle button, toggle and disable
the button and show a spinner on the button.
- Disable all other form button elements on the page when a form is submitted
to allow only one form submission at a time.

Closes #1993

Tests performed:
- Check that when enabling and disabling an app, the toggle button is responsive
- On the Samba app page, check that when enabling a share, the toggle button is
responsive and all other toggle buttons on the page are disabled.
- On the Samba app page, check that clicking the diagnostics button still works
while a share is being enabled or disabled.
- On the SSH confugration app page, check that after clicking the Update setup button,
a spinner is shown and the app enable/disable toggle button is disabled.
- Test on Firefox and Chromium.

Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Narrow the scope to only toggle buttons excluding others cases]
[sunil: Minor cosmetic and styling changes]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
This commit is contained in:
Veiko Aasa 2020-12-10 15:33:58 +02:00 committed by Sunil Mohan Adapa
parent d7c70b74d7
commit 5829fde5f4
No known key found for this signature in database
GPG Key ID: 43EA1CFF0AA7C5F2
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/themes/default/css/main.css
View File

@ -527,7 +527,18 @@ a.menu_link_active {
.toggle-button--toggled::before { .toggle-button--toggled::before {
left: 100%; left: 100%;
transform: translateY(-50%) translateX(-100%) transform: translateY(-50%) translateX(-100%);
}
.toggle-button.running-status-button::before {
top: 0;
border: 4px solid var(--neutral-light-color);
border-top: 4px solid var(--progress-color);
animation: spin 1s linear infinite;
}
.toggle-button.toggle-button--toggled.running-status-button::before {
margin-left: -24px;
} }
/* /*
@ -546,6 +557,10 @@ a.menu_link_active {
margin-right: -26px; margin-right: -26px;
} }
.running-status-button:disabled {
cursor: default;
}
input[type='submit'].running-status-button { input[type='submit'].running-status-button {
padding-left: 32px; padding-left: 32px;
} }

40
static/themes/default/js/main.js
View File

@ -40,6 +40,14 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
/*
* Return all submit buttons on the page
*/
function getSubmitButtons(){
return document.querySelectorAll(
"form input[type='submit'], form button[type='submit'].toggle-button");
}
/* /*
* Disable submit button on click. * Disable submit button on click.
*/ */
@ -62,23 +70,33 @@ function onSubmitAddProgress(event) {
// for the next event loop run which will happen after current event is // for the next event loop run which will happen after current event is
// processed. // processed.
window.setTimeout(() => { window.setTimeout(() => {
const beforeElement = document.createElement('div'); if (button.tagName == "INPUT"){
beforeElement.classList.add('running-status-button-before'); // For push buttons
button.parentNode.insertBefore(beforeElement, button); const beforeElement = document.createElement('div');
beforeElement.classList.add('running-status-button-before');
button.parentNode.insertBefore(beforeElement, button);
} else if (button.tagName == "BUTTON"){
// For toggle buttons
button.classList.toggle('toggle-button--toggled');
}
button.classList.add('running-status-button'); button.classList.add('running-status-button');
button.setAttribute('disabled', 'disabled');
// Disable all form submit buttons on the page
for (const formbutton of getSubmitButtons()) {
if (!(formbutton.classList.contains('btn-link') ||
formbutton.classList.contains('no-running-status'))) {
formbutton.setAttribute('disabled', 'disabled');
}
}
}, 0); }, 0);
} }
document.addEventListener('DOMContentLoaded', function(event) { document.addEventListener('DOMContentLoaded', function(event) {
const submitButtons = document.querySelectorAll("input[type='submit']"); for (const button of getSubmitButtons()) {
for (const button of submitButtons) { // Don't listen for 'click' event on buttons as they are triggered
if (button.form) { // even when the form is invalid.
// Don't listen for 'click' event on buttons as they are triggered button.form.addEventListener('submit', onSubmitAddProgress);
// even when the form is invalid.
button.form.addEventListener('submit', onSubmitAddProgress);
}
} }
}); });