Skip to content

Commit acc3436

Browse files
MartoYankovMartoYankov
authored
feat(tab): add support for custom tabstrip (NativeScript#7580)
1 parent e2c3c8c commit acc3436

File tree

16 files changed

+313
-45
lines changed

16 files changed

+313
-45
lines changed

‎e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.custom-tabstrip {
2+
height: 100;
3+
vertical-align: bottom;
4+
ios-overflow-safe-area-enabled: false;
5+
}
6+
7+
.custom-tabstripitem {
8+
height: 80;
9+
width: 80;
10+
vertical-align: center;
11+
horizontal-align: center;
12+
clip-path: circle(100% at 50% 50%);
13+
}
14+
15+
.custom-title {
16+
color: white;
17+
vertical-align: center;
18+
horizontal-align: center;
19+
}
20+
21+
.skyblue {
22+
background-color: skyblue;
23+
}
24+
25+
.gold {
26+
background-color: gold;
27+
}
28+
29+
.olive {
30+
background-color: olive;
31+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
4+
5+
export function goToFirst(args: EventData) {
6+
const page = <Page>(<any>args.object).page;
7+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
8+
9+
bottomNav.selectedIndex = 0;
10+
}
11+
12+
export function goToSecond(args: EventData) {
13+
const page = <Page>(<any>args.object).page;
14+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
15+
16+
bottomNav.selectedIndex = 1;
17+
}
18+
19+
export function goToThird(args: EventData) {
20+
const page = <Page>(<any>args.object).page;
21+
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
22+
23+
bottomNav.selectedIndex = 2;
24+
}

‎e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.xml

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<Page>
2+
3+
<ActionBar title="BottomNavigation Custom TabStrip" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<GridLayout>
7+
<GridLayout>
8+
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
9+
<TabContentItem>
10+
<GridLayout backgroundColor="skyblue">
11+
<Label text="First View"/>
12+
</GridLayout>
13+
</TabContentItem>
14+
<TabContentItem>
15+
<GridLayout backgroundColor="gold">
16+
<Label text="Second View"/>
17+
</GridLayout>
18+
</TabContentItem>
19+
<TabContentItem>
20+
<GridLayout backgroundColor="olive">
21+
<Label text="Third View"/>
22+
</GridLayout>
23+
</TabContentItem>
24+
</BottomNavigation>
25+
</GridLayout>
26+
27+
<GridLayout columns="*, *, *" class="custom-tabstrip">
28+
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
29+
<Label text="First" class="custom-title"></Label>
30+
</GridLayout>
31+
32+
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
33+
<Label text="Second" class="custom-title"></Label>
34+
</GridLayout>
35+
36+
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
37+
<Label text="Third" class="custom-title"></Label>
38+
</GridLayout>
39+
</GridLayout>
40+
</GridLayout>
41+
</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
@@ -23,6 +23,7 @@ export function loadExamples() {
2323
examples.set("font-icons", "bottom-navigation/font-icons-page");
2424
examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
2525
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
26+
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
2627

2728
return examples;
2829
}

‎e2e/ui-tests-app/app/tabs/custom-tabstrip-page.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.custom-tabstrip {
2+
height: 100;
3+
vertical-align: bottom;
4+
ios-overflow-safe-area-enabled: false;
5+
}
6+
7+
.custom-tabstripitem {
8+
height: 80;
9+
width: 80;
10+
vertical-align: center;
11+
horizontal-align: center;
12+
clip-path: circle(100% at 50% 50%);
13+
}
14+
15+
.custom-title {
16+
color: white;
17+
vertical-align: center;
18+
horizontal-align: center;
19+
}
20+
21+
.skyblue {
22+
background-color: skyblue;
23+
}
24+
25+
.gold {
26+
background-color: gold;
27+
}
28+
29+
.olive {
30+
background-color: olive;
31+
}

‎e2e/ui-tests-app/app/tabs/custom-tabstrip-page.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Page } from "tns-core-modules/ui/page";
3+
import { Tabs } from "tns-core-modules/ui/tabs";
4+
5+
export function goToFirst(args: EventData) {
6+
const page = <Page>(<any>args.object).page;
7+
const bottomNav = <Tabs>page.getViewById("tabsNav");
8+
9+
bottomNav.selectedIndex = 0;
10+
}
11+
12+
export function goToSecond(args: EventData) {
13+
const page = <Page>(<any>args.object).page;
14+
const bottomNav = <Tabs>page.getViewById("tabsNav");
15+
16+
bottomNav.selectedIndex = 1;
17+
}
18+
19+
export function goToThird(args: EventData) {
20+
const page = <Page>(<any>args.object).page;
21+
const bottomNav = <Tabs>page.getViewById("tabsNav");
22+
23+
bottomNav.selectedIndex = 2;
24+
}

‎e2e/ui-tests-app/app/tabs/custom-tabstrip-page.xml

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<Page>
2+
3+
<ActionBar title="Tabs Custom TabStrip" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<GridLayout>
7+
<GridLayout>
8+
<Tabs id="tabsNav" automationText="tabNavigation" >
9+
<TabContentItem>
10+
<GridLayout backgroundColor="skyblue">
11+
<Label text="First View"/>
12+
</GridLayout>
13+
</TabContentItem>
14+
<TabContentItem>
15+
<GridLayout backgroundColor="gold">
16+
<Label text="Second View"/>
17+
</GridLayout>
18+
</TabContentItem>
19+
<TabContentItem>
20+
<GridLayout backgroundColor="olive">
21+
<Label text="Third View"/>
22+
</GridLayout>
23+
</TabContentItem>
24+
</Tabs>
25+
</GridLayout>
26+
27+
<GridLayout columns="*, *, *" class="custom-tabstrip">
28+
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
29+
<Label text="First" class="custom-title"></Label>
30+
</GridLayout>
31+
32+
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
33+
<Label text="Second" class="custom-title"></Label>
34+
</GridLayout>
35+
36+
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
37+
<Label text="Third" class="custom-title"></Label>
38+
</GridLayout>
39+
</GridLayout>
40+
</GridLayout>
41+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export function loadExamples() {
2929
examples.set("font-icons", "tabs/font-icons-page");
3030
examples.set("nested-layout", "tabs/nested-layout-page");
3131
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
32+
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
3233

3334
return examples;
3435
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ describe(`${suite}-${spec}-suite`, async function () {
4040

4141
it(`${spec}-background-color`, async function () {
4242
await bottomNavigationBasePage.navigateToSample("background-color");
43+
await bottomNavigationBasePage.refreshTabItems();
4344
await driver.imageHelper.compareScreen();
4445

4546
await bottomNavigationBasePage.tabOnItem(1);
@@ -55,6 +56,7 @@ describe(`${suite}-${spec}-suite`, async function () {
5556
*/
5657
it(`${spec}-binding-add-items`, async function () {
5758
await bottomNavigationBasePage.navigateToSample("binding");
59+
await bottomNavigationBasePage.refreshTabItems();
5860
await driver.imageHelper.compareScreen();
5961

6062
const addTabBtn = await driver.waitForElement("add-tab");
@@ -83,6 +85,7 @@ describe(`${suite}-${spec}-suite`, async function () {
8385
*/
8486
it(`${spec}-binding-remove-items`, async function () {
8587
await bottomNavigationBasePage.navigateToSample("binding");
88+
await bottomNavigationBasePage.refreshTabItems();
8689
await driver.imageHelper.compareScreen();
8790

8891
const removeTabBtn = await driver.waitForElement("remove-last-tab");
@@ -115,6 +118,7 @@ describe(`${suite}-${spec}-suite`, async function () {
115118

116119
it(`${spec}-bottom-navigation`, async function () {
117120
await bottomNavigationBasePage.navigateToSample("bottom-navigation");
121+
await bottomNavigationBasePage.refreshTabItems();
118122
await driver.imageHelper.compareScreen();
119123

120124
const goToSecondBtn = await driver.waitForElement("goToSecond");
@@ -130,6 +134,7 @@ describe(`${suite}-${spec}-suite`, async function () {
130134

131135
it(`${spec}-color`, async function () {
132136
await bottomNavigationBasePage.navigateToSample("color");
137+
await bottomNavigationBasePage.refreshTabItems();
133138
await driver.imageHelper.compareScreen();
134139

135140
await bottomNavigationBasePage.tabOnItem(1);
@@ -141,6 +146,7 @@ describe(`${suite}-${spec}-suite`, async function () {
141146

142147
it(`${spec}-fancy-fonts-select-tabs`, async function () {
143148
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
149+
await bottomNavigationBasePage.refreshTabItems();
144150
await driver.imageHelper.compareScreen();
145151

146152
for (let index = 1; index < 4; index++) {
@@ -154,6 +160,7 @@ describe(`${suite}-${spec}-suite`, async function () {
154160

155161
it(`${spec}-fancy-fonts-selected-index`, async function () {
156162
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
163+
await bottomNavigationBasePage.refreshTabItems();
157164

158165
let selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
159166
logInfo(`Click on "select second tab button"`);
@@ -186,6 +193,7 @@ describe(`${suite}-${spec}-suite`, async function () {
186193

187194
it(`${spec}-fancy-fonts-change-orientation`, async function () {
188195
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
196+
await bottomNavigationBasePage.refreshTabItems();
189197
await driver.setOrientation(DeviceOrientation.LANDSCAPE);
190198
await driver.imageHelper.compareScreen();
191199

@@ -212,6 +220,7 @@ describe(`${suite}-${spec}-suite`, async function () {
212220

213221
it(`${spec}-font-icons`, async function () {
214222
await bottomNavigationBasePage.navigateToSample("font-icons");
223+
await bottomNavigationBasePage.refreshTabItems();
215224
await driver.imageHelper.compareScreen();
216225

217226
await bottomNavigationBasePage.tabOnItem(1);
@@ -227,6 +236,7 @@ describe(`${suite}-${spec}-suite`, async function () {
227236

228237
it(`${spec}-icon-change`, async function () {
229238
await bottomNavigationBasePage.navigateToSample("icon-change");
239+
await bottomNavigationBasePage.refreshTabItems();
230240
await bottomNavigationBasePage.tabOnItem(1);
231241
await driver.imageHelper.compareScreen();
232242

@@ -240,13 +250,15 @@ describe(`${suite}-${spec}-suite`, async function () {
240250

241251
it(`${spec}-icon-title-placment`, async function () {
242252
await bottomNavigationBasePage.navigateToSample("icon-title-placement");
253+
await bottomNavigationBasePage.refreshTabItems();
243254
await driver.imageHelper.compareScreen();
244255
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
245256
await bottomNavigationBasePage.navigateBackToSuitMainPage();
246257
});
247258

248259
it(`${spec}-5470-issue`, async function () {
249260
await bottomNavigationBasePage.navigateToSample("issue-5470");
261+
await bottomNavigationBasePage.refreshTabItems();
250262
await driver.imageHelper.compareScreen();
251263

252264
await bottomNavigationBasePage.tabOnItem(1);
@@ -258,6 +270,7 @@ describe(`${suite}-${spec}-suite`, async function () {
258270

259271
it(`${spec}-text-transform`, async function () {
260272
await bottomNavigationBasePage.navigateToSample("text-transform");
273+
await bottomNavigationBasePage.refreshTabItems();
261274
await driver.imageHelper.compareScreen();
262275

263276
await bottomNavigationBasePage.tabOnItem(1);
@@ -269,6 +282,7 @@ describe(`${suite}-${spec}-suite`, async function () {
269282

270283
it(`${spec}-fonts`, async function () {
271284
await bottomNavigationBasePage.navigateToSample("text-transform");
285+
await bottomNavigationBasePage.refreshTabItems();
272286
await driver.imageHelper.compareScreen();
273287

274288
await bottomNavigationBasePage.tabOnItem(1);
@@ -277,4 +291,16 @@ describe(`${suite}-${spec}-suite`, async function () {
277291
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
278292
await bottomNavigationBasePage.navigateBackToSuitMainPage();
279293
});
294+
295+
it(`${spec}-custom-tabstrip`, async function () {
296+
await bottomNavigationBasePage.navigateToSample("custom-tabstrip");
297+
await driver.imageHelper.compareScreen();
298+
299+
const secondTab = await driver.waitForElement("second-tab");
300+
await secondTab.tap();
301+
await driver.imageHelper.compareScreen();
302+
303+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
304+
await bottomNavigationBasePage.navigateBackToSuitMainPage();
305+
});
280306
});

‎e2e/ui-tests-app/e2e/suites/tab-navigation/tab-navigation-base-page.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export abstract class TabNavigationBasePage extends PageObjectBaseModel {
2121

2222
async navigateToSample(sample: string) {
2323
await super.navigateToSample(sample);
24-
await this.refreshTabItems();
2524
}
2625

2726
async refreshTabItems() {

0 commit comments

Comments
 (0)