[PATCH v2 0/2] Keep UI Consistent in Guest Edit Window

Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk Both are OK for me. v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment) Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl -- 1.8.1.4

Keep consistent with interface setup tab. Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- ui/css/theme-default/guest-edit.css | 99 +++++++++------------------- ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++++++++++------- ui/pages/guest-edit.html.tmpl | 57 +++++++++------- 3 files changed, 166 insertions(+), 115 deletions(-) diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css index 36f7f75..3ce48be 100644 --- a/ui/css/theme-default/guest-edit.css +++ b/ui/css/theme-default/guest-edit.css @@ -33,6 +33,12 @@ padding: 1em; } +#form-guest-edit-storage input[readonly] { + background: none; + border-color: transparent; + text-overflow: ellipsis; +} + .guest-edit-fieldset { padding-right: 0; } @@ -89,74 +95,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 +104,57 @@ 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.dev input, +#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 90dcb32..fdc7891 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) { @@ -46,35 +46,105 @@ kimchi.guest_edit_main = function() { container.append(templated); }); - var replaceCDROM = function(event) { - event.preventDefault(); - kimchi.selectedGuestStorage = $(this).data('dev'); - kimchi.window.open("guest-cdrom-edit.html"); + $('.replace', container).button({ + icons: { + primary: 'ui-icon-pencil' + }, + text: false + }); + + $('.detach', container).button({ + icons: { + primary: 'ui-icon-trash' + }, + text: false + }); + + $('.save', container).button({ + icons: { + primary: 'ui-icon-disk' + }, + text: false + }); + + $('.cancel', container).button({ + icons: { + primary: 'ui-icon-arrowreturnthick-1-w' + }, + text: false + }); + }); + }; + + var initStorageListeners = function() { + var container = $('#form-guest-edit-storage .body'); + var toggleCDROM = function(rowNode, toEdit) { + $('button.replace,button.detach', rowNode) + [(toEdit ? 'add' : 'remove') + 'Class']('hidden'); + $('button.save,button.cancel', rowNode) + [(toEdit ? 'remove' : 'add') + 'Class']('hidden'); + var pathBox = $('.path input', rowNode) + .prop('readonly', !toEdit); + toEdit && pathBox.select(); + }; + + var replaceCDROM = function(event) { + event.preventDefault(); + kimchi.selectedGuestStorage = $(this).data('dev'); + $('.item', container).each(function(i, n) { + toggleCDROM(n); + }); + var rowNode = $('#cdrom-' + kimchi.selectedGuestStorage); + toggleCDROM(rowNode, true); + }; + + $(container).on('click', 'button.replace', replaceCDROM); + + $(container).on('click', 'button.detach', function(e) { + e.preventDefault(); + var settings = { + title : i18n['KCHAPI6004M'], + content : i18n['KCHVMCD6001M'], + confirm : i18n['KCHAPI6002M'], + cancel : i18n['KCHAPI6003M'] }; - $('input[type="text"][name="cdrom"]', container).on('click', replaceCDROM); - $('.replace', container).on('click', replaceCDROM); + var dev = $(this).data('dev'); + kimchi.confirm(settings, function() { + kimchi.deleteVMStorage({ + vm: kimchi.selectedGuest, + dev: dev + }, function() { + kimchi.topic('kimchi/vmCDROMDetached').publish(); + }); + }); + }); - $('.detach', container).on('click', function(e) { - e.preventDefault(); - var settings = { - title : i18n['KCHAPI6004M'], - content : i18n['KCHVMCD6001M'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] - }; + $(container).on('click', 'button.save', function(event) { + event.preventDefault(); + var path = $('#cdrom-path-' + kimchi.selectedGuestStorage).val(); + var settings = { + vm: kimchi.selectedGuest, + dev: kimchi.selectedGuestStorage, + path: path + }; - var dev = $(this).data('dev'); - kimchi.confirm(settings, function() { - kimchi.deleteVMStorage({ - vm: kimchi.selectedGuest, - dev: dev - }, function() { - kimchi.topic('kimchi/vmCDROMDetached').publish(); - }); + kimchi.replaceVMStorage(settings, function(result) { + kimchi.topic('kimchi/vmCDROMReplaced').publish({ + result: result }); + }, function(result) { + var errText = result['reason'] || + result['responseJSON']['reason']; + kimchi.message.error(errText); }); }); + + $(container).on('click', 'button.cancel', function(event) { + event.preventDefault(); + var rowNode = $('#cdrom-' + kimchi.selectedGuestStorage); + toggleCDROM(rowNode); + }); }; var setupInterface = function() { @@ -172,7 +242,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"); }); @@ -187,6 +262,8 @@ kimchi.guest_edit_main = function() { refreshCDROMs(); }; + initStorageListeners(); + setupInterface(); kimchi.topic('kimchi/vmCDROMAttached').subscribe(onAttached); diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 96d907e..ded892c 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,17 @@ </footer> </div> <script id="cdrom-row-tmpl" type="text/html"> - <div> - <div class="guest-edit-wrapper-label"> - <label for="cdrom-{dev}">{dev}</label> - </div> - <div class="guest-edit-wrapper-controls"> - <input id="cdrom-{dev}" name="cdrom" type="text" + <div class="item view" id="cdrom-{dev}"> + <span class="cell dev"> + <input type="text" readonly="readonly" + id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" /> + </span> + <span class="cell path"> + <input id="cdrom-path-{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 +139,15 @@ data-vm="{vm}" data-dev="{dev}" title='$_("Detach")'> </button> - </div> + <button class="guest-edit-cdrom-button save hidden" + data-vm="{vm}" data-dev="{dev}" + title='$_("Save")'> + </button> + <button class="guest-edit-cdrom-button cancel hidden" + data-vm="{vm}" data-dev="{dev}" + title='$_("Cancel")'> + </button> + </span> </div> </script> <script id="interface-tmpl" type="text/html"> @@ -160,19 +168,22 @@ <div> </script> <script id="disk-row-tmpl" type="text/html"> - <div> - <div class="guest-edit-wrapper-label"> - <label for="disk-{dev}">{dev}</label> - </div> - <div class="guest-edit-wrapper-controls"> - <input id="disk-{dev}" name="disk" type="text" + <div class="item" id="cdrom-{dev}"> + <span class="cell dev"> + <input type="text" readonly="readonly" + id="disk-dev-{dev}" name="disk-dev-{dev}" value="{dev}" /> + </span> + <span class="cell path"> + <input id="disk-path-{dev}" name="path-{dev}" 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"> -- 1.8.1.4

