Skip to content

Commit 525200b

Browse files
NathanWalkerNathanWalker
committed
feat: actionbar improvements. modal to test out action-bar class on custom setup. also fixed errors with demo.
1 parent 6fc79f1 commit 525200b

11 files changed

Lines changed: 92 additions & 34 deletions

File tree

‎app/actionBar/actionBar.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ interface ICustomActionBar extends Page{
1111

1212
export function onLoad(args: EventData) {
1313
let page = <ICustomActionBar>args.object;
14-
let actionBarTitle = <Label>page.getViewById("actionBarTitle");
15-
16-
actionBarTitle.text = page.ActionBarTitle;
14+
let actionBarTitle = <Label>page.getViewById("actionBarTitle");
15+
actionBarTitle.text = page.ActionBarTitle;
1716
}

‎app/actionBar/actionBar.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@
1313
</ActionItem.actionView>
1414
</ActionItem>
1515
</iOS>
16+
<ActionItem tap="{{ openModal }}" text="Modal" class="action-item" ios.position="right" />
1617
</ActionBar.actionItems>
1718
</ActionBar>

‎app/app.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as application from 'application';
22
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
3+
import {isActive} from './sidedrawer/sidedrawer';
34
require( "nativescript-dom" );
45

56
TNSFontIcon.debug = false;
@@ -9,4 +10,5 @@ TNSFontIcon.paths = {
910
TNSFontIcon.loadCss();
1011

1112
application.resources['fonticon'] = fonticon;
13+
application.resources['isActive'] = isActive;
1214
application.start({ moduleName: 'main-page' });

‎app/pages/base.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,10 @@ export class BaseModel extends Observable {
2121
let sideDrawer = <RadSideDrawer>this.page.getViewById('sideDrawer');
2222
sideDrawer.toggleDrawerState();
2323
}
24+
25+
public openModal() {
26+
this.page.showModal('pages/modal', 'Custom ActionBar', () => {
27+
28+
});
29+
}
2430
}

‎app/pages/basics.xml‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,35 @@
1212
<StackLayout class="demo-full p-20">
1313
<GridLayout rows="auto" columns="*,*" class="h1 m-5 w-full">
1414
<Label text="Class: h1" row="0" col="0" />
15-
<Label text="Heading" row="0" col="1" class="right" />
15+
<Label text="Heading" row="0" col="1" class="text-right" />
1616
</GridLayout>
1717
<GridLayout rows="auto" columns="*,*" class="h2 m-5 w-full">
1818
<Label text="Class: h2" row="0" col="0" />
19-
<Label text="Heading" row="0" col="1" class="right" />
19+
<Label text="Heading" row="0" col="1" class="text-right" />
2020
</GridLayout>
2121
<GridLayout rows="auto" columns="*,*" class="h3 m-5 w-full">
2222
<Label text="Class: h3" row="0" col="0" />
23-
<Label text="Heading" row="0" col="1" class="right" />
23+
<Label text="Heading" row="0" col="1" class="text-right" />
2424
</GridLayout>
2525
<GridLayout rows="auto" columns="*,*" class="h4 m-5 w-full">
2626
<Label text="Class: h4" row="0" col="0" />
27-
<Label text="Heading" row="0" col="1" class="right" />
27+
<Label text="Heading" row="0" col="1" class="text-right" />
2828
</GridLayout>
2929
<GridLayout rows="auto" columns="*,*" class="h5 m-5 w-full">
3030
<Label text="Class: h5" row="0" col="0" />
31-
<Label text="Heading" row="0" col="1" class="right" />
31+
<Label text="Heading" row="0" col="1" class="text-right" />
3232
</GridLayout>
3333
<GridLayout rows="auto" columns="*,*" class="body m-5 w-full">
3434
<Label text="Class: body" row="0" col="0" />
35-
<Label text="Body" row="0" col="1" class="right" />
35+
<Label text="Body" row="0" col="1" class="text-right" />
3636
</GridLayout>
3737
<GridLayout rows="auto" columns="*,*" class="body2 m-5 w-full">
3838
<Label text="Class: body2" row="0" col="0" />
39-
<Label text="Body 2" row="0" col="1" class="right" />
39+
<Label text="Body 2" row="0" col="1" class="text-right" />
4040
</GridLayout>
4141
<GridLayout rows="auto" columns="*,*" class="footnote m-5 w-full">
4242
<Label text="Class: footnote" row="0" col="0" />
43-
<Label text="Footnote" row="0" col="1" class="right" />
43+
<Label text="Footnote" row="0" col="1" class="text-right" />
4444
</GridLayout>
4545
<StackLayout class="demo-full m-t-10">
4646
<Label text="Text" class="h2" />
@@ -49,27 +49,27 @@
4949

5050
<GridLayout rows="auto" columns="*,*" class="text-lowercase m-t-5 w-full">
5151
<Label text="text-lowercase" row="0" col="0" />
52-
<Label text="Lowercase" row="0" col="1" class="right" />
52+
<Label text="Lowercase" row="0" col="1" class="text-right" />
5353
</GridLayout>
5454
<GridLayout rows="auto" columns="*,*" class="m-t-5 w-full">
5555
<Label text="text-uppercase" row="0" col="0" />
56-
<Label text="Uppercase" row="0" col="1" class="right text-uppercase" />
56+
<Label text="Uppercase" row="0" col="1" class="text-right text-uppercase" />
5757
</GridLayout>
5858
<GridLayout rows="auto" columns="*,*" class="m-t-5 w-full">
5959
<Label text="text-capitalize" row="0" col="0" />
60-
<Label text="capitalize" row="0" col="1" class="right text-capitalize" />
60+
<Label text="capitalize" row="0" col="1" class="text-right text-capitalize" />
6161
</GridLayout>
6262
<GridLayout rows="auto" columns="*,*" class="font-weight-normal m-t-5 w-full">
6363
<Label text="font-weight-normal" row="0" col="0" />
64-
<Label text="Normal Weight" row="0" col="1" class="right" />
64+
<Label text="Normal Weight" row="0" col="1" class="text-right" />
6565
</GridLayout>
6666
<GridLayout rows="auto" columns="*,*" class="font-weight-bold m-t-5 w-full">
6767
<Label text="font-weight-bold" row="0" col="0" />
68-
<Label text="Bold" row="0" col="1" class="right" />
68+
<Label text="Bold" row="0" col="1" class="text-right" />
6969
</GridLayout>
7070
<GridLayout rows="auto" columns="*,*" class="font-italic m-t-5 w-full">
7171
<Label text="font-italic" row="0" col="0" />
72-
<Label text="Italic" row="0" col="1" class="right" />
72+
<Label text="Italic" row="0" col="1" class="text-right" />
7373
</GridLayout>
7474
</StackLayout>
7575

‎app/pages/modal.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Observable} from 'data/observable';
2+
3+
export function onLoaded(args: any) {
4+
let page = args.object;
5+
page.bindingContext = new ModalDemo();
6+
}
7+
8+
export function onShownModally(args: any) {
9+
args.object.bindingContext.init({
10+
title: args.context,
11+
closeCallback: args.closeCallback
12+
});
13+
}
14+
15+
class ModalDemo extends Observable {
16+
private _closeCallback: Function;
17+
18+
public init(data) {
19+
this.set('title', data.title);
20+
this._closeCallback = data.closeCallback;
21+
}
22+
public close() {
23+
this._closeCallback();
24+
}
25+
}

