[Kimchi-devel] [PATCH 1/2] UI Add text help icon to dialog of first 4 tabs

Wen Wang wenwang at linux.vnet.ibm.com
Thu Feb 12 09:39:15 UTC 2015


Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/base.css             |  4 ++++
 ui/css/theme-default/button.css           |  5 ++++
 ui/css/theme-default/repository-edit.css  |  2 --
 ui/pages/guest-add.html.tmpl              |  9 +++++---
 ui/pages/report-add.html.tmpl             |  1 +
 ui/pages/report-rename.html.tmpl          |  1 +
 ui/pages/repository-add.html.tmpl         | 15 ++++++++----
 ui/pages/storagepool-add-volume.html.tmpl |  8 ++++---
 ui/pages/storagepool-add.html.tmpl        | 38 +++++++++++++++++++------------
 9 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/ui/css/theme-default/base.css b/ui/css/theme-default/base.css
index bbcefbb..1104f55 100644
--- a/ui/css/theme-default/base.css
+++ b/ui/css/theme-default/base.css
@@ -66,3 +66,7 @@ html, body {
 .light {
     font-weight: lighter;
 }
+
+.help-inline {
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css
index b0589f3..3bd49c0 100644
--- a/ui/css/theme-default/button.css
+++ b/ui/css/theme-default/button.css
@@ -440,6 +440,11 @@
     cursor: pointer;
 }
 
+.btn-normal span {
+    font-family: 'Helvetica Neue', Helvetica, Arial;
+    font-weight: lighter;
+}
+
 .btn-normal:not([disabled]):hover {
     background: #EEEEEE;
 }
diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css
index 31fbe30..b754794 100644
--- a/ui/css/theme-default/repository-edit.css
+++ b/ui/css/theme-default/repository-edit.css
@@ -38,8 +38,6 @@
     line-height: 30px;
     font-size: 14px;
     vertical-align: top;
-    font-weight: lighter;
-    font-family: 'Helvetica Neue', Helvetica, Arial;
 }
 
 .repository-edit-wrapper-label {
diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl
index c24d850..8a0c60a 100644
--- a/ui/pages/guest-add.html.tmpl
+++ b/ui/pages/guest-add.html.tmpl
@@ -33,8 +33,9 @@
         <section class="form-section">
             <h2>1. $_("Virtual Machine Name")</h2>
             <div class="field">
-                <input type="text" class="text" style="width: 300px" name="name">
-                <p class="text-help">
+                <input type="text" class="text" style="width: 300px" name="name"><br>
+                <div class="icon-info-circled light-grey c1 help-inline"></div>
+                <p class="text-help help-inline">
                     $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.")
                 </p>
             </div>
@@ -44,12 +45,14 @@
             <div class="field">
                 <div class="text-help">
                     <div id="prompt-create-template" class="hidden">
-                        <div class="text-help">$_("Please create a template first.")</div>
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <div class="text-help help-inline">$_("Please create a template first.")</div>
                         <a id="btn-create-template" class="btn-normal" href="templates.html">
                             <span class="text">$_("Create a Template")</span>
                         </a>
                     </div>
                     <div id="prompt-choose-template" class="hidden">
+                        <span class="icon-info-circled light-grey c1"></span>
                         <span class="text-help">$_("Please choose a template.")</span>
                     </div>
                 </div>
diff --git a/ui/pages/report-add.html.tmpl b/ui/pages/report-add.html.tmpl
index aad11df..6dc31ca 100644
--- a/ui/pages/report-add.html.tmpl
+++ b/ui/pages/report-add.html.tmpl
@@ -34,6 +34,7 @@
                 </h2>
                 <div class="field">
                     <input type="text" class="text" id="report-name-textbox" name="name" />
+                    <span class="icon-info-circled light-grey c1"></span>
                     <span class="info-add-debug-report">
                         $_("The name used to identify the report. If omitted, a name will be chosen based on current time. Name can contain: letters, digits, underscore (\"_\") and hyphen (\"-\").")
                     </span>
diff --git a/ui/pages/report-rename.html.tmpl b/ui/pages/report-rename.html.tmpl
index 03d1f49..d70c279 100644
--- a/ui/pages/report-rename.html.tmpl
+++ b/ui/pages/report-rename.html.tmpl
@@ -34,6 +34,7 @@
                 </h2>
                 <div class="field">
                     <input type="text" class="text" id="report-name-textbox" name="name" />
+                    <span class="icon-info-circled light-grey c1"></span>
                     <span class="info-debug-report-rename">
                         $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").")
                     </span>
diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl
index ca2bcb1..5dae725 100644
--- a/ui/pages/repository-add.html.tmpl
+++ b/ui/pages/repository-add.html.tmpl
@@ -34,7 +34,8 @@
                         <div class="textbox-wrapper">
                             <input type="text" class="text" name="repo_id" />
                         </div>
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("Single word, unique identifier for the repository.")
                         </p>
                     </div>
@@ -45,7 +46,8 @@
                         <div class="textbox-wrapper">
                             <input type="text" class="text" name="config[repo_name]" />
                         </div>
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("Textual name for the repository.")
                         </p>
                     </div>
@@ -56,7 +58,8 @@
                         <div class="textbox-wrapper">
                             <input type="text" class="text required" name="baseurl" />
                         </div>
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("URL to the repository. Supported protocols are http, ftp, and file.")
                         </p>
                     </div>
@@ -73,7 +76,8 @@
                         <div class="textbox-wrapper">
                             <input type="text" class="text" name="config[dist]" />
                         </div>
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("Distribution of the DEB repository.")
                         </p>
                     </div>
@@ -84,7 +88,8 @@
                         <div class="textbox-wrapper">
                             <input type="text" class="text" name="config[comps]" />
                         </div>
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("List of components in DEB repository.")
                         </p>
                     </div>
diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl
index e7ea1e8..c8c2492 100644
--- a/ui/pages/storagepool-add-volume.html.tmpl
+++ b/ui/pages/storagepool-add-volume.html.tmpl
@@ -38,8 +38,9 @@
                     <div class="field">
                         <div class="textbox-wrapper">
                             <input type="text" id="volume-remote-url" class="text volume-input download" name="volumeRemoteURL" />
-                        </div>
-                        <p class="text-help">
+                        </div><br>
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("Enter the remote URL here.")
                         </p>
                     </div>
@@ -52,7 +53,8 @@
                         </label>
                     </h2>
                     <div class="field">
-                        <p class="text-help">
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("Choose the file you want to upload.")
                         </p>
                         <div class="textbox-wrapper">
diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
index 0b07f07..d1bdc84 100644
--- a/ui/pages/storagepool-add.html.tmpl
+++ b/ui/pages/storagepool-add.html.tmpl
@@ -32,8 +32,9 @@
                 <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">
+                        <input id="poolId" required="required" type="text" class="text storage-base-input-width" name="name"><br>
+                        <div class="icon-info-circled light-grey c1 help-inline"></div>
+                        <p class="text-help help-inline">
                             $_("The name used to identify the storage pools, and it should not be empty.")
                         </p>
                     </div>
@@ -55,10 +56,12 @@
                     <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">
+                            <input id="pathId" type="text" class="text storage-base-input-width"><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">
+                                $_("The path of the Storage Pool. Each Storage Pool must have a unique path.")</p><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">
                                 $_("Kimchi will try to create the directory when it does not already exist in your system.")</p>
                         </div>
                         <div class="clear"></div>
@@ -74,8 +77,9 @@
                                     <ul id="nfs-server-used">
                                     </ul>
                                 </div>
-                            </div>
-                            <p class="text-help">
+                            </div><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">
                                 $_("NFS server IP or hostname. It can be input or chosen from history.")</p>
                         </div>
                     </section>
@@ -88,8 +92,9 @@
                                     <ul id="nfs-server-target">
                                     </ul>
                                 </div>
-                            </div>
-                            <p class="text-help">$_("The NFS exported path on NFS server.")</p>
+                            </div><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">$_("The NFS exported path on NFS server.")</p>
                         </div>
                     </section>
                 </div>
@@ -97,7 +102,8 @@
                     <section class="form-section storageType">
                         <h2>3. $_("Device path")</h2>
                         <div class="host-partition">
-                            <p class="text-help">
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">
                                 $_("Looking for available partitions ...")
                                 <img src = "../images/theme-default/loading.gif" />
                             </p>
@@ -112,8 +118,9 @@
                                 <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">
+                            <input id="iscsiportId" placeholder="$_("Port")" type="text" class="text storage-port-width" maxlength="4"><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">
                                 $_("iSCSI server IP or hostname. It should not be empty.")</p>
                         </div>
                     </section>
@@ -123,8 +130,9 @@
                             <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>
+                            </span><br>
+                            <div class="icon-info-circled light-grey c1 help-inline"></div>
+                            <p class="text-help help-inline">$_("The iSCSI target on iSCSI server")</p>
                         </div>
                     </section>
                     <section class="form-section">
-- 
2.1.0




More information about the Kimchi-devel mailing list