On 15/07/2016 15:22, "[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 works nicely. The problem is: I am seeing both the button spinner *and* the loading notification spinner. I guess it should be one or the other: showing both seems overkill. Could we hide loading-notification whenever the spinner inside the button is being shown? Thanks! Belén > >Signed-off-by: Elliot Smith <[email protected]> >--- > .../lib/toaster/toastergui/static/css/default.css | 12 +++++++++ > .../toastergui/static/js/newcustomimage_modal.js | 29 >+++++++++++++++++++--- > .../toastergui/templates/newcustomimage_modal.html | 7 +++++- > 3 files changed, 44 insertions(+), 4 deletions(-) > >diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css >b/bitbake/lib/toaster/toastergui/static/css/default.css >index 0d3570a..96eedfc 100644 >--- a/bitbake/lib/toaster/toastergui/static/css/default.css >+++ b/bitbake/lib/toaster/toastergui/static/css/default.css >@@ -249,6 +249,18 @@ code { color: #333; background-color: transparent; } > /* Style the special no results message in the custom image details page >*/ > [id^="no-results-special-"] > .alert-warning > ol { margin-top: 10px; } > >+/* style the loading spinner in the new custom image dialog */ >+#create-new-custom-image-btn [data-role="loading-state"] { >+ padding-left: 16px; >+} >+ >+/* icon has to be absolutely positioned, otherwise the spin animation >doesn't work */ >+#create-new-custom-image-btn [data-role="loading-state"] .icon-spinner { >+ position: absolute; >+ left: 26px; >+ bottom: 26px; >+} >+ > /* Style the content of modal dialogs */ > .modal-footer { text-align: left; } > .date-filter-controls { margin-top: 10px; } >diff --git >a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js >b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js >index 8356c02..442fe30 100644 >--- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js >+++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js >@@ -25,7 +25,11 @@ function newCustomImageModalInit(){ > var duplicateNameMsg = "An image with this name already exists. Image >names must be unique."; > var duplicateImageInProjectMsg = "An image with this name already >exists in this project." > var invalidBaseRecipeIdMsg = "Please select an image to customise."; >- >+ >+ // set button to "submit" state and enable text entry so user can >+ // enter the custom recipe name >+ showSubmitState(); >+ > /* capture clicks on radio buttons inside the modal; when one is >selected, > * set the recipe on the modal > */ >@@ -40,6 +44,9 @@ function newCustomImageModalInit(){ > }); > > newCustomImgBtn.click(function(e){ >+ // disable the button and text entry >+ showLoadingState(); >+ > e.preventDefault(); > > var baseRecipeId = imgCustomModal.data('recipe'); >@@ -69,12 +76,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(); >@@ -167,6 +191,5 @@ function newCustomImageModalSetRecipes(baseRecipes) { > > // show the radio button container > imageSelector.show(); >- >- } >+ } > } >diff --git >a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html >b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html >index 5caa683..d448d3a 100644 >--- a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html >+++ b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html >@@ -48,7 +48,12 @@ > </div> > > <div class="modal-footer"> >- <button id="create-new-custom-image-btn" class="btn btn-primary >btn-lg" data-original-title="" title="" disabled>Create custom >image</button> >+ <button id="create-new-custom-image-btn" class="btn btn-primary >btn-large" 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> > </div> >-- >2.7.4 > >-- >_______________________________________________ >toaster mailing list >[email protected] >https://lists.yoctoproject.org/listinfo/toaster -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
