[Kimchi-devel] [PATCH 3/6] UI: Chnage dialog radio and checkbox to new kimchi style
Wen Wang
wenwang at linux.vnet.ibm.com
Thu Mar 5 05:17:07 UTC 2015
Hi Aline,
You need to add fontello into the code since we are using their icons
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