[Kimchi-devel] [PATCH v2 1/2] Adjust Guest Edit Storage Tab Styles
Hongliang Wang
hlwang at linux.vnet.ibm.com
Fri Jun 6 06:49:41 UTC 2014
Keep consistent with interface setup tab.
Signed-off-by: Hongliang Wang <hlwang at 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
More information about the Kimchi-devel
mailing list