styling

app/app.scss

@@ -0,0 +1,21 @@
+@import './theme/_app-variables.scss';
+@import './theme/fonts.scss';
+
+.inset {
+    padding: $primary-content-padding;
+}
+
+.md-18 { font-size: 18; height: 18; }
+.md-24 { font-size: 24; height: 24; }
+.md-36 { font-size: 36; height: 36; }
+.md-48 { font-size: 48; height: 48; }
+
+/* Rules for using icons as black on a light background. */
+.md-dark { color: rgba(0, 0, 0, 0.54); }
+
+/* Rules for using icons as white on a dark background. */
+.md-light { color: rgba(255, 255, 255, 1); }
+
+.title {
+    color: $font-primary-title-color;
+}

app/controls/card/card.control.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, ViewChild } from "@angular/core";
-import { Observable, Subject, Subscription } from 'rxjs/Rx';
+import { Observable, Subject, Subscription } from "rxjs/Rx";
 
 import { CardView } from "nativescript-cardview";
 import { Logger } from "../../providers/logger";
@@ -11,25 +11,18 @@ registerElement("CardView", () => {
 });
 @Component({
     selector: "nx-card",
-    //templateUrl: "controls/list/list.html",
     template:`
     <CardView #item shadowColor="#FE00FC" elevation="10" margin="10">
         <Label text="cardview" textWrap="true"></Label>
-        
         <StackLayout>
             <ng-content></ng-content>
         </StackLayout>
     </CardView>
     `
 })
 export class NxCard {
-    constructor() 
-    {
-    }
-
-    @ViewChild('item') 
+    @ViewChild("item")
     set _listItems(item: ElementRef){
         let cardView: any = item.nativeElement;
-        //cardView.shadowColor = new Color("#FF0000").android;
     }
 }

app/controls/content/content.control.ts

@@ -12,8 +12,8 @@ import {
     TemplateRef,
     ViewChild,
 } from "@angular/core";
-import { NxPullToRefresh, NxPullToRefreshAnimateElement } from '../pullToRefresh/pullToRefresh.control';
-import { Observable, Subject, Subscription } from 'rxjs/Rx';
+import { NxPullToRefresh, NxPullToRefreshAnimateElement } from "../pullToRefresh/pullToRefresh.control";
+import { Observable, Subject, Subscription } from "rxjs/Rx";
 
 import { Logger } from "../../providers/logger";
 import { PullToRefresh } from "nativescript-pulltorefresh";
@@ -22,53 +22,49 @@ import { PullToRefresh } from "nativescript-pulltorefresh";
     selector:"nx-content",
     template: `
     <GridLayout>
-        <nx-pull-to-refresh #refreshControl 
+        <nx-pull-to-refresh #refreshControl
             (refreshStarted)="refreshPage($event)"
             (refreshCompleted)="refreshPageCompleted($event)">
             <StackLayout [pull-to-animate]>
                 <ng-content></ng-content>
             </StackLayout>
         </nx-pull-to-refresh>
-        <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
+        <ActivityIndicator
+            [busy]="isLoading"
+            [visibility]="isLoading ? 'visible' : 'collapse'"
+            horizontalAlignment="center"
+            verticalAlignment="center">
+        </ActivityIndicator>
     </GridLayout>
     `,
     providers: []
 })
