[Kimchi-devel] [WIP] Guest Edit Storage Tab Styling
Hongliang Wang
hlwang at linux.vnet.ibm.com
Mon May 5 10:46:37 UTC 2014
Keep storage tab and interface tab consistent in UI style.
Signed-off-by: Hongliang Wang <hlwang at 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 | 29 ++++++------
3 files changed, 57 insertions(+), 87 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 2ba6b79..6b27c78 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -38,7 +38,7 @@ kimchi.guest_edit_main = function() {
storageType: 'cdrom'
}, function(storages) {
var rowHTML = $('#cdrom-row-tmpl').html();
- var container = $('#guest-edit-cdrom-row-container');
+ var container = $('#form-guest-edit-storage .body');
$(container).empty();
$.each(storages, function(index, storage) {
@@ -54,9 +54,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'],
@@ -173,7 +183,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 552b4c8..71164d4 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="add action-area"></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,8 +138,8 @@
data-vm="{vm}" data-dev="{dev}"
title='$_("Detach")'>
</button>
- </div>
- </div>
+ </span>
+ <div>
</script>
<script id="interface-tmpl" type="text/html">
<div class="item" id="{mac}">
--
1.8.1.4
More information about the Kimchi-devel
mailing list