Skip to content

Commit 0a7bee6

Browse files
vtrifonovvtrifonov
authored
fix(tabs): dynamic styling colors fixed (NativeScript#8460)
* fix(tabs): dynamic styling colors fixed * test(tabs): adding dynamic color change test
1 parent 8759aa0 commit 0a7bee6

13 files changed

+262
-0
lines changed

‎e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.font-awesome {
2+
font-family: "FontAwesome";
3+
}
4+
5+
.font-size {
6+
font-size: 36;
7+
}
8+
9+
TabStripItem:active {
10+
background-color: magenta;
11+
}
12+
13+
.defaultCssClass {
14+
background-color: #79d2a6;
15+
highlight-color: green;
16+
selected-item-color: yellow;
17+
un-selected-item-color: blue;
18+
}
19+
20+
.newTabsClass {
21+
background-color: orangered;
22+
highlight-color: lightgreen;
23+
selected-item-color: whitesmoke;
24+
un-selected-item-color: pink;
25+
}

‎e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { View } from "tns-core-modules/ui/core/view";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
4+
5+
export function onButtonTap(args) {
6+
const page = <Page>(<View>args.object).page;
7+
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
8+
9+
bottomNavigation.tabStrip.className = "newTabsClass";
10+
}

‎e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
<GridLayout rows="auto,*">
3+
<StackLayout row="0" >
4+
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
5+
</StackLayout>
6+
<GridLayout row="1">
7+
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
8+
<TabStrip class="defaultCssClass">
9+
<TabStripItem>
10+
<Label text="Home"></Label>
11+
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
12+
</TabStripItem>
13+
<TabStripItem>
14+
<Label text="Favorites"></Label>
15+
<Image src="res://add_to_fav"></Image>
16+
</TabStripItem>
17+
<TabStripItem>
18+
<Label text="Up"></Label>
19+
<Image src="res://up"></Image>
20+
</TabStripItem>
21+
</TabStrip>
22+
<TabContentItem>
23+
<GridLayout>
24+
<Label text="Home Page" class="h2 text-center">
25+
</Label>
26+
</GridLayout>
27+
</TabContentItem>
28+
<TabContentItem>
29+
<GridLayout>
30+
<Label text="Favorites Page" class="h2 text-center">
31+
</Label>
32+
</GridLayout>
33+
</TabContentItem>
34+
<TabContentItem>
35+
<GridLayout>
36+
<Label text="Up Page" class="h2 text-center">
37+
</Label>
38+
</GridLayout>
39+
</TabContentItem>
40+
</BottomNavigation>
41+
</GridLayout>
42+
</GridLayout>
43+
</Page>

‎e2e/ui-tests-app/app/bottom-navigation/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export function loadExamples() {
2727
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
2828
examples.set("reselect", "bottom-navigation/reselect-page");
2929
examples.set("item-color", "bottom-navigation/item-color-page");
30+
examples.set("dynamic-color-change", "bottom-navigation/dynamic-color-change-page");
3031

3132
return examples;
3233
}

‎e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.font-awesome {
2+
font-family: "FontAwesome";
3+
}
4+
5+
.font-size {
6+
font-size: 36;
7+
}
8+
9+
TabStripItem:active {
10+
background-color: magenta;
11+
}
12+
13+
.defaultCssClass {
14+
background-color: #79d2a6;
15+
highlight-color: green;
16+
selected-item-color: yellow;
17+
un-selected-item-color: blue;
18+
}
19+
20+
.newTabsClass {
21+
background-color: orangered;
22+
highlight-color: lightgreen;
23+
selected-item-color: whitesmoke;
24+
un-selected-item-color: pink;
25+
}

‎e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { View } from "tns-core-modules/ui/core/view";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import { Tabs } from "tns-core-modules/ui/tabs";
4+
5+
export function onButtonTap(args) {
6+
const page = <Page>(<View>args.object).page;
7+
const bottomNavigation = <Tabs>(page.getViewById("bottomNavigation"));
8+
9+
bottomNavigation.tabStrip.className = "newTabsClass";
10+
}

‎e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
2+
<GridLayout rows="auto,*">
3+
<StackLayout row="0" >
4+
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
5+
</StackLayout>
6+
<GridLayout row="1">
7+
<Tabs automationText="tabNavigation" id="bottomNavigation" >
8+
<TabStrip class="defaultCssClass">
9+
<TabStripItem>
10+
<Label text="Home"></Label>
11+
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
12+
</TabStripItem>
13+
<TabStripItem>
14+
<Label text="Favorites"></Label>
15+
<Image src="res://add_to_fav"></Image>
16+
</TabStripItem>
17+
<TabStripItem>
18+
<Label text="Up"></Label>
19+
<Image src="res://up"></Image>
20+
</TabStripItem>
21+
</TabStrip>
22+
<TabContentItem>
23+
<GridLayout>
24+
<Label text="Home Page" class="h2 text-center">
25+
</Label>
26+
</GridLayout>
27+
</TabContentItem>
28+
<TabContentItem>
29+
<GridLayout>
30+
<Label text="Favorites Page" class="h2 text-center">
31+
</Label>
32+
</GridLayout>
33+
</TabContentItem>
34+
<TabContentItem>
35+
<GridLayout>
36+
<Label text="Up Page" class="h2 text-center">
37+
</Label>
38+
</GridLayout>
39+
</TabContentItem>
40+
</Tabs>
41+
</GridLayout>
42+
</GridLayout>
43+
</Page>

‎e2e/ui-tests-app/app/tabs/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export function loadExamples() {
3434
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
3535
examples.set("frame-in-tabs", "tabs/frame-in-tabs");
3636
examples.set("item-color", "tabs/item-color-page");
37+
examples.set("dynamic-color-change", "tabs/dynamic-color-change-page");
3738

3839
return examples;
3940
}

‎e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,4 +319,34 @@ describe(`${suite}-${spec}-suite`, async function () {
319319
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
320320
await bottomNavigationBasePage.navigateBackToSuitMainPage();
321321
});
322+
323+
it(`${spec}-dynamic-color-change`, async function () {
324+
await bottomNavigationBasePage.navigateToSample("dynamic-color-change");
325+
await bottomNavigationBasePage.refreshTabItems();
326+
await driver.imageHelper.compareScreen();
327+
328+
// go through the tabs and check that they are loaded
329+
await bottomNavigationBasePage.tabOnItem(1);
330+
await driver.imageHelper.compareScreen();
331+
332+
await bottomNavigationBasePage.tabOnItem(2);
333+
await driver.imageHelper.compareScreen();
334+
335+
await bottomNavigationBasePage.tabOnItem(0);
336+
await driver.imageHelper.compareScreen();
337+
338+
const changeStyleBtn = await driver.waitForElement("changeStyle");
339+
console.log(changeStyleBtn);
340+
await changeStyleBtn.click();
341+
await driver.imageHelper.compareScreen();
342+
343+
await bottomNavigationBasePage.tabOnItem(1);
344+
await driver.imageHelper.compareScreen();
345+
346+
await bottomNavigationBasePage.tabOnItem(2);
347+
await driver.imageHelper.compareScreen();
348+
349+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
350+
await bottomNavigationBasePage.navigateBackToSuitMainPage();
351+
});
322352
});

