[Kimchi-devel] [PATCH 4/6] UI: Guest tab dialog refine

4 Mar 2015

Signed-off-by: Wen Wang <wenwang@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

    