[Kimchi-devel] [PATCH 3/6] UI: Chnage dialog radio and checkbox to new kimchi style

[Aline Manera]

I don't think it is working correctly.
I can not see the check boxes in the Template Edit dialog or in the 
Network creation dialog - only the label is shown.


On 04/03/2015 07:07, Wen Wang wrote:
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/network.css |  9 +++++++++
>   ui/js/src/kimchi.network.js      | 18 +++++++++++++++++-
>   ui/pages/tabs/network.html.tmpl  | 14 +++++++++-----
>   3 files changed, 35 insertions(+), 6 deletions(-)
>
> diff --git a/ui/css/theme-default/network.css b/ui/css/theme-default/network.css
> index e5a8e47..00e71c2 100644
> --- a/ui/css/theme-default/network.css
> +++ b/ui/css/theme-default/network.css
> @@ -264,4 +264,13 @@
>
>   #networkConfig {
>       padding-left: 30px;
> +}
> +
> +.vlan-check-section {
> +    height: 18px;
> +    line-height: 18px;
> +}
> +
> +.vlan-check-section label {
> +    vertical-align: middle;
>   }
> \ No newline at end of file
> diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
> index 81d5dd0..3284231 100644
> --- a/ui/js/src/kimchi.network.js
> +++ b/ui/js/src/kimchi.network.js
> @@ -204,6 +204,8 @@ kimchi.initNetworkCreation = function() {
>                   data.connection = "bridge";
>                   data.interface = network.interface;
>                   if ($("#enableVlan").prop("checked")) {
> +                    $("#enableVlanIcon").removeClass("icon-check-empty-1");
> +                    $("#enableVlanIcon").addClass("icon-ok-squared");
>                       data.vlan_id = network.vlan_id;
>                       if (!(data.vlan_id >=1 && data.vlan_id <= 4094)) {
>                           kimchi.message.error.code('KCHNET6001E');
> @@ -295,6 +297,13 @@ kimchi.initNetworkDialog = function() {
>           "border-radius": "0",
>           "opacity": "1"
>       });
> +    $("input:radio[name=networkType]").on("change", function() {
> +        $(".input-container label[name=networkTypeIcon]").removeClass("icon-dot-circled");
> +        $(".input-container label[name=networkTypeIcon]").addClass("icon-circle-empty");
> +        var networkChecked = $("input:radio[name=networkType]:checked").attr("id");
> +        $("#" + networkChecked + "Icon").removeClass("icon-circle-empty");
> +        $("#" + networkChecked + "Icon").addClass("icon-dot-circled");
> +    });
>       kimchi.setupNetworkFormEvent();
>   };
>
> @@ -334,14 +343,18 @@ kimchi.openNetworkDialog = function(okCallback) {
>           $("#networkFormOk span").text(i18n.KCHAPI6008M);
>           okCallback();
>       });
> -    $("#enableVlan").on("click", function() {
> +    $("#enableVlan").on("change", function() {
>           $("#networkVlanID").prop("disabled", !this.checked);
>           if (!this.checked) {
> +            $("#enableVlanIcon").removeClass("icon-ok-squared");
> +            $("#enableVlanIcon").addClass("icon-check-empty-1");
>               $("#networkVlanID").slideUp(100);
>               $("#labelNetworkVlanID").slideUp(100);
>               $("#networkVlanID").val("");
>           }
>           else {
> +            $("#enableVlanIcon").removeClass("icon-check-empty-1");
> +            $("#enableVlanIcon").addClass("icon-ok-squared");
>               $("#networkVlanID").slideDown(100);
>               $("#labelNetworkVlanID").slideDown(100);
>           }
> @@ -370,6 +383,9 @@ kimchi.setDefaultNetworkType = function(isInterfaceAvail) {
>       $("#networkTypeBri").prop("checked", isInterfaceAvail);
>       $("#networkTypeBri").prop("disabled", !isInterfaceAvail);
>       $("#networkTypeNat").prop("checked", !isInterfaceAvail);
> +    var networkChecked = $("input:radio[name=networkType]:checked").attr("id");
> +    $("#" + networkChecked + "Icon").removeClass("icon-circle-empty");
> +    $("#" + networkChecked + "Icon").addClass("icon-dot-circled");
>       if (!isInterfaceAvail) {
>           kimchi.enableBridgeOptions(false);
>           $("#networkBriDisabledLabel").show();
> diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
> index e2b1639..727f35d 100644
> --- a/ui/pages/tabs/network.html.tmpl
> +++ b/ui/pages/tabs/network.html.tmpl
> @@ -58,16 +58,19 @@
>               <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" hidden />
> +                    <label id="networkTypeIsoIcon" class="icon-circle-empty" for="networkTypeIso" name="networkTypeIcon"></label>
>                       <label for="networkTypeIso">$_("Isolated: no external 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" hidden />
> +                    <label id="networkTypeNatIcon" class="icon-circle-empty" for="networkTypeNat" name="networkTypeIcon"></label>
>                       <label for="networkTypeNat">$_("NAT: outbound physical network connection only")</label>
>                   </div>
>                   <div class="input-container">
>                       <div class="bridged-inline">
> -                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" />
> +                        <input type="radio" id="networkTypeBri" name="networkType" value="bridged" hidden />
> +                        <label id="networkTypeBriIcon" class="icon-circle-empty" for="networkTypeBri" name="networkTypeIcon"></label>
>                       </div>
>                       <div class="bridged-inline">
>                           <label for="networkTypeBri">$_("Bridged: Virtual machines are connected to physical network directly")</label><br />
> @@ -91,8 +94,9 @@
>                               </div>
>                           </div>
>                       </div>
> -                    <div>
> -                        <input id="enableVlan" type="checkbox" value="" />
> +                    <div class="vlan-check-section">
> +                        <input id="enableVlan" type="checkbox" value="" hidden />
> +                        <label id="enableVlanIcon" class="icon-check-empty-1" for="enableVlan"></label>
>                           <label for="enableVlan" id="labelEnableVlan">$_("Enable VLAN") </label>
>                       </div>
>                           <label for="networkVlanID" id="labelNetworkVlanID">$_("VLAN ID"): </label>