On 05/14/2014 03:08 PM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
Signed-off-by: Wen Wang <wenwang@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
192.168.122.0/24 What's this?
}
.network-config .input-container { @@ -209,17 +209,33 @@ vertical-align: top; }
-.network-config .destination { - margin-left: 28px; +.network-config .destination select { + margin-left: 48px;
+ Blank line can be removed. +} + +.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> + <table>s are used for data presentation, instead of layout purpose. Use <div> + CSS for layout. </div> </div> </div>