[Kimchi-devel] [PATCH 1/5] UI: Change host dialog
Wen Wang
wenwang at linux.vnet.ibm.com
Tue Feb 10 08:35:12 UTC 2015
Signed-off-by: Wen Wang <wenwang at 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
More information about the Kimchi-devel
mailing list