FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(tab): add support for no tabstrip by MartoYankov · Pull Request #7580 · NativeScript/NativeScript · GitHub

/ NativeScript Public

feat(tab): add support for no tabstrip #7580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MartoYankov merged 5 commits into from
Aug 14, 2019
Conversation 4 Commits 5 Checks 0 Files changed
Merged

feat(tab): add support for no tabstrip #7580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb44472
feat(tab): add support for no tabstrip
MartoYankov Jul 25, 2019
5526231
chore: fix typo
MartoYankov Aug 12, 2019
6fb15db
wip: rework init lifecycles
MartoYankov Aug 13, 2019
98a711d
Merge branch 'master' into myankov/no-tabstrip
dtopuzov Aug 14, 2019
3ea161f
fix: incorrect top tab bar coordinates
MartoYankov Aug 14, 2019
File filter

Filter by extension

Filter by extension .css  (2) .ts  (12) .xml  (2) All 3 file types selected
Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
31 changes: 31 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.css
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
ios-overflow-safe-area-enabled: false;
}

.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}

.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}

.skyblue {
background-color: skyblue;
}

.gold {
background-color: gold;
}

.olive {
background-color: olive;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";

export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");

bottomNav.selectedIndex = 0;
}

export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");

bottomNav.selectedIndex = 1;
}

export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");

bottomNav.selectedIndex = 2;
}
41 changes: 41 additions & 0 deletions e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<Page>

<ActionBar title="BottomNavigation Custom TabStrip" icon="" class="action-bar">
</ActionBar>

<GridLayout>
<GridLayout>
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</GridLayout>

<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>

<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>

<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>
1 change: 1 addition & 0 deletions e2e/ui-tests-app/app/bottom-navigation/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function loadExamples() {
examples.set("font-icons", "bottom-navigation/font-icons-page");
examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");

return examples;
}
31 changes: 31 additions & 0 deletions e2e/ui-tests-app/app/tabs/custom-tabstrip-page.css
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
Comment thread
MartoYankov marked this conversation as resolved.
ios-overflow-safe-area-enabled: false;
}

.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}

.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}

.skyblue {
background-color: skyblue;
}

.gold {
background-color: gold;
}

.olive {
background-color: olive;
}
24 changes: 24 additions & 0 deletions e2e/ui-tests-app/app/tabs/custom-tabstrip-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";

export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");

bottomNav.selectedIndex = 0;
}

export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");

bottomNav.selectedIndex = 1;
}

export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");

bottomNav.selectedIndex = 2;
}
41 changes: 41 additions & 0 deletions e2e/ui-tests-app/app/tabs/custom-tabstrip-page.xml
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<Page>

<ActionBar title="Tabs Custom TabStrip" icon="" class="action-bar">
</ActionBar>

<GridLayout>
<GridLayout>
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>

<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>

<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>

<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>
1 change: 1 addition & 0 deletions e2e/ui-tests-app/app/tabs/main-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export function loadExamples() {
examples.set("font-icons", "tabs/font-icons-page");
examples.set("nested-layout", "tabs/nested-layout-page");
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");

return examples;
}
26 changes: 26 additions & 0 deletions e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ describe(`${suite}-${spec}-suite`, async function () {

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

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

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

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

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

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

it(`${spec}-color`, async function () {
await bottomNavigationBasePage.navigateToSample("color");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();

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

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

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

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

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

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

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

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

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

it(`${spec}-icon-change`, async function () {
await bottomNavigationBasePage.navigateToSample("icon-change");
await bottomNavigationBasePage.refreshTabItems();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();

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

it(`${spec}-icon-title-placment`, async function () {
await bottomNavigationBasePage.navigateToSample("icon-title-placement");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});

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

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

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

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

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

await bottomNavigationBasePage.tabOnItem(1);
Expand All @@ -277,4 +291,16 @@ describe(`${suite}-${spec}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});

it(`${spec}-custom-tabstrip`, async function () {
await bottomNavigationBasePage.navigateToSample("custom-tabstrip");
await driver.imageHelper.compareScreen();

const secondTab = await driver.waitForElement("second-tab");
await secondTab.tap();
await driver.imageHelper.compareScreen();

assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
});
1 change: 0 additions & 1 deletion e2e/ui-tests-app/e2e/suites/tab-navigation/tab-navigation-base-page.ts
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export abstract class TabNavigationBasePage extends PageObjectBaseModel {

async navigateToSample(sample: string) {
await super.navigateToSample(sample);
await this.refreshTabItems();
}

async refreshTabItems() {
Expand Down
Loading
Back | FazBrowse Home | New Git URL