Skip to content

feat: re-design tab views #7340

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 20 commits into from
Jun 13, 2019
Merged

feat: re-design tab views #7340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2861bb3
wip(): add bottom navigation shell classes
MartoYankov Mar 6, 2019
0995a9d
wip: add bottom navigation markup changes
MartoYankov Apr 5, 2019
e86c1c2
wip: add bottomnavigation implementation for android
MartoYankov Apr 19, 2019
6901bdd
wip: add bottom navigation unit tests
MartoYankov May 16, 2019
44faac1
wip: add more unit tests
MartoYankov May 17, 2019
dd9e4c3
wip: add ui tests for bottom nav
MartoYankov May 20, 2019
565106f
wip: refactor bottom navigation
MartoYankov May 20, 2019
98c7c4b
wip: add basic tabs implementation
MartoYankov May 23, 2019
e70d90d
wip: add ios tabs implementation and tests
MartoYankov Jun 3, 2019
fafefe2
wip: add even more tests
MartoYankov Jun 3, 2019
108d2a4
wip: add swipeEnabled property for Tabs
MartoYankov Jun 5, 2019
ff9bbae
wip: fix some tests
MartoYankov Jun 6, 2019
6971416
wip: add offsceenTabLimit property to Tabs
MartoYankov Jun 6, 2019
e23fb8c
wip: add tabsPosition property to Tabs
MartoYankov Jun 6, 2019
b02db77
wip: restructuring the tabs folder
MartoYankov Jun 7, 2019
d4e01de
wip: add tabs module to tab navigation
MartoYankov Jun 9, 2019
c39bbcd
wip: refactor folder structure
MartoYankov Jun 10, 2019
0f0cbc2
wip: add androidx support
MartoYankov Jun 10, 2019
1676c08
wip: fix unit tests
MartoYankov Jun 12, 2019
fc95dd8
Merge branch 'master' into myankov/tabs
MartoYankov Jun 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/background-color.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<Page class="page">

<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="background-color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
19 changes: 19 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/bottom-navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { EventData } from "tns-core-modules/data/observable";
import { SubMainPageViewModel } from "../sub-main-page-view-model";
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
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;
}
89 changes: 89 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/bottom-navigation.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<Page>

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

<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->

<!-- w/ TabStrip -->
<BottomNavigation id="bottomNav">
<TabStrip>
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="News" />
</TabStripItem>
<TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
<Label text="Places" />
</TabStripItem>
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
</TabStrip>

<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="Second View"/>
<Button tap="goToFirst" text="go to first" />
</StackLayout>
</TabContentItem>
<TabContentItem>
<StackLayout>
<Label text="First View"/>
<Button tap="goToSecond" text="go to second" />
</StackLayout>
</TabContentItem>
</BottomNavigation>

<!-- =============================================================================================== -->

<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->

<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>
23 changes: 23 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/color.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
15 changes: 15 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/icon-change.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";

export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
const bottomNav = args.object as BottomNavigation;

const newItem = bottomNav.tabStrip.items[args.newIndex];
if (newItem) {
newItem.iconSource = "res://icon";
}

const oldItem = bottomNav.tabStrip.items[args.oldIndex];
if (oldItem) {
oldItem.iconSource = "res://testlogo";
}
}
23 changes: 23 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/icon-change.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
</ActionBar>

<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
<TabStrip>
<TabStripItem iconSource="res://icon"></TabStripItem>
<TabStripItem iconSource="res://testlogo"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="first tab"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="second tab"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
30 changes: 30 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/icon-title-placement.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<Page class="page">
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
</ActionBar>

<BottomNavigation>
<TabStrip>
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
<TabStripItem title="Title"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
27 changes: 27 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/issue-5470.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">

<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
</ActionBar>

<BottomNavigation>
<TabStrip>
<TabStripItem title="Tab1"></TabStripItem>
<TabStripItem title="Tab2"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout rows="*, auto" columns="*">
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
</GridLayout>
</TabContentItem>
</BottomNavigation>

</Page>
22 changes: 22 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { EventData } from "tns-core-modules/data/observable";
import { SubMainPageViewModel } from "../sub-main-page-view-model";
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
import { Page } from "tns-core-modules/ui/page";

export function pageLoaded(args: EventData) {
const page = <Page>args.object;
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
}

export function loadExamples() {
const examples = new Map<string, string>();
examples.set("bottom-navigation", "bottom-navigation/bottom-navigation");
examples.set("issue-5470", "bottom-navigation/issue-5470");
examples.set("background-color", "bottom-navigation/background-color");
examples.set("color", "bottom-navigation/color");
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement");
examples.set("icon-change", "bottom-navigation/icon-change");

return examples;
}
6 changes: 6 additions & 0 deletions apps/app/ui-tests-app/bottom-navigation/main-page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Page loaded="pageLoaded">
<ScrollView orientation="vertical" row="1">
<WrapLayout id="wrapLayoutWithExamples"/>
</ScrollView>
</Page>
2 changes: 2 additions & 0 deletions apps/app/ui-tests-app/main-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export function pageLoaded(args: EventData) {
examples.set("animation", "animation/main-page");
examples.set("action-bar", "action-bar/main-page");
examples.set("bindings", "bindings/main-page");
examples.set("bottom-navigation", "bottom-navigation/main-page");
examples.set("tabs", "tabs/main-page");
examples.set("button", "button/main-page");
examples.set("css", "css/main-page");
examples.set("dialogs", "dialogs/main-page");
Expand Down
24 changes: 24 additions & 0 deletions apps/app/ui-tests-app/tabs/background-color.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<Page class="page">

<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="background-color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
23 changes: 23 additions & 0 deletions apps/app/ui-tests-app/tabs/color.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<Page class="page">
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
</ActionBar>

<BottomNavigation style="color: green;">
<TabStrip>
<TabStripItem title="First"></TabStripItem>
<TabStripItem title="Second"></TabStripItem>
</TabStrip>

<TabContentItem>
<GridLayout>
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>

<TabContentItem>
<GridLayout>
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</Page>
19 changes: 19 additions & 0 deletions apps/app/ui-tests-app/tabs/default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { EventData } from "tns-core-modules/data/observable";
import { SubMainPageViewModel } from "../sub-main-page-view-model";
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
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;
}
Loading