--- ui/css/theme-default/guest-cdrom-edit.css | 57 ----------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 -------------------------- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------------- 4 files changed, 212 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl diff --git a/ui/css/theme-default/guest-cdrom-edit.css b/ui/css/theme-default/guest-cdrom-edit.css deleted file mode 100644 index 9c539c9..0000000 --- a/ui/css/theme-default/guest-cdrom-edit.css +++ /dev/null @@ -1,57 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -#guest-cdrom-edit-window { - font-size: 13px; - height: 600px; - width: 700px; -} - -.guest-cdrom-edit-fieldset { - padding: 1em; -} - -#guest-cdrom-edit-window input[type="text"] { - font-size: 16px; - height: 38px; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; - padding-left: 10px; - width: 600px; -} - -#guest-cdrom-edit-window input[type="text"][disabled] { - color: #bbb; - background-color: #fafafa; - cursor: not-allowed; -} - -#vm-cdrom-button-edit[disabled] { - background: #c0c0c0; - color: #ddd; - padding-left: 26px; -} - -#vm-cdrom-button-edit.loading[disabled] { - background: url("../../images/theme-default/loading.gif") 7px center no-repeat #c0c0c0; - color: #ddd; - padding-left: 26px; -} diff --git a/ui/images/theme-default/guest-icon-sprite.png b/ui/images/theme-default/guest-icon-sprite.png deleted file mode 100644 index 81edb5945d3bd204313a6d53b55cecf17ee97679..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6748 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 Bz#9Mn diff --git a/ui/js/src/kimchi.guest_cdrom_edit_main.js b/ui/js/src/kimchi.guest_cdrom_edit_main.js deleted file mode 100644 index abce9a5..0000000 --- a/ui/js/src/kimchi.guest_cdrom_edit_main.js +++ /dev/null @@ -1,85 +0,0 @@ -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2013 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -kimchi.guest_cdrom_edit_main = function() { - var cdromEditForm = $('#form-vm-cdrom-edit'); - var submitButton = $('#vm-cdrom-button-edit'); - var nameTextbox = $('input[name="dev"]', cdromEditForm); - var typeTextbox = $('input[name="type"]', cdromEditForm); - var pathTextbox = $('input[name="path"]', cdromEditForm); - var originalPath = null; - - kimchi.retrieveVMStorage({ - vm: kimchi.selectedGuest, - dev: kimchi.selectedGuestStorage - }, function(storage) { - for(var prop in storage) { - $('input[name="' + prop + '"]', cdromEditForm).val(storage[prop]); - } - - originalPath = storage['path']; - }); - - var submitForm = function(event) { - if(submitButton.prop('disabled')) { - return false; - } - - var path = pathTextbox.val(); - if(!path || path === '') { - return false; - } - - $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { - $(c).prop('disabled', true); - }); - $(submitButton).addClass('loading').text(i18n['KCHVMCD6005M']); - - var settings = { - vm: kimchi.selectedGuest, - dev: kimchi.selectedGuestStorage, - path: path - }; - - kimchi.replaceVMStorage(settings, function(result) { - kimchi.window.close(); - kimchi.topic('kimchi/vmCDROMReplaced').publish({ - result: result - }); - }, function(result) { - var errText = result['reason'] || - result['responseJSON']['reason']; - kimchi.message.error(errText); - - $.each([submitButton, nameTextbox, pathTextbox], function(i, c) { - $(c).prop('disabled', false); - }); - $(submitButton).removeClass('loading').text(i18n['KCHVMCD6004M']); - }); - - event.preventDefault(); - }; - - cdromEditForm.on('submit', submitForm); - submitButton.on('click', submitForm); - pathTextbox.on('input propertychange', function(event) { - var invalid = - ($(this).val() === originalPath) || - ($(this).val() === ''); - $(submitButton).prop('disabled', invalid); - }); -}; diff --git a/ui/pages/guest-cdrom-edit.html.tmpl b/ui/pages/guest-cdrom-edit.html.tmpl deleted file mode 100644 index b95119f..0000000 --- a/ui/pages/guest-cdrom-edit.html.tmpl +++ /dev/null @@ -1,70 +0,0 @@ -#* - * Project Kimchi - * - * Copyright IBM, Corp. 2013 - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - *# -#unicode UTF-8 -#import gettext -#from kimchi.cachebust import href -#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang) -#silent _ = t.gettext -#silent _t = t.gettext -<div id="guest-cdrom-edit-window" class="window"> - <header> - <h1 class="title">$_("Replace a CDROM of VM")</h1> - <div class="close">X</div> - </header> - <div class="content"> - <form id="form-vm-cdrom-edit"> - <section class="form-section"> - <h2>1. $_("Device Name")</h2> - <div class="field"> - <p class="text-help"> - $_("The name used to identify the CDROM. Read-only.") - </p> - <input type="text" class="text" name="dev" disabled="disabled" /> - </div> - </section> - <section class="form-section"> - <h2>2. $_("Device Type")</h2> - <div class="field"> - <p class="text-help"> - $_("The device type. Currently, only \"cdrom\" is supported.") - </p> - <input type="text" class="text" name="type" value="cdrom" disabled="disabled" /> - </div> - </section> - <section class="form-section"> - <h2>3. $_("ISO File Path")</h2> - <div class="field"> - <p class="text-help"> - $_("The ISO file path in the server.") - </p> - <input type="text" class="text" name="path" /> - </div> - </section> - </form> - </div> - <footer> - <div class="btn-group"> - <button id="vm-cdrom-button-edit" class="btn-normal" disabled="disabled"> - <span class="text">$_("Replace")</span> - </button> - </div> - </footer> -</div> -<script type="text/javascript"> - kimchi.guest_cdrom_edit_main(); -</script> -- 1.8.1.4

