Thanks for the quick patch. Just a comment: While editing a CDROM path, we should be able to do that in current window (instead of opening a new pop-up) Yu Xing has did that way to network tab - Select edit button - the edit button becomes a save button - the path label becomes a text input - Select save button - the save button becomes edit button - the path text input becomes label Does that make sense for you?

On 05/05/2014 11:35 PM, Hongliang Wang wrote: > Keep consistent with interface setup tab. > > Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; > --- > ui/css/theme-default/guest-edit.css | 92 > ++++++++++--------------------------- > ui/js/src/kimchi.guest_edit_main.js | 23 ++++++++-- > ui/pages/guest-edit.html.tmpl | 39 ++++++++-------- > 3 files changed, 63 insertions(+), 91 deletions(-) > > diff --git a/ui/css/theme-default/guest-edit.css > b/ui/css/theme-default/guest-edit.css > index 36f7f75..52c53eb 100644 > --- a/ui/css/theme-default/guest-edit.css > +++ b/ui/css/theme-default/guest-edit.css > @@ -89,74 +89,7 @@ > width: 400px; > } > > -.guest-edit-cdrom-button { > - background: url("../images/theme-default/guest-icon-sprite.png") > no-repeat left top transparent; > - border: none; > - height: 25px; > - vertical-align: middle; > - width: 25px; > -} > - > -.guest-edit-cdrom-button.attach { > - margin: 15px 0 0 521px; > -} > - > -.guest-edit-cdrom-button.attach:hover { > - background-position: 0 -27px; > -} > - > -.guest-edit-cdrom-button.attach:focus { > - background-position: 0 -54px; > -} > - > -.guest-edit-cdrom-button.attach:active { > - background-position: 0 -81px; > -} > - > -.guest-edit-cdrom-button.attach[disabled] { > - background-position: 0 -108px; > -} > - > -.guest-edit-cdrom-button.replace { > - background-position: -27px 0; > -} > - > -.guest-edit-cdrom-button.replace:hover { > - background-position: -27px -27px; > -} > - > -.guest-edit-cdrom-button.replace:focus { > - background-position: -27px -54px; > -} > - > -.guest-edit-cdrom-button.replace:active { > - background-position: -27px -81px; > -} > - > -.guest-edit-cdrom-button.replace[disabled] { > - background-position: -27px -108px; > -} > - > -.guest-edit-cdrom-button.detach { > - background-position: -54px 0; > -} > - > -.guest-edit-cdrom-button.detach:hover { > - background-position: -54px -27px; > -} > - > -.guest-edit-cdrom-button.detach:focus { > - background-position: -54px -54px; > -} > - > -.guest-edit-cdrom-button.detach:active { > - background-position: -54px -81px; > -} > - > -.guest-edit-cdrom-button.detach[disabled] { > - background-position: -54px -108px; > -} > - > +#form-guest-edit-storage .header, > .guest-edit-interface .header { > margin-bottom: 8px; > padding-bottom: 2px; > @@ -165,33 +98,56 @@ > overflow: hidden; > } > > +#form-guest-edit-storage .body .item, > .guest-edit-interface .body .item { > margin: 5px 0; > } > > +#form-guest-edit-storage .cell, > .guest-edit-interface .cell { > display: inline-block; > width: 250px; > } > > +#form-guest-edit-storage .cell.dev { > + width: 60px; > +} > + > +#form-guest-edit-storage .cell.path { > + width: 440px; > +} > + > +#form-guest-edit-storage .cell.path input { > + box-sizing: border-box; > + width: 100%; > +} > + > .guest-edit-interface .body select { > width: 180px; > padding: 0px; > } > > +#form-guest-edit-storage .action-area, > .guest-edit-interface .action-area { > float: right; > } > > +#form-guest-edit-storage .action-area { > + line-height: 24px; > +} > + > +#form-guest-edit-storage button, > .guest-edit-interface button { > width: 20px; > height: 20px; > } > > +#form-guest-edit-storage .header button, > .guest-edit-interface .header button { > margin-bottom: 1px; > } > > +#form-guest-edit-storage .body button:not(:last-child), > .guest-edit-interface .body button:not(:last-child) { > margin-right: 2px; > } > diff --git a/ui/js/src/kimchi.guest_edit_main.js > b/ui/js/src/kimchi.guest_edit_main.js > index 0236e2d..ba5fef5 100644 > --- a/ui/js/src/kimchi.guest_edit_main.js > +++ b/ui/js/src/kimchi.guest_edit_main.js > @@ -36,7 +36,7 @@ kimchi.guest_edit_main = function() { > kimchi.listVMStorages({ > vm: kimchi.selectedGuest > }, function(storages) { > - var container = $('#guest-edit-cdrom-row-container'); > + var container = $('#form-guest-edit-storage .body'); > $(container).empty(); > > $.each(storages, function(index, storage) { > @@ -53,9 +53,19 @@ kimchi.guest_edit_main = function() { > }; > > $('input[type="text"][name="cdrom"]', > container).on('click', replaceCDROM); > - $('.replace', container).on('click', replaceCDROM); > + $('.replace', container).button({ > + icons: { > + primary: 'ui-icon-pencil' > + }, > + text: false > + }).click(replaceCDROM); > > - $('.detach', container).on('click', function(e) { > + $('.detach', container).button({ > + icons: { > + primary: 'ui-icon-trash' > + }, > + text: false > + }).click(function(e) { > e.preventDefault(); > var settings = { > title : i18n['KCHAPI6004M'], > @@ -172,7 +182,12 @@ kimchi.guest_edit_main = function() { > > refreshCDROMs(); > > - $('#guest-edit-attach-cdrom-button').on('click', > function(event) { > + $('#guest-edit-attach-cdrom-button').button({ > + icons: { > + primary: "ui-icon-plusthick" > + }, > + text: false > + }).click(function(event) { > event.preventDefault(); > kimchi.window.open("guest-storage-add.html"); > }); > diff --git a/ui/pages/guest-edit.html.tmpl > b/ui/pages/guest-edit.html.tmpl > index 96d907e..3b7291a 100644 > --- a/ui/pages/guest-edit.html.tmpl > +++ b/ui/pages/guest-edit.html.tmpl > @@ -94,15 +94,12 @@ > </fieldset> > </form> > <form id="form-guest-edit-storage"> > - <fieldset class="guest-edit-fieldset"> > - <div id="guest-edit-cdrom-row-container" > class="guest-edit-cdrom-row-container"></div> > - <div> > - <button id="guest-edit-attach-cdrom-button" > - class="guest-edit-cdrom-button attach" > - title='$_("Attach")'> > - </button> > - </div> > - </fieldset> > + <div class="header"> > + <span class="cell">$_("Device")</span> > + <span class="cell">$_("Path")</span> > + <button id="guest-edit-attach-cdrom-button" > class="action-area attach"></button> > + </div> > + <div class="body"></div> > </form> > <form id="form-guest-edit-interface" > class="guest-edit-interface"> > <div class="header"> > @@ -123,14 +120,16 @@ > </footer> > </div> > <script id="cdrom-row-tmpl" type="text/html"> > - <div> > - <div class="guest-edit-wrapper-label"> > + <div class="item" id="cdrom-{dev}"> > + <span class="cell dev"> > <label for="cdrom-{dev}">{dev}</label> > - </div> > - <div class="guest-edit-wrapper-controls"> > + </span> > + <span class="cell path"> > <input id="cdrom-{dev}" name="cdrom" type="text" > data-vm="{vm}" data-dev="{dev}" > value="{path}" readonly="readonly" /> > + </span> > + <span class="action-area"> > <button class="guest-edit-cdrom-button replace" > data-vm="{vm}" data-dev="{dev}" > title='$_("Replace")'> > @@ -139,7 +138,7 @@ > data-vm="{vm}" data-dev="{dev}" > title='$_("Detach")'> > </button> > - </div> > + </span> > </div> > </script> > <script id="interface-tmpl" type="text/html"> > @@ -160,19 +159,21 @@ > <div> > </script> > <script id="disk-row-tmpl" type="text/html"> > - <div> > - <div class="guest-edit-wrapper-label"> > + <div class="item" id="cdrom-{dev}"> > + <span class="cell dev"> > <label for="disk-{dev}">{dev}</label> > - </div> > - <div class="guest-edit-wrapper-controls"> > + </span> > + <span class="cell path"> > <input id="disk-{dev}" name="disk" type="text" > data-vm="{vm}" data-dev="{dev}" > value="{path}" readonly="readonly" /> > + </span> > + <span class="action-area"> > <button class="guest-edit-cdrom-button detach" > data-vm="{vm}" data-dev="{dev}" > title="$_("Detach")"> > </button> > - </div> > + </span> > </div> > </script> > <script type="text/javascript">

