[Kimchi-devel] [PATCH 4/6] UI: Guest tab dialog refine
Wen Wang
wenwang at linux.vnet.ibm.com
Wed Mar 4 10:07:42 UTC 2015
Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
ui/css/theme-default/guest-edit.css | 38 +++++++++++++++++++++++++++++++-----
ui/js/src/kimchi.guest_edit_main.js | 15 +++-----------
ui/pages/guest-edit.html.tmpl | 15 +++++++++++---
ui/pages/guest-storage-add.html.tmpl | 30 ++++++++++++++++------------
ui/pages/i18n.json.tmpl | 2 ++
5 files changed, 68 insertions(+), 32 deletions(-)
diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css
index 2efeed1..3641a28 100644
--- a/ui/css/theme-default/guest-edit.css
+++ b/ui/css/theme-default/guest-edit.css
@@ -15,10 +15,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+.guest-inline {
+ display: inline-block;
+}
+
#guest-edit-window {
font-size: 13px;
height: 420px;
- width: 820px;
+ width: 840px;
}
#guest-edit-window #action-button-container {
@@ -142,6 +147,10 @@
margin-left: 2px;
}
+#form-guest-edit-snapshot .ui-button-text-only .ui-button-text {
+ padding: 0;
+}
+
.guest-edit-snapshot .name {
width: 400px;
}
@@ -150,6 +159,13 @@
width: 270px;
}
+#form-guest-edit-snapshot .add {
+ background: #FFFFFF;
+ border: none;
+ color: #008abf;
+ width: 95px;
+}
+
#form-guest-edit-storage .cell.dev {
width: 60px;
}
@@ -169,16 +185,19 @@
padding: 0px;
}
+.guest-attach-action {
+ width: 150px;
+ cursor: pointer;
+ color: #008abf;
+ padding-bottom: 10px;
+}
+
#form-guest-edit-storage .action-area,
.guest-edit-snapshot .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-snapshot button,
.guest-edit-interface button {
@@ -422,3 +441,12 @@
width: 25%;
max-width: 25%;
}
+
+.hidden {
+ display: none;
+}
+
+.button-disabled {
+ cursor: default;
+ color: #999999;
+}
\ No newline at end of file
diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
index 9c088aa..3d989be 100644
--- a/ui/js/src/kimchi.guest_edit_main.js
+++ b/ui/js/src/kimchi.guest_edit_main.js
@@ -158,10 +158,7 @@ kimchi.guest_edit_main = function() {
};
var setupInterface = function() {
- $(".add", "#form-guest-edit-interface").button({
- icons: { primary: "ui-icon-plusthick" },
- text: false
- }).click(function(evt){
+ $(".add", "#form-guest-edit-interface").click(function(evt){
evt.preventDefault();
addItem({
mac: "",
@@ -614,8 +611,7 @@ kimchi.guest_edit_main = function() {
};
listGeneratingSnapshots();
$(".add", "#form-guest-edit-snapshot").button({
- icons: { primary: "ui-icon-plusthick" },
- text: false
+ label: i18n["KCHGST6001M"]
}).click(function(evt){
evt.preventDefault();
kimchi.createSnapshot(kimchi.selectedGuest, function(task){
@@ -631,12 +627,7 @@ kimchi.guest_edit_main = function() {
$('#form-guest-edit-general').fillWithObject(guest);
kimchi.thisVMState = guest['state'];
refreshCDROMs();
- $('#guest-edit-attach-cdrom-button').button({
- icons: {
- primary: "ui-icon-plusthick"
- },
- text: false
- }).click(function(event) {
+ $('#guest-edit-attach-cdrom-button').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 f33d889..89c59d2 100644
--- a/ui/pages/guest-edit.html.tmpl
+++ b/ui/pages/guest-edit.html.tmpl
@@ -98,18 +98,24 @@
</fieldset>
</form>
<form id="form-guest-edit-storage">
+ <div id="guest-edit-attach-cdrom-button" class="guest-attach-action attach">
+ <div class="icon-plus-circled-1 guest-inline"></div>
+ <span class="guest-inline">$_("Add Storage")</span>
+ </div>
<div class="header">
<span class="cell">$_("Device")</span>
<span class="cell">$_("Path")</span>
- <button type="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="add guest-attach-action">
+ <div class="icon-plus-circled-1 guest-inline"></div>
+ <span class="guest-inline">$_("Add Interface")</span>
+ </div>
<div class="header">
<span class="cell">$_("Network")</span>
<span class="cell">$_("Type")</span>
- <button class="add action-area"></button>
</div>
<div class="body"></div>
</form>
@@ -172,11 +178,14 @@
</div>
</form>
<form id="form-guest-edit-snapshot" class="guest-edit-snapshot">
+ <div class="guest-attach-action">
+ <div class="icon-plus-circled-1 guest-inline"></div>
+ <button class="add guest-inline"></button>
+ </div>
<div class="header">
<span class="cell sel"></span>
<span class="cell name">$_("Name")</span>
<span class="cell created">$_("Created")</span>
- <button class="add action-area"></button>
</div>
<div class="task"></div>
<div class="body"></div>
diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl
index 504316c..928b099 100644
--- a/ui/pages/guest-storage-add.html.tmpl
+++ b/ui/pages/guest-storage-add.html.tmpl
@@ -24,16 +24,12 @@
<div id="guest-storage-add-window" class="window">
<header>
<h1 class="title">$_("Add a Storage Device to VM")</h1>
- <div class="close">X</div>
</header>
<div class="content">
<form id="form-guest-storage-add">
<section class="form-section">
<h2>1. $_("Device Type")</h2>
<div class="field">
- <p class="text-help">
- $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.")
- </p>
<div class="btn dropdown popable">
<input id="guest-storage-type" name="type" value="cdrom" type="hidden" />
<span class="text" id="guest-storage-type-label"></span>
@@ -42,15 +38,16 @@
<ul class="select-list" id="guest-storage-type-list" data-target="guest-storage-type" data-label="guest-storage-type-label"></ul>
</div>
</div>
+ <div class="icon-info-circled light-grey c1 help-inline"></div>
+ <p class="text-help help-inline">
+ $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.")
+ </p>
</div>
</section>
<div class="volume-section hidden">
<section class="form-section">
<h2>2. $_("Storage Pool")</h2>
<div class="field storage-field">
- <p class="text-help">
- $_("Storage pool which volume located in")
- </p>
<div class="btn dropdown popable">
<input value="default" id="guest-disk-pool" name="pool" type="hidden"/>
<span class="text" id="guest-disk-pool-label">default</span><span class="arrow"></span>
@@ -58,14 +55,15 @@
<ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul>
</div>
</div>
+ <div class="icon-info-circled light-grey c1 help-inline"></div>
+ <p class="text-help help-inline">
+ $_("Storage pool which volume located in")
+ </p>
</div>
</section>
<section class="form-section">
<h2>3. $_("Storage Volume")</h2>
<div class="field storage-field">
- <p class="text-help">
- $_("Storage volume to be attached")
- </p>
<div class="btn dropdown popable" id="guest-disk">
<input id="guest-disk-vol" name="vol" type="hidden">
<span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span>
@@ -73,6 +71,10 @@
<ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul>
</div>
</div>
+ <div class="icon-info-circled light-grey c1 help-inline"></div>
+ <p class="text-help help-inline">
+ $_("Storage volume to be attached")
+ </p>
</div>
</section>
</div>
@@ -80,10 +82,11 @@
<section class="form-section">
<h2>2. $_("File Path")</h2>
<div class="field">
- <p class="text-help">
+ <input type="text" class="text" name="path" />
+ <div class="icon-info-circled light-grey c1 help-inline"></div>
+ <p class="text-help help-inline">
$_("The ISO file path in the server for CDROM.")
</p>
- <input type="text" class="text" name="path" />
</div>
</section>
</div>
@@ -95,6 +98,9 @@
<button id="guest-storage-button-add" class="btn-normal" disabled="disabled">
<span class="text">$_("Attach")</span>
</button>
+ <button id="guest-storage-button-add" class="btn-normal close">
+ <span class="text">$_("Cancel")</span>
+ </button>
</div>
</footer>
</div>
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index a4a6dd5..bdf4a0f 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -139,6 +139,8 @@
"KCHVMCD6008M": "$_("Successfully detached!")",
"KCHVMCD6009M": "$_("This disk will be detached permanently and you can re-attach it. Continue to detach it?")",
+ "KCHGST6001M": "$_("Add Snapshot")",
+
"KCHVMED6001M": "$_("interface:")",
"KCHVMED6002M": "$_("address:")",
"KCHVMED6003M": "$_("link_type:")",
--
2.1.0
More information about the Kimchi-devel
mailing list