[PATCH 0/8] UI: Change dialogs of kimchi

UI: Change dialogs of kimchi Wen Wang (8): UI: Change host dialog UI: Exchange guests dialog style to new kimchi UI UI: Guest button fix UI: Exchange template dialog with new kimchi UI UI: Exchange storage dialog with new kimchi UI UI Add text help icon to dialog of first 4 tabs UI: Change dialog of network to new kimchi UI UI: temp fix for the buttons ui/css/theme-default/base.css | 6 +++- ui/css/theme-default/button.css | 57 ++++++++++++++++++++++--------- ui/css/theme-default/form.css | 10 ++++-- ui/css/theme-default/guest-edit.css | 28 +++++++++------ ui/css/theme-default/network.css | 23 +++++-------- ui/css/theme-default/report-add.css | 11 ++++-- ui/css/theme-default/report-rename.css | 14 ++++---- ui/css/theme-default/repository-add.css | 6 ++++ ui/css/theme-default/repository-edit.css | 22 ++++++------ ui/css/theme-default/template_add.css | 4 +++ ui/css/theme-default/window.css | 49 ++++++-------------------- ui/js/src/kimchi.network.js | 49 ++++++++++++++++++++++++-- ui/js/src/kimchi.storagepool_add_main.js | 7 ++-- ui/pages/guest-add.html.tmpl | 17 +++++---- ui/pages/guest-edit.html.tmpl | 6 ++-- ui/pages/login.html.tmpl | 2 +- ui/pages/report-add.html.tmpl | 11 +++--- ui/pages/report-rename.html.tmpl | 11 +++--- ui/pages/repository-add.html.tmpl | 46 ++++++++++++++----------- ui/pages/repository-edit.html.tmpl | 8 +++-- ui/pages/storagepool-add-volume.html.tmpl | 16 +++++---- ui/pages/storagepool-add.html.tmpl | 48 +++++++++++++++----------- ui/pages/tabs/host.html.tmpl | 6 ++-- ui/pages/tabs/network.html.tmpl | 6 ++-- ui/pages/template-add.html.tmpl | 8 +++-- ui/pages/template-edit.html.tmpl | 4 +-- 26 files changed, 285 insertions(+), 190 deletions(-) -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/base.css | 2 +- ui/css/theme-default/button.css | 25 ++++++---------- ui/css/theme-default/form.css | 10 +++++-- ui/css/theme-default/report-add.css | 11 +++++-- ui/css/theme-default/report-rename.css | 14 ++++----- ui/css/theme-default/repository-add.css | 6 ++++ ui/css/theme-default/repository-edit.css | 24 ++++++++-------- ui/css/theme-default/window.css | 49 +++++++------------------------- ui/pages/report-add.html.tmpl | 10 ++++--- ui/pages/report-rename.html.tmpl | 10 ++++--- ui/pages/repository-add.html.tmpl | 41 +++++++++++++------------- ui/pages/repository-edit.html.tmpl | 8 ++++-- 12 files changed, 98 insertions(+), 112 deletions(-) diff --git a/ui/css/theme-default/base.css b/ui/css/theme-default/base.css index 937353b..bbcefbb 100644 --- a/ui/css/theme-default/base.css +++ b/ui/css/theme-default/base.css @@ -22,7 +22,7 @@ html, body { /* header text size */ .h1 { - font-size: 18px; + font-size: 22px; } /* base content text size */ diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css index 0df53a6..b0589f3 100644 --- a/ui/css/theme-default/button.css +++ b/ui/css/theme-default/button.css @@ -432,38 +432,29 @@ height: 38px; margin: 9px 3px; vertical-align: top; - background: #06F; + background: #FFFFFF; line-height: 38px; padding: 0 20px; - color: #EEE; - border-radius: 8px; + color: #444444; font-size: 13px; + cursor: pointer; } .btn-normal:not([disabled]):hover { - background: #04D; + background: #EEEEEE; } .btn-normal:not([disabled]):active { - box-shadow: -1px -1px 1px #eee, 1px 1px 1px #ccc, 2px 2px 2px #ccc inset, - -2px -2px 2px #aaa inset; - background: -moz-linear-gradient(top, #04d 0%, #06f 100%); - background: -webkit-gradient(linear, left top, left bottom, - color-stop(0%, #04d), color-stop(100%, #06f)); - background: -webkit-linear-gradient(top, #04d 0%, #ff3019 100%); - background: -o-linear-gradient(top, #04d 0%, #06f 100%); - background: -ms-linear-gradient(top, #04d 0%, #06f 100%); - background: linear-gradient(to bottom, #04d 0%, #06f 100%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04d', - endColorstr='#06f', GradientType=0); + background: #999999; } .btn-normal[disabled] { - background-color: silver; + color: #CCCCCC; + cursor: default; } .btn-group { - float: right; + float: left; padding: 0 10px; } diff --git a/ui/css/theme-default/form.css b/ui/css/theme-default/form.css index 523d42d..86871d2 100644 --- a/ui/css/theme-default/form.css +++ b/ui/css/theme-default/form.css @@ -21,7 +21,9 @@ .form-section>h2 { font-size: 14px; - padding: 5px; + margin-left: 20px; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; } .form-section .field { @@ -31,8 +33,10 @@ .form-section .field .text-help { font-size: 12px; - color: #333; - margin: 0 0 5px 5px; + margin: 0 0 5px 0; + font-weight: lighter; + color: #999999; + font-family: 'Helvetica Neue', Helvetica, Arial; } .form-section .field input.text { diff --git a/ui/css/theme-default/report-add.css b/ui/css/theme-default/report-add.css index 9f501da..b1c8ed3 100644 --- a/ui/css/theme-default/report-add.css +++ b/ui/css/theme-default/report-add.css @@ -25,8 +25,13 @@ } #report-name-textbox { - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: .5em 0; + margin: 0; width: 100%; } + +.info-add-debug-report { + font-size: 12px; + color: #999999; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; +} \ No newline at end of file diff --git a/ui/css/theme-default/report-rename.css b/ui/css/theme-default/report-rename.css index 1722005..1bf73d9 100644 --- a/ui/css/theme-default/report-rename.css +++ b/ui/css/theme-default/report-rename.css @@ -27,13 +27,13 @@ #report-name-textbox { -moz-box-sizing: border-box; box-sizing: border-box; - margin: .5em 0; + margin: 0; width: 100%; } -#button-report-rename[disabled] { - background: #c0c0c0 url(../../images/theme-default/loading.gif) 7px - center no-repeat; - color: #DDD; - prenameing-left: 26px; -} +.info-debug-report-rename { + font-size: 12px; + color: #999999; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; +} \ No newline at end of file diff --git a/ui/css/theme-default/repository-add.css b/ui/css/theme-default/repository-add.css index 8e36db8..36fbd3e 100644 --- a/ui/css/theme-default/repository-add.css +++ b/ui/css/theme-default/repository-add.css @@ -34,3 +34,9 @@ #repository-add-window .textbox-wrapper label { vertical-align: middle; } + +#isMirrorLabel { + font-size: 14px; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; +} \ No newline at end of file diff --git a/ui/css/theme-default/repository-edit.css b/ui/css/theme-default/repository-edit.css index d3a4bdd..31fbe30 100644 --- a/ui/css/theme-default/repository-edit.css +++ b/ui/css/theme-default/repository-edit.css @@ -28,19 +28,22 @@ .repository-edit-fieldset { float: left; - padding: 1em; + padding: 0 30px; width: 95%; } .repository-edit-wrapper-label, .repository-edit-wrapper-controls { display: inline-block; - height: 38px; - line-height: 38px; - margin-top: 5px; + height: 30px; + line-height: 30px; + font-size: 14px; vertical-align: top; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; } .repository-edit-wrapper-label { + margin-top: 10px; width: 150px; } @@ -54,16 +57,13 @@ .repository-edit-wrapper-controls input[type="text"] { font-size: 16px; - height: 38px; - line-height: 38px; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; + height: 30px; + line-height: 30px; padding: 0 10px; width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #CCCCCC; } diff --git a/ui/css/theme-default/window.css b/ui/css/theme-default/window.css index 0008890..f699ebd 100644 --- a/ui/css/theme-default/window.css +++ b/ui/css/theme-default/window.css @@ -26,7 +26,7 @@ right: 0; top: 0; bottom: 0; - background: url(../images/theme-default/bg-mask.png); + background: rgba(255,255,255,0.5); z-index: 100; overflow: hidden; } @@ -38,12 +38,10 @@ right: 0; top: 0; bottom: 0; - box-shadow: 2px 2px 6px #000; - border: 2px solid #0f71b4; + border: 2px solid #999999; -webkit-border-radius: 8px; -moz-border-radius: 8px; - border-radius: 8px; - background-color: #eee; + background-color: #FFF; box-sizing: border-box; max-width: 100%; max-height: 100%; @@ -57,8 +55,6 @@ top: 0; height: 48px; z-index: 100; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 -1px 0 - rgba(0, 0, 0, 0.05); } .window footer { @@ -68,7 +64,8 @@ bottom: 0; height: 56px; z-index: 100; - box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15); + background: rgb(0,138,191); + } .window .content { @@ -77,42 +74,16 @@ right: 0; top: 0; bottom: 0; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; margin: 48px 0 56px; } -.window .close { - position: absolute; - width: 30px; - height: 30px; - top: 7px; - right: 7px; - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - border-radius: 30px; - border: 2px solid #ccc; - color: #ccc; - font-size: 24px; - text-align: center; - line-height: 30px; - font-weight: bold; - background: #eee; - cursor: pointer; -} - -.window>header>.close:HOVER, -.window>form>header>.close:HOVER { - border: 2px solid #444; - color: #444; -} - .window>header>.title, .window>form>header>.title { - font-size: 18px; height: 48px; line-height: 48px; - color: #06C; - margin: 0 10px; - font-weight: bold; - text-shadow: -1px -1px 1px #eaeaea, 1px 1px 1px #fff; + margin: 0 30px; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; } diff --git a/ui/pages/report-add.html.tmpl b/ui/pages/report-add.html.tmpl index e63da44..aad11df 100644 --- a/ui/pages/report-add.html.tmpl +++ b/ui/pages/report-add.html.tmpl @@ -24,8 +24,7 @@ <!DOCTYPE html> <div id="report-add-window" class="window"> <header> - <h1 class="title">$_("Generate a New Debug Report")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Generate a New Debug Report")</h1> </header> <div class="content"> <form id="form-report-add"> @@ -34,10 +33,10 @@ <label for="report-name-textbox">$_("Report Name")</label> </h2> <div class="field"> - <span> + <input type="text" class="text" id="report-name-textbox" name="name" /> + <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> - <input type="text" class="text" id="report-name-textbox" name="name" /> </div> </section> </form> @@ -45,6 +44,9 @@ <footer> <div class="btn-group"> <button id="button-report-add" class="btn-normal"><span class="text">$_("Generate")</span></button> + <button id="button-report-cancel" class="btn-normal close" type="button"> + <span calss="text">$_("Cancel")</span> + </button> </div> </footer> </div> diff --git a/ui/pages/report-rename.html.tmpl b/ui/pages/report-rename.html.tmpl index 5bc91d3..03d1f49 100644 --- a/ui/pages/report-rename.html.tmpl +++ b/ui/pages/report-rename.html.tmpl @@ -24,8 +24,7 @@ <!DOCTYPE html> <div id="report-rename-window" class="window"> <header> - <h1 class="title">$_("Rename a Debug Report")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Rename a Debug Report")</h1> </header> <div class="content"> <form id="form-report-rename"> @@ -34,10 +33,10 @@ <label for="report-name-textbox">$_("Report Name")</label> </h2> <div class="field"> - <span> + <input type="text" class="text" id="report-name-textbox" name="name" /> + <span class="info-debug-report-rename"> $_("The name used to identify the report. Name can contain: letters, digits and hyphen (\"-\").") </span> - <input type="text" class="text" id="report-name-textbox" name="name" /> </div> </section> </form> @@ -45,6 +44,9 @@ <footer> <div class="btn-group"> <button id="button-report-rename" class="btn-normal"><span class="text">$_("Submit")</span></button> + <button id-"button-report-rename-cancel" class="btn-normal close" type="button"> + <span class="text">$_("Cancel")</span> + </button> </div> </footer> </div> diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl index 6de4f76..ca2bcb1 100644 --- a/ui/pages/repository-add.html.tmpl +++ b/ui/pages/repository-add.html.tmpl @@ -24,78 +24,81 @@ <div id="repository-add-window" class="window"> <form id="form-repository-add"> <header class="window-header"> - <h1 class="title">$_("Add a Repository")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Add a Repository")</h1> </header> <section> <div class="content"> <div class="form-section yum"> <h2>$_("Identifier")</h2> <div class="field"> - <p class="text-help"> - $_("Single word, unique identifier for the repository.") - </p> <div class="textbox-wrapper"> <input type="text" class="text" name="repo_id" /> </div> + <p class="text-help"> + $_("Single word, unique identifier for the repository.") + </p> </div> </div> <section class="form-section yum"> <h2>$_("Name")</h2> <div class="field"> - <p class="text-help"> - $_("Textual name for the repository.") - </p> <div class="textbox-wrapper"> <input type="text" class="text" name="config[repo_name]" /> </div> + <p class="text-help"> + $_("Textual name for the repository.") + </p> </div> </section> <section class="form-section"> <h2>$_("URL")<span class="required" role="presentation" title='$_("Required Field")'>*</span></h2> <div class="field"> - <p class="text-help"> - $_("URL to the repository. Supported protocols are http, ftp, and file.") - </p> <div class="textbox-wrapper"> <input type="text" class="text required" name="baseurl" /> </div> + <p class="text-help"> + $_("URL to the repository. Supported protocols are http, ftp, and file.") + </p> </div> <div class="field yum"> <p class="yum"> <input type="checkbox" name="isMirror" value="true" id="isMirror" /> - <label for="isMirror">$_("Repository is a mirror")</label> + <label id="isMirrorLabel" for="isMirror">$_("Repository is a mirror")</label> </p> </div> </section> <section class="form-section repository-dist deb"> <h2>$_("Distribution")</h2> <div class="field"> - <p class="text-help"> - $_("Distribution of the DEB repository.") - </p> <div class="textbox-wrapper"> <input type="text" class="text" name="config[dist]" /> </div> + <p class="text-help"> + $_("Distribution of the DEB repository.") + </p> </div> </section> <section class="form-section repository-comps deb"> <h2>$_("Components")</h2> <div class="field"> - <p class="text-help"> - $_("List of components in DEB repository.") - </p> <div class="textbox-wrapper"> <input type="text" class="text" name="config[comps]" /> </div> + <p class="text-help"> + $_("List of components in DEB repository.") + </p> </div> </section> - </div> </section> + </div> + </section> <footer> <div class="btn-group"> <button type="submit" id="button-repository-add" class="btn-normal" disabled="disabled"> <span class="text">$_("Add")</span> </button> + <button type="button" id="button-repository-close" class="btn-normal close"> + <span class="text">$("Cancel")</span> + </button> </div> </footer> </form> diff --git a/ui/pages/repository-edit.html.tmpl b/ui/pages/repository-edit.html.tmpl index f13cb90..846ff30 100644 --- a/ui/pages/repository-edit.html.tmpl +++ b/ui/pages/repository-edit.html.tmpl @@ -25,8 +25,7 @@ <div id="repository-edit-window" class="window"> <form id="form-repository-edit"> <header> - <h1 class="title">$_("Edit Repository")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Edit Repository")</h1> </header> <div class="content"> <section id="form-repository-edit"> @@ -103,9 +102,12 @@ </div> <footer> <div class="btn-group"> - <button type="submit id="repository-edit-button-save" class="btn-normal"> + <button type="submit" id="repository-edit-button-save" class="btn-normal"> <span class="text">$_("Save")</span> </button> + <button type="button" id="repository-edit-button-cancel" class="close btn-normal"> + <span class="text">$_("Cancel")</span> + </button> </div> </footer> </form> -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/guest-edit.css | 20 +++++++++----------- ui/pages/guest-add.html.tmpl | 12 +++++++----- ui/pages/guest-edit.html.tmpl | 6 ++++-- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css index 6815ecf..d8226dd 100644 --- a/ui/css/theme-default/guest-edit.css +++ b/ui/css/theme-default/guest-edit.css @@ -47,11 +47,13 @@ } .guest-edit-wrapper-label { - height: 38px; - line-height: 38px; - margin-top: 5px; + height: 30px; + line-height: 30px; + margin-top: 10px; vertical-align: top; min-width: 100px; + font-weight: lighter; + font-family: 'Helvetica Neue', Helvetica, Arial; } #form-guest-edit-storage .guest-edit-wrapper-label { @@ -60,6 +62,7 @@ .guest-edit-wrapper-controls { width: 470px; + margin-top: 5px;ß } #form-guest-edit-storage .guest-edit-wrapper-controls { @@ -68,21 +71,16 @@ .guest-edit-wrapper-controls input[type="text"] { font-size: 16px; - height: 38px; - background: #fff; - -webkit-border-radius: 5px; - border-radius: 5px; - box-shadow: 2px 2px 2px #eee inset; - border-top: 1px solid #bbb; - border-left: 1px solid #bbb; - padding-left: 10px; + height: 30px; width: 450px; + border: 1px solid #CCCCCC; } .guest-edit-wrapper-controls input[type="text"][disabled] { color: #bbb; background-color: #fafafa; cursor: not-allowed; + border: 1px solid #CCCCCC; } .guest-edit-cdrom-row-container { diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl index ab26c1e..c24d850 100644 --- a/ui/pages/guest-add.html.tmpl +++ b/ui/pages/guest-add.html.tmpl @@ -26,18 +26,17 @@ <body> <div class="window" style="width: 900px;height: 580px;"> <header> - <h1 class="title">$_("Create a New Virtual Machine")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Create a New Virtual Machine")</h1> </header> <div class="content"> <form id="form-vm-add"> <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"> $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.") </p> - <input type="text" class="text" style="width: 300px" name="name"> </div> </section> <section class="form-section"> @@ -45,13 +44,13 @@ <div class="field"> <div class="text-help"> <div id="prompt-create-template" class="hidden"> - <div>$_("Please create a template first.")</div> + <div class="text-help">$_("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>$_("Please choose a template.")</span> + <span class="text-help">$_("Please choose a template.")</span> </div> </div> <ul id="templateTile" class="tile-check tile-template"> @@ -83,6 +82,9 @@ <div class="btn-group"> <button id="vm-doAdd" class="btn-normal" disabled="disabled" href="javascript:void(0);"><span class="text">$_("Create")</span></button> <button id="vm-doAdding" class="btn-normal" disabled="disabled" style="display:none" href="javascript:void(0);"><span class="text">$_("Creating...")</span></button> + <button id="vm-add=cancel" class="btn-normal close" type="button"> + <span class="text">$_("Cancel")</span> + </button> </div> </footer> </div> diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 9db1e1c..e861973 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -23,8 +23,7 @@ <div id="guest-edit-window" class="window"> <header> - <h1 class="title">$_("Edit Guest")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Edit Guest")</h1> </header> <div class="content"> <div id="guest-edit-tabs"> @@ -189,6 +188,9 @@ <button id="guest-edit-button-save" class="btn-normal"> <span class="text">$_("Save")</span> </button> + <button id="guest-edit-button-save" class="btn-normal close"> + <span class="text">$_("Cancel")</span> + </button> </div> </footer> </div> -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/guest-edit.css | 8 ++++++++ ui/pages/guest-edit.html.tmpl | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/ui/css/theme-default/guest-edit.css b/ui/css/theme-default/guest-edit.css index d8226dd..2efeed1 100644 --- a/ui/css/theme-default/guest-edit.css +++ b/ui/css/theme-default/guest-edit.css @@ -21,6 +21,14 @@ width: 820px; } +#guest-edit-window #action-button-container { + padding-right: 0; +} + +#guest-edit-window #guest-edit-button-cancel { + margin-left: 10px; +} + #guest-edit-tabs { background: transparent; border: none; diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index e861973..f33d889 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -188,10 +188,10 @@ <button id="guest-edit-button-save" class="btn-normal"> <span class="text">$_("Save")</span> </button> - <button id="guest-edit-button-save" class="btn-normal close"> - <span class="text">$_("Cancel")</span> - </button> </div> + <button id="guest-edit-button-cancel" class="btn-normal close"> + <span class="text">$_("Cancel")</span> + </button> </footer> </div> <script id="cdrom-row-tmpl" type="text/html"> -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/template_add.css | 4 ++++ ui/pages/template-add.html.tmpl | 8 ++++++-- ui/pages/template-edit.html.tmpl | 4 ++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/ui/css/theme-default/template_add.css b/ui/css/theme-default/template_add.css index e58bccb..e7a1bff 100644 --- a/ui/css/theme-default/template_add.css +++ b/ui/css/theme-default/template_add.css @@ -37,6 +37,10 @@ overflow: hidden; } +.button-group { + margin-left: 5px; +} + .back { float: left; display : block; width: 50px; diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl index eaafaa7..83b70ea 100644 --- a/ui/pages/template-add.html.tmpl +++ b/ui/pages/template-add.html.tmpl @@ -26,8 +26,7 @@ <body> <div class="window" style="width: 992px;height: 660px;"> <header> - <h1 class="title">$_("Add Template")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Add Template")</h1> </header> <div class="content" style="margin-bottom: 0"> <div class="page-list"> @@ -219,6 +218,11 @@ </div> </div> </div> + <footer> + <div class="button-group"> + <button class="btn-normal close" type="button"><span type="text">$_("Cancel")</span></button> + </div> + </footer> </div> <script> kimchi.template_add_main(); diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl index 7177bf0..53eab25 100644 --- a/ui/pages/template-edit.html.tmpl +++ b/ui/pages/template-edit.html.tmpl @@ -24,8 +24,7 @@ <div id="template-edit-window" class="window"> <header> - <h1 class="title">$_("Edit Template")</h1> - <div class="close">X</div> + <h1 class="title h1 grey">$_("Edit Template")</h1> </header> <div class="content"> <div id="edit-template-tabs"> @@ -130,6 +129,7 @@ <footer> <div class="btn-group"> <a id="tmpl-edit-button-save" class="btn-normal" href="javascript:void(0);"><span class="text">$_("Save")</span></a> + <button class="btn-normal close" type="button"><span class="text">$_("Cancel")</span></button> </div> </footer> </div> -- 2.1.0

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

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

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 23 +++++++------------ ui/js/src/kimchi.network.js | 49 ++++++++++++++++++++++++++++++++++++++-- ui/pages/tabs/network.html.tmpl | 6 ++--- 3 files changed, 58 insertions(+), 20 deletions(-) diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css index e47845a..e5a8e47 100644 --- a/ui/css/theme-default/network.css +++ b/ui/css/theme-default/network.css @@ -132,13 +132,12 @@ } .network-config .section-header { - font-weight: bold; font-size: 14px; + font-weight: lighter; } .network-config .section-content { margin-top: 10px; - margin-left: 20px; } .network-config input[type="text"] { @@ -254,21 +253,15 @@ } .network-config .input-hint-text { - vertical-align: top; -} - -.network-label { - background: none repeat scroll 0 0 #FFFFFF; - border-left: 1px solid #BBBBBB; - border-radius: 5px 5px 5px 5px; - border-top: 1px solid #BBBBBB; - box-shadow: 2px 2px 2px #EEEEEE inset; - color: #333333; - font-size: 13px; - padding: 10px; - width: 100%; + color: #999999; + font-weight: lighter; + font-size: 12px; } .ui-state-default a { color: #212121; } + +#networkConfig { + padding-left: 30px; +} \ No newline at end of file diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js index 2e2310f..81d5dd0 100644 --- a/ui/js/src/kimchi.network.js +++ b/ui/js/src/kimchi.network.js @@ -231,9 +231,17 @@ kimchi.initNetworkDialog = function() { buttonsObj= {}; buttonsObj['id'] = "networkFormOk"; buttonsObj['text'] = i18n.KCHAPI6005M; - buttonsObj['class'] = "ui-button-primary"; + buttonsObj['class'] = "btn-normal"; buttonsObj['disabled'] = true; buttonsObj['click'] = function() { }; + buttonsObjCancel= {}; + buttonsObjCancel['id'] = "networkFormCancel"; + buttonsObjCancel['text'] = i18n.KCHAPI6003M; + buttonsObjCancel['class'] = "btn-normal"; + buttonsObjCancel['disabled'] = false; + buttonsObjCancel['click'] = function() { + $(this).dialog("close"); + }; $("#networkConfig").dialog({ autoOpen : false, modal : true, @@ -244,11 +252,48 @@ kimchi.initNetworkDialog = function() { dialogClass : "network-ui-dialog remove-when-logged-off", open : function(){ $(".ui-dialog-titlebar-close", $("#networkConfig").parent()).removeAttr("title"); + $(".ui-widget-overlay").css({ + "background": "#FFFFFF", + "opacity": "0.5" + }); }, beforeClose : function() { kimchi.cleanNetworkDialog(); }, - buttons : [buttonsObj] + buttons : [buttonsObj, buttonsObjCancel] + }); + $("#networkConfig").parent().css({ + "background": "#FFFFFF", + "border-radius": 0, + "border": "2px solid #999999" + }); + $(".ui-dialog-titlebar button", $("#networkConfig").parent()).remove(); + $(".ui-dialog-titlebar span", $("#networkConfig").parent()).css({ + "font-weight": "lighter", + "height": "48px", + "line-height": "48px", + "margin": "0 30px", + "color": "#444444", + "font-size": "22px" + }); + $(".ui-dialog-titlebar", $("#networkConfig").parent()).css({ + "box-shadow": "none", + "padding": "0", + }); + $(".ui-dialog-buttonpane", $("#networkConfig").parent()).css({ + "background": "#008ABF" + }); + $(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css({ + "padding": "0 10px", + "float": "left" + }); + $(".ui-dialog-buttonpane .ui-dialog-buttonset button").removeClass("ui-corner-all"); + $(".ui-dialog-buttonpane .ui-dialog-buttonset button").css({ + "background": "#FFFFFF", + "color": "#444444", + "font-size": "13px", + "border-radius": "0", + "opacity": "1" }); kimchi.setupNetworkFormEvent(); }; diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl index 8a6c2cf..e2b1639 100644 --- a/ui/pages/tabs/network.html.tmpl +++ b/ui/pages/tabs/network.html.tmpl @@ -47,10 +47,10 @@ <div class="section-container"> <div class="section-header">1. $_("Network Name")</div> <div class="section-content"> - <input type="text" id="networkName" class="network-label"/> + <input type="text" id="networkName" /> <div class="input-hint"> - <span class="ui-icon ui-icon-info input-hint-icon"></span> - <span class="input-hint-text">$_("Name should not contain '/' and '\"'.")</span> + <span class="icon-info-circled light-grey c1 help-inline"></span> + <span class="input-hint-text help-inline">$_("Name should not contain '/' and '\"'.")</span> </div> </div> </div> -- 2.1.0

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com> --- ui/css/theme-default/button.css | 27 +++++++++++++++++++++++++++ ui/pages/login.html.tmpl | 2 +- ui/pages/tabs/host.html.tmpl | 6 +++--- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/ui/css/theme-default/button.css b/ui/css/theme-default/button.css index 3bd49c0..8b77b60 100644 --- a/ui/css/theme-default/button.css +++ b/ui/css/theme-default/button.css @@ -458,6 +458,33 @@ cursor: default; } +.btn-normal-1 { + display: inline-block; + height: 38px; + margin: 9px 3px; + vertical-align: top; + background: #008abf; + line-height: 38px; + padding: 0 20px; + color: #FFFFFF; + font-size: 13px; + cursor: pointer; +} + +.btn-normal-1 span { + font-family: 'Helvetica Neue', Helvetica, Arial; + font-weight: lighter; +} + +.btn-normal-1:not([disabled]):active { + background: #999999; +} + +.btn-normal-1[disabled] { + background: #999999; + cursor: default; +} + .btn-group { float: left; padding: 0 10px; diff --git a/ui/pages/login.html.tmpl b/ui/pages/login.html.tmpl index e2f6855..c94033b 100644 --- a/ui/pages/login.html.tmpl +++ b/ui/pages/login.html.tmpl @@ -89,7 +89,7 @@ <div id="password-msg" class="msg-required"></div> </div> <div class="row"> - <button id="btn-login" class="btn-normal"> + <button id="btn-login" class="btn-normal-1"> <label id="login">$_("Log in")</label> <label id="logging" style="display: none;">$_("Logging in...")</label> </button> diff --git a/ui/pages/tabs/host.html.tmpl b/ui/pages/tabs/host.html.tmpl index d5a9b1d..64b399b 100644 --- a/ui/pages/tabs/host.html.tmpl +++ b/ui/pages/tabs/host.html.tmpl @@ -38,15 +38,15 @@ <div id="host-info-container" class="info-container"> <h2 class="hostname">{hostname}</h2> <div class="action-panel"> - <button id="host-button-shutdown" class="btn-normal stop"> + <button id="host-button-shutdown" class="btn-normal-1 stop"> <div class="button-icon action-icon-stop"></div> $_("Shut down") </button> - <button id="host-button-restart" class="btn-normal restart"> + <button id="host-button-restart" class="btn-normal-1 restart"> <div class="button-icon action-icon-restart"></div> $_("Restart") </button> - <button class="btn-normal connect" disabled="disabled"> + <button class="btn-normal-1 connect" disabled="disabled"> <div class="button-icon action-icon-connect"></div> $_("Connect") </button> -- 2.1.0
participants (2)
-
Aline Manera
-
Wen Wang