Applied. Thanks. Regards, Aline Manera

On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input. Could you send a separate patch for that?

On 06/07/2014 01:16 AM, Aline Manera wrote:
On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input.
Could you send a separate patch for that? ACK.

On 06/07/2014 01:16 AM, Aline Manera wrote:
On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input.
Could you send a separate patch for that? Hi Aline, as I was adding this feature, I found it's different from interface that for storage, there is not only CDROMs, but also disks. There are more settings for disks so I suggest retain the pop-up window for attaching devices.

On 06/09/2014 04:25 AM, Hongliang Wang wrote:
On 06/07/2014 01:16 AM, Aline Manera wrote:
On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input.
Could you send a separate patch for that? Hi Aline, as I was adding this feature, I found it's different from interface that for storage, there is not only CDROMs, but also disks. There are more settings for disks so I suggest retain the pop-up window for attaching devices.
Good point! And if we do the following: 1) user select + and we add a new line and set the default values for cdrom Type Path cdrom <an empty input box> 2) if user changes type to "disk", we replace the input box for 2 combo boxes, one for storage pool and other for storage volume Type Path disk |storage pool| |storage volume| When user selects "Save" we will know the path based on storage pool and volume, and turns to the first UI Type Path cdrom /var/lib/libvirt/myiso.iso disk /var/lib/libvirt/mypool/mypool-vol.img What do you think?

