Skip to content

Commit c4b09fe

Browse files
author
Zdravko
authored
Merge pull request #385 from NativeScript/update-sidedrawer-demo
chore: update 'sidedrawer' demo for nativescript-ui-sidedrawer v7.0.2
2 parents f2b795c + 4e771c7 commit c4b09fe

File tree

5 files changed

+86
-16
lines changed

5 files changed

+86
-16
lines changed

‎sidedrawer/app/navigation/category-list-page.xml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<nsDrawer:RadSideDrawer id="sideDrawer" xmlns:nsDrawer="nativescript-ui-sidedrawer">
22
<nsDrawer:RadSideDrawer.drawerContent>
3-
<GridLayout rows="auto, *" class="root-drawer-content">
4-
<StackLayout>
3+
<GridLayout rows="auto, *, auto" class="root-drawer-content">
4+
<StackLayout row="0">
55
<Label text="{{ currentParent.titleRoot }}" class="h1 text-center" />
66
</StackLayout>
77
<ListView id="sidedrawer-list" row="1" items="{{ currentSubItems }}" itemTap="{{ onNavigationItemTap }}" class="root-drawer-content" >
@@ -11,6 +11,7 @@
1111
</GridLayout>
1212
</ListView.itemTemplate>
1313
</ListView>
14+
<Button row="2" text="Close Drawer" tap="{{ onCloseDrawerTap }}"/>
1415
</GridLayout>
1516
</nsDrawer:RadSideDrawer.drawerContent>
1617
<nsDrawer:RadSideDrawer.mainContent>

‎sidedrawer/app/navigation/main-content-page.ts

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,65 @@
11
import { NavigationViewModel } from "./categories-view-model";
22
import { Page } from "tns-core-modules/ui/page";
3-
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
3+
import { RadSideDrawer, FadeTransition, PushTransition, RevealTransition, ReverseSlideOutTransition, ScaleDownPusherTransition, ScaleUpTransition, SlideAlongTransition, SlideInOnTopTransition } from "nativescript-ui-sidedrawer";
4+
import { getRootView } from "tns-core-modules/application";
5+
6+
let rootDrawer: RadSideDrawer;
47

58
export function pageLoaded(args) {
69
let dataModel = new NavigationViewModel();
710
let page = args.object as Page;
811
page.bindingContext = dataModel;
9-
dataModel.sideDrawer = page.parent.parent as RadSideDrawer;
12+
rootDrawer = getRootView() as RadSideDrawer;
13+
dataModel.sideDrawer = rootDrawer;
1014
dataModel.sideDrawer.drawerContent.bindingContext = page.bindingContext;
15+
}
16+
17+
export function onNavBtnTap() {
18+
if (rootDrawer) {
19+
rootDrawer.toggleDrawerState();
20+
}
21+
}
22+
23+
function printTransition(transition: string) {
24+
console.log("Changed drawer transition to", transition);
25+
}
26+
27+
export function onFadeTransitionTap() {
28+
rootDrawer.drawerTransition = new FadeTransition();
29+
printTransition("FadeTransition");
30+
}
31+
32+
export function onPushTransitionTap() {
33+
rootDrawer.drawerTransition = new PushTransition();
34+
printTransition("PushTransition");
35+
}
36+
37+
export function onRevealTransitionTap() {
38+
rootDrawer.drawerTransition = new RevealTransition();
39+
printTransition("RevealTransition");
40+
}
41+
42+
export function onReverseSlideOutTransitionTap() {
43+
rootDrawer.drawerTransition = new ReverseSlideOutTransition();
44+
printTransition("ReverseSlideOutTransition");
45+
}
46+
47+
export function onScaleDownPusherTransitionTap() {
48+
rootDrawer.drawerTransition = new ScaleDownPusherTransition();
49+
printTransition("ScaleDownPusherTransition");
50+
}
51+
52+
export function onScaleUpTransitionTap() {
53+
rootDrawer.drawerTransition = new ScaleUpTransition();
54+
printTransition("ScaleUpTransition");
55+
}
56+
57+
export function onSlideAlongTransitionTap() {
58+
rootDrawer.drawerTransition = new SlideAlongTransition();
59+
printTransition("SlideAlongTransition");
60+
}
61+
62+
export function onSlideInOnTopTransitionTap() {
63+
rootDrawer.drawerTransition = new SlideInOnTopTransition();
64+
printTransition("SlideInOnTopTransition");
1165
}