‎e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,4 +318,34 @@ describe(`${imagePrefix}-suite`, async function () {
318318
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
319319
await tabsViewBasePage.navigateBackToSuitMainPage();
320320
});
321+
322+
it(`${spec}-dynamic-color-change`, async function () {
323+
await tabsViewBasePage.navigateToSample("dynamic-color-change");
324+
await tabsViewBasePage.refreshTabItems();
325+
await driver.imageHelper.compareScreen();
326+
327+
// go through the tabs and check that they are loaded
328+
await tabsViewBasePage.tabOnItem(1);
329+
await driver.imageHelper.compareScreen();
330+
331+
await tabsViewBasePage.tabOnItem(2);
332+
await driver.imageHelper.compareScreen();
333+
334+
await tabsViewBasePage.tabOnItem(0);
335+
await driver.imageHelper.compareScreen();
336+
337+
const changeStyleBtn = await driver.waitForElement("changeStyle");
338+
console.log(changeStyleBtn);
339+
await changeStyleBtn.click();
340+
await driver.imageHelper.compareScreen();
341+
342+
await tabsViewBasePage.tabOnItem(1);
343+
await driver.imageHelper.compareScreen();
344+
345+
await tabsViewBasePage.tabOnItem(2);
346+
await driver.imageHelper.compareScreen();
347+
348+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
349+
await tabsViewBasePage.navigateBackToSuitMainPage();
350+
});
321351
});

