[Kimchi-devel] [PATCH 3/6] UI: Chnage dialog radio and checkbox to new kimchi style

[Wen Wang]

Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/network.css |  9 +++++++++
 ui/js/src/kimchi.network.js      | 18 +++++++++++++++++-
 ui/pages/tabs/network.html.tmpl  | 14 +++++++++-----
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index e5a8e47..00e71c2 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -264,4 +264,13 @@
 
 #networkConfig {
     padding-left: 30px;
+}
+
+.vlan-check-section {
+    height: 18px;
+    line-height: 18px;
+}
+
+.vlan-check-section label {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 81d5dd0..3284231 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() {
                 data.connection = "bridge";
                 data.interface = network.interface;
                 if ($("#enableVlan").prop("checked")) {
+                    $("#enableVlanIcon").removeClass("icon-check-empty-1");
+                    $("#enableVlanIcon").addClass("icon-ok-squared");
                     data.vlan_id = network.vlan_id;
                     if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
                         kimchi.message.error.code('KCHNET6001E');
@@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() {
         "border-radius": "0",
         "opacity": "1"
     });
+    $("input:radio[name=networkType]").on("change", function() {
+        $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled");
+        $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty");
+        var networkChecked = $("input:radio[name=networkType]:checked").attr("id");
+        $("#" + networkChecked + "Icon").removeClass("icon-circle-empty");
+        $("#" + networkChecked + "Icon").addClass("icon-dot-circled");
+    });
     kimchi.setupNetworkFormEvent();
 };
 
@@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) {
         $("#networkFormOk span").text(i18n.KCHAPI6008M);
         okCallback();
     });
-    $("#enableVlan").on("click", function() {
+    $("#enableVlan").on("change", function() {
         $("#networkVlanID").prop("disabled", !this.checked);
         if (!this.checked) {
+            $("#enableVlanIcon").removeClass("icon-ok-squared");
+            $("#enableVlanIcon").addClass("icon-check-empty-1");
             $("#networkVlanID").slideUp(100);
             $("#labelNetworkVlanID").slideUp(100);
             $("#networkVlanID").val("");
         }
         else {
+            $("#enableVlanIcon").removeClass("icon-check-empty-1");
+            $("#enableVlanIcon").addClass("icon-ok-squared");
             $("#networkVlanID").slideDown(100);
             $("#labelNetworkVlanID").slideDown(100);
         }
@@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     $("#networkTypeBri").prop("checked", isInterfaceAvail);
     $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
     $("#networkTypeNat").prop("checked", !isInterfaceAvail);
+    var networkChecked = $("input:radio[name=networkType]:checked").attr("id");
+    $("#" + networkChecked + "Icon").removeClass("icon-circle-empty");
+    $("#" + networkChecked + "Icon").addClass("icon-dot-circled");
     if (!isInterfaceAvail) {
         kimchi.enableBridgeOptions(false);
         $("#networkBriDisabledLabel").show();
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index e2b1639..727f35d 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -58,16 +58,19 @@
             <div class="section-header">2. $_("Network Type")</div>
             <div class="section-content">
                 <div class="input-container">
-                    <input type="radio" id="networkTypeIso" name="networkType" value="isolated" />
+                    <input type="radio" id="networkTypeIso" name="networkType" value="isolated" hidden />
+                    <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label>
                     <label for="networkTypeIso">$_("Isolated: no external network connection")</label>
                 </div>
                 <div class="input-container">
-                    <input type="radio" id="networkTypeNat" name="networkType" value="nat" />
+                    <input type="radio" id="networkTypeNat" name="networkType" value="nat" hidden />
+                    <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label>
                     <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
                 </div>
                 <div class="input-container">
                     <div class="bridged-inline">
-                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
+                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden />
+                        <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label>
                     </div>
                     <div class="bridged-inline">
                         <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br />
@@ -91,8 +94,9 @@
                             </div>
                         </div>
                     </div>
-                    <div>
-                        <input id="enableVlan" type="checkbox" value="" />
+                    <div class="vlan-check-section">
+                        <input id="enableVlan" type="checkbox" value="" hidden />
+                        <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label>
                         <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
                     </div>
                         <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
-- 
2.1.0