Skip to content

Commit

Permalink
fix(tabs): dynamic styling fixes (#8479)
Browse files Browse the repository at this point in the history 
* fix(tabs): dynamic styling fixes - iconSource
selectedItemColor and unSelectedItemColor

* fix(tabs): bottom nav item color fix

* chore: remove unneeded method calls

* chore: remove unneeded console.log

* fix: fixing build

* fix(tabs): resources passing

* fix(tabs): setting item colors

* test: updated dynamic color tests

* chore: fix automationText
  • Loading branch information
@vtrifonov
vtrifonov committed Apr 2, 2020
1 parent 511415f commit fc8f769
Show file tree
Hide file tree
Showing 17 changed files with 221 additions and 38 deletions.
2 changes: 2 additions & 0 deletions api-reports/NativeScript.api.md
View file
Expand Up @@ -2258,6 +2258,8 @@ export class TabNavigationBase extends View {

setTabBarIconColor(tabStripItem: TabStripItem, value: any): void

setTabBarIconSource(tabStripItem: TabStripItem, value: any): void

setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void

setTabBarItemColor(tabStripItem: TabStripItem, value: any): void
Expand Down
7 changes: 5 additions & 2 deletions e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css
View file
Expand Up @@ -10,14 +10,17 @@ TabStripItem:active {
background-color: magenta;
}

.defaultCssClass {
.tabsClass0 {
}

.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}

.newTabsClass {
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
Expand Down
31 changes: 30 additions & 1 deletion e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts
View file
Expand Up @@ -6,5 +6,34 @@ export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));

bottomNavigation.tabStrip.className = "newTabsClass";
switch (bottomNavigation.tabStrip.className) {
case "tabsClass0":
bottomNavigation.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
bottomNavigation.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
bottomNavigation.tabStrip.className = "tabsClass0";
break;
}
}

export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));

const tabStripItem0 = bottomNavigation.tabStrip.items[0];
const tabStripItem1 = bottomNavigation.tabStrip.items[1];
const tabStripItem2 = bottomNavigation.tabStrip.items[2];

const iconSource0 = tabStripItem0.iconSource;

tabStripItem0.iconSource = tabStripItem1.iconSource;

tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;

tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}
3 changes: 2 additions & 1 deletion e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml
View file
Expand Up @@ -2,10 +2,11 @@
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
Expand Down
7 changes: 5 additions & 2 deletions e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css
View file
Expand Up @@ -10,14 +10,17 @@ TabStripItem:active {
background-color: magenta;
}

.defaultCssClass {
.tabsClass0 {
}

.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}

.newTabsClass {
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
Expand Down
33 changes: 31 additions & 2 deletions e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts
View file
Expand Up @@ -4,7 +4,36 @@ import { Tabs } from "tns-core-modules/ui/tabs";

export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <Tabs>(page.getViewById("bottomNavigation"));
const tabs = <Tabs>(page.getViewById("tabs"));

bottomNavigation.tabStrip.className = "newTabsClass";
switch (tabs.tabStrip.className) {
case "tabsClass0":
tabs.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
tabs.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
tabs.tabStrip.className = "tabsClass0";
break;
}
}

export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>(page.getViewById("tabs"));

const tabStripItem0 = tabs.tabStrip.items[0];
const tabStripItem1 = tabs.tabStrip.items[1];
const tabStripItem2 = tabs.tabStrip.items[2];

const iconSource0 = tabStripItem0.iconSource;

tabStripItem0.iconSource = tabStripItem1.iconSource;

tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;

tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}
5 changes: 3 additions & 2 deletions e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml
View file
Expand Up @@ -2,10 +2,11 @@
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<Tabs automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="defaultCssClass">
<Tabs automationText="tabNavigation" id="tabs" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
Expand Down
21 changes: 20 additions & 1 deletion e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
View file
Expand Up @@ -335,17 +335,36 @@ describe(`${suite}-${spec}-suite`, async function () {
await bottomNavigationBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();

// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();

const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();

await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();

// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();

await changeIconSource.click();
await driver.imageHelper.compareScreen();

// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
Expand Down
21 changes: 20 additions & 1 deletion e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
View file
Expand Up @@ -334,17 +334,36 @@ describe(`${imagePrefix}-suite`, async function () {
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();

// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();

const changeStyleBtn = await driver.waitForElement("changeStyle");
console.log(changeStyleBtn);
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();

await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();

// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();

await changeIconSource.click();
await driver.imageHelper.compareScreen();

// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();

assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
Expand Down
27 changes: 16 additions & 11 deletions nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
View file
Expand Up @@ -169,13 +169,13 @@ 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]);
}

owner._setItemsColors(owner.tabStrip.items);
}

