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(a)linux.vnet.ibm.com&gt; --- 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