[Kimchi-devel] [PATCH 3/6] UI: Chnage dialog radio and checkbox to new kimchi style
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Mar 6 03:07:01 UTC 2015
The fontello folder is already in the folder ./ui/ and the reference is
right. I think the problem is caused by the Makefile.am. We need to have
fontello folder built in kimchi folder since we are using href to find
it. Please try to fix this by changing "Makefile.am".
On 3/5/2015 8:05 PM, Aline Manera wrote:
>
> 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>
>>>
>>
>>
>
More information about the Kimchi-devel
mailing list