public onTap(position: number): boolean {
Expand Down Expand Up @@ -711,7 +711,7 @@ export class BottomNavigation extends TabNavigationBase {
if (value instanceof Color) {
this._bottomNavigationBar.setBackgroundColor(value.android);
} else {
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
}

this.updateTabStripItems();
Expand All @@ -726,7 +726,7 @@ export class BottomNavigation extends TabNavigationBase {
});
}

private setItemsColors(items: Array<TabStripItem>): void {
public _setItemsColors(items: Array<TabStripItem>): void {
items.forEach((item) => {
if (item.nativeView) {
this._setItemColor(item);
Expand All @@ -740,7 +740,7 @@ export class BottomNavigation extends TabNavigationBase {

public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
this._setItemsColors(this.tabStrip.items);
}

public getTabBarUnSelectedItemColor(): Color {
Expand All @@ -749,21 +749,22 @@ export class BottomNavigation extends TabNavigationBase {

public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
this._setItemsColors(this.tabStrip.items);
}

public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
private updateItem(tabStripItem: TabStripItem): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
}

public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
this.updateItem(tabStripItem);
}

public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
this.updateItem(tabStripItem);
}

public _setItemColor(tabStripItem: TabStripItem) {
Expand Down Expand Up @@ -813,6 +814,10 @@ export class BottomNavigation extends TabNavigationBase {
this.setIconColor(tabStripItem);
}

public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
this.updateItem(tabStripItem);
}

public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
if (value.fontSize) {
tabStripItem.nativeViewProtected.setTextSize(value.fontSize);
Expand Down
43 changes: 40 additions & 3 deletions nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
View file
Expand Up @@ -359,6 +359,7 @@ export class BottomNavigation extends TabNavigationBase {

public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
this.updateAllItemsColors();
}

public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
Expand All @@ -377,15 +378,35 @@ export class BottomNavigation extends TabNavigationBase {
this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
}

public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
if (!this._unSelectedItemColor && !this._selectedItemColor) {
const image = this.getIcon(tabStripItem);
private setItemColors(): void {
if (this._selectedItemColor) {
this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor.ios;
}
if (this._unSelectedItemColor) {
this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
}
}

private setIconColor(tabStripItem: TabStripItem, forceReload: boolean = false): void {
if (forceReload || (!this._unSelectedItemColor && !this._selectedItemColor)) {
// 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;

const image = this.getIcon(tabStripItem, tabStripColor);

tabStripItem.nativeView.image = image;
tabStripItem.nativeView.selectedImage = image;
}
}

public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
this.setIconColor(tabStripItem);
}

public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
this.updateItemColors(tabStripItem);
}

public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
}
Expand All @@ -410,6 +431,7 @@ export class BottomNavigation extends TabNavigationBase {

public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.updateAllItemsColors();
}

public getTabBarUnSelectedItemColor(): Color {
Expand All @@ -418,6 +440,7 @@ export class BottomNavigation extends TabNavigationBase {

public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.updateAllItemsColors();
}

public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
Expand Down Expand Up @@ -577,6 +600,20 @@ export class BottomNavigation extends TabNavigationBase {
}
}

public updateAllItemsColors() {
this.setItemColors();
if (this.tabStrip && this.tabStrip.items) {
this.tabStrip.items.forEach(tabStripItem => {
this.updateItemColors(tabStripItem);
});
}
}

private updateItemColors(tabStripItem: TabStripItem): void {
updateBackgroundPositions(this.tabStrip, tabStripItem);
this.setIconColor(tabStripItem, true);
}

private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
let image: UIImage;
let title: string;
Expand Down

0 comments on commit fc8f769

Please sign in to comment.