Creating a custom image through the "New custom image" dialog can sometimes result in a long pause between pressing the button to create the image, and being transferred to the page showing details of its content. This can make it appear as though pressing the button had no effect.
To prevent this from happening, disable the button and text box in the new custom image dialog after the "Create image" button is pressed. Also show a loading spinner and "loading..." text on the button to make it clear that the application is still responding. [YOCTO #9475] Signed-off-by: Elliot Smith <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 10 ++++++++++ .../toastergui/static/js/newcustomimage_modal.js | 22 ++++++++++++++++++++++ .../toastergui/templates/newcustomimage_modal.html | 7 ++++++- 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index b024d96..07c1078 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -294,6 +294,16 @@ thead .add-del-layers { width: 124px; } box-shadow: 0 0 10px #3a87ad; } +/* position loading spinner and text in create custom image dialog */ +#create-new-custom-image-btn [data-role="loading-state"] { + padding-left: 10px; +} + +#create-new-custom-image-btn [data-role="loading-state"] .icon-spinner { + position: absolute; + left: 26px; +} + /* Copied in from newer version of Font-Awesome 4.3.0 */ .fa-spin { -webkit-animation: fa-spin 2s infinite linear; diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js index cb9ed4d..a9a0ddd 100644 --- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js +++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js @@ -26,6 +26,9 @@ function newCustomImageModalInit(){ var duplicateImageInProjectMsg = "An image with this name already exists in this project." var invalidBaseRecipeIdMsg = "Please select an image to customise."; + // set button to "show submit state" and enable text entry + showSubmitState(); + // capture clicks on radio buttons inside the modal; when one is selected, // set the recipe on the modal imgCustomModal.on("click", "[name='select-image']", function (e) { @@ -36,6 +39,8 @@ function newCustomImageModalInit(){ }); newCustomImgBtn.click(function(e){ + showLoadingState(); + e.preventDefault(); var baseRecipeId = imgCustomModal.data('recipe'); @@ -62,12 +67,29 @@ function newCustomImageModalInit(){ } } else { imgCustomModal.modal('hide'); + imgCustomModal.one('hidden.bs.modal', showSubmitState); window.location.replace(ret.url + '?notify=new'); } }); } }); + // enable text entry, show "Create image" button text + function showSubmitState() { + newCustomImgBtn.find('[data-role="loading-state"]').hide(); + newCustomImgBtn.find('[data-role="submit-state"]').show(); + newCustomImgBtn.removeAttr('disabled'); + nameInput.removeAttr('disabled'); + } + + // disable text entry, show "Creating image..." button text + function showLoadingState() { + newCustomImgBtn.find('[data-role="submit-state"]').hide(); + newCustomImgBtn.find('[data-role="loading-state"]').show(); + newCustomImgBtn.attr('disabled', 'disabled'); + nameInput.attr('disabled', 'disabled'); + } + function showNameError(text){ invalidNameHelp.text(text); invalidNameHelp.show(); diff --git a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html index caeb302..1d7cbd4 100644 --- a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html +++ b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html @@ -43,6 +43,11 @@ </div> <div class="modal-footer"> - <button id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="" disabled>Create custom image</button> + <button id="create-new-custom-image-btn" class="btn btn-primary btn-large" data-original-title="" title="" disabled> + <span data-role="submit-state">Create custom image</span> + <span data-role="loading-state" style="display:none"> + <i class="fa-pulse icon-spinner"></i> Creating custom image... + </span> + </button> </div> </div> -- 1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies. -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
