[Kimchi-devel] [PATCH 1/5] UI: Change host dialog

Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- 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