On 23/05/2016 17:08, "[email protected] on behalf of Elliot Smith" <[email protected] on behalf of [email protected]> wrote:
>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] This looks ok to me. Thanks! Belén > >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 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
