fix(action-bar-ios): navigation button support for font icons (#7918)

e2e/ui-tests-app/e2e/suites/tab-navigation/tab-view/tab-view-css-properties.e2e-spec.ts

@@ -59,14 +59,11 @@ describe(`${suite}-${spec}-suite`, async function () {
             if (driver.isIOS && imageName.includes("android")) {
                 this.skip();
             }
-            if (driver.platformName === Platform.ANDROID
+            let scenarioBtn = await driver.waitForElement(sample.sample);
-                && (sample.sample.toLowerCase() === "all" || sample.sample.toLowerCase() === "reset")) {
+            if (!scenarioBtn) {
-                await driver.scroll(Direction.down, 400, 200, 300, 200);
+                await driver.scroll(Direction.up, 400, 200, 300, 200);
-                await driver.scroll(Direction.down, 400, 200, 300, 200);
+                scenarioBtn = await driver.waitForElement(sample.sample);
-                await driver.scroll(Direction.down, 400, 200, 300, 200);
-
             }
-            const scenarioBtn = await driver.waitForElement(sample.sample);
             await scenarioBtn.click();
             imageName = setImageName(suite, spec, imageName);
             await driver.imageHelper.compareScreen({ imageName: imageName, timeOutSeconds: 5, tolerance: 0, toleranceType: ImageOptions.pixel });

tns-core-modules/ui/action-bar/action-bar-common.ts

@@ -20,7 +20,7 @@ import {
     CSSType,
     traceWrite,
     traceCategories,
-    traceMessageType, Color
+    traceMessageType
 } from "../core/view";
 import { ShorthandProperty, CssProperty, Style } from "../core/properties/properties";
 import { Length } from "../core/view";

tns-core-modules/ui/action-bar/action-bar.android.ts

@@ -1,8 +1,8 @@
-import { AndroidActionBarSettings as AndroidActionBarSettingsDefinition, AndroidActionItemSettings } from ".";
+import { AndroidActionItemSettings, AndroidActionBarSettings as AndroidActionBarSettingsDefinition, ActionItem as ActionItemDefinition } from ".";
 import {
     ActionItemBase, ActionBarBase, isVisible,
     View, layout, colorProperty, flatProperty, Color,
-    traceMissingIcon, androidContentInsetLeftProperty, androidContentInsetRightProperty, Length
+    traceMissingIcon, androidContentInsetLeftProperty, androidContentInsetRightProperty
 } from "./action-bar-common";
 import { RESOURCE_PREFIX, isFontIconURI } from "../../utils/utils";
 import { fromFileOrResource, fromFontIconCode } from "../../image-source";
@@ -22,6 +22,31 @@ function generateItemId(): number {
     return actionItemIdGenerator;
 }
 
+function loadActionIconDrawableOrResourceId(item: ActionItemDefinition): any {
+    const itemIcon = item.icon;
+    const itemStyle = item.style;
+    let drawableOrId = null;
+
+    if (isFontIconURI(itemIcon)) {
+        const fontIconCode = itemIcon.split("//")[1];
+        const font = itemStyle.fontInternal;
+        const color = itemStyle.color;
+        const is = fromFontIconCode(fontIconCode, font, color);
+
+        if (is && is.android) {
+            drawableOrId = new android.graphics.drawable.BitmapDrawable(appResources, is.android); 
+        }
+    } else {
+        drawableOrId = getDrawableOrResourceId(itemIcon, appResources);
+    }
+
+    if (!drawableOrId) {
+        traceMissingIcon(itemIcon);
+    }
+
+    return drawableOrId;
+}
+
 interface MenuItemClickListener {
     new(owner: ActionBar): androidx.appcompat.widget.Toolbar.OnMenuItemClickListener;
 }
@@ -231,21 +256,9 @@ export class ActionBar extends ActionBarBase {
                 }
             }
             else if (navButton.icon) {
-                if (isFontIconURI(navButton.icon)) {
+                const drawableOrId = loadActionIconDrawableOrResourceId(navButton);
-                    const fontIconCode = navButton.icon.split("//")[1];
+                if (drawableOrId) {
-                    const font = navButton.style.fontInternal;
+                    this.nativeViewProtected.setNavigationIcon(drawableOrId);
-                    const color = navButton.style.color;
-                    const is = fromFontIconCode(fontIconCode, font, color);
-
-                    if (is && is.android) {
-                        const drawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android);
-                        this.nativeViewProtected.setNavigationIcon(drawable);
-                    }
-                } else {
-                    let drawableOrId = getDrawableOrResourceId(navButton.icon, appResources);
-                    if (drawableOrId) {
-                        this.nativeViewProtected.setNavigationIcon(drawableOrId);
-                    }
                 }
             }
 
@@ -275,6 +288,8 @@ export class ActionBar extends ActionBarBase {
                 let drawableOrId = getDrawableOrResourceId(icon, appResources);
                 if (drawableOrId) {
                     this.nativeViewProtected.setLogo(drawableOrId);
+                } else {
+                    traceMissingIcon(icon);
                 }
             }
             else {
@@ -327,21 +342,9 @@ export class ActionBar extends ActionBarBase {
                 }
             }
             else if (item.icon) {
-                if (isFontIconURI(item.icon)) {
+                const drawableOrId = loadActionIconDrawableOrResourceId(item);
-                    const fontIconCode = item.icon.split("//")[1];
+                if (drawableOrId) {
-                    const font = item.style.fontInternal;
+                    menuItem.setIcon(drawableOrId);
-                    const color = item.style.color;
-                    const is = fromFontIconCode(fontIconCode, font, color);
-
-                    if (is && is.android) {
-                        const drawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android);
-                        menuItem.setIcon(drawable);
-                    }
-                } else {
-                    let drawableOrId = getDrawableOrResourceId(item.icon, appResources);
-                    if (drawableOrId) {
-                        menuItem.setIcon(drawableOrId);
-                    }
                 }
             }
 
@@ -468,10 +471,10 @@ let defaultTitleTextColor: number;
 
 function getDrawableOrResourceId(icon: string, resources: android.content.res.Resources): any {
     if (typeof icon !== "string") {
-        return undefined;
+        return null;
     }
 
-    let result = undefined;
+    let result = null;
     if (icon.indexOf(RESOURCE_PREFIX) === 0) {
         let resourceId: number = resources.getIdentifier(icon.substr(RESOURCE_PREFIX.length), "drawable", application.android.packageName);
         if (resourceId > 0) {
@@ -480,7 +483,6 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re
     }
     else {
         let drawable: android.graphics.drawable.BitmapDrawable;
-
         let is = fromFileOrResource(icon);
         if (is) {
             drawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android);
@@ -489,10 +491,6 @@ function getDrawableOrResourceId(icon: string, resources: android.content.res.Re
         result = drawable;
     }
 
-    if (!result) {
-        traceMissingIcon(icon);
-    }
-
     return result;
 }
 

tns-core-modules/ui/action-bar/action-bar.ios.ts

@@ -13,15 +13,28 @@ export * from "./action-bar-common";
 const majorVersion = iosUtils.MajorVersion;
 const UNSPECIFIED = layout.makeMeasureSpec(0, layout.UNSPECIFIED);
 
-function loadActionIconFromFileOrResource(icon: string): UIImage {
+function loadActionIcon(item: ActionItemDefinition): any /* UIImage */ {
-    const img = fromFileOrResource(icon);
+    let is = null;
-    if (img && img.ios) {
+    let img = null;
-        return img.ios;
-    } else {
-        traceMissingIcon(icon);
 
-        return null;
+    const itemIcon = item.icon;
+    const itemStyle = item.style;
+    if (isFontIconURI(itemIcon)) {
+        const fontIconCode = itemIcon.split("//")[1];
+        const font = itemStyle.fontInternal;
+        const color = itemStyle.color;
+        is = fromFontIconCode(fontIconCode, font, color);
+    } else {
+        is = fromFileOrResource(itemIcon);
     }
+
+    if (is && is.ios) {
+        img = is.ios;
+    } else {
+        traceMissingIcon(itemIcon);
+    }
+
+    return img;
 }
 
 class TapBarItemHandlerImpl extends NSObject {
@@ -183,7 +196,7 @@ export class ActionBar extends ActionBarBase {
         // Set back button image
         let img: UIImage;
         if (this.navigationButton && isVisible(this.navigationButton) && this.navigationButton.icon) {
-            img = loadActionIconFromFileOrResource(this.navigationButton.icon);
+            img = loadActionIcon(this.navigationButton);
         }
 
         // TODO: This could cause issue when canceling BackEdge gesture - we will change the backIndicator to
@@ -256,25 +269,11 @@ export class ActionBar extends ActionBarBase {
 
             barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(id, tapHandler, "tap");
         } else if (item.icon) {
-            let img = null;
+            const img = loadActionIcon(item);
-
+            if (img) {
-            if (isFontIconURI(item.icon)) {
+                const image = img.imageWithRenderingMode(this._getIconRenderingMode());
-                const fontIconCode = item.icon.split("//")[1];
+                barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(image, UIBarButtonItemStyle.Plain, tapHandler, "tap");
-                const font = item.style.fontInternal;
-                const color = item.style.color;
-                const is = fromFontIconCode(fontIconCode, font, color);
-
-                if (is && is.ios) {
-                    img = is.ios;
-                } else {
-                    traceMissingIcon(item.icon);
-                }
-            } else {
-                img = loadActionIconFromFileOrResource(item.icon);
             }
-
-            const image = img.imageWithRenderingMode(this._getIconRenderingMode());
-            barButtonItem = UIBarButtonItem.alloc().initWithImageStyleTargetAction(image, UIBarButtonItemStyle.Plain, tapHandler, "tap");
         } else {
             barButtonItem = UIBarButtonItem.alloc().initWithTitleStyleTargetAction(item.text + "", UIBarButtonItemStyle.Plain, tapHandler, "tap");
         }