Try jquery UI dialog, it will handle the popup window, the close button at upper, right corner of the window, and the buttons at the bottom bar. http://jqueryui.com/dialog/ For the content in the dialog, it is just some radios and labels which is quite simple. Please check jquery ui dialog, let me know if got any blockers there. On 1/24/2014 8:53 AM, Rodrigo Trujillo wrote:

Hi guys,

I wonder if someone expert in UI can help me with my latest patch. Actually, the patch: [PATCH V2 7/7] (WIP) Storagepool SCSI/FC: Draft UI to allow user to select a LUN to new VM

You guys will find the code some TODO's and FIXME

I need to popup a window with LUN's names and allow user to select one of them. Then retrieve this selection. I think this is not that complicated, but I could not research deeper how to do it. See an example below:

********************************* (X) Close Select Host

() Lun 1 () Lun 2 () Lun xxx

---------------------------------------- ________ | Select | *********************************

Appreciate any help

Regards, Rodrigo

_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel

On 01/24/2014 08:53 AM, Rodrigo Trujillo wrote:

Hi guys,

I wonder if someone expert in UI can help me with my latest patch. Actually, the patch: [PATCH V2 7/7] (WIP) Storagepool SCSI/FC: Draft UI to allow user to select a LUN to new VM

You guys will find the code some TODO's and FIXME

I need to popup a window with LUN's names and allow user to select one of them. Then retrieve this selection. I think this is not that complicated, but I could not research deeper how to do it. See an example below:

********************************* (X) Close Select Host

() Lun 1 () Lun 2 () Lun xxx

---------------------------------------- ________ | Select | *********************************

Hi Rodrigo, the general process to add a pop-up window is like: 1) Add the content page, related files include HTML, JS, and CSS. 2) Add a hook to trigger the window in parent page. 3) Add other corresponding content including Makefile, translation, etc. To quickly make it, you can copy existing window page file (like guest-add.html.tmpl, guest-edit.html.tmpl, etc.) and then modify based-on it. Here let me give you a draft code fragment. *create ui/pages/lun-select.html.tmpl* <div id="lun-select-window" class="window"> <form id="form-lun-select"> <header> <h1 class="title">$_("Select LUN")</h1> <div class="close">X</div> </header> <div class="content"> <fieldset class="lun-select-fieldset"> <legend>$_("Select a Name")</legend> <div id="lun-select-names"> ... </div> </fieldset> </div> <footer> <div class="btn-group"> <button id="lun-select-button-select">$_("Select")</button> </div> </footer> </form> </div> *create ui/js/src/kimchi.lun_select_main.js* kimchi.lun_select_main = function() { var lunSelectForm = $('#lun-select-form'); var selectButton = $('#lun-select-button-select'); kimchi.listLUNs(function(luns) { $.each(luns, function(i, lun) { // Create radio button and append it to DOM node // e.g. $('<input id="lun-name-radio-' + i + '" type="radio" value="' + lun + '"><label for="lun-name-radio-' + i +'">' + lun + '</label>').appendTo('#lun-select-names') }); }); var submitForm = function(event) { $(selectButton).prop('disabled', true); var selected = $('input[checked="true"]', lunSelectForm).val(); // Save to a kimchi scoped property kimchi.selecteLUN = selected; kimchi.window.close(); event.preventDefault(); }; $(lunSelectForm).on('submit', submitForm); $(selectButton).on('click', submitForm); }; *create ui/css/theme-default/lun-select.css* /* Please refer to similar CSS files like guest-edit.css. */ *Update ui/pages/Makefile.am* add one line in proper position: lun-select.html.tmpl \ * **Update po file* *(optional) add related i18n variables in ui/pages/i18n.html.tmpl*

Appreciate any help

Regards, Rodrigo

_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel