Skip to content

Commit 243dc98

Browse files
vtrifonovdtopuzov
vtrifonov
and
dtopuzov
authored
Added selectedItemColor and unSelectedItemColor to the TabStrip (NativeScript#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

File tree

22 files changed

+670
-191
lines changed

22 files changed

+670
-191
lines changed

‎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
});

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

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -284,21 +284,38 @@ describe(`${imagePrefix}-suite`, async function () {
284284
await tabsViewBasePage.navigateBackToSuitMainPage();
285285
});
286286

287-
// it(`${imagePrefix}-frame-in-tabs`, async function () {
288-
// await tabsViewBasePage.navigateToSample("frame-in-tabs");
289-
// await driver.imageHelper.compareScreen();
287+
it(`${imagePrefix}-frame-in-tabs`, async function () {
288+
await tabsViewBasePage.navigateToSample("frame-in-tabs");
289+
await tabsViewBasePage.refreshTabItems();
290+
await driver.imageHelper.compareScreen();
290291

291-
// // go through the tabs and check that they are loaded
292-
// await tabsViewBasePage.tabOnItem(1);
293-
// await driver.imageHelper.compareScreen();
292+
// go through the tabs and check that they are loaded
293+
await tabsViewBasePage.tabOnItem(1);
294+
await driver.imageHelper.compareScreen();
294295

295-
// await tabsViewBasePage.tabOnItem(2);
296-
// await driver.imageHelper.compareScreen();
296+
await tabsViewBasePage.tabOnItem(2);
297+
await driver.imageHelper.compareScreen();
297298

298-
// await tabsViewBasePage.tabOnItem(3);
299-
// await driver.imageHelper.compareScreen();
299+
await tabsViewBasePage.tabOnItem(3);
300+
await driver.imageHelper.compareScreen();
300301

301-
// assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
302-
// await tabsViewBasePage.navigateBackToSuitMainPage();
303-
// });
302+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
303+
await tabsViewBasePage.navigateBackToSuitMainPage();
304+
});
305+
306+
it(`${spec}-item-color`, async function () {
307+
await tabsViewBasePage.navigateToSample("item-color");
308+
await tabsViewBasePage.refreshTabItems();
309+
await driver.imageHelper.compareScreen();
310+
311+
// go through the tabs and check that they are loaded
312+
await tabsViewBasePage.tabOnItem(1);
313+
await driver.imageHelper.compareScreen();
314+
315+
await tabsViewBasePage.tabOnItem(2);
316+
await driver.imageHelper.compareScreen();
317+
318+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
319+
await tabsViewBasePage.navigateBackToSuitMainPage();
320+
});
304321
});

‎nativescript-core/package.json

Lines changed: 58 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,61 @@
11
{
2-
"name": "@nativescript/core",
3-
"main": "index",
4-
"types": "index.d.ts",
5-
"description": "Telerik NativeScript Core Modules",
6-
"version": "6.5.0",
7-
"homepage": "https://www.nativescript.org",
8-
"repository": {
9-
"type": "git",
10-
"url": "https://github.com/NativeScript/NativeScript"
11-
},
12-
"files": [
13-
"**/*.d.ts",
14-
"**/*.js",
15-
"**/platforms/ios/**",
16-
"**/platforms/android/**",
17-
"**/package.json",
18-
"!org.nativescript.widgets.d.ts"
19-
],
20-
"license": "Apache-2.0",
21-
"dependencies": {
22-
"nativescript-hook": "0.2.5",
23-
"reduce-css-calc": "^2.1.6",
24-
"css-tree": "^1.0.0-alpha.37",
25-
"semver": "6.3.0",
26-
"tns-core-modules-widgets": "next",
27-
"tslib": "1.10.0"
28-
},
29-
"devDependencies": {
30-
"@types/chai": "~4.2.5",
31-
"@types/node": "~10.12.18",
32-
"tns-platform-declarations": "next"
33-
},
34-
"scripts": {
35-
"version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
36-
"postinstall": "node cli-hooks/postinstall.js",
37-
"preuninstall": "node cli-hooks/preuninstall.js"
38-
},
39-
"nativescript": {
40-
"platforms": {
41-
"ios": "6.0.0",
42-
"android": "6.0.0"
2+
"name": "@nativescript/core",
3+
"main": "index",
4+
"types": "index.d.ts",
5+
"description": "Telerik NativeScript Core Modules",
6+
"version": "6.5.0",
7+
"homepage": "https://www.nativescript.org",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/NativeScript/NativeScript"
4311
},
44-
"hooks": [
45-
{
46-
"name": "nativescript-core",
47-
"type": "before-checkForChanges",
48-
"script": "cli-hooks/before-checkForChanges.js",
49-
"inject": true
50-
}
51-
]
52-
},
53-
"snapshot": {
54-
"android": {
55-
"tns-java-classes": {
56-
"modules": [
57-
"ui/frame/activity",
58-
"ui/frame/fragment"
59-
]
60-
}
12+
"files": [
13+
"**/*.d.ts",
14+
"**/*.js",
15+
"**/platforms/ios/**",
16+
"**/platforms/android/**",
17+
"**/package.json",
18+
"!org.nativescript.widgets.d.ts"
19+
],
20+
"license": "Apache-2.0",
21+
"dependencies": {
22+
"css-tree": "^1.0.0-alpha.37",
23+
"nativescript-hook": "0.2.5",
24+
"reduce-css-calc": "^2.1.6",
25+
"semver": "6.3.0",
26+
"tns-core-modules-widgets": "next",
27+
"tslib": "1.10.0"
28+
},
29+
"devDependencies": {
30+
"@types/chai": "~4.2.5",
31+
"@types/node": "~10.12.18",
32+
"tns-platform-declarations": "next"
33+
},
34+
"scripts": {
35+
"version": "conventional-changelog -p angular -i ../CHANGELOG.md -s && git add ../CHANGELOG.md",
36+
"postinstall": "node cli-hooks/postinstall.js",
37+
"preuninstall": "node cli-hooks/preuninstall.js"
38+
},
39+
"nativescript": {
40+
"platforms": {
41+
"ios": "6.0.0",
42+
"android": "6.0.0"
43+
},
44+
"hooks": [{
45+
"name": "nativescript-core",
46+
"type": "before-checkForChanges",
47+
"script": "cli-hooks/before-checkForChanges.js",
48+
"inject": true
49+
}]
50+
},
51+
"snapshot": {
52+
"android": {
53+
"tns-java-classes": {
54+
"modules": [
55+
"ui/frame/activity",
56+
"ui/frame/fragment"
57+
]
58+
}
59+
}
6160
}
62-
}
63-
}
61+
}

0 commit comments

Comments
 (0)