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

[Hongliang Wang]

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 at 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>