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

[Aline Manera]

On 05/03/2015 02:17, Wen Wang wrote:
> Hi Aline,
>
> You need to add fontello into the code since we are using their icons

The fontello is already merged on next branch, right?
Do I need to do something else?

>
> On 3/5/2015 12:50 AM, Aline Manera wrote:
>>
>> 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>
>>
>
>