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

10 Feb 2015

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

    