On 05/16/2014 10:50 AM, Wen Wang wrote:
Finished align vlan fields. Redesigned the pattern of the label positions
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@linux.vnet.ibm.com> --- ui/css/theme-default/network.css | 21 ++++++++++++++++----- ui/js/src/kimchi.network.js | 8 ++++---- ui/pages/tabs/network.html.tmpl | 26 +++++++++++++++++--------- 3 files changed, 37 insertions(+), 18 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..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> Assign "for" attribute for label to associate it with text box accordingly. http://www.w3schools.com/tags/att_label_for.asp http://www.w3.org/TR/WCAG20-TECHS/H44.html + <input type="text" id="networkVlanID" disabled> + </div> </div> </div> </div>