barely making it work

This commit is contained in:
Adam Bradley
2015-04-30 23:56:15 -05:00
parent 6cd4a797a3
commit a425061d90
19 changed files with 113 additions and 205 deletions

View File

@@ -1,49 +1,49 @@
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
import {Icon} from 'ionic/components/icon/icon'
import {Item} from 'ionic/components/item/item'
// import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
// import {IonicComponent} from 'ionic/config/component'
// import {Icon} from 'ionic/components/icon/icon'
// import {Item} from 'ionic/components/item/item'
@Component({
selector: 'ion-action-menu'
})
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="action-menu-container">
// @Component({
// selector: 'ion-action-menu'
// })
// @NgView({
// template: `
// <div class="overlay-backdrop"></div>
// <div class="overlay-container">
// <div class="action-menu-container">
<div class="list-header">Action Menu List Header</div>
<div class="list">
<button ion-item class="item">
Button 1
</button>
<button ion-item class="item">
Button 2
</button>
</div>
// <div class="list-header">Action Menu List Header</div>
// <div class="list">
// <button ion-item class="item">
// Button 1
// </button>
// <button ion-item class="item">
// Button 2
// </button>
// </div>
<div class="list-header">Action Menu Label</div>
<div class="list">
<button ion-item class="item">Button 1</button>
<button ion-item class="item">Button 2</button>
</div>
// <div class="list-header">Action Menu Label</div>
// <div class="list">
// <button ion-item class="item">Button 1</button>
// <button ion-item class="item">Button 2</button>
// </div>
<div class="list">
<button ion-item class="item">Button 1</button>
</div>
// <div class="list">
// <button ion-item class="item">Button 1</button>
// </div>
</div>
</div>`,
directives: [Item,Icon]
})
export class ActionMenu {
constructor(
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.config = ActionMenu.config.invoke(this)
}
}
// </div>
// </div>`,
// directives: [Item,Icon]
// })
// export class ActionMenu {
// constructor(
// @NgElement() ngElement:NgElement
// ) {
// this.domElement = ngElement.domElement
// this.config = ActionMenu.config.invoke(this)
// }
// }
new IonicComponent(ActionMenu, {})
// new IonicComponent(ActionMenu, {})

View File

@@ -1 +0,0 @@

View File

@@ -1,34 +1,34 @@
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
import {IonicComponent} from 'ionic/config/component'
// import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
// import {IonicComponent} from 'ionic/config/component'
@Component({
selector: 'ion-alert'
})
@NgView({
template: `
<div class="overlay-backdrop"></div>
<div class="overlay-container">
<div class="alert-container">
<div class="alert-header">
Do you like cookies?
</div>
<div class="alert-content">
Seriously, who does not like cookies.
</div>
<div class="alert-actions">
<button class="button">OK</button>
</div>
</div>
</div>`
})
export class Alert {
constructor(
@NgElement() ngElement:NgElement
) {
this.domElement = ngElement.domElement
this.config = Alert.config.invoke(this)
}
}
// @Component({
// selector: 'ion-alert'
// })
// @NgView({
// template: `
// <div class="overlay-backdrop"></div>
// <div class="overlay-container">
// <div class="alert-container">
// <div class="alert-header">
// Do you like cookies?
// </div>
// <div class="alert-content">
// Seriously, who does not like cookies.
// </div>
// <div class="alert-actions">
// <button class="button">OK</button>
// </div>
// </div>
// </div>`
// })
// export class Alert {
// constructor(
// @NgElement() ngElement:NgElement
// ) {
// this.domElement = ngElement.domElement
// this.config = Alert.config.invoke(this)
// }
// }
new IonicComponent(Alert, {})
// new IonicComponent(Alert, {})

View File

@@ -1 +0,0 @@

View File

@@ -1 +0,0 @@

View File

View File

@@ -1 +0,0 @@

View File

View File

@@ -1 +0,0 @@

View File

@@ -1 +0,0 @@

View File

@@ -1 +0,0 @@

View File

@@ -1,7 +1,7 @@
<ion-aside side="left" [content]="viewport">
<!-- <ion-aside side="left" [content]="viewport">
Hello! I'm a side menu in the root.
</ion-aside>
</ion-aside> -->
<ion-nav #viewport [initial]="initial">
</ion-nav>

View File

@@ -1,5 +1,5 @@
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
import {Nav, Aside} from 'ionic/ionic'
import {Nav} from 'ionic/ionic'
import {SignInPage} from 'pages/sign-in'
@@ -8,7 +8,7 @@ import {SignInPage} from 'pages/sign-in'
})
@NgView({
templateUrl: 'main.html',
directives: [Nav, Aside]
directives: [Nav]
})
class App {
constructor() {

View File

@@ -4,7 +4,7 @@ import {
Decorator,
View as NgView,
Viewport,
ViewContainerRef,
//ViewContainerRef,
onDestroy,
Ancestor,
ElementRef,
@@ -24,33 +24,33 @@ import {platform} from 'ionic/platform/platform';
})
export class Toolbar {
constructor(
viewContainer: ViewContainerRef,
//viewContainer: ViewContainerRef,
elementRef: ElementRef,
@Ancestor() navCtrl: NavController,
element: NgElement
// context: Object TODO wait for angular to implement this
) {
this.viewContainer = viewContainer;
//this.viewContainer = viewContainer;
this.elementRef = elementRef;
this.navCtrl = navCtrl;
// TODO use config to add these classes
this.viewContainer.domElement.classList.add('toolbar');
this.viewContainer.domElement.classList.add(`toolbar-${platform.getName()}`);
// this.viewContainer.domElement.classList.add('toolbar');
// this.viewContainer.domElement.classList.add(`toolbar-${platform.getName()}`);
// TODO Make a better way than this
if (/header/i.test(this.viewContainer.domElement.tagName)) {
this.placement = 'top';
} else {
this.placement = 'bottom';
}
// if (/header/i.test(this.viewContainer.domElement.tagName)) {
// this.placement = 'top';
// } else {
// this.placement = 'bottom';
// }
}
set placement(pos) {
this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
//this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
this._placement = pos;
this.navCtrl.addToolbar(this._placement, this);
this.viewContainer.domElement.setAttribute('placement', pos);
//this.viewContainer.domElement.setAttribute('placement', pos);
}
onDestroy() {
@@ -133,17 +133,17 @@ export class ToolbarTitle {
})
export class ToolbarContainer {
constructor(
viewContainer: ViewContainerRef,
//viewContainer: ViewContainerRef,
element: NgElement
) {
this.viewContainer = viewContainer;
//this.viewContainer = viewContainer;
this.domElement = element.domElement;
}
set toolbar(bar: Toolbar) {
if (bar) {
// TODO create with correct context
this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
//this.viewContainer.create(-1, bar.viewContainer._defaultProtoView, bar.elementRef.elementInjector);
console.log('creating viewportContainer', performance.now())
}
}