e2e: make examples build per-platform

This commit is contained in:
Andrew
2015-03-27 15:27:03 -06:00
parent dec338e234
commit 042c567a50
13 changed files with 193 additions and 133 deletions

View File

@@ -3,6 +3,22 @@ import {ComponentConfig} from 'ionic2/config/component-config'
import * as types from 'ionic2/components/aside/extensions/types'
import * as gestures from 'ionic2/components/aside/extensions/gestures';
export let AsideConfig = new ComponentConfig('aside')
AsideConfig.classes('side', 'type')
AsideConfig.delegate('gesture')
.when({side: 'left'}, gestures.LeftAsideGesture)
.when({side: 'right'}, gestures.RightAsideGesture)
.when({side: 'top'}, gestures.TopAsideGesture)
.when({side: 'bottom'}, gestures.BottomAsideGesture)
AsideConfig.delegate('type')
.when({type: 'overlay'}, types.AsideTypeOverlay)
.when({type: 'push'}, types.AsideTypePush)
.when({type: 'reveal'}, types.AsideTypeReveal)
@Component({
selector: 'ion-aside',
bind: {
@@ -59,19 +75,3 @@ export class Aside {
}
}
}
export let AsideConfig = new ComponentConfig(Aside)
AsideConfig.classes('side', 'type')
AsideConfig.delegate('gesture')
.when({side: 'left'}, gestures.LeftAsideGesture)
.when({side: 'right'}, gestures.RightAsideGesture)
.when({side: 'top'}, gestures.TopAsideGesture)
.when({side: 'bottom'}, gestures.BottomAsideGesture)
AsideConfig.delegate('type')
.when({type: 'overlay'}, types.AsideTypeOverlay)
.when({type: 'push'}, types.AsideTypePush)
.when({type: 'reveal'}, types.AsideTypeReveal)

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,50 @@
import {Component, Template, NgElement, PropertySetter} from 'angular2/angular2';
import {ComponentConfig} from 'ionic2/config/component-config';
export let CheckboxConfig = new ComponentConfig('checkbox');
@Component({
selector: 'ion-checkbox',
bind: {
checked: 'checked'
},
events: {
'click': 'onClick'
},
services: [CheckboxConfig]
})
@Template({
inline: `
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
<content></content>
</div>
</div>`
})
export class Checkbox {
constructor(
@PropertySetter('attr.role') setRole: Function,
@PropertySetter('attr.aria-checked') setChecked: Function,
@PropertySetter('attr.aria-invalid') setInvalid: Function,
@PropertySetter('attr.aria-disabled') setDisabled: Function,
configFactory: CheckboxConfig,
element: NgElement
) {
this.domElement = element.domElement;
this.domElement.classList.add('item');
this.config = configFactory.create(this);
setRole('checkbox');
setChecked('true')
setInvalid('false');
setDisabled('false');
}
}

View File

@@ -5,7 +5,7 @@
$checkbox-ios-color: #007aff;
.list-ios {
.checkbox-ios {
.media-checkbox {
min-width: 20px;

View File

@@ -5,85 +5,23 @@
<div class="content" style="background: #efeff4">
<div class="list list-ios">
<ion-list>
<ion-list-header>Some Checkboxes</ion-list-header>
<ion-checkbox>
Apples
</ion-checkbox>
<div class="list-header">
iOS Checkboxes
</div>
<ion-checkbox>
Bananas
</ion-checkbox>
<div class="list-content">
<ion-checkbox>
Oranges
</ion-checkbox>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
Apples
</div>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="false"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
Bananas
</div>
</div>
</div>
<div class="item checkbox ios-checkbox"
role="checkbox"
aria-checked="true"
aria-invalid="false">
<div class="item-media media-checkbox">
<icon class="ion-ios-circle-outline checkbox-off"></icon>
<icon class="ion-ios-checkmark checkbox-on"></icon>
</div>
<div class="item-content">
<div class="item-title">
Oranges
</div>
</div>
</div>
</div>
</div>
</ion-list>
</div>

View File

@@ -3,12 +3,13 @@ import {Component, Template} from 'angular2/angular2';
import {View} from 'ionic2/components/view/view';
import {Content} from 'ionic2/components/content/content';
import {Icon} from 'ionic2/components/icon/icon';
import {Checkbox} from 'ionic2/components/checkbox/checkbox';
import {List} from 'ionic2/components/list/list';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Content, Icon]
directives: [View, Content, Icon, Checkbox, List]
})
class IonicApp {
constructor() {

View File

@@ -1,7 +1,11 @@
import {NgElement, Component, Template} from 'angular2/angular2'
import {ComponentConfig} from 'ionic2/config/component-config';
export let ListConfig = new ComponentConfig('list');
@Component({
selector: 'ion-list'
selector: 'ion-list',
services: [ListConfig]
})
@Template({
inline: `
@@ -10,13 +14,18 @@ import {NgElement, Component, Template} from 'angular2/angular2'
</header>
<div class="list-content">
<content></content>
</div>`
</div>
<footer class="list-footer">
<content select="ion-list-footer"></content>
</footer>`
</footer>
`
})
export class List {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('list')
constructor(
configFactory: ListConfig,
element: NgElement
) {
this.domElement = element.domElement;
configFactory.create(this);
}
}