feat: actionbar improvements. modal to test out action-bar class on c…

…ustom setup. also fixed errors with demo.
NativeScript · Sep 13, 2016 · 525200b · 525200b
1 parent 6fc79f1
commit 525200b
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 34 deletions.
diff --git a/app/actionBar/actionBar.ts b/app/actionBar/actionBar.ts
@@ -11,7 +11,6 @@ interface ICustomActionBar extends Page{
 
 export function onLoad(args: EventData) {
 	let page = <ICustomActionBar>args.object;
-	let actionBarTitle = <Label>page.getViewById("actionBarTitle");
-
-	actionBarTitle.text = page.ActionBarTitle;
+  let actionBarTitle = <Label>page.getViewById("actionBarTitle");
+  actionBarTitle.text = page.ActionBarTitle;
 }
diff --git a/app/actionBar/actionBar.xml b/app/actionBar/actionBar.xml
@@ -13,5 +13,6 @@
 				</ActionItem.actionView>
 			</ActionItem>
 		</iOS>
+    <ActionItem tap="{{ openModal }}" text="Modal" class="action-item" ios.position="right" />
 	</ActionBar.actionItems>
 </ActionBar>
diff --git a/app/app.ts b/app/app.ts
@@ -1,5 +1,6 @@
 import * as application from 'application';
 import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
+import {isActive} from './sidedrawer/sidedrawer';
 require( "nativescript-dom" );
 
 TNSFontIcon.debug = false;
@@ -9,4 +10,5 @@ TNSFontIcon.paths = {
 TNSFontIcon.loadCss();
 
 application.resources['fonticon'] = fonticon;
+application.resources['isActive'] = isActive;
 application.start({ moduleName: 'main-page' });
diff --git a/app/pages/base.ts b/app/pages/base.ts
@@ -21,4 +21,10 @@ export class BaseModel extends Observable {
     let sideDrawer = <RadSideDrawer>this.page.getViewById('sideDrawer');
     sideDrawer.toggleDrawerState();
   }
+
+  public openModal() {
+    this.page.showModal('pages/modal', 'Custom ActionBar', () => {
+
+    });
+  }
 }
diff --git a/app/pages/basics.xml b/app/pages/basics.xml
@@ -12,35 +12,35 @@
           <StackLayout class="demo-full p-20">
             <GridLayout rows="auto" columns="*,*" class="h1 m-5 w-full">
               <Label text="Class: h1" row="0" col="0" />
-              <Label text="Heading" row="0" col="1" class="right" />
+              <Label text="Heading" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="h2 m-5 w-full">
               <Label text="Class: h2" row="0" col="0" />
-              <Label text="Heading" row="0" col="1" class="right" />
+              <Label text="Heading" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="h3 m-5 w-full">
               <Label text="Class: h3" row="0" col="0" />
-              <Label text="Heading" row="0" col="1" class="right" />
+              <Label text="Heading" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="h4 m-5 w-full">
               <Label text="Class: h4" row="0" col="0" />
-              <Label text="Heading" row="0" col="1" class="right" />
+              <Label text="Heading" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="h5 m-5 w-full">
               <Label text="Class: h5" row="0" col="0" />
-              <Label text="Heading" row="0" col="1" class="right" />
+              <Label text="Heading" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="body m-5 w-full">
               <Label text="Class: body" row="0" col="0" />
-              <Label text="Body" row="0" col="1" class="right" />
+              <Label text="Body" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="body2 m-5 w-full">
               <Label text="Class: body2" row="0" col="0" />
-              <Label text="Body 2" row="0" col="1" class="right" />
+              <Label text="Body 2" row="0" col="1" class="text-right" />
             </GridLayout>
             <GridLayout rows="auto" columns="*,*" class="footnote m-5 w-full">
               <Label text="Class: footnote" row="0" col="0" />
-              <Label text="Footnote" row="0" col="1" class="right" />
+              <Label text="Footnote" row="0" col="1" class="text-right" />
             </GridLayout>
             <StackLayout class="demo-full m-t-10">
               <Label text="Text" class="h2" />
@@ -49,27 +49,27 @@
 
               <GridLayout rows="auto" columns="*,*" class="text-lowercase m-t-5 w-full">
                 <Label text="text-lowercase" row="0" col="0" />
-                <Label text="Lowercase" row="0" col="1" class="right" />
+                <Label text="Lowercase" row="0" col="1" class="text-right" />
               </GridLayout>
               <GridLayout rows="auto" columns="*,*" class="m-t-5 w-full">
                 <Label text="text-uppercase" row="0" col="0" />
-                <Label text="Uppercase" row="0" col="1" class="right text-uppercase" />
+                <Label text="Uppercase" row="0" col="1" class="text-right text-uppercase" />
               </GridLayout>
               <GridLayout rows="auto" columns="*,*" class="m-t-5 w-full">
                 <Label text="text-capitalize" row="0" col="0" />
-                <Label text="capitalize" row="0" col="1" class="right text-capitalize" />
+                <Label text="capitalize" row="0" col="1" class="text-right text-capitalize" />
               </GridLayout>
               <GridLayout rows="auto" columns="*,*" class="font-weight-normal m-t-5 w-full">
                 <Label text="font-weight-normal" row="0" col="0" />
-                <Label text="Normal Weight" row="0" col="1" class="right" />
+                <Label text="Normal Weight" row="0" col="1" class="text-right" />
               </GridLayout>
               <GridLayout rows="auto" columns="*,*" class="font-weight-bold m-t-5 w-full">
                 <Label text="font-weight-bold" row="0" col="0" />
-                <Label text="Bold" row="0" col="1" class="right" />
+                <Label text="Bold" row="0" col="1" class="text-right" />
               </GridLayout>
               <GridLayout rows="auto" columns="*,*" class="font-italic m-t-5 w-full">
                 <Label text="font-italic" row="0" col="0" />
-                <Label text="Italic" row="0" col="1" class="right" />
+                <Label text="Italic" row="0" col="1" class="text-right" />
               </GridLayout>
             </StackLayout>
 

diff --git a/app/pages/modal.ts b/app/pages/modal.ts
@@ -0,0 +1,25 @@
+import {Observable} from 'data/observable';
+
+export function onLoaded(args: any) {
+	let page = args.object;
+  page.bindingContext = new ModalDemo();
+}
+
+export function onShownModally(args: any) {
+  args.object.bindingContext.init({
+    title: args.context,
+    closeCallback: args.closeCallback
+  });
+}
+
+class ModalDemo extends Observable {
+  private _closeCallback: Function;
+
+  public init(data) {
+    this.set('title', data.title);
+    this._closeCallback = data.closeCallback;
+  }  
+  public close() {
+    this._closeCallback();
+  }
+}
diff --git a/app/pages/modal.xml b/app/pages/modal.xml
@@ -0,0 +1,15 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd"
+  loaded="onLoaded"
+  shownModally="onShownModally">
+  <StackLayout>
+    <GridLayout rows="auto" columns="100,*,100" class="action-bar m-10">
+      <Button text="Close" tap="{{close}}" row="0" col="0" class="action-item text-left" />
+      <Label text="{{title}}" textWrap="true" col="1" class="action-title text-center" /> 
+    </GridLayout>
+    <StackLayout class="hr-light"></StackLayout>
+
+    <StackLayout class="p-20">
+      <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" />  
+    </StackLayout>
+  </StackLayout>
+</Page>
diff --git a/app/pages/themes.xml b/app/pages/themes.xml
@@ -16,7 +16,7 @@
       </StackLayout>
     </drawer:RadSideDrawer.mainContent>
     <drawer:RadSideDrawer.drawerContent>
-        <sidedrawer:sidedrawer activeComponent='themes'></sidedrawer:sidedrawer>
+        <sidedrawer:sidedrawer activeComponent='theme'></sidedrawer:sidedrawer>
     </drawer:RadSideDrawer.drawerContent>
   </drawer:RadSideDrawer>
 </Page>
diff --git a/app/scss/_action-bar.scss b/app/scss/_action-bar.scss
@@ -8,6 +8,5 @@
 
   .action-item {
     font-weight: normal;
-    color:$primary;
   }
 }