On 06/09/2014 11:59 PM, Aline Manera wrote:
On 06/09/2014 04:25 AM, Hongliang Wang wrote:
On 06/07/2014 01:16 AM, Aline Manera wrote:
On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input.
Could you send a separate patch for that? Hi Aline, as I was adding this feature, I found it's different from interface that for storage, there is not only CDROMs, but also disks. There are more settings for disks so I suggest retain the pop-up window for attaching devices.
Good point!
And if we do the following:
1) user select + and we add a new line and set the default values for cdrom
Type Path cdrom <an empty input box>
2) if user changes type to "disk", we replace the input box for 2 combo boxes, one for storage pool and other for storage volume
Type Path disk |storage pool| |storage volume|
When user selects "Save" we will know the path based on storage pool and volume, and turns to the first UI
Type Path cdrom /var/lib/libvirt/myiso.iso disk /var/lib/libvirt/mypool/mypool-vol.img
What do you think? That's good! I made a mock-up UI and it looks fine (though I forgot to capture a screen shot :-( ). There are 5 fields as follow:
Device Name | Device Type | Device Bus | Path + vda Disk IDE /kvmfiles/images/381d4f75-8ee2-43d3-b509-20e80e715544-0.img hda CDROM IDE /kvmfiles/images/Fedora-18-x86_64-Live-Desktop.iso The only problem left here is the style issue. We were applying relatively "big" fonts and icons, though we are switching to relatively small icons and controls. A re-design needs to make Kimchi UI consistent. Big style for drop-down list used in most parts of Kimchi Small style for drop-down list used here

On 06/11/2014 06:42 AM, Hongliang Wang wrote:
On 06/09/2014 11:59 PM, Aline Manera wrote:
On 06/09/2014 04:25 AM, Hongliang Wang wrote:
On 06/06/2014 03:49 AM, Hongliang Wang wrote:
Make guest cdrom edit UI consistent with guest interface edit UI. The key point is to edit cdrom properties in place. Because there is only one property can be updated for a cdrom, it works fine this way. Though another inconsistence comes up that in the same storage tab, there is also lines for disks, which have more editable properties and it's not that easy to make all of these properties stay in one line. So for disks, possibly we still need provide another window to let users update properties. So here are 2 choices: C1) Apply this PATCH v2 to keep cdrom consistent with interface C2) Apply PATCH v1 to keep cdrom consistent with disk
Both are OK for me.
v1 -> v2: 2a) Made updating cdrom properties in place (Aline's comment)
Hongliang Wang (2): Adjust Guest Edit Storage Tab Styles Remove Unused Files
ui/css/theme-default/guest-cdrom-edit.css | 57 ------------ ui/css/theme-default/guest-edit.css | 99 +++++++------------- ui/images/theme-default/guest-icon-sprite.png | Bin 6748 -> 0 bytes ui/js/src/kimchi.guest_cdrom_edit_main.js | 85 ------------------ ui/js/src/kimchi.guest_edit_main.js | 125 +++++++++++++++++++++----- ui/pages/guest-cdrom-edit.html.tmpl | 70 --------------- ui/pages/guest-edit.html.tmpl | 57 +++++++----- 7 files changed, 166 insertions(+), 327 deletions(-) delete mode 100644 ui/css/theme-default/guest-cdrom-edit.css delete mode 100644 ui/images/theme-default/guest-icon-sprite.png delete mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js delete mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
We also need to keep consistence in the "+" button. In the network tab, it adds a new line to the list and user change the values accordingly. And in the storage tab, a new dialog is displayed to collect user input.
Could you send a separate patch for that? Hi Aline, as I was adding this feature, I found it's different from interface that for storage, there is not only CDROMs, but also disks. There are more settings for disks so I suggest retain the
On 06/07/2014 01:16 AM, Aline Manera wrote: pop-up window for attaching devices.
Good point!
And if we do the following:
1) user select + and we add a new line and set the default values for cdrom
Type Path cdrom <an empty input box>
2) if user changes type to "disk", we replace the input box for 2 combo boxes, one for storage pool and other for storage volume
Type Path disk |storage pool| |storage volume|
When user selects "Save" we will know the path based on storage pool and volume, and turns to the first UI
Type Path cdrom /var/lib/libvirt/myiso.iso disk /var/lib/libvirt/mypool/mypool-vol.img
What do you think? That's good! I made a mock-up UI and it looks fine (though I forgot to capture a screen shot :-( ). There are 5 fields as follow:
Device Name | Device Type | Device Bus | Path + vda Disk IDE /kvmfiles/images/381d4f75-8ee2-43d3-b509-20e80e715544-0.img hda CDROM IDE /kvmfiles/images/Fedora-18-x86_64-Live-Desktop.iso
The only problem left here is the style issue. We were applying relatively "big" fonts and icons, though we are switching to relatively small icons and controls. A re-design needs to make Kimchi UI consistent.
Big style for drop-down list used in most parts of Kimchi
Small style for drop-down list used here
How it looks if we use the big style there?

Applied. Thanks. Regards, Aline Manera
participants (2)
-
Aline Manera
-
Hongliang Wang