From c60b35d5907b316b4eb6515303f08aa1ccf1f881 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 14:10:53 +0200 Subject: [PATCH 01/22] chore: add guard for ios --- e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts b/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts index 2c5e3504af..a77573d204 100644 --- a/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts +++ b/e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts @@ -1,8 +1,11 @@ import { EventData } from "tns-core-modules/data/observable"; import { TabView } from "tns-core-modules/ui/tab-view"; +import { isIOS } from "tns-core-modules/platform"; export function onLoaded(args: EventData) { console.log("TEST", args.object); const tabView = args.object; - tabView.ios.tabBar.translucent = false; + if (isIOS) { + tabView.ios.tabBar.translucent = false; + } } From 40a8fb9c2dbf35f3ec41825ad49504971944aec0 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 14:21:15 +0200 Subject: [PATCH 02/22] feat(bottom-nav): adding new properties --- .../bottom-navigation.ios.ts | 112 +++++++++++++----- .../tab-navigation-base.d.ts | 26 +++- .../tab-navigation-base.ts | 16 +++ .../tab-strip/tab-strip.d.ts | 12 ++ .../tab-strip/tab-strip.ts | 28 +++++ 5 files changed, 161 insertions(+), 33 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index 9c0f4b7037..d19f2b19a6 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -258,6 +258,9 @@ export class BottomNavigation extends TabNavigationBase { private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl; private _iconsCache = {}; + private _selectedItemColor: Color; + private _unSelectedItemColor: Color; + constructor() { super(); @@ -372,18 +375,20 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - const image = this.getIcon(tabStripItem); + if (!this._unSelectedItemColor && !this._selectedItemColor) { + const image = this.getIcon(tabStripItem); - tabStripItem.nativeView.image = image; - tabStripItem.nativeView.selectedImage = image; + tabStripItem.nativeView.image = image; + tabStripItem.nativeView.selectedImage = image; + } } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { - setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { @@ -400,6 +405,22 @@ export class BottomNavigation extends TabNavigationBase { this._ios.tabBar.tintColor = nativeColor; } + public getTabBarSelectedItemColor(): Color { + return this._selectedItemColor; + } + + public setTabBarSelectedItemColor(value: Color) { + this._selectedItemColor = value; + } + + public getTabBarUnSelectedItemColor(): Color { + return this._unSelectedItemColor; + } + + public setTabBarUnSelectedItemColor(value: Color) { + this._unSelectedItemColor = value; + } + public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void { const width = layout.getMeasureSpecSize(widthMeasureSpec); const widthMode = layout.getMeasureSpecMode(widthMeasureSpec); @@ -521,7 +542,7 @@ export class BottomNavigation extends TabNavigationBase { const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); - setViewTextAttributes(tabBarItem, tabStripItem.label, this.viewController.tabBar); + this.setViewTextAttributes(tabBarItem, tabStripItem.label); controller.tabBarItem = tabBarItem; tabStripItem._index = i; @@ -531,6 +552,8 @@ export class BottomNavigation extends TabNavigationBase { controllers.addObject(controller); }); + this._setItemImages(); + this._ios.viewControllers = controllers; this._ios.customizableViewControllers = null; @@ -538,6 +561,23 @@ export class BottomNavigation extends TabNavigationBase { this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate; } + private _setItemImages() { + if (this._selectedItemColor || this._unSelectedItemColor) { + if (this.tabStrip && this.tabStrip.items) { + this.tabStrip.items.forEach(item => { + if (this._unSelectedItemColor && item.nativeView) { + item.nativeView.image = this.getIcon(item, this._unSelectedItemColor); + item.nativeView.tintColor = this._unSelectedItemColor; + } + if (this._selectedItemColor && item.nativeView) { + item.nativeView.selectedImage = this.getIcon(item, this._selectedItemColor); + item.nativeView.tintColor = this._selectedItemColor; + } + }); + } + } + } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { let image: UIImage; let title: string; @@ -569,7 +609,7 @@ export class BottomNavigation extends TabNavigationBase { } } - private getIcon(tabStripItem: TabStripItem): UIImage { + private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage { // Image and Label children of TabStripItem // take priority over its `iconSource` and `title` properties const iconSource = tabStripItem.image && tabStripItem.image.src; @@ -579,7 +619,9 @@ export class BottomNavigation extends TabNavigationBase { const target = tabStripItem.image; const font = target.style.fontInternal; - const color = target.style.color; + if (!color) { + color = target.style.color; + } const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";"); let isFontIcon = false; @@ -688,33 +730,39 @@ export class BottomNavigation extends TabNavigationBase { this.setViewControllers(this.items); selectedIndexProperty.coerce(this); } -} -function setViewTextAttributes(item: UITabBarItem, view: View, tabBar: UITabBar): any { - if (!view) { - return null; - } + private setViewTextAttributes(item: UITabBarItem, view: View): any { + if (!view) { + return null; + } - const defaultTabItemFontSize = 10; - const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; - const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); - const tabItemTextColor = view.style.color; - const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; - let attributes: any = { [NSFontAttributeName]: font }; - if (textColor) { - attributes[UITextAttributeTextColor] = textColor; - attributes[NSForegroundColorAttributeName] = textColor; - } + const defaultTabItemFontSize = 10; + const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; + const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); + const tabItemTextColor = view.style.color; + const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; + let attributes: any = { [NSFontAttributeName]: font }; - item.setTitleTextAttributesForState(attributes, UIControlState.Selected); - item.setTitleTextAttributesForState(attributes, UIControlState.Normal); + if (!this._selectedItemColor && !this._unSelectedItemColor) { + if (textColor) { + attributes[UITextAttributeTextColor] = textColor; + attributes[NSForegroundColorAttributeName] = textColor; + } + } else { + this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor && this._unSelectedItemColor.ios; + this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor && this._selectedItemColor.ios; + } + + item.setTitleTextAttributesForState(attributes, UIControlState.Selected); + item.setTitleTextAttributesForState(attributes, UIControlState.Normal); - // there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip - // https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor - // to fix the above issue we are applying the selected fix only for the case, when there is no background set - // in that case we have the following known issue: - // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items - if (!tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) { - tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor]; + // there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip + // https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor + // to fix the above issue we are applying the selected fix only for the case, when there is no background set + // in that case we have the following known issue: + // // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items + if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) { + this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor]; + } } } \ No newline at end of file diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts index 7440e23e69..f418caeb81 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts @@ -4,7 +4,7 @@ */ /** */ import { - View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData + View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color } from "../../core/view"; import { TabStrip } from "../tab-strip"; import { TabStripItem } from "../tab-strip-item"; @@ -150,6 +150,30 @@ export class TabNavigationBase extends View { */ setTabBarHighlightColor(value: any) + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + getTabBarSelectedItemColor(): any + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + setTabBarSelectedItemColor(value: any) + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + getTabBarUnSelectedItemColor(): any + + /** + * @private + * Method is intended to be overridden by inheritors and used as "protected" + */ + setTabBarUnSelectedItemColor(value: any) + /** * @private * Method is intended to be overridden by inheritors and used as "protected" diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts index 011d283efb..c053ddc666 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts @@ -150,6 +150,22 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti // overridden by inheritors } + public getTabBarSelectedItemColor(): any { + // overridden by inheritors + } + + public setTabBarSelectedItemColor(value: any) { + // overridden by inheritors + } + + public getTabBarUnSelectedItemColor(): any { + // overridden by inheritors + } + + public setTabBarUnSelectedItemColor(value: any) { + // overridden by inheritors + } + public getTabBarColor(): any { // overridden by inheritors return null; diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts index 6df5c81cdb..b21d31f979 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.d.ts @@ -32,6 +32,16 @@ export class TabStrip extends View { */ highlightColor: Color; + /** + * Gets or sets the color of the selected item in the tab strip. + */ + selectedItemColor: Color; + + /** + * Gets or sets the color of the non-selected items in the tab strip. + */ + unSelectedItemColor: Color; + /** * @private */ @@ -73,3 +83,5 @@ export interface TabStripItemEventData extends EventData { export const iosIconRenderingModeProperty: Property; export const isIconSizeFixedProperty: Property; +export const selectedItemColorProperty: Property; +export const unSelectedItemColorProperty: Property; \ No newline at end of file diff --git a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts index 2b70e5439d..5505a71dec 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-strip/tab-strip.ts @@ -17,6 +17,8 @@ export const traceCategory = "TabView"; // Place this on top because the webpack ts-loader doesn't work when export // is after reference export const highlightColorProperty = new Property({ name: "highlightColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +export const selectedItemColorProperty = new Property({ name: "selectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); +export const unSelectedItemColorProperty = new Property({ name: "unSelectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) }); @CSSType("TabStrip") export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder { @@ -25,6 +27,8 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu public isIconSizeFixed: boolean; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; public highlightColor: Color; + public selectedItemColor: Color; + public unSelectedItemColor: Color; public _hasImage: boolean; public _hasTitle: boolean; @@ -127,6 +131,28 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu return parent && parent.setTabBarHighlightColor(value); } + + [selectedItemColorProperty.getDefault](): Color { + const parent = this.parent; + + return parent && parent.getTabBarSelectedItemColor(); + } + [selectedItemColorProperty.setNative](value: Color) { + const parent = this.parent; + + return parent && parent.setTabBarSelectedItemColor(value); + } + + [unSelectedItemColorProperty.getDefault](): Color { + const parent = this.parent; + + return parent && parent.getTabBarUnSelectedItemColor(); + } + [unSelectedItemColorProperty.setNative](value: Color) { + const parent = this.parent; + + return parent && parent.setTabBarUnSelectedItemColor(value); + } } export interface TabStrip { @@ -150,3 +176,5 @@ export const isIconSizeFixedProperty = new Property({ isIconSizeFixedProperty.register(TabStrip); highlightColorProperty.register(TabStrip); +selectedItemColorProperty.register(TabStrip); +unSelectedItemColorProperty.register(TabStrip); From 0069521fcc80fd08ba1e7c550fb11c85b5fe11e7 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 15:29:53 +0200 Subject: [PATCH 03/22] feat(tabs): new property implementation --- nativescript-core/ui/tabs/tabs.ios.ts | 113 +++++++++++++++++++------- 1 file changed, 82 insertions(+), 31 deletions(-) diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index c8ce759d4e..8098b3b5e8 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -462,6 +462,9 @@ export class Tabs extends TabsBase { private _backgroundIndicatorColor: UIColor; public _defaultItemBackgroundColor: UIColor; + private _selectedItemColor: Color; + private _unSelectedItemColor: Color; + constructor() { super(); @@ -702,7 +705,7 @@ export class Tabs extends TabsBase { const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); - setViewTextAttributes(this._ios.tabBar, tabStripItem.label, i === this.selectedIndex); + this.setViewTextAttributes(tabStripItem.label, i === this.selectedIndex); controller.tabBarItem = tabBarItem; tabStripItem._index = i; @@ -714,6 +717,8 @@ export class Tabs extends TabsBase { viewControllers.push(controller); }); + this._setItemImages(); + this.viewControllers = viewControllers; this.tabBarItems = tabBarItems; @@ -728,6 +733,23 @@ export class Tabs extends TabsBase { } } + private _setItemImages() { + if (this._selectedItemColor || this._unSelectedItemColor) { + if (this.tabStrip && this.tabStrip.items) { + this.tabStrip.items.forEach(item => { + if (this._unSelectedItemColor && item.nativeView) { + item.nativeView.image = this.getIcon(item, this._unSelectedItemColor); + } + if (this._selectedItemColor && item.nativeView) { + if (this.selectedIndex === item._index) { + item.nativeView.image = this.getIcon(item, this._selectedItemColor); + } + } + }); + } + } + } + private createTabBarItem(item: TabStripItem, index: number): UITabBarItem { let image: UIImage; let title: string; @@ -764,11 +786,10 @@ export class Tabs extends TabsBase { } private getIconRenderingMode(): UIImageRenderingMode { - // MDCTabBar doesn't work with rendering mode AlwaysTemplate - return UIImageRenderingMode.AlwaysOriginal; + return UIImageRenderingMode.AlwaysTemplate; } - private getIcon(tabStripItem: TabStripItem): UIImage { + private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage { // Image and Label children of TabStripItem // take priority over its `iconSource` and `title` properties const iconSource = tabStripItem.image && tabStripItem.image.src; @@ -778,7 +799,9 @@ export class Tabs extends TabsBase { const target = tabStripItem.image; const font = target.style.fontInternal; - const color = target.style.color; + if (!color) { + color = target.style.color; + } const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";"); let isFontIcon = false; @@ -800,16 +823,13 @@ export class Tabs extends TabsBase { image = this.getFixedSizeIcon(image); } - let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal; + let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysTemplate; if (!isFontIcon) { renderingMode = this.getIconRenderingMode(); } const originalRenderedImage = image.imageWithRenderingMode(renderingMode); this._iconsCache[iconTag] = originalRenderedImage; image = originalRenderedImage; - } else { - // TODO - // traceMissingIcon(iconSource); } } @@ -890,18 +910,24 @@ export class Tabs extends TabsBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - setViewTextAttributes(this._ios.tabBar, tabStripItem.label); + this.setViewTextAttributes(tabStripItem.label); } public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - const image = this.getIcon(tabStripItem); + let image: UIImage; + + if (!this._unSelectedItemColor && !this._selectedItemColor) { + image = this.getIcon(tabStripItem); + } else { + const isSelected = this.isSelectedAndHightlightedItem(tabStripItem); + image = this.getIcon(tabStripItem, isSelected ? this._selectedItemColor : this._unSelectedItemColor); + } tabStripItem.nativeView.image = image; - tabStripItem.nativeView.selectedImage = image; } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { - setViewTextAttributes(this._ios.tabBar, tabStripItem.label); + this.setViewTextAttributes(tabStripItem.label); } public getTabBarFontInternal(): UIFont { @@ -958,6 +984,22 @@ export class Tabs extends TabsBase { this._ios.tabBar.tintColor = nativeColor; } + public getTabBarSelectedItemColor(): Color { + return this._selectedItemColor; + } + + public setTabBarSelectedItemColor(value: Color) { + this._selectedItemColor = value; + } + + public getTabBarUnSelectedItemColor(): Color { + return this._unSelectedItemColor; + } + + public setTabBarUnSelectedItemColor(value: Color) { + this._unSelectedItemColor = value; + } + private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) { if (view instanceof Frame) { operation(view); @@ -1082,28 +1124,37 @@ export class Tabs extends TabsBase { this.viewController.tabBar.alignment = alignment; } -} -function setViewTextAttributes(tabBar: MDCTabBar, view: View, setSelected: boolean = false): any { - if (!view) { - return null; - } + private setViewTextAttributes(view: View, setSelected: boolean = false): any { + if (!view) { + return null; + } - const defaultTabItemFontSize = 10; - const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; - const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); + const defaultTabItemFontSize = 10; + const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize; + const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize)); + + this.viewController.tabBar.unselectedItemTitleFont = font; + this.viewController.tabBar.selectedItemTitleFont = font; + + const tabItemTextColor = view.style.color; + const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; + + if (textColor) { + this.viewController.tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Normal); + this.viewController.tabBar.setImageTintColorForState(textColor, MDCTabBarItemState.Normal); - tabBar.unselectedItemTitleFont = font; - tabBar.selectedItemTitleFont = font; + if (setSelected) { + this.viewController.tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Selected); + this.viewController.tabBar.setImageTintColorForState(textColor, MDCTabBarItemState.Selected); + } + } - const tabItemTextColor = view.style.color; - const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; - if (textColor) { - tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Normal); - if (setSelected) { - tabBar.setTitleColorForState(textColor, MDCTabBarItemState.Selected); + if (this._selectedItemColor) { + this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios; + } + if (this._unSelectedItemColor) { + this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios; } } - - tabBar.inkColor = UIColor.clearColor; } \ No newline at end of file From 3a27fc36ef61f5656ffd6a4977b05e6b8c589478 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 17:01:13 +0200 Subject: [PATCH 04/22] feat: new feature implementation in android Implemented selectedItemColor and unSelectedItemColor properties on TabStrip --- .../bottom-navigation.android.ts | 52 +++++++++++++++---- .../bottom-navigation.ios.ts | 2 +- nativescript-core/ui/tabs/tabs.android.ts | 46 +++++++++++++--- nativescript-core/ui/tabs/tabs.ios.ts | 10 ++-- 4 files changed, 84 insertions(+), 26 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index b59f0414bc..093888465b 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -166,8 +166,6 @@ function initializeNativeClasses() { if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) { tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent); } - - owner.selectedIndex = position; } public onTap(position: number): boolean { @@ -249,6 +247,8 @@ export class BottomNavigation extends TabNavigationBase { private _attachedToWindow = false; public _originalBackground: any; private _textTransform: TextTransform = "none"; + private _selectedItemColor: Color; + private _unSelectedItemColor: Color; constructor() { super(); @@ -521,6 +521,7 @@ export class BottomNavigation extends TabNavigationBase { } this._currentFragment = fragment; + this.selectedIndex = position; const tabItems = this.items; const tabItem = tabItems ? tabItems[position] : null; @@ -597,10 +598,11 @@ export class BottomNavigation extends TabNavigationBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - const color = titleLabel.style.color; - if (color) { - tabItemSpec.color = color.android; + let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + if (!color) { + color = titleLabel.style.color; } + tabItemSpec.color = color && color.android; // FONT const fontInternal = titleLabel.style.fontInternal; @@ -612,7 +614,7 @@ export class BottomNavigation extends TabNavigationBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const iconInfo = this.getIconInfo(tabStripItem); + const iconInfo = this.getIconInfo(tabStripItem, color); if (iconInfo) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. @@ -629,7 +631,7 @@ export class BottomNavigation extends TabNavigationBase { return tabItemSpec; } - private getOriginalIcon(tabStripItem: TabStripItem): android.graphics.Bitmap { + private getOriginalIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.Bitmap { const iconSource = tabStripItem.image && tabStripItem.image.src; if (!iconSource) { return null; @@ -640,7 +642,9 @@ export class BottomNavigation extends TabNavigationBase { const fontIconCode = iconSource.split("//")[1]; const target = tabStripItem.image ? tabStripItem.image : tabStripItem; const font = target.style.fontInternal; - const color = target.style.color; + if (!color) { + color = target.style.color; + } is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color); } else { is = ImageSource.fromFileOrResourceSync(iconSource); @@ -666,8 +670,8 @@ export class BottomNavigation extends TabNavigationBase { return new IconInfo(); } - private getIconInfo(tabStripItem: TabStripItem): IconInfo { - let originalIcon = this.getOriginalIcon(tabStripItem); + private getIconInfo(tabStripItem: TabStripItem, color?: Color): IconInfo { + let originalIcon = this.getOriginalIcon(tabStripItem, color); return this.getDrawableInfo(originalIcon); } @@ -702,6 +706,22 @@ export class BottomNavigation extends TabNavigationBase { } } + public getTabBarSelectedItemColor(): Color { + return this._selectedItemColor; + } + + public setTabBarSelectedItemColor(value: Color) { + this._selectedItemColor = value; + } + + public getTabBarUnSelectedItemColor(): Color { + return this._unSelectedItemColor; + } + + public setTabBarUnSelectedItemColor(value: Color) { + this._unSelectedItemColor = value; + } + public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { // TODO: Should figure out a way to do it directly with the the nativeView const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); @@ -717,6 +737,14 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style + const isSelected = (tabStripItem._index === this.selectedIndex); + if (isSelected) { + value = this._selectedItemColor || value; + } else { + value = this._unSelectedItemColor || value; + } + if (typeof value === "number") { tabStripItem.nativeViewProtected.setTextColor(value); } else { @@ -728,7 +756,9 @@ export class BottomNavigation extends TabNavigationBase { const index = tabStripItem._index; const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index); const imgView = tabBarItem.getChildAt(0); - const drawableInfo = this.getIconInfo(tabStripItem); + + const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + const drawableInfo = this.getIconInfo(tabStripItem, color); imgView.setImageDrawable(drawableInfo.drawable); } diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index d19f2b19a6..ec77d262f7 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -257,7 +257,6 @@ export class BottomNavigation extends TabNavigationBase { private _delegate: UITabBarControllerDelegateImpl; private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl; private _iconsCache = {}; - private _selectedItemColor: Color; private _unSelectedItemColor: Color; @@ -743,6 +742,7 @@ export class BottomNavigation extends TabNavigationBase { const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null; let attributes: any = { [NSFontAttributeName]: font }; + // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style if (!this._selectedItemColor && !this._unSelectedItemColor) { if (textColor) { attributes[UITextAttributeTextColor] = textColor; diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index afdbab5275..7db51d0080 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -374,6 +374,8 @@ export class Tabs extends TabsBase { private _androidViewId: number = -1; public _originalBackground: any; private _textTransform: TextTransform = "uppercase"; + private _selectedItemColor: Color; + private _unSelectedItemColor: Color; constructor() { super(); @@ -667,11 +669,13 @@ export class Tabs extends TabsBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - const color = nestedLabel.style.color; - if (color) { - tabItemSpec.color = color.android; + let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + if (!color) { + color = nestedLabel.style.color; } + tabItemSpec.color = color && color.android; + // FONT const fontInternal = nestedLabel.style.fontInternal; if (fontInternal) { @@ -682,7 +686,7 @@ export class Tabs extends TabsBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const icon = this.getIcon(tabStripItem); + const icon = this.getIcon(tabStripItem, color); if (icon) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. @@ -698,7 +702,7 @@ export class Tabs extends TabsBase { return tabItemSpec; } - private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable { + private getIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.drawable.BitmapDrawable { const iconSource = tabStripItem.image && tabStripItem.image.src; if (!iconSource) { return null; @@ -709,7 +713,9 @@ export class Tabs extends TabsBase { const fontIconCode = iconSource.split("//")[1]; const target = tabStripItem.image ? tabStripItem.image : tabStripItem; const font = target.style.fontInternal; - const color = target.style.color; + if (!color) { + color = target.style.color; + } is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color); } else { is = ImageSource.fromFileOrResourceSync(iconSource); @@ -801,6 +807,22 @@ export class Tabs extends TabsBase { this._tabsBar.setSelectedIndicatorColors([color]); } + public getTabBarSelectedItemColor(): Color { + return this._selectedItemColor; + } + + public setTabBarSelectedItemColor(value: Color) { + this._selectedItemColor = value; + } + + public getTabBarUnSelectedItemColor(): Color { + return this._unSelectedItemColor; + } + + public setTabBarUnSelectedItemColor(value: Color) { + this._unSelectedItemColor = value; + } + public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void { // TODO: Should figure out a way to do it directly with the the nativeView const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem); @@ -816,6 +838,14 @@ export class Tabs extends TabsBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style + const isSelected = (tabStripItem._index === this.selectedIndex); + if (isSelected) { + value = this._selectedItemColor || value; + } else { + value = this._unSelectedItemColor || value; + } + if (typeof value === "number") { tabStripItem.nativeViewProtected.setTextColor(value); } else { @@ -827,7 +857,9 @@ export class Tabs extends TabsBase { const index = tabStripItem._index; const tabBarItem = this._tabsBar.getViewForItemAt(index); const imgView = tabBarItem.getChildAt(0); - const drawable = this.getIcon(tabStripItem); + + const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + const drawable = this.getIcon(tabStripItem, color); imgView.setImageDrawable(drawable); } diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index 8098b3b5e8..64b2ce3b35 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -461,7 +461,6 @@ export class Tabs extends TabsBase { private _iconsCache = {}; private _backgroundIndicatorColor: UIColor; public _defaultItemBackgroundColor: UIColor; - private _selectedItemColor: Color; private _unSelectedItemColor: Color; @@ -916,12 +915,9 @@ export class Tabs extends TabsBase { public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { let image: UIImage; - if (!this._unSelectedItemColor && !this._selectedItemColor) { - image = this.getIcon(tabStripItem); - } else { - const isSelected = this.isSelectedAndHightlightedItem(tabStripItem); - image = this.getIcon(tabStripItem, isSelected ? this._selectedItemColor : this._unSelectedItemColor); - } + // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style + const tabStripColor = (this.selectedIndex === tabStripItem._index) ? this._selectedItemColor : this._unSelectedItemColor; + image = this.getIcon(tabStripItem, tabStripColor); tabStripItem.nativeView.image = image; } From 47516391648bce7444375ce89fdead6fcb0922b0 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 17:12:54 +0200 Subject: [PATCH 05/22] chore: added some comments --- nativescript-core/ui/tabs/tabs.ios.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index 64b2ce3b35..461b154e03 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -881,6 +881,11 @@ export class Tabs extends TabsBase { } private isSelectedAndHightlightedItem(tabStripItem: TabStripItem): boolean { + // to find out whether the current tab strip item is active (has style with :active selector applied) + // we need to check whether its _visualState is equal to "highlighted" as when changing tabs + // we first go through setTabBarItemBackgroundColor thice, once before setting the "highlighted" state + // and once after that, but if the "highlighted" state is not set we cannot get the backgroundColor + // set using :active selector return (tabStripItem._index === this.selectedIndex && tabStripItem["_visualState"] === "highlighted"); } @@ -892,6 +897,14 @@ export class Tabs extends TabsBase { let newColor = value instanceof Color ? value.ios : value; const itemSelectedAndHighlighted = this.isSelectedAndHightlightedItem(tabStripItem); + // As we cannot implement selected item background color in Tabs we are using the Indicator for this + // To be able to detect that there are two different background colors (one for selected and one for not selected item) + // we are checking whether the current item is not selected and higlighted and we store the value of its + // background color to _defaultItemBackgroundColor and later if we need to process a selected and highlighted item + // we are comparing it's backgroun color to the default one and if there's a difference + // we are changing the selectionIndicatorTemplate from underline to the whole item + // in that mode we are not able to show the indicator as it is used for the background of the selected item + if (!this._defaultItemBackgroundColor && !itemSelectedAndHighlighted) { this._defaultItemBackgroundColor = newColor; } From 4711d3618f28aa01a68bc6a2b8978571b0c708d7 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 17:19:34 +0200 Subject: [PATCH 06/22] chore: change method return type --- api-reports/NativeScript.api.md | 12 ++++++++++++ .../tab-navigation-base/tab-navigation-base.d.ts | 8 ++++---- .../tab-navigation-base/tab-navigation-base.ts | 12 +++++++----- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/api-reports/NativeScript.api.md b/api-reports/NativeScript.api.md index 834f4fa39b..82d7abcdcf 100644 --- a/api-reports/NativeScript.api.md +++ b/api-reports/NativeScript.api.md @@ -2225,8 +2225,12 @@ export class TabNavigationBase extends View { getTabBarItemTextTransform(tabStripItem: TabStripItem): any + getTabBarSelectedItemColor(): Color + getTabBarTextTransform(): any + getTabBarUnSelectedItemColor(): Color + ios: any /* UITabBarController */; items: Array; @@ -2266,8 +2270,12 @@ export class TabNavigationBase extends View { setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any + setTabBarSelectedItemColor(value: Color) + setTabBarTextTransform(value: any): void + setTabBarUnSelectedItemColor(value: Color) + tabStrip: TabStrip; } @@ -2320,6 +2328,10 @@ export class TabStrip extends View { on(eventNames: string, callback: (data: EventData) => void, thisArg?: any); on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any); + + selectedItemColor: Color; + + unSelectedItemColor: Color; } // @public diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts index f418caeb81..8d623e7d0a 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts @@ -154,25 +154,25 @@ export class TabNavigationBase extends View { * @private * Method is intended to be overridden by inheritors and used as "protected" */ - getTabBarSelectedItemColor(): any + getTabBarSelectedItemColor(): Color /** * @private * Method is intended to be overridden by inheritors and used as "protected" */ - setTabBarSelectedItemColor(value: any) + setTabBarSelectedItemColor(value: Color) /** * @private * Method is intended to be overridden by inheritors and used as "protected" */ - getTabBarUnSelectedItemColor(): any + getTabBarUnSelectedItemColor(): Color /** * @private * Method is intended to be overridden by inheritors and used as "protected" */ - setTabBarUnSelectedItemColor(value: any) + setTabBarUnSelectedItemColor(value: Color) /** * @private diff --git a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts index c053ddc666..09d8b2dd20 100644 --- a/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts +++ b/nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts @@ -1,7 +1,7 @@ // Types import { TabNavigationBase as TabNavigationBaseDefinition, SelectedIndexChangedEventData } from "."; import { TabStripItem } from "../tab-strip-item"; -import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder, EventData } from "../../core/view"; +import { ViewBase, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color } from "../../core/view"; // Requires import { View, Property, CoercibleProperty, isIOS } from "../../core/view"; @@ -150,19 +150,21 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti // overridden by inheritors } - public getTabBarSelectedItemColor(): any { + public getTabBarSelectedItemColor(): Color { // overridden by inheritors + return null; } - public setTabBarSelectedItemColor(value: any) { + public setTabBarSelectedItemColor(value: Color) { // overridden by inheritors } - public getTabBarUnSelectedItemColor(): any { + public getTabBarUnSelectedItemColor(): Color { // overridden by inheritors + return null; } - public setTabBarUnSelectedItemColor(value: any) { + public setTabBarUnSelectedItemColor(value: Color) { // overridden by inheritors } From 1ae0abc4f66c8e5025639cd58cf0db2201eff302 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 18:56:35 +0200 Subject: [PATCH 07/22] fix: setting icon color --- .../ui/bottom-navigation/bottom-navigation.android.ts | 8 +++----- nativescript-core/ui/tabs/tabs.android.ts | 9 +++------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 093888465b..985452577f 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -598,10 +598,8 @@ export class BottomNavigation extends TabNavigationBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; - if (!color) { - color = titleLabel.style.color; - } + let rowColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + const color = rowColor || titleLabel.style.color; tabItemSpec.color = color && color.android; // FONT @@ -614,7 +612,7 @@ export class BottomNavigation extends TabNavigationBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const iconInfo = this.getIconInfo(tabStripItem, color); + const iconInfo = this.getIconInfo(tabStripItem, rowColor); if (iconInfo) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 7db51d0080..9e62aa5432 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -669,11 +669,8 @@ export class Tabs extends TabsBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; - if (!color) { - color = nestedLabel.style.color; - } - + let rowColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + const color = rowColor || nestedLabel.style.color; tabItemSpec.color = color && color.android; // FONT @@ -686,7 +683,7 @@ export class Tabs extends TabsBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const icon = this.getIcon(tabStripItem, color); + const icon = this.getIcon(tabStripItem, rowColor); if (icon) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. From aaeb3edb089566c908420e16df63730705ff86b7 Mon Sep 17 00:00:00 2001 From: Vasko Date: Thu, 12 Mar 2020 19:20:14 +0200 Subject: [PATCH 08/22] fix: rendering mode setting --- nativescript-core/ui/tabs/tabs.ios.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index 461b154e03..cb51cae1d6 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -785,7 +785,17 @@ export class Tabs extends TabsBase { } private getIconRenderingMode(): UIImageRenderingMode { - return UIImageRenderingMode.AlwaysTemplate; + switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) { + case "alwaysOriginal": + return UIImageRenderingMode.AlwaysOriginal; + case "alwaysTemplate": + return UIImageRenderingMode.AlwaysTemplate; + case "automatic": + default: + const hasItemColor = this._selectedItemColor || this._unSelectedItemColor; + + return hasItemColor ? UIImageRenderingMode.AlwaysTemplate : UIImageRenderingMode.AlwaysOriginal; + } } private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage { @@ -822,7 +832,7 @@ export class Tabs extends TabsBase { image = this.getFixedSizeIcon(image); } - let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysTemplate; + let renderingMode: UIImageRenderingMode = UIImageRenderingMode.Automatic; if (!isFontIcon) { renderingMode = this.getIconRenderingMode(); } From 96b7b109368d6c46ab8ad168fb6e6d20657bee4e Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 10:32:21 +0200 Subject: [PATCH 09/22] chore: rename variable --- .../ui/bottom-navigation/bottom-navigation.android.ts | 6 +++--- nativescript-core/ui/tabs/tabs.android.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 985452577f..36c6922e06 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -598,8 +598,8 @@ export class BottomNavigation extends TabNavigationBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - let rowColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; - const color = rowColor || titleLabel.style.color; + let itemColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + const color = itemColor || titleLabel.style.color; tabItemSpec.color = color && color.android; // FONT @@ -612,7 +612,7 @@ export class BottomNavigation extends TabNavigationBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const iconInfo = this.getIconInfo(tabStripItem, rowColor); + const iconInfo = this.getIconInfo(tabStripItem, itemColor); if (iconInfo) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 9e62aa5432..e7d0a49522 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -669,8 +669,8 @@ export class Tabs extends TabsBase { tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor(); // COLOR - let rowColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; - const color = rowColor || nestedLabel.style.color; + let itemColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor; + const color = itemColor || nestedLabel.style.color; tabItemSpec.color = color && color.android; // FONT @@ -683,7 +683,7 @@ export class Tabs extends TabsBase { // ICON const iconSource = tabStripItem.image && tabStripItem.image.src; if (iconSource) { - const icon = this.getIcon(tabStripItem, rowColor); + const icon = this.getIcon(tabStripItem, itemColor); if (icon) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. From d0aea1194e183436a1ba8a2d3f1d0fadcfb42b61 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 18:33:20 +0200 Subject: [PATCH 10/22] chore: fixed a typo --- tns-core-modules-widgets/android/widgets/build.gradle | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tns-core-modules-widgets/android/widgets/build.gradle b/tns-core-modules-widgets/android/widgets/build.gradle index ae8c43767a..64d805514c 100644 --- a/tns-core-modules-widgets/android/widgets/build.gradle +++ b/tns-core-modules-widgets/android/widgets/build.gradle @@ -71,9 +71,9 @@ android { dependencies { implementation fileTree(include: ['*.jar'], dir: 'libs') - + if(project.hasProperty("useAndroidX")) { - println 'Using androix' + println 'Using androidx' def androidxVersion = computeAndroidXVersion() implementation 'androidx.viewpager:viewpager:' + androidxVersion implementation 'androidx.fragment:fragment:' + androidxVersion From 6d129eca3e6c3ab2d9de144769b38a1a48b7314f Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 18:34:37 +0200 Subject: [PATCH 11/22] chore: updated log in build gradle --- tns-core-modules-widgets/android/widgets/build.gradle | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tns-core-modules-widgets/android/widgets/build.gradle b/tns-core-modules-widgets/android/widgets/build.gradle index 64d805514c..f7fcfcde0b 100644 --- a/tns-core-modules-widgets/android/widgets/build.gradle +++ b/tns-core-modules-widgets/android/widgets/build.gradle @@ -73,7 +73,7 @@ dependencies { implementation fileTree(include: ['*.jar'], dir: 'libs') if(project.hasProperty("useAndroidX")) { - println 'Using androidx' + println 'Using android X' def androidxVersion = computeAndroidXVersion() implementation 'androidx.viewpager:viewpager:' + androidxVersion implementation 'androidx.fragment:fragment:' + androidxVersion From d03d91d468e95c4e3838cd5a173ae48b7d9b0898 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 18:35:38 +0200 Subject: [PATCH 12/22] fix: item color setting in android --- .../bottom-navigation.android.ts | 58 +++++++++++++------ nativescript-core/ui/tabs/tabs.android.ts | 58 +++++++++++++------ .../widgets/BottomNavigationBar.java | 3 + .../org/nativescript/widgets/TabsBar.java | 27 +++++---- 4 files changed, 98 insertions(+), 48 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index fc030dd68a..46a0fbd2e8 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -169,10 +169,12 @@ function initializeNativeClasses() { if (position >= 0 && tabStripItems && tabStripItems[position]) { tabStripItems[position]._emit(TabStripItem.selectEvent); + owner._setItemColor(tabStripItems[position]); } if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) { tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent); + owner._setItemColor(tabStripItems[prevPosition]); } } @@ -742,31 +744,51 @@ export class BottomNavigation extends TabNavigationBase { this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } - public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { - // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style - const isSelected = (tabStripItem._index === this.selectedIndex); - if (isSelected) { - value = this._selectedItemColor || value; - } else { - value = this._unSelectedItemColor || value; + public _setItemColor(tabStripItem: TabStripItem) { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (!itemColor) { + return; } - if (typeof value === "number") { - tabStripItem.nativeViewProtected.setTextColor(value); - } else { - tabStripItem.nativeViewProtected.setTextColor(value.android); - } + // set label color + tabStripItem.nativeViewProtected.setTextColor(itemColor.android); + + // set icon color + this._setIconColor(tabStripItem, itemColor); } - public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = tabStripItem._index; - const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index); - const imgView = tabBarItem.getChildAt(0); + private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index); - const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; const drawableInfo = this.getIconInfo(tabStripItem, color); - + const imgView = tabBarItem.getChildAt(0); imgView.setImageDrawable(drawableInfo.drawable); + if (color) { + imgView.setColorFilter(color.android); + } + } + + public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + const androidColor = value instanceof Color ? value.android : value; + tabStripItem.nativeViewProtected.setTextColor(androidColor); + } + + public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + this._setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index e7d0a49522..53a5f6b577 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -300,10 +300,12 @@ function initializeNativeClasses() { if (position >= 0 && tabStripItems && tabStripItems[position]) { tabStripItems[position]._emit(TabStripItem.selectEvent); + owner._setItemColor(tabStripItems[position]); } if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) { tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent); + owner._setItemColor(tabStripItems[prevPosition]); } } @@ -834,31 +836,51 @@ export class Tabs extends TabsBase { this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec); } - public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { - // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style - const isSelected = (tabStripItem._index === this.selectedIndex); - if (isSelected) { - value = this._selectedItemColor || value; - } else { - value = this._unSelectedItemColor || value; + public _setItemColor(tabStripItem: TabStripItem) { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (!itemColor) { + return; } - if (typeof value === "number") { - tabStripItem.nativeViewProtected.setTextColor(value); - } else { - tabStripItem.nativeViewProtected.setTextColor(value.android); - } + // set label color + tabStripItem.nativeViewProtected.setTextColor(itemColor.android); + + // set icon color + this._setIconColor(tabStripItem, itemColor); } - public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { - const index = tabStripItem._index; - const tabBarItem = this._tabsBar.getViewForItemAt(index); - const imgView = tabBarItem.getChildAt(0); + private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + const tabBarItem = this._tabsBar.getViewForItemAt(tabStripItem._index); - const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; const drawable = this.getIcon(tabStripItem, color); - + const imgView = tabBarItem.getChildAt(0); imgView.setImageDrawable(drawable); + if (color) { + imgView.setColorFilter(color.android); + } + } + + public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + const androidColor = value instanceof Color ? value.android : value; + tabStripItem.nativeViewProtected.setTextColor(androidColor); + } + + public setTabBarIconColor(tabStripItem: TabStripItem, value: number | Color): void { + const itemColor = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor; + if (itemColor) { + // the itemColor is set through the selectedItemColor and unSelectedItemColor properties + // so it does not respect the css color + return; + } + + this._setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java index 13760a6838..97534cd424 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java @@ -198,6 +198,9 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); + if (tabItem.color != 0) { + imgView.setColorFilter(tabItem.color); + } } else { imgView.setVisibility(GONE); } diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java index 20dfdfd0c8..b5bf39ab6c 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java @@ -160,7 +160,7 @@ public float getTabTextFontSize(){ * {@link TabsBar} you are required to set any * {@link ViewPager.OnPageChangeListener} through this method. This is so * that the layout can update it's scroll position correctly. - * + * * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) */ public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { @@ -196,25 +196,25 @@ public void updateItemAt(int position, TabItemSpec tabItem) { TextView textView = (TextView)ll.getChildAt(1); this.setupItem(ll, textView, imgView, tabItem); } - + /** * Gets the TextView for tab item at index */ public TextView getTextViewForItemAt(int index){ LinearLayout ll = this.getViewForItemAt(index); - return (ll != null) ? (TextView)ll.getChildAt(1) : null; + return (ll != null) ? (TextView)ll.getChildAt(1) : null; } - + /** * Gets the LinearLayout container for tab item at index */ public LinearLayout getViewForItemAt(int index){ LinearLayout result = null; - + if(this.mTabStrip.getChildCount() > index){ result = (LinearLayout)this.mTabStrip.getChildAt(index); } - + return result; } @@ -262,16 +262,19 @@ protected View createDefaultTabView(Context context, TabItemSpec tabItem) { ll.addView(textView); return ll; } - + private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, TabItemSpec tabItem){ float density = getResources().getDisplayMetrics().density; - + if (tabItem.iconId != 0) { imgView.setImageResource(tabItem.iconId); imgView.setVisibility(VISIBLE); } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); + if (tabItem.color != 0) { + imgView.setColorFilter(tabItem.color); + } } else { imgView.setVisibility(GONE); } @@ -283,14 +286,14 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab if (tabItem.typeFace != null) { textView.setTypeface(tabItem.typeFace); } - + if (tabItem.fontSize != 0) { textView.setTextSize(tabItem.fontSize); } - + if (tabItem.color != 0) { textView.setTextColor(tabItem.color); - mTabStrip.setShouldUpdateTabsTextColor(false); + mTabStrip.setShouldUpdateTabsTextColor(false); } } else { textView.setVisibility(GONE); @@ -305,7 +308,7 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab } else { ll.setMinimumHeight((int) (SMALL_MIN_HEIGHT * density)); } - + if (mDistributeEvenly) { LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams(); lp.width = 0; From 13fe553633bab1cfc99109a906168b7753e168b8 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:20:35 +0200 Subject: [PATCH 13/22] fix: tab styling when no css aplied --- nativescript-core/ui/tabs/tabs.ios.ts | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/nativescript-core/ui/tabs/tabs.ios.ts b/nativescript-core/ui/tabs/tabs.ios.ts index cb51cae1d6..b5af27d00d 100644 --- a/nativescript-core/ui/tabs/tabs.ios.ts +++ b/nativescript-core/ui/tabs/tabs.ios.ts @@ -550,10 +550,12 @@ export class Tabs extends TabsBase { if (tabStripItems) { if (tabStripItems[newIndex]) { tabStripItems[newIndex]._emit(TabStripItem.selectEvent); + this.setIconColor(tabStripItems[newIndex]); } if (tabStripItems[oldIndex]) { tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent); + this.setIconColor(tabStripItems[oldIndex]); } } @@ -716,7 +718,7 @@ export class Tabs extends TabsBase { viewControllers.push(controller); }); - this._setItemImages(); + this.setItemImages(); this.viewControllers = viewControllers; this.tabBarItems = tabBarItems; @@ -732,7 +734,7 @@ export class Tabs extends TabsBase { } } - private _setItemImages() { + private setItemImages() { if (this._selectedItemColor || this._unSelectedItemColor) { if (this.tabStrip && this.tabStrip.items) { this.tabStrip.items.forEach(item => { @@ -935,7 +937,22 @@ export class Tabs extends TabsBase { this.setViewTextAttributes(tabStripItem.label); } - public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { + private setItemColors(): void { + if (this._selectedItemColor) { + this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios; + } + if (this._unSelectedItemColor) { + this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios; + } + } + + private setIconColor(tabStripItem: TabStripItem, forceReload: boolean = false): void { + // if there is no change in the css color and there is no item color set + // we don't need to reload the icon + if (!forceReload && !this._selectedItemColor && !this._unSelectedItemColor) { + return; + } + let image: UIImage; // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style @@ -945,6 +962,10 @@ export class Tabs extends TabsBase { tabStripItem.nativeView.image = image; } + public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { + this.setIconColor(tabStripItem, true); + } + public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { this.setViewTextAttributes(tabStripItem.label); } From 6a1e0987a212006c396776946fce2dc1bba7f1a0 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:21:12 +0200 Subject: [PATCH 14/22] chore: private methods renamed --- .../bottom-navigation/bottom-navigation.android.ts | 4 ++-- .../ui/bottom-navigation/bottom-navigation.ios.ts | 12 ++++++------ nativescript-core/ui/tabs/tabs.android.ts | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 46a0fbd2e8..4eed400fe6 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -754,10 +754,10 @@ export class BottomNavigation extends TabNavigationBase { tabStripItem.nativeViewProtected.setTextColor(itemColor.android); // set icon color - this._setIconColor(tabStripItem, itemColor); + this.setIconColor(tabStripItem, itemColor); } - private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + private setIconColor(tabStripItem: TabStripItem, color?: Color) { const tabBarItem = this._bottomNavigationBar.getViewForItemAt(tabStripItem._index); const drawableInfo = this.getIconInfo(tabStripItem, color); diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts index ec77d262f7..666b4e0ae7 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts @@ -374,7 +374,7 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void { - this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); + this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void { @@ -387,7 +387,7 @@ export class BottomNavigation extends TabNavigationBase { } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { - this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label); + this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label); } public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void { @@ -541,7 +541,7 @@ export class BottomNavigation extends TabNavigationBase { const tabBarItem = this.createTabBarItem(tabStripItem, i); updateTitleAndIconPositions(tabStripItem, tabBarItem, controller); - this.setViewTextAttributes(tabBarItem, tabStripItem.label); + this.setViewAttributes(tabBarItem, tabStripItem.label); controller.tabBarItem = tabBarItem; tabStripItem._index = i; @@ -551,7 +551,7 @@ export class BottomNavigation extends TabNavigationBase { controllers.addObject(controller); }); - this._setItemImages(); + this.setItemImages(); this._ios.viewControllers = controllers; this._ios.customizableViewControllers = null; @@ -560,7 +560,7 @@ export class BottomNavigation extends TabNavigationBase { this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate; } - private _setItemImages() { + private setItemImages() { if (this._selectedItemColor || this._unSelectedItemColor) { if (this.tabStrip && this.tabStrip.items) { this.tabStrip.items.forEach(item => { @@ -730,7 +730,7 @@ export class BottomNavigation extends TabNavigationBase { selectedIndexProperty.coerce(this); } - private setViewTextAttributes(item: UITabBarItem, view: View): any { + private setViewAttributes(item: UITabBarItem, view: View): any { if (!view) { return null; } diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index 53a5f6b577..a00d819e14 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -846,10 +846,10 @@ export class Tabs extends TabsBase { tabStripItem.nativeViewProtected.setTextColor(itemColor.android); // set icon color - this._setIconColor(tabStripItem, itemColor); + this.setIconColor(tabStripItem, itemColor); } - private _setIconColor(tabStripItem: TabStripItem, color?: Color) { + private setIconColor(tabStripItem: TabStripItem, color?: Color) { const tabBarItem = this._tabsBar.getViewForItemAt(tabStripItem._index); const drawable = this.getIcon(tabStripItem, color); From c50f3ffaa61b68a045e19f8a7f3776c4b392aba2 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:23:14 +0200 Subject: [PATCH 15/22] tests: added selected-item test pages --- .../app/bottom-navigation/main-page.ts | 1 + .../app/bottom-navigation/selected-item.css | 7 ++++ .../app/bottom-navigation/selected-item.xml | 40 +++++++++++++++++++ e2e/ui-tests-app/app/tabs/main-page.ts | 1 + e2e/ui-tests-app/app/tabs/selected-item.css | 20 ++++++++++ e2e/ui-tests-app/app/tabs/selected-item.xml | 40 +++++++++++++++++++ 6 files changed, 109 insertions(+) create mode 100644 e2e/ui-tests-app/app/bottom-navigation/selected-item.css create mode 100644 e2e/ui-tests-app/app/bottom-navigation/selected-item.xml create mode 100644 e2e/ui-tests-app/app/tabs/selected-item.css create mode 100644 e2e/ui-tests-app/app/tabs/selected-item.xml diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts index 344d41ef80..099b5a0836 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts +++ b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts @@ -26,6 +26,7 @@ export function loadExamples() { examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page"); examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page"); examples.set("reselect", "bottom-navigation/reselect-page"); + examples.set("selected-item", "bottom-navigation/selected-item"); return examples; } diff --git a/e2e/ui-tests-app/app/bottom-navigation/selected-item.css b/e2e/ui-tests-app/app/bottom-navigation/selected-item.css new file mode 100644 index 0000000000..f43139ce85 --- /dev/null +++ b/e2e/ui-tests-app/app/bottom-navigation/selected-item.css @@ -0,0 +1,7 @@ +.font-awesome { + font-family: "FontAwesome"; +} + +.font-size { + font-size: 36; +} \ No newline at end of file diff --git a/e2e/ui-tests-app/app/bottom-navigation/selected-item.xml b/e2e/ui-tests-app/app/bottom-navigation/selected-item.xml new file mode 100644 index 0000000000..15d04c7fc1 --- /dev/null +++ b/e2e/ui-tests-app/app/bottom-navigation/selected-item.xml @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts index de21578a6b..b8eda9135f 100644 --- a/e2e/ui-tests-app/app/tabs/main-page.ts +++ b/e2e/ui-tests-app/app/tabs/main-page.ts @@ -33,6 +33,7 @@ export function loadExamples() { examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page"); examples.set("custom-tabstrip", "tabs/custom-tabstrip-page"); examples.set("frame-in-tabs", "tabs/frame-in-tabs"); + examples.set("selected-item", "tabs/selected-item"); return examples; } diff --git a/e2e/ui-tests-app/app/tabs/selected-item.css b/e2e/ui-tests-app/app/tabs/selected-item.css new file mode 100644 index 0000000000..27a16bf778 --- /dev/null +++ b/e2e/ui-tests-app/app/tabs/selected-item.css @@ -0,0 +1,20 @@ +.font-awesome { + font-family: "FontAwesome"; +} + +.font-size { + font-size: 36; +} + + +/* TabStrip { + color: mediumvioletred; +} + +TabStripItem { + color: skyblue; +} + +TabStripItem:active { + color: darkblue; +} */ \ No newline at end of file diff --git a/e2e/ui-tests-app/app/tabs/selected-item.xml b/e2e/ui-tests-app/app/tabs/selected-item.xml new file mode 100644 index 0000000000..e981eeb9ce --- /dev/null +++ b/e2e/ui-tests-app/app/tabs/selected-item.xml @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 62b28a424ca9a5ff07eb4bf093b570e9dfaf2ea1 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:35:46 +0200 Subject: [PATCH 16/22] chore: renamed test pages --- .../{selected-item.css => item-color-page.css} | 0 .../{selected-item.xml => item-color-page.xml} | 2 +- e2e/ui-tests-app/app/bottom-navigation/main-page.ts | 2 +- .../app/tabs/{selected-item.css => item-color-page.css} | 0 .../app/tabs/{selected-item.xml => item-color-page.xml} | 2 +- e2e/ui-tests-app/app/tabs/main-page.ts | 2 +- 6 files changed, 4 insertions(+), 4 deletions(-) rename e2e/ui-tests-app/app/bottom-navigation/{selected-item.css => item-color-page.css} (100%) rename e2e/ui-tests-app/app/bottom-navigation/{selected-item.xml => item-color-page.xml} (92%) rename e2e/ui-tests-app/app/tabs/{selected-item.css => item-color-page.css} (100%) rename e2e/ui-tests-app/app/tabs/{selected-item.xml => item-color-page.xml} (93%) diff --git a/e2e/ui-tests-app/app/bottom-navigation/selected-item.css b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.css similarity index 100% rename from e2e/ui-tests-app/app/bottom-navigation/selected-item.css rename to e2e/ui-tests-app/app/bottom-navigation/item-color-page.css diff --git a/e2e/ui-tests-app/app/bottom-navigation/selected-item.xml b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml similarity index 92% rename from e2e/ui-tests-app/app/bottom-navigation/selected-item.xml rename to e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml index 15d04c7fc1..7d34090c97 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/selected-item.xml +++ b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml @@ -1,6 +1,6 @@ - + diff --git a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts index 099b5a0836..77fa47e6f7 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/main-page.ts +++ b/e2e/ui-tests-app/app/bottom-navigation/main-page.ts @@ -26,7 +26,7 @@ export function loadExamples() { examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page"); examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page"); examples.set("reselect", "bottom-navigation/reselect-page"); - examples.set("selected-item", "bottom-navigation/selected-item"); + examples.set("item-color", "bottom-navigation/item-color-page"); return examples; } diff --git a/e2e/ui-tests-app/app/tabs/selected-item.css b/e2e/ui-tests-app/app/tabs/item-color-page.css similarity index 100% rename from e2e/ui-tests-app/app/tabs/selected-item.css rename to e2e/ui-tests-app/app/tabs/item-color-page.css diff --git a/e2e/ui-tests-app/app/tabs/selected-item.xml b/e2e/ui-tests-app/app/tabs/item-color-page.xml similarity index 93% rename from e2e/ui-tests-app/app/tabs/selected-item.xml rename to e2e/ui-tests-app/app/tabs/item-color-page.xml index e981eeb9ce..da08ece613 100644 --- a/e2e/ui-tests-app/app/tabs/selected-item.xml +++ b/e2e/ui-tests-app/app/tabs/item-color-page.xml @@ -1,6 +1,6 @@ - + diff --git a/e2e/ui-tests-app/app/tabs/main-page.ts b/e2e/ui-tests-app/app/tabs/main-page.ts index b8eda9135f..2262190fea 100644 --- a/e2e/ui-tests-app/app/tabs/main-page.ts +++ b/e2e/ui-tests-app/app/tabs/main-page.ts @@ -33,7 +33,7 @@ export function loadExamples() { examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page"); examples.set("custom-tabstrip", "tabs/custom-tabstrip-page"); examples.set("frame-in-tabs", "tabs/frame-in-tabs"); - examples.set("selected-item", "tabs/selected-item"); + examples.set("item-color", "tabs/item-color-page"); return examples; } From 4dfbbad0d4ee6e9bc41039688a1e5eff9c387152 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:37:43 +0200 Subject: [PATCH 17/22] chore: move css-tree package to the right place --- nativescript-core/package.json | 118 ++++++++++++++++----------------- 1 file changed, 58 insertions(+), 60 deletions(-) diff --git a/nativescript-core/package.json b/nativescript-core/package.json index 94ef4766ab..0dbf2e07a2 100644 --- a/nativescript-core/package.json +++ b/nativescript-core/package.json @@ -1,63 +1,61 @@ { - "name": "@nativescript/core", - "main": "index", - "types": "index.d.ts", - "description": "Telerik NativeScript Core Modules", - "version": "6.5.0", - "homepage": "https://www.nativescript.org", - "repository": { - "type": "git", - "url": "https://github.com/NativeScript/NativeScript" - }, - "files": [ - "**/*.d.ts", - "**/*.js", - "**/platforms/ios/**", - "**/platforms/android/**", - "**/package.json", - "!org.nativescript.widgets.d.ts" - ], - "license": "Apache-2.0", - "dependencies": { - "nativescript-hook": "0.2.5", - "reduce-css-calc": "^2.1.6", - "css-tree": "^1.0.0-alpha.37", - "semver": "6.3.0", - "tns-core-modules-widgets": "next", - "tslib": "1.10.0" - }, - "devDependencies": { - "@types/chai": "~4.2.5", - "@types/node": "~10.12.18", - "tns-platform-declarations": "next" - }, - "scripts": { - "version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md", - "postinstall": "node cli-hooks/postinstall.js", - "preuninstall": "node cli-hooks/preuninstall.js" - }, - "nativescript": { - "platforms": { - "ios": "6.0.0", - "android": "6.0.0" + "name": "@nativescript/core", + "main": "index", + "types": "index.d.ts", + "description": "Telerik NativeScript Core Modules", + "version": "6.5.0", + "homepage": "https://www.nativescript.org", + "repository": { + "type": "git", + "url": "https://github.com/NativeScript/NativeScript" }, - "hooks": [ - { - "name": "nativescript-core", - "type": "before-checkForChanges", - "script": "cli-hooks/before-checkForChanges.js", - "inject": true - } - ] - }, - "snapshot": { - "android": { - "tns-java-classes": { - "modules": [ - "ui/frame/activity", - "ui/frame/fragment" - ] - } + "files": [ + "**/*.d.ts", + "**/*.js", + "**/platforms/ios/**", + "**/platforms/android/**", + "**/package.json", + "!org.nativescript.widgets.d.ts" + ], + "license": "Apache-2.0", + "dependencies": { + "css-tree": "^1.0.0-alpha.37", + "nativescript-hook": "0.2.5", + "reduce-css-calc": "^2.1.6", + "semver": "6.3.0", + "tns-core-modules-widgets": "next", + "tslib": "1.10.0" + }, + "devDependencies": { + "@types/chai": "~4.2.5", + "@types/node": "~10.12.18", + "tns-platform-declarations": "next" + }, + "scripts": { + "version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md", + "postinstall": "node cli-hooks/postinstall.js", + "preuninstall": "node cli-hooks/preuninstall.js" + }, + "nativescript": { + "platforms": { + "ios": "6.0.0", + "android": "6.0.0" + }, + "hooks": [{ + "name": "nativescript-core", + "type": "before-checkForChanges", + "script": "cli-hooks/before-checkForChanges.js", + "inject": true + }] + }, + "snapshot": { + "android": { + "tns-java-classes": { + "modules": [ + "ui/frame/activity", + "ui/frame/fragment" + ] + } + } } - } -} +} \ No newline at end of file From 85eccf928b41b5191298ebbaff2370c1c618f781 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:38:17 +0200 Subject: [PATCH 18/22] tests: added new ui tests --- .../bottom-navigation.e2e-spec.ts | 15 +++++++ .../tabs/tabs-tests.e2e-spec.ts | 41 +++++++++++++------ 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts index e4167eb1d0..43c3d381ea 100644 --- a/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts +++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts @@ -303,4 +303,19 @@ describe(`${suite}-${spec}-suite`, async function () { assert.isTrue(driver.imageHelper.hasImageComparisonPassed()); await bottomNavigationBasePage.navigateBackToSuitMainPage(); }); + + it(`${spec}-item-color`, async function () { + await bottomNavigationBasePage.navigateToSample("item-color"); + await bottomNavigationBasePage.refreshTabItems(); + await driver.imageHelper.compareScreen(); + + await bottomNavigationBasePage.tabOnItem(1); + await driver.imageHelper.compareScreen(); + + await bottomNavigationBasePage.tabOnItem(2); + await driver.imageHelper.compareScreen(); + + assert.isTrue(driver.imageHelper.hasImageComparisonPassed()); + await bottomNavigationBasePage.navigateBackToSuitMainPage(); + }); }); diff --git a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts index 7a98d6b2a6..e36fb26f77 100644 --- a/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts +++ b/e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts @@ -284,21 +284,36 @@ describe(`${imagePrefix}-suite`, async function () { await tabsViewBasePage.navigateBackToSuitMainPage(); }); - // it(`${imagePrefix}-frame-in-tabs`, async function () { - // await tabsViewBasePage.navigateToSample("frame-in-tabs"); - // await driver.imageHelper.compareScreen(); + it(`${imagePrefix}-frame-in-tabs`, async function () { + await tabsViewBasePage.navigateToSample("frame-in-tabs"); + await driver.imageHelper.compareScreen(); + + // go through the tabs and check that they are loaded + await tabsViewBasePage.tabOnItem(1); + await driver.imageHelper.compareScreen(); + + await tabsViewBasePage.tabOnItem(2); + await driver.imageHelper.compareScreen(); + + await tabsViewBasePage.tabOnItem(3); + await driver.imageHelper.compareScreen(); + + assert.isTrue(driver.imageHelper.hasImageComparisonPassed()); + await tabsViewBasePage.navigateBackToSuitMainPage(); + }); - // // go through the tabs and check that they are loaded - // await tabsViewBasePage.tabOnItem(1); - // await driver.imageHelper.compareScreen(); + it(`${spec}-item-color`, async function () { + await tabsViewBasePage.navigateToSample("item-color"); + await tabsViewBasePage.refreshTabItems(); + await driver.imageHelper.compareScreen(); - // await tabsViewBasePage.tabOnItem(2); - // await driver.imageHelper.compareScreen(); + await tabsViewBasePage.tabOnItem(1); + await driver.imageHelper.compareScreen(); - // await tabsViewBasePage.tabOnItem(3); - // await driver.imageHelper.compareScreen(); + await tabsViewBasePage.tabOnItem(2); + await driver.imageHelper.compareScreen(); - // assert.isTrue(driver.imageHelper.hasImageComparisonPassed()); - // await tabsViewBasePage.navigateBackToSuitMainPage(); - // }); + assert.isTrue(driver.imageHelper.hasImageComparisonPassed()); + await tabsViewBasePage.navigateBackToSuitMainPage(); + }); }); From 75a92d5eecd2d82c85ca19cfaf851b51a1d5ea4b Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 19:52:08 +0200 Subject: [PATCH 19/22] fix: use renamed function --- .../ui/bottom-navigation/bottom-navigation.android.ts | 2 +- nativescript-core/ui/tabs/tabs.android.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 4eed400fe6..44c886e574 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -788,7 +788,7 @@ export class BottomNavigation extends TabNavigationBase { return; } - this._setIconColor(tabStripItem); + this.setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index a00d819e14..d5d6aa8b12 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -880,7 +880,7 @@ export class Tabs extends TabsBase { return; } - this._setIconColor(tabStripItem); + this.setIconColor(tabStripItem); } public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void { From cbc0173ed518c8221811956046c5905ab4b4a2a0 Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 21:29:44 +0200 Subject: [PATCH 20/22] fix: set item color --- .../ui/bottom-navigation/bottom-navigation.android.ts | 1 + nativescript-core/ui/tabs/tabs.android.ts | 1 + .../java/org/nativescript/widgets/BottomNavigationBar.java | 3 --- .../src/main/java/org/nativescript/widgets/TabsBar.java | 3 --- 4 files changed, 2 insertions(+), 6 deletions(-) diff --git a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts index 44c886e574..edbf93294e 100644 --- a/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts +++ b/nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts @@ -576,6 +576,7 @@ export class BottomNavigation extends TabNavigationBase { items.forEach((item, i, arr) => { const textView = this._bottomNavigationBar.getTextViewForItemAt(i); item.setNativeView(textView); + this._setItemColor(item); }); } diff --git a/nativescript-core/ui/tabs/tabs.android.ts b/nativescript-core/ui/tabs/tabs.android.ts index d5d6aa8b12..67df258f1a 100644 --- a/nativescript-core/ui/tabs/tabs.android.ts +++ b/nativescript-core/ui/tabs/tabs.android.ts @@ -639,6 +639,7 @@ export class Tabs extends TabsBase { items.forEach((item, i, arr) => { const tv = tabsBar.getTextViewForItemAt(i); item.setNativeView(tv); + this._setItemColor(item); }); } diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java index 97534cd424..13760a6838 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java @@ -198,9 +198,6 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); - if (tabItem.color != 0) { - imgView.setColorFilter(tabItem.color); - } } else { imgView.setVisibility(GONE); } diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java index b5bf39ab6c..b34137ba4d 100644 --- a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java +++ b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabsBar.java @@ -272,9 +272,6 @@ private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, Tab } else if (tabItem.iconDrawable != null) { imgView.setImageDrawable(tabItem.iconDrawable); imgView.setVisibility(VISIBLE); - if (tabItem.color != 0) { - imgView.setColorFilter(tabItem.color); - } } else { imgView.setVisibility(GONE); } From b693783780ad9dca343934cc5fad72c02b05b0fa Mon Sep 17 00:00:00 2001 From: Vasil Trifonov Date: Fri, 13 Mar 2020 21:30:12 +0200 Subject: [PATCH 21/22] tests: aded automationText attribute --- e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml | 2 +- e2e/ui-tests-app/app/tabs/frame-in-tabs.xml | 2 +- e2e/ui-tests-app/app/tabs/item-color-page.xml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml index 7d34090c97..8c736f67ce 100644 --- a/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml +++ b/e2e/ui-tests-app/app/bottom-navigation/item-color-page.xml @@ -3,7 +3,7 @@ - +