‎sidedrawer/app/navigation/main-content-page.xml

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1-
<Page xmlns="http://www.nativescript.org/tns.xsd"
2-
xmlns:lv="nativescript-pro-ui/listview"
3-
loaded="pageLoaded">
1+
<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:lv="nativescript-pro-ui/listview" loaded="pageLoaded">
42
<Page.actionBar>
5-
<ActionBar title="{{ currentParent.title }}"/>
3+
<ActionBar title="{{ currentParent.title }}">
4+
<ActionItem text="Root" tap="onNavBtnTap" />
5+
</ActionBar>
66
</Page.actionBar>
77
<GridLayout rows="auto, *">
8-
<ListView row="1" items="{{ currentSubItems }}" itemTap="{{ onNavigationItemTap }}" >
8+
<GridLayout orientation="horizontal" columns="50*, 50*" rows="auto, auto, auto, auto">
9+
<Button text="SlideInOnTop" tap="onSlideInOnTopTransitionTap" row="0" col="0"/>
10+
<Button text="Fade" tap="onFadeTransitionTap" row="0" col="1"/>
11+
<Button text="Push" tap="onPushTransitionTap" row="1" col="0"/>
12+
<Button text="Reveal" tap="onRevealTransitionTap" row="1" col="1"/>
13+
<Button text="ReverseSlideOut" tap="onReverseSlideOutTransitionTap" row="2" col="0"/>
14+
<Button text="ScaleDownPusher" tap="onScaleDownPusherTransitionTap" row="2" col="1"/>
15+
<Button text="ScaleUp" tap="onScaleUpTransitionTap" row="3" col="0"/>
16+
<Button text="SlideAlong" tap="onSlideAlongTransitionTap" row="3" col="1"/>
17+
</GridLayout>
18+
19+
<ListView row="1" items="{{ currentSubItems }}" itemTap="{{ onNavigationItemTap }}">
920
<ListView.itemTemplate>
1021
<StackLayout class="itemStackLayout">
11-
<Label text="{{ title }}" textWrap="true" class="titleLabel"/>
12-
<StackLayout height="1" backgroundColor="#EEEEEE"/>
13-
</StackLayout>
22+
<Label text="{{ title }}" textWrap="true" class="titleLabel" />
23+
<StackLayout height="1" backgroundColor="#EEEEEE" />
24+
</StackLayout>
1425
</ListView.itemTemplate>
1526
</ListView>
1627
</GridLayout>

‎sidedrawer/app/navigation/page-view-model.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,10 @@ export class PageViewModel extends Observable {
9797
}
9898
}
9999

100+
public onCloseDrawerTap() {
101+
this.sideDrawer.closeDrawer();
102+
}
103+
100104
_toggleItemSelected(view: View, isSelected: boolean): any {
101105
// using css styles from theme
102106
view.className = isSelected ? "sidedrawer-list-item active" : "sidedrawer-list-item";

‎sidedrawer/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@
2828
"karma-nativescript-launcher": "^0.4.0",
2929
"karma-webpack": "3.0.5",
3030
"markdown-snippet-injector": "^0.2.2",
31-
"mocha": "^3.3.0",
31+
"mocha": "5.2.0",
3232
"mocha-junit-reporter": "1.18.0",
33-
"mocha-multi": "1.1.0",
33+
"mocha-multi-reporters": "^1.1.0",
3434
"mochawesome": "3.1.1",
3535
"nativescript-css-loader": "~0.26.1",
36-
"nativescript-dev-appium": "~6.0.0",
36+
"nativescript-dev-appium": "^6.0.0",
3737
"nativescript-dev-webpack": "^1.0.0",
38-
"tns-platform-declarations": "^6.1.0",
38+
"tns-platform-declarations": "^6.1.1",
3939
"tslint": "~5.11.0",
4040
"typescript": "~3.4.5"
4141
}

0 commit comments

Comments
 (0)