diff --git a/app/sidedrawer/sidedrawer.ts b/app/sidedrawer/sidedrawer.ts
@@ -8,18 +8,29 @@ export interface ISideDrawerState extends Page {
 	activeComponent: string;
 }
 
+export function isActive(value: string): string {
+  let activeItem = 'sidedrawer-list-item active';
+	let inactiveItem = 'sidedrawer-list-item';
+  if (value === SideDrawerViewModel.activeComponent) {
+    return activeItem;
+  }
+  return inactiveItem;
+}
+
 
 export function onLoad(args: EventData) {
 	let page = <ISideDrawerState>args.object;
 	page.bindingContext = new SideDrawerViewModel(page, page.activeComponent);
 }
 
 export class SideDrawerViewModel extends NavigationViewModel {
+  public static activeComponent: string;
 	private activeItem = 'sidedrawer-list-item active';
 	private inactiveItem = 'sidedrawer-list-item';
 
 	constructor(public page: Page, private activeComponent: string) {
-		super(page);
+    super(page);
+    SideDrawerViewModel.activeComponent = activeComponent;
 	}
 	public isHomeActive() {
 		if (this.activeComponent == 'home') {

diff --git a/app/sidedrawer/sidedrawer.xml b/app/sidedrawer/sidedrawer.xml
@@ -5,59 +5,59 @@
         </StackLayout>
         <ScrollView>
           <StackLayout class="sidedrawer-content">
-            <GridLayout class="{{ isHomeActive() }}" tap="{{ viewHome }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'home' | isActive }}" tap="{{ viewHome }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-home' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Home" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isBasicsActive() }}" tap="{{ viewBasics }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'basics' | isActive }}" tap="{{ viewBasics }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-font' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Basics" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isButtonsActive() }}" tap="{{ viewButtons }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'buttons' | isActive }}" tap="{{ viewButtons }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-square' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Buttons" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isButtonsActiveActive() }}" tap="{{ viewButtonsActive }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'buttons-active' | isActive }}" tap="{{ viewButtonsActive }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-square-o' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Buttons Active" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isFormsActive() }}" tap="{{ viewForms }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'forms' | isActive }}" tap="{{ viewForms }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-i-cursor' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Forms" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isSearchActive() }}" tap="{{ viewSearch }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'search' | isActive }}" tap="{{ viewSearch }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-search' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Search Bars" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isSlidersActive() }}" tap="{{ viewSliders }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'sliders' | isActive }}" tap="{{ viewSliders }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-sliders' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Sliders" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isSwitchesActive() }}" tap="{{ viewSwitches }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'switches' | isActive }}" tap="{{ viewSwitches }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-toggle-on' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Switches" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isProgressActive() }}" tap="{{ viewProgress }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'progress' | isActive }}" tap="{{ viewProgress }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-spinner' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Progress & Activity" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isTabsActive() }}" tap="{{ viewTabs }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'tabs' | isActive }}" tap="{{ viewTabs }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-road' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Tabs" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isSegmentActive() }}" tap="{{ viewSegmentBar }}"  rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'segmentbar' | isActive }}" tap="{{ viewSegmentBar }}"  rows="auto" columns="auto,*">
               <Label text="{{'fa-columns' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="SegmentedBar" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isDialogsActive() }}" tap="{{ viewDialogs }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'dialogs' | isActive }}" tap="{{ viewDialogs }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-newspaper-o' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Dialogs"  class="sidedrawer-list-item-text" row="0" col="1"/>
             </GridLayout>
-            <GridLayout class="{{ isListActive() }}" tap="{{ viewListView }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'list' | isActive }}" tap="{{ viewListView }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-list' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="ListView" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>
-            <GridLayout class="{{ isThemesActive() }}" tap="{{ viewThemes }}" rows="auto" columns="auto,*">
+            <GridLayout class="{{ 'theme' | isActive }}" tap="{{ viewThemes }}" rows="auto" columns="auto,*">
               <Label text="{{'fa-paint-brush' | fonticon }}" class="fa sidedrawer-list-item-icon" row="0" col="0" />
               <Label text="Themes" class="sidedrawer-list-item-text" row="0" col="1" />
             </GridLayout>