Finished align vlan fields. Redesigned the pattern of the label positions Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; --- 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>