-export class NxContent implements OnInit, AfterViewInit {
-    //private template: TemplateRef;
+export class NxContent {
     private container: ElementRef;
-
-    constructor(private logger:Logger)
-    {
-        this.logger.Notify("nx-content added");    
-    }
 
-    public ngOnInit(){ }
-
-    public ngAfterViewInit(){ }
+    constructor(private logger:Logger) {
+    }
 
     @Input()
     public isLoading : boolean = false;
-    
+
     @ContentChild(NxPullToRefresh)
     private content : ElementRef;
-        
+
     @Input()
     public refreshComplete : boolean = true;
-
-    //private transition: AnimationPromise = null; 
-
-    private refreshPage(args){      
-        this.logger.Notify("content restart ->"); 
+
+    private refreshPage(args) {
+        this.logger.Notify("content restart ->");
         this.refreshStarted.next(args);
         this.isLoading = true;
     }
-    
-    private refreshPageCompleted($event){
-        this.refreshCompleted.next($event); 
+
+    private refreshPageCompleted($event) {
+        this.refreshCompleted.next($event);
         this.isLoading = false; 
     }
-    
+
     @Output("refreshStarted")
     public refreshStarted = new EventEmitter();
     @Output("refreshCompleted")

app/controls/drawer/drawer.common.css

@@ -1,10 +1 @@
-.side-page {
-    background-color: #ffffff;
-}
-.drawer-split {
-    background-color: #548CEC;
-    opacity: 1;
-}
-.sideStackLayout{
-
-}
+.side-page{background-color:#fff}

app/controls/drawer/drawer.common.scss

@@ -0,0 +1,5 @@
+@import "app/theme/_app-variables.scss";
+
+.side-page {
+    background-color:$primary-background-color;
+}

app/controls/drawer/drawer.ts

@@ -1,127 +1,97 @@
-import * as Rx from 'rxjs/Rx';
+import * as Rx from "rxjs/Rx";
 
 import { AbsoluteLayout } from "ui/layouts/absolute-layout";
 import { AnimationPromise } from "ui/animation";
-import {AppRoutingService} from '../../context/router.context';
+import {AppRoutingService} from "../../context/router.context";
 import { Button } from "ui/button";
-import { Component } from '@angular/core';
-import { ContentChildren } from '@angular/core';
-import { Directive } from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { Component } from "@angular/core";
+import { ContentChildren } from "@angular/core";
+import { Directive } from "@angular/core";
+import { ElementRef } from "@angular/core";
 import { GridLayout } from "ui/layouts/grid-layout";
 import { Logger } from "../../providers/logger";
 import { NxNav } from "../nav/nav";
-import {PageRoute} from 'nativescript-angular';
+import {PageRoute} from "nativescript-angular";
 import { PanGestureEventData } from "ui/gestures";
-import { RadSideDrawerComponent } from "nativescript-telerik-ui/sidedrawer/angular"
+import { RadSideDrawerComponent } from "nativescript-telerik-ui/sidedrawer/angular";
 import { StackLayout } from "ui/layouts/stack-layout";
-import { ViewChild } from '@angular/core';
+import { ViewChild } from "@angular/core";
 
 @Directive({
     selector : "[nx-drawer-close]",
 })
-export class NxCloseDrawer
-{
-
-} 
+export class NxCloseDrawer {
+}
 
 @Component({
     selector:"nx-drawer",
     moduleId: module.id,
     styleUrls: ["drawer.common.css"],
     template:`
         <RadSideDrawer #main [transition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>
-        
             <!-- drawer -->
             <StackLayout tkDrawerContent class="side-page" #asideLeft>
                 <ng-content select="[drawer-aside-left]"></ng-content>
             </StackLayout>
             <!-- end of drawer -->
-            <!-- main content --> 
+            <!-- main content -->
             <StackLayout #centerContent tkMainContent>
                 <ng-content></ng-content>
-            </StackLayout> 
-            <!-- Main content --> 
+            </StackLayout>
+            <!-- Main content -->
         </RadSideDrawer>
     `
-    // template:`
-
-    //     <GridLayout #grid rows="*" columns="300, *">
-
-    //         <StackLayout  row="0" col="0" colSpan="2">
-    //             <StackLayout #centerContent>
-    //                 <ng-content></ng-content>
-    //             </StackLayout>
-    //         </StackLayout> 
-
-    //         <AbsoluteLayout class="side-page" #asideLeftParent  opacity="0">
-
-    //             <StackLayout #asideLeft col="0">
-    //                 <ng-content select="[drawer-aside-left]"></ng-content>
-    //             </StackLayout>   
-
-    //         </AbsoluteLayout>
-
-    //     </GridLayout>
-
-    // `
 })
 export class NxDrawer {
     private childNavs : Array<NxNav>;
     private asideLeftContent : ElementRef;
     private asideRightContent: ElementRef;
     private centerContent: ElementRef;
     private sidebar : RadSideDrawerComponent;
-    
+
     public constructor(
         private logger: Logger,
         private pageRoute: PageRoute,
-        private context : AppRoutingService){
-        
+        private context : AppRoutingService) {
+
         this.pageRoute.activatedRoute
             .switchMap(activatedRoute => activatedRoute.params)
             .subscribe((params) => {
                 context.UpdateFromParams(params);
             });
-            //.forEach((params) => { this.id = +params['id']; });
     }
-    
+
     private State = {
         Open : false,
         HasLeft : false,
         HasRight: false,
         NavAttached: false
     };
-    
-    public OpenLeftAside() {
+
+    public OpenLeftAside():void {
         this.sidebar.sideDrawer.toggleDrawerState();
     }
-    
-    public CloseLeftAside() {
+
+    public CloseLeftAside():void {
         this.sidebar.sideDrawer.toggleDrawerState();
     }
 
-
-
-    private ngOnInit(){
-        //let center: StackLayout = this.centerContent.nativeElement;
+    private ngOnInit():void {
     } 
 
-
-
-    @ViewChild('asideLeft') 
+    @ViewChild("asideLeft")
     set _asideLeft(item: ElementRef){
         this.asideLeftContent = item;
         this.State.HasLeft = true;
     }
-    
-    @ViewChild('asideRight') 
+
+    @ViewChild("asideRight")
     set _asideRight(item: ElementRef){
         this.asideRightContent = item;
-        this.State.HasRight = true;    
+        this.State.HasRight = true;
     }
-    
-    @ViewChild('centerContent')
+
+    @ViewChild("centerContent")
     set _setCenter(item: ElementRef){
         this.centerContent = item;
     }
@@ -130,25 +100,25 @@ export class NxDrawer {
     set _setMain(item: RadSideDrawerComponent){
         this.sidebar = item;
     }
-        
+
     @ContentChildren(NxNav)
     set _setNav(items: any) {
         if(this.State.NavAttached){ return; }
-        
+
         ///this.logger.Notify("drawer.nav set: " + items);
         this.State.NavAttached = true;
         this.childNavs = items.toArray();
-
-        //this.logger.Notify("nav items: " + this.childNavs.length);
-
+
         var anySelected = this.childNavs.map((item) => item.menuSelected);
-                
-        Rx.Observable.from(anySelected).flatMap(x=>x).subscribe(() => { 
+
+        Rx.Observable.from(anySelected).flatMap(x=>x).subscribe(() => {
             this.logger.Notify("nav menu tapped -> open side");
-            //let grid: StackLayout = this.grid.nativeElement;
 
-            if(this.State.Open){ this.CloseLeftAside(); }
-            else{ this.OpenLeftAside(); }
+            if(this.State.Open) {
+                this.CloseLeftAside();
+            } else {
+                this.OpenLeftAside();
+            }
 
         });
     }