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

[Wen Wang]

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

V3 -> V4:

Address to Hongliang Wang: Assigned "for" attribute for label to associate it with text box accordingly

V2 -> V3:

Address to Hongliang Wang: Have the additional margin place removed.

v1 -> v2:

Address to Hongliang Wang: Have the unrelated lines removed & Have the display format changed from table to div.
Address to Yuxin Huo: Have the unused IDs removed.

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

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 67f2aa2..176b277 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -209,19 +209,30 @@
     vertical-align: top;
 }
 
-.network-config .destination {
-    margin-left: 28px;
+.bridge-option-column {
+    display: inline-block;
+    margin-left: 56px;
+    vertical-align: middle;
+}
+
+.bridge-option-column > div {
+    height: 25px;
+    line-height: 25px;
 }
 
-.network-config .VLAN {
-    margin-left: 28px;
+.bridge-option-column select {
+    height: 26px;
 }
 
-.network-config .VLAN input[type="text"] {
+.bridge-option-column input[type="text"] {
     height: 25px;
     width: 60px;
 }
 
+#labelNetworkVlanID {
+    margin-left: 26px;
+}
+
 .network-config .input-hint-icon {
     margin: -1px 1px 0 0;
     display: inline-block;
diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 7a331be..ca6d29b 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -275,13 +275,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 +290,7 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
     if (!isInterfaceAvail) {
         kimchi.enableBridgeOptions(false);
     } else {
-        $("#bridge-options").slideDown(100);
+        $("#bridgeOptions").slideDown(100);
     }
 };
 
@@ -318,7 +319,6 @@ kimchi.cleanNetworkDialog = function() {
     $("#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..aedf7e8 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -46,7 +46,7 @@
         <div class="section-container">
             <div class="section-header">1. $_("Network Name")</div>
             <div class="section-content">
-                <input type="text" id="networkName">
+                <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">$_("Alphanumeric and '_' characters only.")</span>
@@ -57,27 +57,35 @@
             <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" />
                     <label for="networkTypeIso">$_("Isolated: no physical 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" />
                     <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
                 </div>
                 <div class="input-container">
-                    <input type="radio" id="networkTypeBri" name="networkType" value="bridged">
+                    <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 id="bridgeOptions">
+                    <div class="bridge-option-column">
+                        <div>
+                            <label for="networkInterface">$_("Destination"): </label>
+                        </div>
+                        <div>
+                            <select id="networkInterface"></select>
+                        </div>
                     </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 class="bridge-option-column">
+                        <div>
+                            <input id="enableVlan" type="checkbox" value="" />
+                            <label for="enableVlan">$_("Enable VLAN"): </label>
+                        </div>
+                        <div>
+                            <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>
+                            <input type="text" id="networkVlanID" disabled />
+                        </div>
                     </div>
                 </div>
             </div>
-- 
1.9.1