[PATCH] Adjust Guest Edit Storage Tab Styles

Keep consistent with interface setup tab. Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- 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"> -- 1.8.1.4

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@linux.vnet.ibm.com> --- 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/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.
On 05/05/2014 11:35 PM, Hongliang Wang wrote:
Keep consistent with interface setup tab.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- 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@linux.vnet.ibm.com> --- 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 06/05/2014 08:45 PM, Aline Manera wrote:
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. Oh sorry, have some delay on this. I'll send it today.
On 05/05/2014 11:35 PM, Hongliang Wang wrote:
Keep consistent with interface setup tab.
Signed-off-by: Hongliang Wang <hlwang@linux.vnet.ibm.com> --- 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">
participants (2)
-
Aline Manera
-
Hongliang Wang