[Kimchi-devel] [PATCH 5/6] UI: Template dialog refine

4 Mar 2015

Signed-off-by: Wen Wang <wenwang@linux.vnet.ibm.com>
---
 ui/css/theme-default/template-edit.css | 10 ++--
 ui/css/theme-default/template_add.css  | 95 +++++++++++-----------------------
 ui/js/src/kimchi.template_add_main.js  |  9 +++-
 ui/pages/template-add.html.tmpl        | 73 +++++++++++++-------------
 4 files changed, 81 insertions(+), 106 deletions(-)

diff --git a/ui/css/theme-default/template-edit.css b/ui/css/theme-default/template-edit.css
index 4a2afa6..7a1e862 100644
--- a/ui/css/theme-default/template-edit.css
+++ b/ui/css/theme-default/template-edit.css
@@ -47,17 +47,13 @@
 }
 
 .template-edit-wrapper-controls input[type="text"] {
+    border: 1px solid #CCCCCC;
     height: 38px;
     line-height: 38px;
-    background: #fff;
     -webkit-border-radius: 5px;
-    border-radius: 5px;
-    box-shadow: 2px 2px 2px #eee inset;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    border-top: 1px solid #bbb;
-    border-left: 1px solid #bbb;
     padding: 0 10px;
     margin-top: 5px;
     width: 100%;
@@ -111,6 +107,7 @@
 #form-template-storage .template-tab-body input {
     width: 56px;
     height: 17px;
+    border: 1px solid #CCCCCC;
 }
 
 #form-template-storage .template-tab-body .template-storage-name {
@@ -147,6 +144,7 @@
 #form-template-processor select,
 #form-template-processor input[type="text"] {
     margin-left: 10px;
+    border: 1px solid #CCCCCC;
 }
 
 #form-template-processor input[type="checkbox"] {
@@ -172,4 +170,4 @@
 
 #cpu-topology-manual-icon {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/ui/css/theme-default/template_add.css b/ui/css/theme-default/template_add.css
index 12e95bf..e868b66 100644
--- a/ui/css/theme-default/template_add.css
+++ b/ui/css/theme-default/template_add.css
@@ -56,6 +56,7 @@
     font-size: 18px;
     font-weight: normal;
     padding: 15px 10px;
+    background: #FFFFFF;
 }
 
 .step-choose>li>a {
@@ -93,6 +94,7 @@
 .custom-iso-field {
     position: relative;
     padding: 0 10px 10px;
+    line-height: 40px;
 }
 
 .custom-iso-field>.input-wrapper {
@@ -103,14 +105,8 @@
     padding: 10px;
     color: #333;
     font-size: 13px;
-    background: #fff;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    box-shadow: 2px 2px 2px #eee inset;
-    border-top: 1px solid #bbb;
-    border-left: 1px solid #bbb;
     width: 100%;
+    border: 1px solid #CCCCCC;
 }
 
 .custom-iso-field>button {
@@ -129,8 +125,7 @@
     position: relative;
     height: 38px;
     line-height: 38px;
-    margin: 5px;
-    font-size: 13px;
+    margin: 5px 5px 5px 12px;
 }
 
 .check-all input {
@@ -139,27 +134,8 @@
 
 .box {
     background: #ffffff;
-    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
-    background: -webkit-gradient(linear, left top, left bottom,
-                color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
-    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
-    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
-    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
-    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
-            endColorstr='#e5e5e5', GradientType=0);
-    border: 1px solid #ccc;
+    border: 4px solid rgba(255,255,255,0);
     color: #333;
-    text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff;
-    -webkit-border-radius: 8px;
-    -moz-border-radius: 8px;
-    border-radius: 8px;
-}
-
-.box:HOVER {
-    border: 1px solid #aaa;
-    -webkit-box-shadow: #bbb 0px 0px 5px;
-    box-shadow: #bbb 0px 0px 5px;
 }
 
 .box-iso {
@@ -170,13 +146,12 @@
 
 .iso-icon {
     float: left;
-    width: 58px;
-    height: 58px;
-    margin: 0 5px 0 0;
-    border: 1px solid #CCCCCC;
-    border-radius: 8px;
+    width: 38px;
+    height: 38px;
+    margin: -10px -10px 0 0;
     background: url(../../images/icon-vm.png) center center no-repeat;
-    background-size: 58px;
+    background-size: 100%;
+    float: right;
 }
 
 .iso-icon.centos {
@@ -210,7 +185,7 @@
 
 .list-iso li {
     float: left;
-    width: 320px;
+    width: 240px;
 }
 
 .list-iso>li>label {
@@ -223,9 +198,7 @@
 }
 
 .list-iso>li>label>input[type="checkbox"]:CHECKED+.box-iso {
-    border: 1px solid rgb(11, 107, 173);
-    -webkit-box-shadow: rgb(11, 107, 173) 0px 0px 4px;
-    box-shadow: rgb(11, 107, 173) 0px 0px 4px;
+    border: 4px solid rgb(11, 107, 173);
 }
 
 .iso-title {
@@ -234,12 +207,13 @@
     position: relative;
     height: 23px;
     line-height: 23px;
-    font-size: 14px;
-    font-weight: normal;
+    font-size: 24px;
+    font-weight: lighter;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-bottom: 15px;
 }
 
 .iso-title>label>input {
@@ -254,32 +228,25 @@
     overflow: hidden;
 }
 
-.iso-info-col {
-    float: left;
-    width: 50%;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0 0 0 5px;
-}
-
-.iso-info-col:FIRST-CHILD {
-    padding: 0 5px 0 0;
-    border-right: 1px solid #999;
-}
-
 .iso-info-item {
     font-weight: bold;
-    color: #999;
-    font-size: 11px;
+    font-size: 14px;
     line-height: 18px;
-    max-width: 106px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.iso-info-title {
+    font-size: 14px;
+    color: #999999;
+    font-weight: lighter;
+}
+
 #iso-search {
     margin: 10px 15px;
+    background: #008abf;
+    color: #FFFFFF;
 }
 
 #iso-search-loading {
@@ -290,8 +257,7 @@
 }
 
 #iso-more-loading {
-    background: #C0C0C0 url(../../images/theme-default/loading.gif) 7px
-                center no-repeat;
+    background: #999999;
     padding: 0 20px 0 26px;
 }
 
@@ -300,23 +266,24 @@
 }
 
 #vm-image-local-box .body input {
-    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;
     margin-left: 10px;
     width: 600px;
+    border: 1px solid #CCCCCC;
 }
 
 #vm-image-local-box .body button {
     margin-left: 10px;
