mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
barely making it work
This commit is contained in:
@@ -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, {})
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -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, {})
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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())
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user