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

On 05/14/2014 03:08 PM, Wen Wang wrote: 192.168.122.0/24 What's this? 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.