Move the modals we use to create new image recipes and edit existing ones to Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]> --- .../toastergui/static/js/newcustomimage_modal.js | 46 ++++++++++---- .../templates/editcustomimage_modal.html | 71 ++++++++++++++-------- .../toastergui/templates/newcustomimage_modal.html | 21 ++++--- 3 files changed, 89 insertions(+), 49 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js index cb9ed4d..18f85c9 100644 --- a/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js +++ b/bitbake/lib/toaster/toastergui/static/js/newcustomimage_modal.js @@ -22,14 +22,17 @@ function newCustomImageModalInit(){ var nameInput = imgCustomModal.find('input'); var invalidNameMsg = "Image names cannot contain spaces or capital letters. The only allowed special character is dash (-)."; - var duplicateNameMsg = "A recipe with this name already exists. Image names must be unique."; + 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."; - - // capture clicks on radio buttons inside the modal; when one is selected, - // set the recipe on the modal + + // 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) { clearRecipeError(); + $(".radio").each(function(){ + $(this).removeClass("has-error"); + }); var recipeId = $(e.target).attr('data-recipe'); imgCustomModal.data('recipe', recipeId); @@ -42,6 +45,9 @@ function newCustomImageModalInit(){ if (!baseRecipeId) { showRecipeError(invalidBaseRecipeIdMsg); + $(".radio").each(function(){ + $(this).addClass("has-error"); + }); return; } @@ -71,7 +77,7 @@ function newCustomImageModalInit(){ function showNameError(text){ invalidNameHelp.text(text); invalidNameHelp.show(); - nameInput.parent().addClass('error'); + nameInput.parent().addClass('has-error'); } function showRecipeError(text){ @@ -92,11 +98,11 @@ function newCustomImageModalInit(){ if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ showNameError(invalidNameMsg); newCustomImgBtn.prop("disabled", true); - nameInput.parent().addClass('error'); + nameInput.parent().addClass('has-error'); } else { invalidNameHelp.hide(); newCustomImgBtn.prop("disabled", false); - nameInput.parent().removeClass('error'); + nameInput.parent().removeClass('has-error'); } }); } @@ -134,15 +140,29 @@ function newCustomImageModalSetRecipes(baseRecipes) { for (var i = 0; i < baseRecipes.length; i++) { var recipe = baseRecipes[i]; imageSelectRadiosContainer.append( - '<label class="radio" data-role="image-radio">' + - recipe.name + - '<input type="radio" class="form-control" name="select-image" ' + + '<div class="radio"><label data-role="image-radio">' + + '<input type="radio" name="select-image" ' + 'data-recipe="' + recipe.id + '">' + - '</label>' + recipe.name + + '</label></div>' ); } - // show the radio button container + // select the first radio button as default selection. Radio button + // groups should always display with an option checked + imageSelectRadiosContainer.find("input:radio:first").attr("checked", "checked"); + + // check which radio button is selected by default inside the modal, + // and set the recipe on the modal accordingly + imageSelectRadiosContainer.find("input:radio").each(function(){ + if ( $(this).is(":checked") ) { + var recipeId = $(this).attr("data-recipe"); + imgCustomModal.data("recipe", recipeId); + } + }); + + // show the radio button container imageSelector.show(); - } + + } } diff --git a/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html index 8046c08..0f53fb3 100644 --- a/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html +++ b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html @@ -6,33 +6,37 @@ choose which one to edit required context: build - a Build object --> -<div class="modal hide fade in" aria-hidden="false" id="edit-custom-image-modal"> - <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">??</button> - <h3>Which image do you want to edit?</h3> - </div> +<div class="modal fade" aria-hidden="false" id="edit-custom-image-modal"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">??</button> + <h3>Which image do you want to edit?</h3> + </div> - <div class="modal-body"> - <div class="row-fluid"> - {% for recipe in build.get_custom_image_recipes %} - <label class="radio"> - {{recipe.name}} - <input type="radio" class="form-control" name="select-custom-image" - data-url="{% url 'customrecipe' build.project.id recipe.id %}"> - </label> - {% endfor %} - </div> - <span class="help-block error" id="invalid-custom-image-help" style="display:none"> - Please select a custom image to edit. - </span> - </div> + <div class="modal-body"> + {% for recipe in build.get_custom_image_recipes %} + <div class="radio"> + <label> + <input type="radio" name="select-custom-image" + data-url="{% url 'customrecipe' build.project.id recipe.id %}"> + {{recipe.name}} + </label> + </div> + {% endfor %} + <span class="help-block text-danger" id="invalid-custom-image-help" style="display:none"> + Please select a custom image to edit. + </span> + </div> - <div class="modal-footer"> - <button class="btn btn-primary btn-large" data-url="#" - data-action="edit-custom-image" disabled> - Edit custom image - </button> - </div> + <div class="modal-footer"> + <button class="btn btn-primary btn-lg" data-url="#" + data-action="edit-custom-image" disabled> + Edit custom image + </button> + </div> + </div> + </div> </div> <script> @@ -46,7 +50,7 @@ $(document).ready(function () { return $('[name="select-custom-image"]:checked'); }; - radios.change(function () { + function enableSubmit() { if (getSelectedRadios().length === 1) { editCustomImageButton.removeAttr('disabled'); error.hide(); @@ -55,7 +59,15 @@ $(document).ready(function () { editCustomImageButton.attr('disabled', 'disabled'); error.show(); } - }); + }; + + $("#edit-custom-image-modal").on("shown.bs.modal", function() { + enableSubmit(); + }); + + radios.change(function () { + enableSubmit(); + }); editCustomImageButton.click(function () { var selectedRadios = getSelectedRadios(); @@ -67,5 +79,10 @@ $(document).ready(function () { error.show(); } }); + + // Select the first custom image listed. Radio button groups + // should always have an option selected by default + $("input:radio:first").attr("checked", "checked"); + }); </script> diff --git a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html index 2fb5396..334f36d 100644 --- a/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html +++ b/bitbake/lib/toaster/toastergui/templates/newcustomimage_modal.html @@ -28,24 +28,27 @@ --> <div data-role="image-selector" style="display:none;"> <h4>Which image do you want to customise?</h4> + <span class="help-block text-danger" id="invalid-recipe-help" style="display:none"></span> <div data-role="image-selector-radios"></div> - <span class="help-block error" id="invalid-recipe-help" style="display:none"></span> <div class="air"></div> </div> <h4>Name your custom image</h4> <div class="row"> - <span class="help-block col-md-8">Image names must be unique. They should not contain spaces or capital letters, and the only allowed special character is dash (-).<p></p> - </span></div> - <div class="control-group controls"> - <input type="text" class="huge" placeholder="Type the custom image name" required> - <span class="help-block error" id="invalid-name-help" style="display:none"></span> - </div> - </div> + <div class="col-md-10"> + <p class="help-block">Image names must be unique. They should not contain spaces or capital letters, and the only allowed special character is dash (-). + </p> + <div class="form-group"> + <input type="text" class="form-control input-lg" placeholder="Type the custom image name" required> + </div> + <span class="help-block text-danger" id="invalid-name-help" style="display:none"></span> + </div> + </div> + </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-lg" data-original-title="" title="" disabled>Create custom image</button> </div> </div> </div> -- 1.9.1
-- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
