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