Skip to content

Commit 243dc98

Browse files
vtrifonovdtopuzov
vtrifonov
and
dtopuzov
authored
Added selectedItemColor and unSelectedItemColor to the TabStrip (#8431)
* chore: add guard for ios * feat(bottom-nav): adding new properties * feat(tabs): new property implementation * feat: new feature implementation in android Implemented selectedItemColor and unSelectedItemColor properties on TabStrip * chore: added some comments * chore: change method return type * fix: setting icon color * fix: rendering mode setting * chore: rename variable * chore: fixed a typo * chore: updated log in build gradle * fix: item color setting in android * fix: tab styling when no css aplied * chore: private methods renamed * tests: added selected-item test pages * chore: renamed test pages * chore: move css-tree package to the right place * tests: added new ui tests * fix: use renamed function * fix: set item color * tests: aded automationText attribute * tests: trying to fix the tests Co-authored-by: Dimitar Topuzov <dtopuzov@gmail.com>
1 parent e081340 commit 243dc98

22 files changed

Lines changed: 670 additions & 191 deletions

File tree

‎api-reports/NativeScript.api.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2225,8 +2225,12 @@ export class TabNavigationBase extends View {
22252225

22262226
getTabBarItemTextTransform(tabStripItem: TabStripItem): any
22272227

2228+
getTabBarSelectedItemColor(): Color
2229+
22282230
getTabBarTextTransform(): any
22292231

2232+
getTabBarUnSelectedItemColor(): Color
2233+
22302234
ios: any /* UITabBarController */;
22312235

22322236
items: Array<TabContentItem>;
@@ -2266,8 +2270,12 @@ export class TabNavigationBase extends View {
22662270

22672271
setTabBarItemTitle(tabStripItem: TabStripItem, value: any): any
22682272

2273+
setTabBarSelectedItemColor(value: Color)
2274+
22692275
setTabBarTextTransform(value: any): void
22702276

2277+
setTabBarUnSelectedItemColor(value: Color)
2278+
22712279
tabStrip: TabStrip;
22722280
}
22732281

@@ -2320,6 +2328,10 @@ export class TabStrip extends View {
23202328
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any);
23212329

23222330
on(event: "itemTap", callback: (args: TabStripItemEventData) => void, thisArg?: any);
2331+
2332+
selectedItemColor: Color;
2333+
2334+
unSelectedItemColor: Color;
23232335
}
23242336

23252337
// @public

‎e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { EventData } from "tns-core-modules/data/observable";
22
import { TabView } from "tns-core-modules/ui/tab-view";
3+
import { isIOS } from "tns-core-modules/platform";
34

45
export function onLoaded(args: EventData) {
56
console.log("TEST", args.object);
67
const tabView = <TabView>args.object;
7-
tabView.ios.tabBar.translucent = false;
8+
if (isIOS) {
9+
tabView.ios.tabBar.translucent = false;
10+
}
811
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.font-awesome {
2+
font-family: "FontAwesome";
3+
}
4+
5+
.font-size {
6+
font-size: 36;
7+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<Page class="page">
2+
3+
<ActionBar title="BottomNavigation item-color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation automationText="tabNavigation">
7+
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
8+
<TabStripItem>
9+
<Label text="First"/>
10+
<Image src="res://baseline_motorcycle_black_24"/>
11+
</TabStripItem>
12+
<TabStripItem>
13+
<Label text="Second"/>
14+
<Image src="res://up"/>
15+
</TabStripItem>
16+
<TabStripItem>
17+
<Label text="Third"/>
18+
<Image src="font://&#xF10B;" class="font-awesome font-size" />
19+
</TabStripItem>
20+
</TabStrip>
21+
22+
<TabContentItem class="special">
23+
<GridLayout>
24+
<Label text="First View" />
25+
</GridLayout>
26+
</TabContentItem>
27+
28+
<TabContentItem>
29+
<GridLayout>
30+
<Label text="Second View" />
31+
</GridLayout>
32+
</TabContentItem>
33+
34+
<TabContentItem>
35+
<GridLayout>
36+
<Label text="Third View" />
37+
</GridLayout>
38+
</TabContentItem>
39+
</BottomNavigation>
40+
</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
@@ -26,6 +26,7 @@ export function loadExamples() {
2626
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
2727
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
2828
examples.set("reselect", "bottom-navigation/reselect-page");
29+
examples.set("item-color", "bottom-navigation/item-color-page");
2930

3031
return examples;
3132
}

‎e2e/ui-tests-app/app/tabs/frame-in-tabs.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<Page class="page">
22
<StackLayout>
3-
<Tabs highlightColor="red" offscreenTabLimit="1">
3+
<Tabs highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
44
<TabStrip highlightColor="green" itemTap="onItemTap">
55
<TabStripItem title="1"></TabStripItem>
66
<TabStripItem title="2"></TabStripItem>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.font-awesome {
2+
font-family: "FontAwesome";
3+
}
4+
5+
.font-size {
6+
font-size: 36;
7+
}
8+
9+
10+
/* TabStrip {
11+
color: mediumvioletred;
12+
}
13+
14+
TabStripItem {
15+
color: skyblue;
16+
}
17+
18+
TabStripItem:active {
19+
color: darkblue;
20+
} */

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<Page class="page">
2+
3+
<ActionBar title="Tabs item-color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<Tabs automationText="tabNavigation">
7+
<TabStrip selectedItemColor="red" unSelectedItemColor="green">
8+
<TabStripItem>
9+
<Label text="First"/>
10+
<Image src="res://baseline_motorcycle_black_24"/>
11+
</TabStripItem>
12+
<TabStripItem>
13+
<Label text="Second"/>
14+
<Image src="res://up"/>
15+
</TabStripItem>
16+
<TabStripItem>
17+
<Label text="Third"/>
18+
<Image src="font://&#xF10B;" class="font-awesome font-size" />
19+
</TabStripItem>
20+
</TabStrip>
21+
22+
<TabContentItem class="special">
23+
<GridLayout>
24+
<Label text="First View" />
25+
</GridLayout>
26+
</TabContentItem>
27+
28+
<TabContentItem>
29+
<GridLayout>
30+
<Label text="Second View" />
31+
</GridLayout>
32+
</TabContentItem>
33+
34+
<TabContentItem>
35+
<GridLayout>
36+
<Label text="Third View" />
37+
</GridLayout>
38+
</TabContentItem>
39+
</Tabs>
40+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export function loadExamples() {
3333
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
3434
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
3535
examples.set("frame-in-tabs", "tabs/frame-in-tabs");
36+
examples.set("item-color", "tabs/item-color-page");
3637

3738
return examples;
3839
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,4 +303,20 @@ describe(`${suite}-${spec}-suite`, async function () {
303303
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
304304
await bottomNavigationBasePage.navigateBackToSuitMainPage();
305305
});
306+
307+
it(`${spec}-item-color`, async function () {
308+
await bottomNavigationBasePage.navigateToSample("item-color");
309+
await bottomNavigationBasePage.refreshTabItems();
310+
await driver.imageHelper.compareScreen();
311+
312+
// go through the tabs and check that they are loaded
313+
await bottomNavigationBasePage.tabOnItem(1);
314+
await driver.imageHelper.compareScreen();
315+
316+
await bottomNavigationBasePage.tabOnItem(2);
317+
await driver.imageHelper.compareScreen();
318+
319+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
320+
await bottomNavigationBasePage.navigateBackToSuitMainPage();
321+
});
306322
});

0 commit comments

Comments
 (0)