Skip to content

Commit 0c2c1cc

Browse files
MartoYankovMartoYankov
authored
feat: re-design tab views (#7340)
1 parent b8a82f2 commit 0c2c1cc

69 files changed

Lines changed: 6915 additions & 2 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/app/ui-tests-app/bottom-navigation/background-color.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page">
2+
3+
<ActionBar title="BottomNavigation background-color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation style="background-color: green;">
7+
<TabStrip>
8+
<TabStripItem title="First"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem>
13+
<GridLayout>
14+
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
21+
</GridLayout>
22+
</TabContentItem>
23+
</BottomNavigation>
24+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/bottom-navigation.ts‎

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

‎apps/app/ui-tests-app/bottom-navigation/bottom-navigation.xml‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<Page>
2+
3+
<ActionBar title="BottomNavigation" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<!-- w/o TabStrip -->
7+
<!-- <BottomNavigation>
8+
<TabContentItem>
9+
<GridLayout>
10+
<Label text="First View"/>
11+
</GridLayout>
12+
</TabContentItem>
13+
<TabContentItem>
14+
<GridLayout>
15+
<Label text="Second View"/>
16+
</GridLayout>
17+
</TabContentItem>
18+
</BottomNavigation> -->
19+
20+
<!-- w/ TabStrip -->
21+
<BottomNavigation id="bottomNav">
22+
<TabStrip>
23+
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
24+
<TabStripItem>
25+
<!-- <Image src="res://icon" /> -->
26+
<Label text="News" />
27+
</TabStripItem>
28+
<TabStripItem title="Favorites" iconSource="res://icon"></TabStripItem>
29+
<TabStripItem>
30+
<!-- <Image src="res://icon" /> -->
31+
<Label text="Places" />
32+
</TabStripItem>
33+
<TabStripItem title="Music" iconSource="res://icon"></TabStripItem>
34+
</TabStrip>
35+
36+
<TabContentItem>
37+
<StackLayout>
38+
<Label text="First View"/>
39+
<Button tap="goToSecond" text="go to second" />
40+
</StackLayout>
41+
</TabContentItem>
42+
<TabContentItem>
43+
<StackLayout>
44+
<Label text="Second View"/>
45+
<Button tap="goToFirst" text="go to first" />
46+
</StackLayout>
47+
</TabContentItem>
48+
<TabContentItem>
49+
<StackLayout>
50+
<Label text="First View"/>
51+
<Button tap="goToSecond" text="go to second" />
52+
</StackLayout>
53+
</TabContentItem>
54+
<TabContentItem>
55+
<StackLayout>
56+
<Label text="Second View"/>
57+
<Button tap="goToFirst" text="go to first" />
58+
</StackLayout>
59+
</TabContentItem>
60+
<TabContentItem>
61+
<StackLayout>
62+
<Label text="First View"/>
63+
<Button tap="goToSecond" text="go to second" />
64+
</StackLayout>
65+
</TabContentItem>
66+
</BottomNavigation>
67+
68+
<!-- =============================================================================================== -->
69+
70+
<!-- Bottom Bar with TabStrip -->
71+
<!-- <BottomNavigationBar>
72+
<TabStrip>
73+
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
74+
<TabStripItem>
75+
<Image src="res://icon" />
76+
<Label text="Second Tab" />
77+
</TabStripItem>
78+
</TabStrip>
79+
</BottomNavigationBar> -->
80+
81+
<!-- Bottom Bar w/o TabStrip -->
82+
<!-- <BottomNavigationBar>
83+
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
84+
<TabStripItem>
85+
<Image src="res://icon" />
86+
<Label text="Second Tab" />
87+
</TabStripItem>
88+
</BottomNavigationBar> -->
89+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/color.xml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Page class="page">
2+
<ActionBar title="BottomNavigation color" icon="" class="action-bar">
3+
</ActionBar>
4+
5+
<BottomNavigation style="color: green;">
6+
<TabStrip>
7+
<TabStripItem title="First"></TabStripItem>
8+
<TabStripItem title="Second"></TabStripItem>
9+
</TabStrip>
10+
11+
<TabContentItem>
12+
<GridLayout>
13+
<Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
14+
</GridLayout>
15+
</TabContentItem>
16+
17+
<TabContentItem>
18+
<GridLayout>
19+
<Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
20+
</GridLayout>
21+
</TabContentItem>
22+
</BottomNavigation>
23+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/icon-change.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
2+
3+
export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
4+
const bottomNav = args.object as BottomNavigation;
5+
6+
const newItem = bottomNav.tabStrip.items[args.newIndex];
7+
if (newItem) {
8+
newItem.iconSource = "res://icon";
9+
}
10+
11+
const oldItem = bottomNav.tabStrip.items[args.oldIndex];
12+
if (oldItem) {
13+
oldItem.iconSource = "res://testlogo";
14+
}
15+
}

