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

[Hongliang Wang]

On 05/16/2014 11:29 AM, Wen Wang wrote:
> 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 at linux.vnet.ibm.com>
Reviewed-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
> ---
>   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>