On 05/06/2014 11:33 PM, Hongliang Wang wrote: > > On 05/07/2014 01:06 AM, Aline Manera wrote: >> >> Thanks for the quick patch. >> >> Just a comment: >> >> While editing a CDROM path, we should be able to do that in current >> window (instead of opening a new pop-up) >> >> Yu Xing has did that way to network tab >> >> - Select edit button >> - the edit button becomes a save button >> - the path label becomes a text input >> >> - Select save button >> - the save button becomes edit button >> - the path text input becomes label >> >> Does that make sense for you? > ACK. Hongliang, have you already sent the final patch set? I want to merge it as soon as possible for 1.2.1 release.

>> >> >> On 05/05/2014 11:35 PM, Hongliang Wang wrote: >>> Keep consistent with interface setup tab. >>> >>> Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; >>> --- >>> ui/css/theme-default/guest-edit.css | 92 >>> ++++++++++--------------------------- >>> ui/js/src/kimchi.guest_edit_main.js | 23 ++++++++-- >>> ui/pages/guest-edit.html.tmpl | 39 ++++++++-------- >>> 3 files changed, 63 insertions(+), 91 deletions(-) >>> >>> diff --git a/ui/css/theme-default/guest-edit.css >>> b/ui/css/theme-default/guest-edit.css >>> index 36f7f75..52c53eb 100644 >>> --- a/ui/css/theme-default/guest-edit.css >>> +++ b/ui/css/theme-default/guest-edit.css >>> @@ -89,74 +89,7 @@ >>> width: 400px; >>> } >>> >>> -.guest-edit-cdrom-button { >>> - background: >>> url("../images/theme-default/guest-icon-sprite.png") no-repeat left >>> top transparent; >>> - border: none; >>> - height: 25px; >>> - vertical-align: middle; >>> - width: 25px; >>> -} >>> - >>> -.guest-edit-cdrom-button.attach { >>> - margin: 15px 0 0 521px; >>> -} >>> - >>> -.guest-edit-cdrom-button.attach:hover { >>> - background-position: 0 -27px; >>> -} >>> - >>> -.guest-edit-cdrom-button.attach:focus { >>> - background-position: 0 -54px; >>> -} >>> - >>> -.guest-edit-cdrom-button.attach:active { >>> - background-position: 0 -81px; >>> -} >>> - >>> -.guest-edit-cdrom-button.attach[disabled] { >>> - background-position: 0 -108px; >>> -} >>> - >>> -.guest-edit-cdrom-button.replace { >>> - background-position: -27px 0; >>> -} >>> - >>> -.guest-edit-cdrom-button.replace:hover { >>> - background-position: -27px -27px; >>> -} >>> - >>> -.guest-edit-cdrom-button.replace:focus { >>> - background-position: -27px -54px; >>> -} >>> - >>> -.guest-edit-cdrom-button.replace:active { >>> - background-position: -27px -81px; >>> -} >>> - >>> -.guest-edit-cdrom-button.replace[disabled] { >>> - background-position: -27px -108px; >>> -} >>> - >>> -.guest-edit-cdrom-button.detach { >>> - background-position: -54px 0; >>> -} >>> - >>> -.guest-edit-cdrom-button.detach:hover { >>> - background-position: -54px -27px; >>> -} >>> - >>> -.guest-edit-cdrom-button.detach:focus { >>> - background-position: -54px -54px; >>> -} >>> - >>> -.guest-edit-cdrom-button.detach:active { >>> - background-position: -54px -81px; >>> -} >>> - >>> -.guest-edit-cdrom-button.detach[disabled] { >>> - background-position: -54px -108px; >>> -} >>> - >>> +#form-guest-edit-storage .header, >>> .guest-edit-interface .header { >>> margin-bottom: 8px; >>> padding-bottom: 2px; >>> @@ -165,33 +98,56 @@ >>> overflow: hidden; >>> } >>> >>> +#form-guest-edit-storage .body .item, >>> .guest-edit-interface .body .item { >>> margin: 5px 0; >>> } >>> >>> +#form-guest-edit-storage .cell, >>> .guest-edit-interface .cell { >>> display: inline-block; >>> width: 250px; >>> } >>> >>> +#form-guest-edit-storage .cell.dev { >>> + width: 60px; >>> +} >>> + >>> +#form-guest-edit-storage .cell.path { >>> + width: 440px; >>> +} >>> + >>> +#form-guest-edit-storage .cell.path input { >>> + box-sizing: border-box; >>> + width: 100%; >>> +} >>> + >>> .guest-edit-interface .body select { >>> width: 180px; >>> padding: 0px; >>> } >>> >>> +#form-guest-edit-storage .action-area, >>> .guest-edit-interface .action-area { >>> float: right; >>> } >>> >>> +#form-guest-edit-storage .action-area { >>> + line-height: 24px; >>> +} >>> + >>> +#form-guest-edit-storage button, >>> .guest-edit-interface button { >>> width: 20px; >>> height: 20px; >>> } >>> >>> +#form-guest-edit-storage .header button, >>> .guest-edit-interface .header button { >>> margin-bottom: 1px; >>> } >>> >>> +#form-guest-edit-storage .body button:not(:last-child), >>> .guest-edit-interface .body button:not(:last-child) { >>> margin-right: 2px; >>> } >>> diff --git a/ui/js/src/kimchi.guest_edit_main.js >>> b/ui/js/src/kimchi.guest_edit_main.js >>> index 0236e2d..ba5fef5 100644 >>> --- a/ui/js/src/kimchi.guest_edit_main.js >>> +++ b/ui/js/src/kimchi.guest_edit_main.js >>> @@ -36,7 +36,7 @@ kimchi.guest_edit_main = function() { >>> kimchi.listVMStorages({ >>> vm: kimchi.selectedGuest >>> }, function(storages) { >>> - var container = $('#guest-edit-cdrom-row-container'); >>> + var container = $('#form-guest-edit-storage .body'); >>> $(container).empty(); >>> >>> $.each(storages, function(index, storage) { >>> @@ -53,9 +53,19 @@ kimchi.guest_edit_main = function() { >>> }; >>> >>> $('input[type="text"][name="cdrom"]', >>> container).on('click', replaceCDROM); >>> - $('.replace', container).on('click', replaceCDROM); >>> + $('.replace', container).button({ >>> + icons: { >>> + primary: 'ui-icon-pencil' >>> + }, >>> + text: false >>> + }).click(replaceCDROM); >>> >>> - $('.detach', container).on('click', function(e) { >>> + $('.detach', container).button({ >>> + icons: { >>> + primary: 'ui-icon-trash' >>> + }, >>> + text: false >>> + }).click(function(e) { >>> e.preventDefault(); >>> var settings = { >>> title : i18n['KCHAPI6004M'], >>> @@ -172,7 +182,12 @@ kimchi.guest_edit_main = function() { >>> >>> refreshCDROMs(); >>> >>> - $('#guest-edit-attach-cdrom-button').on('click', >>> function(event) { >>> + $('#guest-edit-attach-cdrom-button').button({ >>> + icons: { >>> + primary: "ui-icon-plusthick" >>> + }, >>> + text: false >>> + }).click(function(event) { >>> event.preventDefault(); >>> kimchi.window.open("guest-storage-add.html"); >>> }); >>> diff --git a/ui/pages/guest-edit.html.tmpl >>> b/ui/pages/guest-edit.html.tmpl >>> index 96d907e..3b7291a 100644 >>> --- a/ui/pages/guest-edit.html.tmpl >>> +++ b/ui/pages/guest-edit.html.tmpl >>> @@ -94,15 +94,12 @@ >>> </fieldset> >>> </form> >>> <form id="form-guest-edit-storage"> >>> - <fieldset class="guest-edit-fieldset"> >>> - <div id="guest-edit-cdrom-row-container" >>> class="guest-edit-cdrom-row-container"></div> >>> - <div> >>> - <button id="guest-edit-attach-cdrom-button" >>> - class="guest-edit-cdrom-button attach" >>> - title='$_("Attach")'> >>> - </button> >>> - </div> >>> - </fieldset> >>> + <div class="header"> >>> + <span class="cell">$_("Device")</span> >>> + <span class="cell">$_("Path")</span> >>> + <button id="guest-edit-attach-cdrom-button" >>> class="action-area attach"></button> >>> + </div> >>> + <div class="body"></div> >>> </form> >>> <form id="form-guest-edit-interface" >>> class="guest-edit-interface"> >>> <div class="header"> >>> @@ -123,14 +120,16 @@ >>> </footer> >>> </div> >>> <script id="cdrom-row-tmpl" type="text/html"> >>> - <div> >>> - <div class="guest-edit-wrapper-label"> >>> + <div class="item" id="cdrom-{dev}"> >>> + <span class="cell dev"> >>> <label for="cdrom-{dev}">{dev}</label> >>> - </div> >>> - <div class="guest-edit-wrapper-controls"> >>> + </span> >>> + <span class="cell path"> >>> <input id="cdrom-{dev}" name="cdrom" type="text" >>> data-vm="{vm}" data-dev="{dev}" >>> value="{path}" readonly="readonly" /> >>> + </span> >>> + <span class="action-area"> >>> <button class="guest-edit-cdrom-button replace" >>> data-vm="{vm}" data-dev="{dev}" >>> title='$_("Replace")'> >>> @@ -139,7 +138,7 @@ >>> data-vm="{vm}" data-dev="{dev}" >>> title='$_("Detach")'> >>> </button> >>> - </div> >>> + </span> >>> </div> >>> </script> >>> <script id="interface-tmpl" type="text/html"> >>> @@ -160,19 +159,21 @@ >>> <div> >>> </script> >>> <script id="disk-row-tmpl" type="text/html"> >>> - <div> >>> - <div class="guest-edit-wrapper-label"> >>> + <div class="item" id="cdrom-{dev}"> >>> + <span class="cell dev"> >>> <label for="disk-{dev}">{dev}</label> >>> - </div> >>> - <div class="guest-edit-wrapper-controls"> >>> + </span> >>> + <span class="cell path"> >>> <input id="disk-{dev}" name="disk" type="text" >>> data-vm="{vm}" data-dev="{dev}" >>> value="{path}" readonly="readonly" /> >>> + </span> >>> + <span class="action-area"> >>> <button class="guest-edit-cdrom-button detach" >>> data-vm="{vm}" data-dev="{dev}" >>> title="$_("Detach")"> >>> </button> >>> - </div> >>> + </span> >>> </div> >>> </script> >>> <script type="text/javascript"> >> >