‎nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,25 @@ export class BottomNavigation extends TabNavigationBase {
713713
} else {
714714
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
715715
}
716+
717+
this.updateTabStripItems();
718+
}
719+
720+
private updateTabStripItems(): void {
721+
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
722+
if (tabStripItem.nativeView) {
723+
const tabItemSpec = this.createTabItemSpec(tabStripItem);
724+
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
725+
}
726+
});
727+
}
728+
729+
private setItemsColors(items: Array<TabStripItem>): void {
730+
items.forEach((item) => {
731+
if (item.nativeView) {
732+
this._setItemColor(item);
733+
}
734+
});
716735
}
717736

718737
public getTabBarSelectedItemColor(): Color {
@@ -721,6 +740,7 @@ export class BottomNavigation extends TabNavigationBase {
721740

722741
public setTabBarSelectedItemColor(value: Color) {
723742
this._selectedItemColor = value;
743+
this.setItemsColors(this.tabStrip.items);
724744
}
725745

726746
public getTabBarUnSelectedItemColor(): Color {
@@ -729,6 +749,7 @@ export class BottomNavigation extends TabNavigationBase {
729749

730750
public setTabBarUnSelectedItemColor(value: Color) {
731751
this._unSelectedItemColor = value;
752+
this.setItemsColors(this.tabStrip.items);
732753
}
733754

734755
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

‎nativescript-core/ui/tabs/tabs.android.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -796,6 +796,17 @@ export class Tabs extends TabsBase {
796796
} else {
797797
this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
798798
}
799+
800+
this.updateTabStripItems();
801+
}
802+
803+
private updateTabStripItems(): void {
804+
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
805+
if (tabStripItem.nativeView) {
806+
const tabItemSpec = this.createTabItemSpec(tabStripItem);
807+
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
808+
}
809+
});
799810
}
800811

801812
public getTabBarHighlightColor(): number {
@@ -807,12 +818,21 @@ export class Tabs extends TabsBase {
807818
this._tabsBar.setSelectedIndicatorColors([color]);
808819
}
809820

821+
private setItemsColors(items: Array<TabStripItem>): void {
822+
items.forEach((item) => {
823+
if (item.nativeView) {
824+
this._setItemColor(item);
825+
}
826+
});
827+
}
828+
810829
public getTabBarSelectedItemColor(): Color {
811830
return this._selectedItemColor;
812831
}
813832

814833
public setTabBarSelectedItemColor(value: Color) {
815834
this._selectedItemColor = value;
835+
this.setItemsColors(this.tabStrip.items);
816836
}
817837

818838
public getTabBarUnSelectedItemColor(): Color {
@@ -821,6 +841,7 @@ export class Tabs extends TabsBase {
821841

822842
public setTabBarUnSelectedItemColor(value: Color) {
823843
this._unSelectedItemColor = value;
844+
this.setItemsColors(this.tabStrip.items);
824845
}
825846

826847
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {

‎nativescript-core/ui/tabs/tabs.ios.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1030,6 +1030,7 @@ export class Tabs extends TabsBase {
10301030

10311031
public setTabBarSelectedItemColor(value: Color) {
10321032
this._selectedItemColor = value;
1033+
this.setItemColors();
10331034
}
10341035

10351036
public getTabBarUnSelectedItemColor(): Color {
@@ -1038,6 +1039,7 @@ export class Tabs extends TabsBase {
10381039

10391040
public setTabBarUnSelectedItemColor(value: Color) {
10401041
this._unSelectedItemColor = value;
1042+
this.setItemColors();
10411043
}
10421044

10431045
private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {

0 commit comments

Comments
 (0)