‎apps/app/ui-tests-app/bottom-navigation/icon-change.xml‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page" navigatingTo="onNavigatingTo">
2+
<ActionBar title="BottomNavigation icon change" icon="" class="action-bar">
3+
</ActionBar>
4+
5+
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged">
6+
<TabStrip>
7+
<TabStripItem iconSource="res://icon"></TabStripItem>
8+
<TabStripItem iconSource="res://testlogo"></TabStripItem>
9+
</TabStrip>
10+
11+
<TabContentItem>
12+
<GridLayout>
13+
<Label text="first tab"/>
14+
</GridLayout>
15+
</TabContentItem>
16+
17+
<TabContentItem>
18+
<GridLayout>
19+
<Label text="second tab"/>
20+
</GridLayout>
21+
</TabContentItem>
22+
</BottomNavigation>
23+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/icon-title-placement.xml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<Page class="page">
2+
<ActionBar title="BottomNavigation icon title placement" icon="" class="action-bar">
3+
</ActionBar>
4+
5+
<BottomNavigation>
6+
<TabStrip>
7+
<TabStripItem title="Title" iconSource="res://add_to_fav"></TabStripItem>
8+
<TabStripItem iconSource="res://add_to_fav"></TabStripItem>
9+
<TabStripItem title="Title"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem>
13+
<GridLayout>
14+
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
21+
</GridLayout>
22+
</TabContentItem>
23+
24+
<TabContentItem>
25+
<GridLayout>
26+
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
27+
</GridLayout>
28+
</TabContentItem>
29+
</BottomNavigation>
30+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/issue-5470.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
2+
3+
<ActionBar title="BottomNavigation issue 5470" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<BottomNavigation>
7+
<TabStrip>
8+
<TabStripItem title="Tab1"></TabStripItem>
9+
<TabStripItem title="Tab2"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem>
13+
<GridLayout rows="*, auto" columns="*">
14+
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
15+
<StackLayout row="1" backgroundColor="green" height="50"></StackLayout>
16+
</GridLayout>
17+
</TabContentItem>
18+
19+
<TabContentItem>
20+
<GridLayout rows="*, auto" columns="*">
21+
<StackLayout row="0" backgroundColor="lightblue"></StackLayout>
22+
<StackLayout row="1" backgroundColor="red" height="50"></StackLayout>
23+
</GridLayout>
24+
</TabContentItem>
25+
</BottomNavigation>
26+
27+
</Page>

‎apps/app/ui-tests-app/bottom-navigation/main-page.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { SubMainPageViewModel } from "../sub-main-page-view-model";
3+
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
4+
import { Page } from "tns-core-modules/ui/page";
5+
6+
export function pageLoaded(args: EventData) {
7+
const page = <Page>args.object;
8+
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
9+
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
10+
}
11+
12+
export function loadExamples() {
13+
const examples = new Map<string, string>();
14+
examples.set("bottom-navigation", "bottom-navigation/bottom-navigation");
15+
examples.set("issue-5470", "bottom-navigation/issue-5470");
16+
examples.set("background-color", "bottom-navigation/background-color");
17+
examples.set("color", "bottom-navigation/color");
18+
examples.set("icon-title-placement", "bottom-navigation/icon-title-placement");
19+
examples.set("icon-change", "bottom-navigation/icon-change");
20+
21+
return examples;
22+
}

‎apps/app/ui-tests-app/bottom-navigation/main-page.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Page loaded="pageLoaded">
3+
<ScrollView orientation="vertical" row="1">
4+
<WrapLayout id="wrapLayoutWithExamples"/>
5+
</ScrollView>
6+
</Page>

0 commit comments

Comments
 (0)