[Kimchi-devel] [PATCH 7/8] UI: Change dialog of network to new kimchi UI

[Wen Wang]

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