[Kimchi-devel] [PATCH 5/8] UI: Exchange storage dialog with new kimchi UI

Wen Wang wenwang at linux.vnet.ibm.com
Mon Mar 2 08:50:42 UTC 2015


Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.storagepool_add_main.js  |  7 +++----
 ui/pages/storagepool-add-volume.html.tmpl | 10 +++++-----
 ui/pages/storagepool-add.html.tmpl        | 22 +++++++++++-----------
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
index 5ef84af..7615e36 100644
--- a/ui/js/src/kimchi.storagepool_add_main.js
+++ b/ui/js/src/kimchi.storagepool_add_main.js
@@ -21,16 +21,15 @@ kimchi.storagepool_add_main = function() {
     $('#form-pool-add').on('submit', kimchi.addPool);
     $('#pool-doAdd').on('click', kimchi.addPool);
     // 'pool-doAdd' button starts as disabled.
-    $("#pool-doAdd").button();
-    $("#pool-doAdd").button("disable");
+    $("#pool-doAdd").attr("disabled", true);
     // Make any change in the form fields enables the
     // 'pool-doAdd' button if all the visible form
     // fields are filled, disables it otherwise.
     $('#form-pool-add').on('input change propertychange', function() {
         if (!kimchi.inputsNotBlank())
-            $("#pool-doAdd").button("disable");
+            $("#pool-doAdd").attr("disabled", true);
         else
-           $("#pool-doAdd").button("enable");
+           $("#pool-doAdd").attr("disabled", false);
     });
 };
 
diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl
index b5f365f..e7ea1e8 100644
--- a/ui/pages/storagepool-add-volume.html.tmpl
+++ b/ui/pages/storagepool-add-volume.html.tmpl
@@ -24,8 +24,7 @@
 <div id="sp-add-volume-window" class="window">
     <form id="form-sp-add-volume">
         <header class="window-header">
-            <h1 class="title">$_("Add a Volume to Storage Pool")</h1>
-            <div class="close">X</div>
+            <h1 class="title h1 grey">$_("Add a Volume to Storage Pool")</h1>
         </header>
         <section>
             <div class="content">
@@ -37,12 +36,12 @@
                         </label>
                     </h2>
                     <div class="field">
-                        <p class="text-help">
-                            $_("Enter the remote URL here.")
-                        </p>
                         <div class="textbox-wrapper">
                             <input type="text" id="volume-remote-url" class="text volume-input download" name="volumeRemoteURL" />
                         </div>
+                        <p class="text-help">
+                            $_("Enter the remote URL here.")
+                        </p>
                     </div>
                 </div>
                 <div class="form-section">
@@ -68,6 +67,7 @@
                 <button type="submit" id="sp-add-volume-button" class="btn-normal" disabled="disabled">
                     <span class="text">$_("Add")</span>
                 </button>
+                <button type="button" class="btn-normal close"><span class="text">$_("Cancel")</span></button>
             </div>
         </footer>
     </form>
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 081805b..0b07f07 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -25,18 +25,17 @@
 <body>
     <div class="window storage-window storage-admin">
         <header>
-            <h1 class="title">$_("Define a New Storage Pool")</h1>
-            <div class="close">X</div>
+            <h1 class="title h1 grey">$_("Define a New Storage Pool")</h1>
         </header>
         <div class="content">
             <form id="form-pool-add">
                 <section class="form-section">
                     <h2>1. $_("Storage Pool Name")</h2>
                     <div class="field">
+                        <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name">
                         <p class="text-help">
                             $_("The name used to identify the storage pools, and it should not be empty.")
                         </p>
-                        <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name">
                     </div>
                 </section>
                 <section class="form-section">
@@ -56,11 +55,11 @@
                     <section class="form-section">
                         <h2>3. $_("Storage Path")</h2>
                         <div class="field">
+                            <input id="pathId" type="text" class="text storage-base-input-width">
                             <p class="text-help">
                                 $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p>
                             <p class="text-help">
                                 $_("Kimchi will try to create the directory when it does not already exist in your system.")</p>
-                            <input id="pathId" type="text" class="text storage-base-input-width">
                         </div>
                         <div class="clear"></div>
                     </section>
@@ -69,8 +68,6 @@
                     <section class="form-section">
                         <h2>3. $_("NFS Server IP")</h2>
                         <div class="field storage-field">
-                            <p class="text-help">
-                                $_("NFS server IP or hostname. It can be input or chosen from history.")</p>
                             <div id="serverComboboxId" class="storage-add-input-width">
                                 <input id="nfsserverId"/>
                                 <div>
@@ -78,12 +75,13 @@
                                     </ul>
                                 </div>
                             </div>
+                            <p class="text-help">
+                                $_("NFS server IP or hostname. It can be input or chosen from history.")</p>
                         </div>
                     </section>
                     <section class="form-section">
                         <h2>4. $_("NFS Path")</h2>
                         <div class="field storage-field">
-                            <p class="text-help">$_("The NFS exported path on NFS server.")</p>
                             <div id="targetFilterSelectId" class="storage-add-input-width">
                                 <input id="nfspathId" class="input" disabled/>
                                 <div>
@@ -91,6 +89,7 @@
                                     </ul>
                                 </div>
                             </div>
+                            <p class="text-help">$_("The NFS exported path on NFS server.")</p>
                         </div>
                     </section>
                 </div>
@@ -109,23 +108,23 @@
                     <section class="form-section">
                         <h2>3. $_("iSCSI Server")</h2>
                         <div class="field">
-                            <p class="text-help">
-                                $_("iSCSI server IP or hostname. It should not be empty.")</p>
                             <span class="filter-select popable" id="iSCSIServer">
                                 <input id="iscsiserverId" type="text" placeholder="$_("Server")">
                                 <div class="popover"><ul class="option select-list"></ul></div>
                             </span>
                             <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4">
+                            <p class="text-help">
+                                $_("iSCSI server IP or hostname. It should not be empty.")</p>
                         </div>
                     </section>
                     <section class="form-section">
                         <h2>4. $_("Target")</h2>
                         <div class="field">
-                            <p class="text-help">$_("The iSCSI target on iSCSI server")</p>
                             <span class="filter-select popable" id="iSCSITarget">
                                 <input id="iscsiTargetId" type="text">
                                 <div class="popover"><ul class="option select-list"></ul></div>
                             </span>
+                            <p class="text-help">$_("The iSCSI target on iSCSI server")</p>
                         </div>
                     </section>
                     <section class="form-section">
@@ -158,10 +157,11 @@
         </div>
         <footer>
             <div class="btn-group">
-                <button id="pool-doAdd" class="btn-normal ui-button-primary">
+                <button id="pool-doAdd" class="btn-normal">
                     <span class="text">$_("Create")</span>
                 </button>
                 <button class="btn-normal" id="pool-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
+                <button class="btn-normal close" type="button"><span class="text">$_("Cancel")</span></button>
             </div>
         </footer>
     </div>
-- 
2.1.0




More information about the Kimchi-devel mailing list