Sorry for the huge delay on this. A new design now attached to the Bugzilla entry
https://bugzilla.yoctoproject.org/show_bug.cgi?id=7828 Let me know what you think. Belén On 26/11/2015 16:18, "[email protected] on behalf of Barros Pena, Belen" <[email protected] on behalf of [email protected]> wrote: > > >On 26/11/2015 16:05, "Michael Wood" <[email protected]> wrote: > >>On 26/11/15 14:28, Smith, Elliot wrote: >>> On 24 November 2015 at 13:26, Barros Pena, Belen >>> <[email protected] <mailto:[email protected]>> >>>wrote: >>> >>> On 23/11/2015 11:41, "[email protected] >>> <mailto:[email protected]> on behalf of >>> Michael Wood" <[email protected] >>> <mailto:[email protected]> on behalf of >>> [email protected] <mailto:[email protected]>> wrote: >>> >>> >Add feature to the projectconf page to allow free form input of >>> >IMAGE_FSTYPES. Sometimes a recipe can provide an IMAGE_FSTYPE that >>> >isn't in the normal image_types class. So would need to be >>>specified >>> >manually. >>> > >>> >[YOCTO #7828] >>> >>> This seems to address all the issues from v1. Getting rid the >>>'already >>> selected' error message by not duplicating any values works well. >>> >>> >>> It works correctly, but there is one issue: if you enter an invalid >>> string as the image type (e.g. btrfss) and want to correct it, there's >>> no way to delete it from the list. >> >>To remove custom added values, you just have to click edit and then >>press 'Save'. > >The fact that Elliot couldn't work it out I think tells us something. We >shouldn't leave it that way :/ > >> >>> >>> Perhaps a button to set the list back to the defaults, or to remove >>> any invalid types ("cleanup")? >>> >>> Alternatively, add the user's custom image type to the checkbox list; >>> if they uncheck it, is disappears from the list. >>> >>> Elliot >>> >>> >>> From my perspective, this is good to go. >>> >>> Thanks! >>> >>> Belén >>> >>> > >>> >Signed-off-by: Michael Wood <[email protected] >>> <mailto:[email protected]>> >>> >--- >>> > .../toaster/toastergui/templates/projectconf.html | 128 >>> >+++++++++++++++------ >>> > 1 file changed, 95 insertions(+), 33 deletions(-) >>> > >>> >diff --git >>> a/bitbake/lib/toaster/toastergui/templates/projectconf.html >>> >b/bitbake/lib/toaster/toastergui/templates/projectconf.html >>> >index 30fd03e..13f9c66 100644 >>> >--- a/bitbake/lib/toaster/toastergui/templates/projectconf.html >>> >+++ b/bitbake/lib/toaster/toastergui/templates/projectconf.html >>> >@@ -36,18 +36,36 @@ >>> > <span class="js-config-var-name >>> >js-config-var-managed-name">IMAGE_FSTYPES</span> >>> > <i class="icon-question-sign get-help" >>> title="Formats of >>> >root file system images that you want to have created <br /><a >>> >>>>href='http://www.yoctoproject.org/docs/1.6.1/ref-manual/ref-manual.html >>>># >>>>va >>> >r-IMAGE_FSTYPES' target='_blank'>Read more in the manual</a>"></i> >>> > </dt> >>> >- <dd class="lead"> >>> >- <span id="image_fstypes">{{fstypes}}</span> >>> >- <i class="icon-pencil" >>> >id="change-image_fstypes-icon"></i> >>> >- <form id="change-image_fstypes-form" >>> >style="display:none;"> >>> >- <input id="filter-image_fstypes" type="text" >>> >placeholder="Search image types" class="span4"> >>> >- <div id="all-image_fstypes" >>>class="scrolling"> >>> >+ <dd style="margin-bottom: 20px"> >>> >+ <span id="image_fstypes" >>> class="lead">{{fstypes}}</span> >>> >+ <i class="icon-pencil" >>> id="change-image_fstypes-icon"></i> >>> >+ <form id="change-image_fstypes-form" >>> style="display:none;"> >>> >+ <label>Choose from known image types</label> >>> >+ <input id="filter-image_fstypes" type="text" >>> >placeholder="Search known image types" class="span4"> >>> >+ <div id="all-image_fstypes" class="scrolling"> >>> >+ </div> >>> >+ <div class="input-append"> >>> >+ <span class="control-group" >>> >id="fstypes-control-validation"> >>> >+ <label>Enter your own image types >>> >+ <i data-original-title="You can enter >>> more than >>> >one image type, separated by a space" class="icon-question-sign >>> get-help" >>> >title=""></i> >>> >+ </label> >>> >+ <input type="text" >>> id="new-image-fstype-input"> >>> >+ >>> >+ </span> >>> > </div> >>> >- <span class="help-block" >>> >id="fstypes-error-message">You must select at least one image >>> type</span> >>> >- <button id="apply-change-image_fstypes" >>> >type="button" class="btn">Save</button> >>> >- <button id="cancel-change-image_fstypes" >>> >type="button" class="btn btn-link">Cancel</button> >>> >- </form> >>> >- </dd> >>> >+ <p style="display:none" class="error" >>> >id="fstypes-error-message"> >>> >+ You must select at least one image type. >>> <br /> >>> >+ Choose from the list of known ones or type >>> your >>> >own. >>> >+ </p> >>> >+ <p style="display:none" class="error" >>> >id="invalid-chars-in-fstype-msg"> >>> >+ A valid image type cannot include >>>underscores. >>> >+ </p> >>> >+ <div> >>> >+ <button id="apply-change-image_fstypes" >>> >type="button" class="btn">Save</button> >>> >+ <button id="cancel-change-image_fstypes" >>> >type="button" class="btn btn-link">Cancel</button> >>> >+ </div> >>> >+ </form> >>> >+ </dd> >>> > {% endif %} >>> > >>> > {% if image_install_append_defined %} >>> >@@ -305,20 +323,41 @@ >>> > return true; >>> > } >>> > >>> >- // Test to insure at least one FS Type is checked >>> >+ var fsTypesInput = $("#new-image-fstype-input"); >>> >+ var invalidCharsMsg = $("#invalid-chars-in-fstype-msg"); >>> >+ var fsTypesControl = $("#fstypes-control-validation"); >>> >+ var noFsType = $('#fstypes-error-message'); >>> >+ var fsTypesApplyBtn = $("#apply-change-image_fstypes"); >>> >+ >>> >+ /* Validation of fstypes */ >>> > function enableFsTypesSave() { >>> >- var any_checked = 0; >>> >- $(".fs-checkbox-fstypes:checked").each(function(){ >>> >- any_checked = 1; >>> >- }); >>> >- if ( 0 == any_checked ) { >>> >- >>> >$("#apply-change-image_fstypes").attr("disabled","disabled"); >>> >- $('#fstypes-error-message').show(); >>> >- } >>> >- else { >>> >- $("#apply-change-image_fstypes").removeAttr("disabled"); >>> >- $('#fstypes-error-message').hide(); >>> >- } >>> >+ var valid_input = false; >>> >+ var valid_checkboxes = false; >>> >+ var anyChecked = >>>$(".fs-checkbox-fstypes:checked").length; >>> >+ >>> >+ /* No underscores allowed */ >>> >+ if (fsTypesInput.val().match(/\_/)) { >>> >+ invalidCharsMsg.show(); >>> >+ fsTypesControl.addClass("error"); >>> >+ valid_input = false; >>> >+ } else { >>> >+ fsTypesControl.removeClass("error"); >>> >+ invalidCharsMsg.hide(); >>> >+ valid_input = true; >>> >+ } >>> >+ >>> >+ if (!anyChecked && !fsTypesInput.val()){ >>> >+ noFsType.show(); >>> >+ valid_checkboxes = false; >>> >+ } else { >>> >+ noFsType.hide(); >>> >+ valid_checkboxes = true; >>> >+ } >>> >+ >>> >+ if (valid_checkboxes == false || valid_input == false) >>> >+ fsTypesApplyBtn.attr("disabled","disabled"); >>> >+ else >>> >+ fsTypesApplyBtn.removeAttr("disabled"); >>> > } >>> > >>> > // Preset or reset the Package Class checkbox labels >>> >@@ -597,17 +636,37 @@ >>> > } >>> > }); >>> > >>> >- $('#apply-change-image_fstypes').click(function(){ >>> >- // extract the selected fstypes and sort them >>> >- var fstypes_array = []; >>> >- var checkboxes = >>> >document.getElementsByClassName('fs-checkbox-fstypes'); >>> >- $(".fs-checkbox-fstypes:checked").each(function(){ >>> >- fstypes_array.push($(this).val()); >>> >- }); >>> >- fstypes_array.sort(); >>> >+ fsTypesInput.on('input', function(){ >>> >+ enableFsTypesSave(); >>> >+ }); >>> >+ >>> >+ fsTypesApplyBtn.click(function(e){ >>> >+ e.preventDefault(); >>> >+ >>> >+ var fstypes = ''; >>> >+ // extract the selected fstypes and sort them >>> >+ var fstypes_array = []; >>> >+ var checkboxes = >>> >document.getElementsByClassName('fs-checkbox-fstypes'); >>> >+ $(".fs-checkbox-fstypes:checked").each(function(){ >>> >+ fstypes_array.push($(this).val()); >>> >+ }); >>> >+ fstypes_array.sort(); >>> >+ >>> >+ /* If we have a value in our enter own image type >>> input >>> >and it >>> >+ * isn't already selected add it to the fstypes >>>value >>> >+ */ >>> >+ if (fsTypesInput.val()){ >>> >+ var inputFsTypes = fsTypesInput.val().split(" >>>"); >>> >+ >>> >+ for (var type in inputFsTypes){ >>> >+ if >>> (fstypes_array.indexOf(inputFsTypes[type].trim()) >>> >=== -1) >>> >+ { >>> >+ fstypes += inputFsTypes[type]+' '; >>> >+ } >>> >+ } >>> >+ } >>> > >>> > // now make a string of them >>> >- var fstypes = ''; >>> > for (var i = 0, length = fstypes_array.length; i >>>< >>> >length; i++) { >>> > fstypes += fstypes_array[i] + ' '; >>> > } >>> >@@ -620,6 +679,9 @@ >>> > $("#change-image_fstypes-form").slideUp(function() { >>> > $('#image_fstypes, >>> >#change-image_fstypes-icon').show(); >>> > }); >>> >+ >>> >+ >>> >+ fsTypesInput.val(""); >>> > }); >>> > {% endif %} >>> > >>> >-- >>> >2.5.0 >>> > >>> >-- >>> >_______________________________________________ >>> >toaster mailing list >>> >[email protected] <mailto:[email protected]> >>> >https://lists.yoctoproject.org/listinfo/toaster >>> >>> -- >>> _______________________________________________ >>> toaster mailing list >>> [email protected] <mailto:[email protected]> >>> https://lists.yoctoproject.org/listinfo/toaster >>> >>> >>> >>> >>> -- >>> Elliot Smith >>> Software Engineer >>> Intel Open Source Technology Centre >>> >>> --------------------------------------------------------------------- >>> 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
