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

[Wen Wang]

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

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 | 18 +++++++++++++++---
 ui/js/src/kimchi.network.js      |  8 ++++----
 ui/pages/tabs/network.html.tmpl  | 26 +++++++++++++++++---------
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
index 67f2aa2..5a06715 100644
--- a/ui/css/theme-default/network.css
+++ b/ui/css/theme-default/network.css
@@ -209,19 +209,31 @@
     vertical-align: top;
 }
 
-.network-config .destination {
+.bridge-option-column {
+    display: inline-block;
     margin-left: 28px;
+    vertical-align: middle;
 }
 
-.network-config .VLAN {
+.bridge-option-column > div {
     margin-left: 28px;
+    height: 25px;
+    line-height: 25px;
+}
+
+.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..aacd2b6 100644
--- a/ui/pages/tabs/network.html.tmpl
+++ b/ui/pages/tabs/network.html.tmpl
@@ -68,16 +68,24 @@
                     <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 id="labelNetworkVlanID">$_("VLAN ID"): </label>
+                            <input type="text" id="networkVlanID" disabled>
+                        </div>
                     </div>
                 </div>
             </div>
-- 
1.9.1