‎app/pages/modal.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd"
2+
loaded="onLoaded"
3+
shownModally="onShownModally">
4+
<StackLayout>
5+
<GridLayout rows="auto" columns="100,*,100" class="action-bar m-10">
6+
<Button text="Close" tap="{{close}}" row="0" col="0" class="action-item text-left" />
7+
<Label text="{{title}}" textWrap="true" col="1" class="action-title text-center" />
8+
</GridLayout>
9+
<StackLayout class="hr-light"></StackLayout>
10+
11+
<StackLayout class="p-20">
12+
<Label text="Just to show that 'action-bar' class can be used to style a custom action bar like above for use in modals." class="h2" textWrap="true" />
13+
</StackLayout>
14+
</StackLayout>
15+
</Page>

‎app/pages/themes.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</StackLayout>
1717
</drawer:RadSideDrawer.mainContent>
1818
<drawer:RadSideDrawer.drawerContent>
19-
<sidedrawer:sidedrawer activeComponent='themes'></sidedrawer:sidedrawer>
19+
<sidedrawer:sidedrawer activeComponent='theme'></sidedrawer:sidedrawer>
2020
</drawer:RadSideDrawer.drawerContent>
2121
</drawer:RadSideDrawer>
2222
</Page>

‎app/scss/_action-bar.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,5 @@
88

99
.action-item {
1010
font-weight: normal;
11-
color:$primary;
1211
}
1312
}

‎app/sidedrawer/sidedrawer.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,29 @@ export interface ISideDrawerState extends Page {
88
activeComponent: string;
99
}
1010

11+
export function isActive(value: string): string {
12+
let activeItem = 'sidedrawer-list-item active';
13+
let inactiveItem = 'sidedrawer-list-item';
14+
if (value === SideDrawerViewModel.activeComponent) {
15+
return activeItem;
16+
}
17+
return inactiveItem;
18+
}
19+
1120

1221
export function onLoad(args: EventData) {
1322
let page = <ISideDrawerState>args.object;
1423
page.bindingContext = new SideDrawerViewModel(page, page.activeComponent);
1524
}
1625

1726
export class SideDrawerViewModel extends NavigationViewModel {
27+
public static activeComponent: string;
1828
private activeItem = 'sidedrawer-list-item active';
1929
private inactiveItem = 'sidedrawer-list-item';
2030

2131
constructor(public page: Page, private activeComponent: string) {
22-
super(page);
32+
super(page);
33+
SideDrawerViewModel.activeComponent = activeComponent;
2334
}
2435
public isHomeActive() {
2536
if (this.activeComponent == 'home') {

0 commit comments

Comments
 (0)