diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index 5bb5a5f6b..2cc6785ba 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -527,7 +527,18 @@ a.menu_link_active { .toggle-button--toggled::before { 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; } +.running-status-button:disabled { + cursor: default; +} + input[type='submit'].running-status-button { padding-left: 32px; } diff --git a/static/themes/default/js/main.js b/static/themes/default/js/main.js index 082b51deb..487c705f3 100644 --- a/static/themes/default/js/main.js +++ b/static/themes/default/js/main.js @@ -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. */ @@ -62,23 +70,33 @@ function onSubmitAddProgress(event) { // for the next event loop run which will happen after current event is // processed. window.setTimeout(() => { - const beforeElement = document.createElement('div'); - beforeElement.classList.add('running-status-button-before'); - button.parentNode.insertBefore(beforeElement, button); + if (button.tagName == "INPUT"){ + // For push buttons + 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.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); } document.addEventListener('DOMContentLoaded', function(event) { - const submitButtons = document.querySelectorAll("input[type='submit']"); - for (const button of submitButtons) { - if (button.form) { - // Don't listen for 'click' event on buttons as they are triggered - // even when the form is invalid. - button.form.addEventListener('submit', onSubmitAddProgress); - } + for (const button of getSubmitButtons()) { + // Don't listen for 'click' event on buttons as they are triggered + // even when the form is invalid. + button.form.addEventListener('submit', onSubmitAddProgress); } });