+    border-radius: 0;
 }
 
 #iso-file-check-icon,
 #select-all-remote-iso-icon {
     cursor: pointer;
+}
+
+.template-avai-container {
+    background: rgb(238,238,238);
 }
\ No newline at end of file
diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index de36bec..b1a6cbe 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -171,7 +171,14 @@ kimchi.template_add_main = function() {
         $('#local-iso-field').show();
     };
 
-    $('#select-all-local-iso').click(function() {
+    $('#select-all-local-iso').on("change", function() {
+        if($(this).is(":checked")) {
+            $("#select-all-local-iso-icon").removeClass("icon-check-empty-1");
+            $("#select-all-local-iso-icon").addClass("icon-ok-squared");
+        } else {
+            $("#select-all-local-iso-icon").removeClass("icon-ok-squared");
+            $("#select-all-local-iso-icon").addClass("icon-check-empty-1");
+        }
         $('#list-local-iso [type="checkbox"]').prop('checked', $(this).prop('checked'));
         if ($(this).prop('checked')) {
             $('#btn-template-local-iso-create').removeAttr('disabled');
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index ed460e7..cc058a4 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -28,7 +28,7 @@
     <header>
         <h1 class="title h1 grey">$_("Add Template")</h1>
     </header>
-    <div class="content" style="margin-bottom: 0">
+    <div class="content" style="margin-bottom:0; margin-right:0">
         <div class="page-list">
             <!-- 1 -->
             <div class="page" id="iso-type-box" style="left:0">
@@ -47,7 +47,7 @@
             </div>
 
             <!-- 1-1 -->
-            <div class="page" id="iso-local-box">
+            <div class="page template-avai-container" id="iso-local-box">
                 <header>
                     <a class="back" id="iso-local-box-back"></a>
                     <h2 class="step-title">$_("Local ISO Image")</h2>
@@ -56,13 +56,15 @@
                 <button class="btn-normal" id="iso-search" style="display: none"><span class="text">$_("Search ISOs")</span></button>
                 <button class="btn-normal" id="iso-search-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
                 <!-- 1-1-1 -->
+                <h3 class="step-subtitle">
+                    $_("The following ISOs are available:")
+                </h3>
                 <div id="local-iso-field" class="iso-field" style="display: none;">
-                    <h3 class="step-subtitle">
-                        $_("The following ISOs are available:")
-                    </h3>
-                    <div class="toolbar">
+                    <div>
                         <label class="check-all">
-                            <input type="checkbox" id="select-all-local-iso">$_("All")
+                            <input type="checkbox" id="select-all-local-iso" hidden >
+                            <span id="select-all-local-iso-icon" class="grey icon-check-empty-1" for="select-all-local-iso"></span>
+                            <span>$_("All")</span>
                         </label>
                     </div>
                     <div>
@@ -77,22 +79,23 @@
                                     <div class="box box-iso">
                                         <div class="iso-icon {os_distro}">
                                         </div>
-                                        <h3 class="iso-title" title="{name}">
-                                            {name}
+                                        <h3 class="iso-title" title="{os_distro}">
+                                            {os_distro}
                                         </h3>
                                         <div class="iso-info">
-                                            <div class="iso-info-col">
-                                                <div class="iso-info-item" title="{os_distro}">
-                                                    $_("OS: "){os_distro}
+                                            <div>
+                                                <div class="iso-info-item" title="{name}">
+                                                    {name}
                                                 </div>
+                                                <div class="iso-info-title" style="margin-bottom: 7px">$_("ISO Image Name")</div>
                                                 <div class="iso-info-item" title="{os_version}">
-                                                    $_("Version: "){os_version}
+                                                    {os_version}
                                                 </div>
-                                            </div>
-                                            <div class="iso-info-col">
+                                                <div class="iso-info-title" style="margin-bottom: 7px">$_("OS Version")</div>
                                                 <div class="iso-info-item" title="{capacity}">
-                                                    $_("Size: "){capacity}
+                                                    {capacity}
                                                 </div>
+                                                <div class="iso-info-title">$_("Size")</div>
                                             </div>
                                         </div>
                                     </div>
@@ -101,9 +104,9 @@
                         </script>
                     </div>
                     <div class="button-field">
-                        <button class="btn-normal" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button>
-                        <button class="btn-normal" id="iso-more-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
-                        <button class="btn-normal" id="btn-template-local-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
+                        <button class="btn-normal-1" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button>
+                        <button class="btn-normal-1" id="iso-more-loading" style="display: none"><span class="text">$_("Please, wait...")</span></button>
+                        <button class="btn-normal-1" id="btn-template-local-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
                     </div>
                 </div>
 
@@ -118,7 +121,7 @@
                     </h3>
                     <div id="iso-file-box" class="custom-iso-field">
                         <div class="input-wrapper"><input type="text" class="text" id="iso-file" name="iso-file"></div>
-                        <button class="btn-normal" id="btn-template-file-create" disabled="disabled"><span class="text">$_("Create")</span></button>
+                        <button class="btn-normal-1" id="btn-template-file-create" disabled="disabled"><span class="text">$_("Create")</span></button>
                     </div>
                 </div>
 
@@ -152,18 +155,18 @@
                 </div>
 
                 <!-- 1-2-1 -->
-                <div id="remote-iso-field" class="iso-field" style="display: none;">
+                <div id="remote-iso-field" class="iso-field template-avai-container" style="display: none;">
                     <h3 class="step-subtitle">
                         $_("The following ISOs are available:")
                     </h3>
-                    <div class="toolbar">
+                    <div>
                         <label class="check-all">
                             <input type="checkbox" id="select-all-remote-iso" hidden>
                             <label class="icon-check-empty-1" for="select-all-remote-iso" id="select-all-remote-iso-icon"></label>
                             <lebel for="select-all-remote-iso">$_("All")</label>
                         </label>
                     </div>
-                    <div>
+                    <div class="template-avai-container">
                         <form id="form-remote-iso">
                         <ul id="list-remote-iso" class="list-iso">
                         </ul>
@@ -175,23 +178,23 @@
                                     <div class="box box-iso">
                                         <div class="iso-icon {os_distro}">
                                         </div>
-                                        <h3 class="iso-title" title="{name}">
-                                            {name}
+                                        <h3 class="iso-title" title="{os_distro}">
+                                            {os_distro}
                                         </h3>
                                         <div class="iso-info">
-                                            <div class="iso-info-col">
-                                                <div class="iso-info-item" title="{os_distro}">
-                                                    $_("OS: "){os_distro}
+                                            <div>
+                                                <div class="iso-info-item" title="{name}">
+                                                    {name}
                                                 </div>
+                                                <div class="iso-info-title" style="margin-bottom: 7px">$_("ISO Image Name")</div>
                                                 <div class="iso-info-item" title="{os_version}">
-                                                    $_("Version: "){os_version}
+                                                    {os_version}
                                                 </div>
-
-                                            </div>
-                                            <div class="iso-info-col">
+                                                <div class="iso-info-title" style="margin-bottom: 7px">$_("OS Version")</div>
                                                 <div class="iso-info-item" title="{os_arch}">
-                                                    $_("Arch: "){os_arch}
+                                                    {os_arch}
                                                 </div>
+                                                <div class="iso-info-title">$_("Architecture")</div>
                                             </div>
                                         </div>
                                     </div>
@@ -200,7 +203,7 @@
                         </script>
                     </div>
                     <div class="button-field">
-                        <button class="btn-normal" id="btn-template-remote-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
+                        <button class="btn-normal-1" id="btn-template-remote-iso-create" disabled="disabled"><span class="text">$_("Create Templates from Selected ISO")</span></button>
                     </div>
                 </div>
 
@@ -214,7 +217,7 @@
                     </h3>
                     <div id="iso-url-box" class="custom-iso-field">
                         <div class="input-wrapper"><input type="text" class="text" id="iso-url" name="iso-url"></div>
-                        <button class="btn-normal" id="btn-template-url-create" disabled="disabled"><span class="text">$_("Create")</span></button>
+                        <button class="btn-normal-1" id="btn-template-url-create" disabled="disabled"><span class="text">$_("Create")</span></button>
                     </div>
                 </div>
 
-- 
2.1.0

    