8000 feat(tab): add support for no tabstrip · NativeScript/NativeScript@cb44472 · GitHub
[go: up one dir, main page]
Skip to content

Commit cb44472

Browse files
MartoYankovMartoYankov
committed
feat(tab): add support for no tabstrip
1 parent 1f8dca9 commit cb44472

File tree

15 files changed

+324
-60
lines changed

15 files changed

+324
-60
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+
</TabCo F438 ntentItem>
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: 27 additions & 1 deletion
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,7 +193,8 @@ describe(`${suite}-${spec}-suite`, async function () {
186193

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

192200
await driver.backgroundApp(1);
@@ -201,6 +209,7 @@ describe(`${suite}-${spec}-suite`, async function () {
201209

202210
it(`${spec}-font-icons`, async function () {
203211
await bottomNavigationBasePage.navigateToSample("font-icons");
212+
await bottomNavigationBasePage.refreshTabItems();
204213
await driver.imageHelper.compareScreen();
205214

206215
await bottomNavigationBasePage.tabOnItem(1);
@@ -216,6 +225,7 @@ describe(`${suite}-${spec}-suite`, async function () {
216225

217226
it(`${spec}-icon-change`, async function () {
218227
await bottomNavigationBasePage.navigateToSample("icon-change");
228+
await bottomNavigationBasePage.refreshTabItems();
219229
await bottomNavigationBasePage.tabOnItem(1);
220230
await driver.imageHelper.compareScreen();
221231

@@ -229,13 +239,15 @@ describe(`${suite}-${spec}-suite`, async function () {
229239

230240
it(`${spec}-icon-title-placment`, async function () {
231241
await bottomNavigationBasePage.navigateToSample("icon-title-placement");
242+
await bottomNavigationBasePage.refreshTabItems();
232243
await driver.imageHelper.compareScreen();
233244
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
234245
await bottomNavigationBasePage.navigateBackToSuitMainPage();
235246
});
236247

237248
it(`${spec}-5470-issue`, async function () {
238249
await bottomNavigationBasePage.navigateToSample("issue-5470");
250+
await bottomNavigationBasePage.refreshTabItems();
239251
await driver.imageHelper.compareScreen();
240252

241253
await bottomNavigationBasePage.tabOnItem(1);
@@ -247,6 +259,7 @@ describe(`${suite}-${spec}-suite`, async function () {
247259

248260
it(`${spec}-text-transform`, async function () {
249261
await bottomNavigationBasePage.navigateToSample("text-transform");
262+
await bottomNavigationBasePage.refreshTabItems();
250263
await driver.imageHelper.compareScreen();
251264

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

259272
it(`${spec}-fonts`, async function () {
260273
await bottomNavigationBasePage.navigateToSample("text-transform");
274+
await bottomNavigationBasePage.refreshTabItems();
261275
await driver.imageHelper.compareScreen();
262276

263277
await bottomNavigationBasePage.tabOnItem(1);
@@ -266,4 +280,16 @@ describe(`${suite}-${spec}-suite`, async function () {
266280
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
267281
await bottomNavigationBasePage.navigateBackToSuitMainPage();
268282
});
283+
284+
it(`${spec}-custom-tabstrip`, async function () {
285+
await bottomNavigationBasePage.navigateToSample("custom-tabstrip");
286+
await driver.imageHelper.compareScreen();
287+
288+
const secondTab = await driver.waitForElement("second-tab");
289+
await secondTab.tap();
290+
await driver.imageHelper.compareScreen();
291+
292+
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
293+
await bottomNavigationBasePage.navigateBackToSuitMainPage();
294+
});
269295
});

‎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)
0