[Kimchi-devel] [PATCH] Issue#305: Redesign bridged network UI section

[Wen Wang]

Finished align vlan fields. Redesigned the pattern of the label positions

Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ui/css/theme-default/network.css | 28 ++++++++++++++++++++++------
 ui/js/src/kimchi.network.js      | 10 +++++-----
 ui/pages/tabs/network.html.tmpl  | 33 ++++++++++++++++++++++-----------
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 67f2aa2..98220ab 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -198,7 +198,7 @@
     color: #666666;
     border: solid 1px;
     background-color: white;
-    padding: 3px 4px 3px 0;
+    padding: 3px 4px 3px 0;192.168.122.0/24
 }
 
 .network-config .input-container {
@@ -209,17 +209,33 @@
     vertical-align: top;
 }
 
-.network-config .destination {
-    margin-left: 28px;
+.network-config .destination select {
+    margin-left: 48px;
+
+}
+
+.network-config .destination label {
+    vertical-align: middle;
+    margin-left: 48px;
 }
 
-.network-config .VLAN {
-    margin-left: 28px;
+.network-config .VLANID input[type="checkbox"] {
+    margin-left: 34px;
+    vertical-align: middle;
 }
 
-.network-config .VLAN input[type="text"] {
+.network-config .VLANID label {
+    vertical-align: middle;
+}
+
+.network-config .labelVLAN label {
+    margin-left: 56px;
+    vertical-align: middle;
+}
+.network-config .labelVLAN input[type="text"] {
     height: 25px;
     width: 60px;
+    vertical-align: middle;
 }
 
 .network-config .input-hint-icon {
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 7a331be..cfd7338 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -244,6 +244,7 @@ kimchi.openNetworkDialog = function(okCallback) {
             if (nics[$("#networkInterface").val()].type === "bridge") {
                 $("#enableVlan").prop("checked", false);
                 $("#enableVlan").prop("disabled", true);
+                $("#enableVlan").slideUp(100);
                 $("#networkVlanID").val("");
                 $("#networkVlanID").prop("disabled", true);
             } else {
@@ -275,13 +276,14 @@ kimchi.enableBridgeOptions = function(enable) {
         $("#networkVlanID").prop("disabled", true);
         $("#networkVlanID").val("");
         $("#networkInterface").val("");
-        $("#bridge-options").slideUp(100);
+        $("#bridgeOptions").slideUp(100);
     } else if (!$("#networkInterface").val()){
         $("#networkInterface").prop("selectedIndex", 0);
-        $("#bridge-options").slideDown(100);
+        $("#bridgeOptions").slideDown(100);
     }
 };
 
+
 kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     $("#networkTypeBri").prop("checked", isInterfaceAvail);
     $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
@@ -289,7 +291,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     if (!isInterfaceAvail) {
         kimchi.enableBridgeOptions(false);
     } else {
-        $("#bridge-options").slideDown(100);
+        $("#bridgeOptions").slideDown(100);
     }
 };
 
@@ -315,10 +317,8 @@ kimchi.cleanNetworkDialog = function() {
     $("#networkInterface option").removeAttr("selected").find(":first").attr("selected", "selected");
     $("#networkFormOk").off("click");
     $("#networkFormOk").button("disable");
-    $("#networkVlanID").prop("disabled", true);
     $("#enableVlan").prop("checked", false);
 };
-
 kimchi.setupNetworkFormEvent = function() {
     $("#networkName").on("keyup", function(event) {
         $("#networkName").toggleClass("invalid-field", !$("#networkName").val().match(/^[a-zA-Z0-9_]+$/));
diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
index e49b257..c9bf1d4 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -68,17 +68,28 @@
                     <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
                     <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label>
                 </div>
-                <div id="bridge-options">
-                    <div class="destination">
-                        <label for="networkInterface">$_("Destination"): </label>
-                        <select id="networkInterface"></select>
-                    </div>
-                    <div class="VLAN">
-                        <label for="enableVlan">$_("Enable VLAN"): </label>
-                        <input id="enableVlan" type="checkbox" value=""/>
-                        <label for="networkVlanID">$_("VLAN ID"): </label>
-                        <input type="text" id="networkVlanID" disabled>
-                    </div>
+                <div id="bridgeOptions">
+                    <table id="tableBridgeOption" >
+                        <tr>
+                            <td class="destination">
+                                <label id="labelNetworkInterface">$_("Destination"): </label>
+                            </td>
+                            <td class="VLANID">
+                                <input id="enableVlan" type="checkbox" value=""/>
+                                <label id="labelVlanID">$_("Enable VLAN"): </label>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="destination">
+                                <select id="networkInterface"></select>
+                            </td>
+                            <td class="labelVLAN">
+                                <label id="labelNetworkVlanID">$_("VLAN ID"): </label>
+                                <input type="text" id="networkVlanID" disabled>
+                            </td>
+                        </tr>
+                    </table>
+
                 </div>
             </div>
         </div>
-- 
1.9.1