javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

App annotation/mode attribute

Browse Source
This commit is contained in:
Adam Bradley
2015-07-08 14:05:37 -05:00
parent 9d2570d2e5
commit 40fc77b0b6
112 changed files with 625 additions and 1466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/action-menu/action-menu.ts
View File

@ -8,7 +8,6 @@
import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
import {IonicApp} from '../app/app';
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
import * as util from 'ionic/util';
@ -56,10 +55,6 @@ class ActionMenuDirective {
@Injectable()
export class ActionMenu extends Overlay {
constructor(app: IonicApp) {
super(app);
}
/**
* Create and open a new Action Menu. This is the
* public API, and most often you will only use ActionMenu.open()

2
ionic/components/action-menu/extensions/ios.scss
View File

@ -17,7 +17,7 @@ $action-menu-ios-button-font-size: 2rem !default;
$action-menu-ios-icon-font-size: 1.4em !default;
.action-menu-ios {
.action-menu[mode="ios"] {
text-align: center;
.action-menu-container {

2
ionic/components/action-menu/extensions/material.scss
View File

@ -1,5 +1,5 @@
.action-menu-md {
.action-menu[mode="md"] {
.action-menu-backdrop.active {
background-color: rgba(0,0,0,0.2);

13
ionic/components/action-menu/test/basic/index.ts
View File

@ -1,12 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView, ActionMenu} from 'ionic/ionic';
import {App, ActionMenu} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -44,7 +39,3 @@ class IonicApp {
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

2
ionic/components/alert/extensions/ios.scss
View File

@ -11,7 +11,7 @@ $alert-ios-button-color: #007aff !default;
$alert-ios-button-font-size: 2rem !default;
.alert-ios {
.alert[mode="ios"] {
.alert-container {
border-radius: $alert-ios-border-radius;

2
ionic/components/alert/extensions/material.scss
View File

@ -8,7 +8,7 @@ $alert-material-border-radius: 4px !default;
$alert-material-box-shadow: 0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
.alert-md {
.alert[mode="md"] {
.alert-container {
box-shadow: $alert-material-box-shadow;

21
ionic/components/alert/test/basic/index.ts
View File

@ -1,24 +1,17 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App, Alert} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
constructor(alert: Alert) {
this.alert = alert;
}
showAlert() {
console.log('Show alert');
Alert.open({
showAlert() {
this.alert.open({
});
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

15
ionic/components/app/app.ts
View File

@ -163,7 +163,9 @@ export function ionicBootstrap(ComponentType, config, router) {
return new Promise((resolve, reject) => {
try {
// get the user config, or create one if wasn't passed in
config = config || new IonicConfig();
if (typeof config !== IonicConfig) {
config = new IonicConfig(config);
}
// create the base IonicApp
let app = initApp(window, document, config);
@ -172,9 +174,6 @@ export function ionicBootstrap(ComponentType, config, router) {
// user config platform settings should override default platform settings
config.setPlatform(Platform);
// make the config global
IonicConfig.global = config;
// config and platform settings have been figured out
// apply the correct CSS to the app
app.applyBodyCss(document.body.classList, Platform, config);
@ -183,15 +182,17 @@ export function ionicBootstrap(ComponentType, config, router) {
Platform.prepareReady(config);
// setup router
router = router || new IonicRouter();
if (typeof router !== IonicRouter) {
router = new IonicRouter(router);
}
router.app(app);
// TODO: don't wire these together
app.router = router;
// TODO: probs need a better way to inject global injectables
let actionMenu = new ActionMenu(app);
let modal = new Modal(app);
let actionMenu = new ActionMenu(app, config);
let modal = new Modal(app, config);
// add injectables that will be available to all child components
let injectableBindings = [

11
ionic/components/app/test/animations/index.ts
View File

@ -1,6 +1,4 @@
import {Component, View} from 'angular2/angular2';
import {Animation} from 'ionic/ionic';
import {App, Animation} from 'ionic/ionic';
let opacity = 0.2;
@ -8,8 +6,7 @@ let rotateZ = '180deg';
let translateX = '100px';
let scale = 0.6;
@Component({ selector: 'ion-app' })
@View({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -75,7 +72,3 @@ class IonicApp {
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

16
ionic/components/app/test/barkpark/index.ts
View File

@ -3,7 +3,7 @@ import {Component, View, Directive} from 'angular2/angular2';
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
import {Log} from 'ionic/util'
import {Routable, IonicView, NavController} from 'ionic/ionic'
import {App, IonicView, NavController} from 'ionic/ionic'
@Component({selector: 'ion-view'})
@ -36,10 +36,6 @@ class LoginPage {
}
}
new Routable(LoginPage, {
url: '/login',
tag: 'login'
})
@Component({selector: 'ion-view'})
@IonicView({
@ -137,10 +133,7 @@ class SplashPage {
}
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class IonicApp {
@ -148,8 +141,3 @@ class IonicApp {
this.rootView = SplashPage;
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/app/test/hn/index.ts
View File

@ -1,6 +1,6 @@
import {Component} from 'angular2/angular2';
import {NavController, IonicView} from 'ionic/ionic';
import {App, NavController, IonicView} from 'ionic/ionic';
import {HackerNews} from './hn';
import {HNSinglePost} from './pages/single';
@ -87,10 +87,7 @@ class HNTopStories {
}
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class IonicApp {
@ -98,7 +95,3 @@ class IonicApp {
this.rootView = HNTopStories;
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

2
ionic/components/app/test/hn/main.html
View File

@ -5,7 +5,7 @@
.navbar-container {
background-color: #ff6600 !important;
}
.nav-ios ion-title {
.nav[mode="ios"] ion-title {
color: #fff !important;
}
</style>

9
ionic/components/app/test/music/index.ts
View File

@ -1,7 +1,7 @@
import {Component, Directive, ElementRef} from 'angular2/angular2';
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
import {Routable, NavController, IonicView} from 'ionic/ionic';
import {App, NavController, IonicView} from 'ionic/ionic';
@Component({selector: 'ion-view'})
@ -53,8 +53,7 @@ export class ParallaxEffect {
/**
* Main app entry point
*/
@Component({ selector: 'ion-app' })
@IonicView({
@App({
directives: [ParallaxEffect],
templateUrl: 'main.html'
})
@ -69,7 +68,3 @@ class IonicApp {
this.menuOpenAmount = amt;
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

14
ionic/components/app/test/music/main.html
View File

@ -36,16 +36,16 @@
background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg');
background-size: cover;
}
.platform-ios ion-list .item {
.mode-ios ion-list .item {
background: transparent;
min-height: 55px;
}
.platform-ios ion-list .item .item-content {
.mode-ios ion-list .item .item-content {
background: transparent;
color: rgba(255,255,255,0.8);
padding: 10px;
}
.platform-ios .toolbar-ios ion-title {
.mode-ios .toolbar-ios ion-title {
color: white;
font-size: 14px;
font-weight: normal;
@ -57,16 +57,16 @@
ion-content {
background: transparent !important;
}
.platform-ios #menu .item-content:after {
.mode-ios #menu .item-content:after {
background: none;
}
.platform-ios .item:first-of-type:before {
.mode-ios .item:first-of-type:before {
background: none !important;
}
.platform-ios .item:last-of-type:after {
.mode-ios .item:last-of-type:after {
background: none !important;
}
.platform-ios .toolbar-container-ios:after {
.mode-ios .toolbar-container-ios:after {
background: none;
}

9
ionic/components/app/test/net/index.ts
View File

@ -1,15 +1,14 @@
import {Component} from 'angular2/angular2';
import {Control, ControlGroup, formDirectives} from 'angular2/forms';
import {IonicView, Http} from 'ionic/ionic';
import {App, Http} from 'ionic/ionic';
let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -65,7 +64,3 @@ class IonicApp {
})
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

9
ionic/components/app/test/profile/index.ts
View File

@ -2,7 +2,7 @@ import {ElementRef} from 'angular2/angular2'
import {Component, Directive} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
import {Modal, Animation, Content} from 'ionic/ionic';
import {App, Modal, Animation, Content} from 'ionic/ionic';
import {NavController, NavParams, IonicView} from 'ionic/ionic';
import {dom} from 'ionic/util';
@ -40,8 +40,7 @@ export class ParallaxEffect {
}
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html',
directives: [ParallaxEffect]
})
@ -56,7 +55,3 @@ class IonicApp {
}
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

16
ionic/components/app/test/sink/index.ts
View File

@ -1,6 +1,4 @@
import {Component, Directive} from 'angular2/angular2';
import {IonicApp, IonicView, Register} from 'ionic/ionic';
import {App, IonicApp} from 'ionic/ionic';
import {ButtonPage} from './pages/button'
import {NavPage} from './pages/nav'
@ -21,12 +19,8 @@ import {ActionMenuPage} from './pages/action-menu'
import {ModalPage} from './pages/modal'
@Component({
selector: 'ion-app',
})
@IonicView({
templateUrl: 'main.html',
directives: [Register]
@App({
templateUrl: 'main.html'
})
class MyApp {
constructor(app: IonicApp) {
@ -62,7 +56,3 @@ class MyApp {
nav.setRoot(component.component);
}
}
export function main(ionicBootstrap) {
ionicBootstrap(MyApp);
}

11
ionic/components/app/test/snapcat/index.ts
View File

@ -1,7 +1,7 @@
import {Component, Directive} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
import {App, IonicView, Animation, Modal, NavController, NavParams} from 'ionic/ionic';
@Component({ selector: 'ion-view' })
@ -64,10 +64,7 @@ export class FeedPage {
}
}
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -107,10 +104,6 @@ export class SettingsModal {}
export class HeartModal {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}
class FadeIn extends Animation {
constructor(element) {

16
ionic/components/app/test/snapcat/main.html
View File

@ -4,11 +4,7 @@
<ion-view>
<ion-toolbar id="p1toolbar">
<button (^click)="openHeart()" class="toolbar-primary-item"><i class="icon ion-ios-heart"></i></button>
<ion-title>secret</ion-title>
<button (^click)="openGear()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button>
</ion-toolbar>
<ion-toolbar id="p1toolbar"><button (^click)="openHeart()" class="toolbar-primary-item"><i class="icon ion-ios-heart"></i></button><ion-title>secret</ion-title><button (^click)="openGear()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
<ion-content>
<ion-list>
@ -44,7 +40,7 @@
ion-view {
background-color: #F5F5F5;
}
.platform-ios ion-toolbar {
.mode-ios ion-toolbar {
padding-top: 20px;
}
ion-content {
@ -84,13 +80,13 @@
ion-toolbar {
letter-spacing: 1px;
}
.platform-ios ion-toolbar button i {
.mode-ios ion-toolbar button i {
color: #fff !important;
font-size: 24px !important;
}
.platform-ios .item:first-of-type:before,
.platform-ios .item:last-of-type:after,
.platform-ios .item-content:after {
.mode-ios .item:first-of-type:before,
.mode-ios .item:last-of-type:after,
.mode-ios .item-content:after {
background-color: #F5F5F5 !important;
}
#p1toolbar {

12
ionic/components/app/test/typography/index.ts
View File

@ -1,12 +0,0 @@
import {Component, View} from 'angular2/angular2';
@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

25
ionic/components/app/test/typography/main.html
View File

@ -1,25 +0,0 @@
<div class="padding">
<h1>H1: gjpqy</h1>
<p>I'm a paragraph, gjpqy!</p>
<p>I'm a paragraph, gjpqy!</p>
<h1>H1: gjpqy</h1>
<h2>H2: gjpqy</h2>
<p>I'm a paragraph, gjpqy!</p>
<p>I'm a paragraph, gjpqy!</p>
<h3>H3: gjpqy</h3>
<h4>H4: gjpqy</h4>
<h5>H5: gjpqy</h5>
<h6>H6: gjpqy</h6>
<p>I'm a paragraph, gjpqy!</p>
<p>Paragraph with <sub>sub</sub> and <sup>sup</sup>.</p>
<h1>H1 with <small>small</small></h1>
<h2>H2 with <small>small</small></h2>
<p>Paragraph with <small>small</small></p>
<h1>H1 with a <a href="#">link</a></h1>
<p>Paragraph with a <a href="#">boring link</a>.</p>
</div>

260
ionic/components/app/test/weather/index.ts
View File

@ -2,131 +2,13 @@ import {Component, Directive, View} from 'angular2/angular2';
import {NgIf, NgFor, CSSClass, ElementRef} from 'angular2/angular2';
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
import {IonicView, Animation, Content, Scroll, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
import {App, IonicView, Animation, Content, Scroll, Modal, NavController, NavParams} from 'ionic/ionic';
import {Geo} from './geo';
import {Weather} from './weather';
import {Flickr} from './flickr';
@Component({
selector: 'ion-app'
})
@View({
templateUrl: 'main.html',
directives: [NgIf, NgFor, Content, Scroll, CurrentWeather, WeatherIcon, BackgroundCycler]
})
class WeatherApp {
constructor(modal: Modal) {
this.modal = modal;
this.currentLocationString = 'Madison, WI';
this.activeBgImageIndex = 0;
/*
$ionicPlatform.ready(function() {
// Hide the status bar
if(window.StatusBar) {
StatusBar.hide();
}
});
*/
}
onInit() {
this.refreshData();
}
showSettings() {
this.modal.open(SettingsModal).then((settingsModal) => {
this.settingsModal = settingsModal;
});
}
getBackgroundImage(lat, lng, locString) {
Flickr.search(locString, lat, lng).then((resp) => {
let photos = resp.photos;
if(photos.photo.length) {
this.bgImages = photos.photo;
this.cycleBgImages();
}
}, (error) => {
console.error('Unable to get Flickr images', error);
});
}
getCurrent(lat, lng, locString) {
Weather.getAtLocation(lat, lng).then((resp) => {
this.current = resp;
// TODO: This should be in a custom pipe
let c, d, h;
for(let i = 0; i < this.current.hourly.data.length; i++) {
c = this.current.hourly.data[i];
let t = c.temperature;
d = new Date(c.time * 1000);
c.temperature = Math.floor(t);
h = d.getHours() % 12;
h = (h == 0 ? 12 : h);
c.time_date = h + ' ' + (d.getHours() < 12 ? 'AM' : 'PM');
}
for(let i = 0; i < this.current.daily.data.length; i++) {
c = this.current.daily.data[i];
let max = c.temperatureMax;
let min = c.temperatureMin;
c.temperatureMax = Math.floor(max);
c.temperatureMin = Math.floor(min);
c.time_date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(c.time*1000).getDay()];
}
console.log('GOT CURRENT', this.current);
}, (error) => {
alert('Unable to get current conditions');
console.error(error);
});
}
cycleBgImages() {
setTimeout(() => {
if(this.bgImages) {
this.activeBgImage = this.bgImages[this.activeBgImageIndex++ % this.bgImages.length];
}
});
}
refreshData() {
Geo.getLocation().then((position) => {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
Geo.reverseGeocode(lat, lng).then((locString) => {
this.currentLocationString = locString;
this.getBackgroundImage(lat, lng, locString);
});
this.getCurrent(lat, lng);
}, (error) => {
alert('Unable to get current location: ' + error);
});
}
}
/*
.controller('SettingsCtrl', function($scope, Settings) {
$scope.settings = Settings.getSettings();
// Watch deeply for settings changes, and save them
// if necessary
$scope.$watch('settings', function(v) {
Settings.save();
}, true);
$scope.closeSettings = function() {
$scope.modal.hide();
};
});
*/
@IonicView({
template: `<ion-view id="settings-modal">
@ -161,10 +43,6 @@ export class SettingsModal {
}
}
export function main(ionicBootstrap) {
ionicBootstrap(WeatherApp);
}
let WEATHER_ICONS = {
'partlycloudy': 'ion-ios-partlysunny-outline',
@ -322,50 +200,102 @@ export class BackgroundCycler {
}
}
}
/*
.directive('weatherBox', function($timeout) {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
title: '@'
},
template: '<div class="weather-box"><h4 class="title">{{title}}</h4><div ng-transclude></div></div>',
link: function($scope, $element, $attr) {
}
}
@App({
templateUrl: 'main.html',
directives: [CurrentWeather, WeatherIcon, BackgroundCycler]
})
class WeatherApp {
constructor(modal: Modal) {
this.modal = modal;
.directive('scrollEffects', function() {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
var amt, st, header;
var bg = document.querySelector('.bg-image');
$element.bind('scroll', function(e) {
if(!header) {
header = document.getElementById('header');
}
st = e.detail.scrollTop;
if(st >= 0) {
header.style.webkitTransform = 'translate3d(0, 0, 0)';
} else if(st < 0) {
header.style.webkitTransform = 'translate3d(0, ' + -st + 'px, 0)';
}
amt = Math.min(0.6, st / 1000);
this.currentLocationString = 'Madison, WI';
ionic.requestAnimationFrame(function() {
header.style.opacty = 1 - amt;
if(bg) {
bg.style.opacity = 1 - amt;
}
});
this.activeBgImageIndex = 0;
/*
$ionicPlatform.ready(function() {
// Hide the status bar
if(window.StatusBar) {
StatusBar.hide();
}
});
*/
}
onInit() {
this.refreshData();
}
showSettings() {
this.modal.open(SettingsModal).then((settingsModal) => {
this.settingsModal = settingsModal;
});
}
getBackgroundImage(lat, lng, locString) {
Flickr.search(locString, lat, lng).then((resp) => {
let photos = resp.photos;
if(photos.photo.length) {
this.bgImages = photos.photo;
this.cycleBgImages();
}
}, (error) => {
console.error('Unable to get Flickr images', error);
});
}
getCurrent(lat, lng, locString) {
Weather.getAtLocation(lat, lng).then((resp) => {
this.current = resp;
// TODO: This should be in a custom pipe
let c, d, h;
for(let i = 0; i < this.current.hourly.data.length; i++) {
c = this.current.hourly.data[i];
let t = c.temperature;
d = new Date(c.time * 1000);
c.temperature = Math.floor(t);
h = d.getHours() % 12;
h = (h == 0 ? 12 : h);
c.time_date = h + ' ' + (d.getHours() < 12 ? 'AM' : 'PM');
}
for(let i = 0; i < this.current.daily.data.length; i++) {
c = this.current.daily.data[i];
let max = c.temperatureMax;
let min = c.temperatureMin;
c.temperatureMax = Math.floor(max);
c.temperatureMin = Math.floor(min);
c.time_date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][new Date(c.time*1000).getDay()];
}
console.log('GOT CURRENT', this.current);
}, (error) => {
alert('Unable to get current conditions');
console.error(error);
});
}
cycleBgImages() {
setTimeout(() => {
if(this.bgImages) {
this.activeBgImage = this.bgImages[this.activeBgImageIndex++ % this.bgImages.length];
}
});
}
refreshData() {
Geo.getLocation().then((position) => {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
Geo.reverseGeocode(lat, lng).then((locString) => {
this.currentLocationString = locString;
this.getBackgroundImage(lat, lng, locString);
});
}
this.getCurrent(lat, lng);
}, (error) => {
alert('Unable to get current location: ' + error);
});
}
})
*/
}

8
ionic/components/app/test/weather/main.html
View File

@ -2,13 +2,7 @@
<ion-view>
<background-cycler class="bg-fade" [image]="activeBgImage"></background-cycler>
<ion-toolbar id="header" class="no-border">
<ion-title>
<span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br>
<current-time localtz="current.local_tz_short"></current-time>
</ion-title>
<button (^click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button>
</ion-toolbar>
<ion-toolbar id="header" class="no-border"><ion-title><span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br><current-time localtz="current.local_tz_short"></current-time></ion-title><button (^click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
<ion-content>
<div id="main-content">

9
ionic/components/app/test/yerk/index.ts
View File

@ -1,10 +1,9 @@
import {Component} from 'angular2/angular2';
import {IonicView, NavController} from 'ionic/ionic';
import {App, IonicView, NavController} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -60,7 +59,3 @@ class TabsPage {
this.peekTab = PeekTabPage;
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

4
ionic/components/app/test/yerk/main.html
View File

@ -1,10 +1,10 @@
<ion-nav [root]="root"></ion-nav>
<style>
.nav-ios .navbar-container {
.nav[mode="ios"] .navbar-container {
background-color: #2FD9BB !important;
}
.nav-ios .navbar-title {
.nav[mode="ios"] .navbar-title {
color: #FDFEFE;
}
#tabs .tab-bar:before {

25
ionic/components/aside/aside.ts
View File

@ -1,6 +1,8 @@
import {View, EventEmitter, ElementRef, onInit} from 'angular2/angular2';
import {IonicComponent, IonicView} from '../../config/annotations';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
import * as types from './extensions/types'
import * as gestures from './extensions/gestures'
import {dom} from 'ionic/util'
@ -35,28 +37,26 @@ import {dom} from 'ionic/util'
events: ['opening']
})
@View({
template: `<content></content>`
template: '<content></content>'
})
export class Aside {
export class Aside extends Ion {
constructor(elementRef: ElementRef) {
this.ele = elementRef.nativeElement
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
this.opening = new EventEmitter('opening');
// TODO: Use Animation Class
this.ele.addEventListener('transitionend', ev => {
this.getNativeElement().addEventListener('transitionend', ev => {
this.setChanging(false)
})
}
onInit() {
onIonInit() {
this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
console.log('Aside content', this.content, this.contentElement);
Aside.applyConfig(this);
this.gestureDelegate = Aside.getDelegate(this, 'gesture');
this.typeDelegate = Aside.getDelegate(this, 'type');
this.gestureDelegate = this.getDelegate('gesture');
this.typeDelegate = this.getDelegate('type');
}
getContentElement() {
@ -80,7 +80,7 @@ export class Aside {
setChanging(isChanging) {
if (isChanging !== this.isChanging) {
this.isChanging = isChanging
this.ele.classList[isChanging ? 'add' : 'remove']('changing');
this.getNativeElement().classList[isChanging ? 'add' : 'remove']('changing');
}
}
@ -109,4 +109,5 @@ export class Aside {
toggle() {
return this.setOpen(!this.isOpen);
}
}

8
ionic/components/aside/extensions/gestures.ts
View File

@ -47,7 +47,7 @@ class AsideGesture extends SlideEdgeGesture {
getSlideBoundaries() {
return {
min: 0,
max: this.aside.ele.offsetWidth
max: this.aside.width()
};
}
}
@ -60,7 +60,7 @@ export class RightAsideGesture extends LeftAsideGesture {
}
getSlideBoundaries() {
return {
min: -this.aside.ele.offsetWidth,
min: -this.aside.width(),
max: 0
};
}
@ -74,7 +74,7 @@ export class TopAsideGesture extends AsideGesture {
getSlideBoundaries() {
return {
min: 0,
max: this.aside.ele.offsetHeight
max: this.aside.height()
};
}
}
@ -85,7 +85,7 @@ export class BottomAsideGesture extends TopAsideGesture {
}
getSlideBoundaries() {
return {
min: -this.aside.ele.offsetHeight,
min: -this.aside.height(),
max: 0
};
}

6
ionic/components/aside/extensions/types.ts
View File

@ -4,13 +4,13 @@ import {CSS} from 'ionic/util/dom'
// TODO use setters instead of direct dom manipulation
const asideManipulator = {
setSliding(sliding) {
this.aside.ele.classList[sliding ? 'add' : 'remove']('no-transition');
this.aside.getNativeElement().classList[sliding ? 'add' : 'remove']('no-transition');
},
setOpen(open) {
this.aside.ele.classList[open ? 'add' : 'remove']('open');
this.aside.getNativeElement().classList[open ? 'add' : 'remove']('open');
},
setTransform(t) {
this.aside.ele.style[CSS.transform] = t;
this.aside.getNativeElement().style[CSS.transform] = t;
}
}
const contentManipulator = {

13
ionic/components/aside/test/basic/index.ts
View File

@ -1,16 +1,7 @@
import {Component, Directive} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/basic/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/block/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/clear/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/full/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/icons/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/outline/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

11
ionic/components/button/test/sizes/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

3
ionic/components/card/extensions/ios.scss
View File

@ -8,7 +8,8 @@ $card-ios-border-radius: 2px !default;
$card-ios-font-size: 1.4rem !default;
$card-ios-item-content-padding: 15px !default;
.platform-ios .card {
.mode-ios .card {
background: $card-ios-background-color;
box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius;

11
ionic/components/card/test/basic/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

14
ionic/components/checkbox/checkbox.ts
View File

@ -4,6 +4,9 @@ import {setProperty} from 'angular2/src/forms/directives/shared'
//pretty sure this has changed in the latest angular
import {NgControl} from 'angular2/forms';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
import {Icon} from '../icon/icon';
@ -53,12 +56,15 @@ import {Icon} from '../icon/icon';
</div>`,
directives: [Icon]
})
export class Checkbox {
export class Checkbox extends Ion {
constructor(
ngControl: NgControl,
renderer: Renderer,
elementRef: ElementRef
elementRef: ElementRef,
ionicConfig: IonicConfig
) {
super(elementRef, ionicConfig);
this.ngControl = ngControl;
this.renderer = renderer;
this.elementRef = elementRef;
@ -67,10 +73,6 @@ export class Checkbox {
//this.change = new EventEmitter("change");
}
onInit() {
Checkbox.applyConfig(this);
}
/**
* Much like ngModel, this is called from our valueAccessor for the attached
* ControlDirective to update the value internally.

2
ionic/components/checkbox/extensions/ios.scss
View File

@ -5,7 +5,7 @@
$checkbox-ios-color: #007aff;
.checkbox-ios {
.checkbox[mode="ios"] {
.media-checkbox {
min-width: 20px;

10
ionic/components/checkbox/test/basic/index.ts
View File

@ -14,7 +14,7 @@ import {
NgFormModel,
FormBuilder
} from 'angular2/forms';
import {Checkbox, Content, List} from 'ionic/ionic';
import {App, Checkbox, Content, List} from 'ionic/ionic';
//import {IONIC_DIRECTIVES} from 'ionic/ionic'
// @Component({
@ -45,8 +45,7 @@ import {Checkbox, Content, List} from 'ionic/ionic';
// }
// }
@Component({ selector: 'ion-app' })
@View({
@App({
templateUrl: 'main.html',
directives: [Checkbox, List, Content, NgControlName, NgFormModel]
})
@ -89,8 +88,3 @@ class IonicApp {
event.preventDefault();
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

15
ionic/components/content/content.ts
View File

@ -1,25 +1,26 @@
import {Component, View, ElementRef, onInit} from 'angular2/angular2';
import {Component, View, ElementRef} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
@Component({
selector: 'ion-content',
properties: [
'parallax'
],
lifecycle: [onInit]
]
})
@View({
template: '<div class="scroll-content"><content></content></div>'
})
export class Content extends Ion {
constructor(elementRef: ElementRef) {
super(elementRef);
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
}
onInit() {
this.scrollElement = this.elementRef.nativeElement.children[0];
onIonInit() {
this.scrollElement = this.getNativeElement().children[0];
}
addScrollEventListener(handler) {

2
ionic/components/content/extensions/ios.scss
View File

@ -6,7 +6,7 @@ $content-container-ios-background-color: #000 !default;
$content-ios-background-color: #efeff4 !default;
.nav-ios.show-pane {
.nav[mode="ios"].show-pane {
.content-container {
background-color: $content-container-ios-background-color;

21
ionic/components/content/test/pull-to-refresh/index.ts
View File

@ -1,21 +0,0 @@
import {Component, Directive} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
}
doRefresh() {
console.log('DOREFRESH')
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

27
ionic/components/content/test/pull-to-refresh/main.html
View File

@ -1,27 +0,0 @@
<ion-view nav-title="Pull to refresh">
<ion-toolbar><ion-title>Pull to Refresh</ion-title></ion-toolbar>
<ion-content>
<ion-refresher (refresh)="doRefresh($event, amt)"></ion-refresher>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
</ion-content>
</ion-view>
<style>
f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }
#counter {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: rgba(0,0,0,0.4);
z-index: 5;
}
</style>

4
ionic/components/form/form.scss
View File

@ -196,8 +196,8 @@ input[type="color"] {
line-height: $font-size-base + 2;
}
.platform-ios,
.platform-android {
.mode-ios,
.mode-android {
input[type="datetime-local"],
input[type="date"],
input[type="month"],

12
ionic/components/form/test/basic/index.ts
View File

@ -1,11 +1,9 @@
import {Component, Directive, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
//import {Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@View({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -23,7 +21,3 @@ class IonicApp {
alert('Deleting');
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

86
ionic/components/ion.ts
View File

@ -1,4 +1,6 @@
import {IonicConfig} from '../config/config';
import * as util from 'ionic/util';
/**
* Base class for all Ionic components. Exposes some common functionality
@ -6,26 +8,82 @@ import {IonicConfig} from '../config/config';
* sending/receiving app-level events.
*/
export class Ion {
constructor(elementRef: ElementRef) {
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
this.elementRef = elementRef;
this.ionicConfig = ionicConfig;
this.clsMode = this.ionicConfig.setting('mode');
}
onInit() {
let cls = this.constructor;
if (cls.defaultProperties && this.ionicConfig) {
for (let prop in cls.defaultProperties) {
// Priority:
// ---------
// 1) Value set from within constructor
// 2) Value set from the host element's attribute
// 3) Value set by the users global config
// 4) Value set by the default mode/platform config
// 5) Value set from the component's default
if (this[prop]) {
// this property has already been set on the instance
// could be from the user setting the element's attribute
// or from the user setting it within the constructor
continue;
}
// get the property values from a global user/platform config
let configVal = this.ionicConfig.setting(prop);
if (configVal) {
this[prop] = configVal;
continue;
}
// wasn't set yet, so go with property's default value
this[prop] = cls.defaultProperties[prop];
}
}
this.onIonInit && this.onIonInit();
}
getDelegate(delegateName) {
let cls = this.constructor;
if (cls.delegates) {
let cases = cls.delegates[delegateName] || [];
for (let i = 0; i < cases.length; i++) {
let delegateCase = cases[i];
if (util.isArray(delegateCase)) {
let [ check, DelegateConstructor ] = delegateCase;
if (check(this)) {
return new DelegateConstructor(this);
}
} else {
return new delegateCase(this);
}
}
}
}
getElementRef() {
return this.elementRef;
}
getNativeElement() {
return this.elementRef.nativeElement;
}
get cssClass() {
// IonicConfig.global
// should be able to set map of classes to add soon:
// https://github.com/angular/angular/issues/2364
let componentId = this.constructor.name;
// let classes = {};
// classes[componentId + '-ios'] = true;
// return classes;
return true;
width() {
return this.getNativeElement().offsetWidth;
}
height() {
return this.getNativeElement().offsetHeight;
}
}

75
ionic/components/item/extensions/ios.scss
View File

@ -9,49 +9,50 @@ $item-ios-accessory-color: #8e8e93 !default;
$item-ios-border-color: $list-ios-border-color !default;
.list-ios {
.list[mode="ios"] {
margin-top: -1px;
}
.list-ios .item {
background: $item-ios-background-color;
min-height: $item-ios-min-height;
padding-left: $item-ios-padding-left;
.item {
background: $item-ios-background-color;
min-height: $item-ios-min-height;
padding-left: $item-ios-padding-left;
.item-media + .item-content {
margin-left: $item-ios-padding-left;
.item-media + .item-content {
margin-left: $item-ios-padding-left;
}
.item-content {
min-height: $item-ios-min-height;
padding: 0;
@include hairline(bottom, $item-ios-border-color, $z-index-list-border);
}
.item:last-of-type .item-content:after {
background: none;
}
.item-accessory {
color: $item-ios-accessory-color;
}
.item-subtitle {
width: 100%;
color: #808080;
}
.item-full {
// No left ios-style padding
padding-left: 0;
button {
width: 100%;
font-size: 1.3em;
}
}
}
.item-content {
min-height: $item-ios-min-height;
padding: 0;
.item-group-title {
// TODO: This doesn't look great when it's a header for the first item
@include hairline(bottom, $item-ios-border-color, $z-index-list-border);
}
.item:last-of-type .item-content:after {
background: none;
}
.item-accessory {
color: $item-ios-accessory-color;
}
.item-subtitle {
width: 100%;
color: #808080;
}
.item-full {
// No left ios-style padding
padding-left: 0;
button {
width: 100%;
font-size: 1.3em;
}
}
}
.list-ios .item-group-title {
// TODO: This doesn't look great when it's a header for the first item
@include hairline(bottom, $item-ios-border-color, $z-index-list-border);
}

10
ionic/components/item/item-group.ts
View File

@ -1,19 +1,19 @@
import {Component, Directive, View, ElementRef} from 'angular2/angular2';
import {Directive, ElementRef} from 'angular2/angular2';
@Component({
@Directive({
selector: 'ion-item-group',
host: {
'class': 'item-group'
}
})
@View({
template: `<content></content>`
})
export class ItemGroup {
constructor(elementRef: ElementRef) {
this.ele = elementRef.nativeElement;
}
}
@Directive({
selector: 'ion-item-group-title',
host: {

13
ionic/components/item/test/accessories/index.ts
View File

@ -1,12 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -14,7 +9,3 @@ class IonicApp {
this.items = [1, 2, 3, 4, 5]
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

20
ionic/components/item/test/basic/index.ts
View File

@ -1,20 +0,0 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
this.items = [1, 2, 3, 4, 5]
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

12
ionic/components/layout/test/basic/index.ts
View File

@ -1,15 +1,7 @@
import {Component, View} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

2
ionic/components/list/extensions/ios.scss
View File

@ -14,7 +14,7 @@ $list-ios-footer-font-size: 1.4rem !default;
$list-ios-footer-color: #8f8f94 !default;
.list.list-ios {
.list.list[mode="ios"] {
// Add the hairline to the top of the first item
.item:first-of-type {
@include hairline(top, $list-ios-border-color, $z-index-list-border);

10
ionic/components/list/list.ts
View File

@ -1,6 +1,7 @@
import {ElementRef, onInit} from 'angular2/angular2';
import {ElementRef} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicDirective} from '../../config/annotations';
import {ListVirtualScroll} from './virtual';
import * as util from 'ionic/util';
@ -15,13 +16,12 @@ import * as util from 'ionic/util';
]
})
export class List extends Ion {
constructor(elementRef: ElementRef) {
super(elementRef);
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
this.ele = elementRef.nativeElement;
}
onInit() {
List.applyConfig(this);
onIonInit() {
if (util.isDefined(this.virtual)) {
console.log('Content', this.content);
console.log('Virtual?', this.virtual);

11
ionic/components/list/test/basic/index.ts
View File

@ -1,14 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

47
ionic/components/list/test/infinite/index.ts
View File

@ -1,7 +1,25 @@
import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
import {Component, Directive, View, Parent} from 'angular2/angular2';
import {ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
import {Directive, Parent, forwardRef} from 'angular2/angular2';
import {Content, List, Item} from 'ionic/ionic';
import {App, List} from 'ionic/ionic';
@App({
templateUrl: 'main.html',
directives: [forwardRef(() => ItemCellTemplate)]
})
class IonicApp {
constructor() {
this.items = []
for(let i = 0; i < 1000; i++) {
this.items.push({
title: 'Item ' + i
})
}
}
}
/*
@ -22,26 +40,3 @@ export class ItemCellTemplate {
list.setItemTemplate(this);
}
}
@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html',
directives: [Content, List, Item, ItemCellTemplate, NgFor]
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
this.items = []
for(let i = 0; i < 1000; i++) {
this.items.push({
title: 'Item ' + i
})
}
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

16
ionic/components/list/test/sticky/index.ts
View File

@ -1,17 +1,11 @@
import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
import {Component, Directive, View, Parent} from 'angular2/angular2';
import {App} from 'ionic/ionic';
import {Content, List, Item, ItemGroup, ItemGroupTitle} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@View({
templateUrl: 'main.html',
directives: [Content, List, Item, ItemGroup, ItemGroupTitle, NgFor]
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
this.groups = [];
var letters = "abcdefghijklmnopqrstuvwxyz".split('');
@ -30,7 +24,3 @@ class IonicApp {
}
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

6
ionic/components/list/virtual.ts
View File

@ -5,7 +5,7 @@ export class ListVirtualScroll {
this.list = list;
this.content = this.list.content;
this.viewportHeight = this.content.ele.offsetHeight;
this.viewportHeight = this.content.height();
this.viewContainer = this.list.itemTemplate.viewContainer;
@ -31,7 +31,7 @@ export class ListVirtualScroll {
}
resize() {
this.viewportHeight = this.content.ele.offsetHeight;
this.viewportHeight = this.content.height();
this.viewportScrollHeight = this.content.scrollElement.scrollHeight;
this.virtualHeight = this.list.items.length * this.itemHeight;
@ -100,7 +100,7 @@ export class ListVirtualScroll {
}
console.log('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.log('Container has', this.list.ele.children.length, 'children');
console.log('Container has', this.list.getNativeElement().children.length, 'children');
}
cellAtIndex(index) {

57
ionic/components/modal/modal.scss
View File

@ -28,60 +28,3 @@ ion-modal {
transform: translate3d(0px, 0px, 0px);
}
}
/*@media (min-width: $modal-inset-mode-break-point) {
// inset mode is when the modal doesn't fill the entire
// display but instead is centered within a large display
.modal {
top: $modal-inset-mode-top;
right: $modal-inset-mode-right;
bottom: $modal-inset-mode-bottom;
left: $modal-inset-mode-left;
overflow: visible;
min-height: $modal-inset-mode-min-height;
width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
}
.modal.ng-leave-active {
bottom: 0;
}
// remove ios header padding from inset header
.platform-ios.platform-cordova .modal-wrapper .modal {
.bar-header:not(.bar-subheader) {
height: $bar-height;
> * {
margin-top: 0;
}
}
.tabs-top > .tabs,
.tabs.tabs-top {
top: $bar-height;
}
.has-header,
.bar-subheader {
top: $bar-height;
}
.has-subheader {
top: $bar-height + $bar-subheader-height;
}
.has-tabs-top {
top: $bar-height + $tabs-height;
}
.has-header.has-subheader.has-tabs-top {
top: $bar-height + $bar-subheader-height + $tabs-height;
}
}
.modal-backdrop-bg {
transition: opacity 300ms ease-in-out;
background-color: $modal-backdrop-bg-active;
opacity: 0;
}
.active .modal-backdrop-bg {
opacity: 0.5;
}
}*/

4
ionic/components/modal/modal.ts
View File

@ -2,15 +2,11 @@ import {Injectable} from 'angular2/angular2';
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
import {IonicApp} from '../app/app';
import * as util from 'ionic/util';
@Injectable()
export class Modal extends Overlay {
constructor(app: IonicApp) {
super(app);
}
open(ComponentType: Type, opts={}) {
let defaults = {

64
ionic/components/modal/test/basic/index.ts
View File

@ -1,19 +1,37 @@
import {Component} from 'angular2/angular2';
import {IonicComponent, IonicView, IonicConfig, Platform} from 'ionic/ionic';
import {App, IonicComponent, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class MyAppCmp {
constructor(modal: Modal) {
constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) {
this.modal = modal;
console.log('platforms', Platform.platforms());
console.log('mode', ionicConfig.setting('mode'));
console.log('core', Platform.is('core'))
console.log('cordova', Platform.is('cordova'))
console.log('mobile', Platform.is('mobile'))
console.log('ipad', Platform.is('ipad'))
console.log('iphone', Platform.is('iphone'))
console.log('phablet', Platform.is('phablet'))
console.log('tablet', Platform.is('tablet'))
console.log('ios', Platform.is('ios'))
console.log('android', Platform.is('android'))
console.log('windows phone', Platform.is('windowsphone'))
console.log('isRTL', app.isRTL())
Platform.ready().then(() => {
console.log('Platform.ready')
});
}
openModal() {
@ -135,40 +153,6 @@ export class ModalSecondPage {
}
export function main(ionicBootstrap) {
let myConfig = new IonicConfig();
// myConfig.setting('someKey', 'userConfig');
// myConfig.setting('ios', 'someKey', 'iosConfig');
// myConfig.setting('ipad', 'someKey', 'ipadConfig');
ionicBootstrap(MyAppCmp, myConfig).then(app => {
console.log('platforms', Platform.platforms());
console.log('mode', myConfig.setting('mode'));
console.log('core', Platform.is('core'))
console.log('cordova', Platform.is('cordova'))
console.log('mobile', Platform.is('mobile'))
console.log('ipad', Platform.is('ipad'))
console.log('iphone', Platform.is('iphone'))
console.log('phablet', Platform.is('phablet'))
console.log('tablet', Platform.is('tablet'))
console.log('ios', Platform.is('ios'))
console.log('android', Platform.is('android'))
console.log('windows phone', Platform.is('windowsphone'))
console.log('isRTL', app.isRTL())
console.log('lang', app.lang())
Platform.ready().then(() => {
console.log('Platform.ready')
});
});
}
class FadeIn extends Animation {
constructor(element) {

2
ionic/components/nav-bar/extensions/ios.scss
View File

@ -19,7 +19,7 @@ $navbar-ios-button-text-color: #007aff !default;
$navbar-ios-button-background-color: transparent !default;
.nav-ios .navbar-container {
.nav[mode="ios"] .navbar-container {
min-height: $navbar-ios-height;
background: $navbar-ios-background;

2
ionic/components/nav-bar/extensions/material.scss
View File

@ -10,7 +10,7 @@ $navbar-material-button-font-size: 2rem !default;
$navbar-material-button-text-color: #007aff !default;
.navbar-md {
.navbar[mode="md"] {
height: $navbar-material-height;
background: $navbar-material-background;

2
ionic/components/nav-bar/nav-bar.scss
View File

@ -3,7 +3,7 @@
// --------------------------------------------------
ion-navbar {
.navbar {
position: absolute;
width: 100%;
height: 100%;

12
ionic/components/nav-bar/nav-bar.ts
View File

@ -1,7 +1,8 @@
import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
import {ViewItem} from '../view/view-item';
import * as dom from '../../util/dom';
@ -41,8 +42,9 @@ import * as dom from '../../util/dom';
]
})
export class Navbar extends Ion {
constructor(item: ViewItem, elementRef: ElementRef) {
super(elementRef);
constructor(item: ViewItem, elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
this.eleRef = elementRef;
this.itemEles = [];
item.navbarView(this);
@ -51,10 +53,6 @@ export class Navbar extends Ion {
this.bbText = '';
}
onInit() {
Navbar.applyConfig(this);
}
element() {
return this.eleRef;
}

1
ionic/components/nav-bar/test/html-title/e2e.ts
View File

@ -1 +0,0 @@

14
ionic/components/nav-bar/test/html-title/index.ts
View File

@ -1,14 +0,0 @@
import {Component, Directive} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

18
ionic/components/nav-bar/test/html-title/main.html
View File

@ -1,18 +0,0 @@
<ion-view>
<ion-nav-title>
<span style="color:red">Awesome</span>
<strong style="color:green">HTML</strong>
<em style="color:purple">Title</em>
</ion-nav-title>
<ion-nav-items side="primary">
<button>p1</button>
</ion-nav-items>
<ion-nav-items side="secondary">
<button>s1</button>
</ion-nav-items>
</ion-view>

1
ionic/components/nav-bar/test/long-title/e2e.ts
View File

@ -1 +0,0 @@

14
ionic/components/nav-bar/test/long-title/main.html
View File

@ -1,14 +0,0 @@
<ion-view nav-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
<ion-nav-items side="primary">
<button>p1</button>
<button>p2</button>
<button>p3</button>
</ion-nav-items>
<ion-nav-items side="secondary">
<button>s1</button>
</ion-nav-items>
</ion-view>

1
ionic/components/nav-bar/test/lopsided-buttons/e2e.ts
View File

@ -1 +0,0 @@

14
ionic/components/nav-bar/test/lopsided-buttons/index.ts
View File

@ -1,14 +0,0 @@
import {Component, Directive} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
templateUrl: 'main.html'
})
class IonicApp {}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

46
ionic/components/nav-bar/test/lopsided-buttons/main.html
View File

@ -1,46 +0,0 @@
<ion-view nav-title="Attribute Title">
<ion-nav-items side="primary">
<button>p1</button>
<button>p2</button>
<button>p3</button>
</ion-nav-items>
<ion-nav-items side="secondary">
<button>s1</button>
</ion-nav-items>
<ion-content class="padding" style="text-align:center">
<p>
A long time ago, in a galaxy far,<br>
far away....<br>
</p>
<p>
It is a period of civil war.<br>
Rebel spaceships, striking<br>
from a hidden base, have won<br>
their first victory against<br>
the evil Galactic Empire.<br>
</p>
<p>
During the battle, rebel<br>
spies managed to steal secret<br>
plans to the Empire's<br>
ultimate weapon, the DEATH<br>
STAR, an armored space<br>
station with enough power to<br>
destroy an entire planet.<br>
</p>
<p>
Pursued by the Empire's<br>
sinister agents, Princess<br>
Leia races home aboard her<br>
starship, custodian of the<br>
stolen plans that can save<br>
her people and restore<br>
freedom to the galaxy....<br>
</p>
</ion-content>
</ion-view>

42
ionic/components/nav/nav.js
View File

@ -1,42 +0,0 @@
import {Component, Directive, View, ElementRef, Parent, Optional, forwardRef, onInit, Injector} from 'angular2/angular2';
import {IonicComponent} from '../../config/annotations';
import {ViewController} from '../view/view-controller';
@IonicComponent({
selector: 'ion-nav',
properties: [
'root'
],
lifecycle: [onInit]
})
@View({
template: '<template pane-anchor></template>',
directives: [forwardRef(() => NavPaneAnchor)]
})
export class Nav extends ViewController {
constructor(
@Optional() parentViewCtrl: ViewController,
injector: Injector,
elementRef: ElementRef
) {
super(parentViewCtrl, injector, elementRef);
}
onInit() {
if (this.root) {
this.push(this.root);
}
}
}
@Directive({selector: 'template[pane-anchor]'})
class NavPaneAnchor {
constructor(@Parent() nav: Nav, elementRef: ElementRef) {
nav.anchorElementRef(elementRef);
}
}

23
ionic/components/nav/pane.ts
View File

@ -1,6 +1,8 @@
import {Component, Directive, View, ElementRef, Parent, Inject, forwardRef} from 'angular2/angular2';
import {bind} from 'angular2/di';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {ViewController} from '../view/view-controller';
import {SwipeHandle} from './swipe-handle';
import {IonicComponent} from '../../config/annotations';
@ -96,7 +98,10 @@ export class PaneController {
@IonicComponent({
selector: 'ion-pane',
classId: 'nav'
classId: 'nav',
host: {
['[class.show-page]']: 'showPane'
}
})
@View({
template: `
@ -108,20 +113,22 @@ export class PaneController {
`,
directives: [PaneAnchor, PaneContentAnchor, SwipeHandle]
})
export class Pane {
export class Pane extends Ion {
constructor(
@Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
elementRef: ElementRef
elementRef: ElementRef,
ionicConfig: IonicConfig
) {
this.ele = elementRef.nativeElement;
super(elementRef, ionicConfig);
viewCtrl.panes.add(this);
}
width() {
return this.ele.offsetWidth;
set showPane(val) {
this._showPane = val;
}
showPane(val) {
this.ele.classList[val ? 'add' : 'remove']('show-pane');
get showPane() {
return this._showPane;
}
}

31
ionic/components/nav/test/basic/index.ts
View File

@ -1,24 +1,12 @@
import {Component, onInit} from 'angular2/angular2';
import {IonicView, IonicConfig, IonicRouter} from 'ionic/ionic';
import {FirstPage} from './pages/first-page'
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
template: '<ion-nav></ion-nav>'
})
class MyApp {}
export function main(ionicBootstrap) {
var myRouter = new IonicRouter({
@App({
router: {
'FirstPage': {
'path': '/firstpage',
'module': 'dist/examples/nav/basic/pages/first-page',
'root': true
},
'SecondPage': {
'path': '/secondpage',
@ -28,11 +16,6 @@ export function main(ionicBootstrap) {
'path': '/thirdpage',
'module': 'dist/examples/nav/basic/pages/third-page',
},
});
myRouter.otherwise('FirstPage');
let myConfig = new IonicConfig();
ionicBootstrap(MyApp, myConfig, myRouter);
}
}
})
class MyApp {}

6
ionic/components/overlay/overlay.ts
View File

@ -9,8 +9,9 @@ import * as util from 'ionic/util';
export class Overlay {
constructor(app: IonicApp) {
constructor(app: IonicApp, ionicConfig: IonicConfig) {
this.app = app;
this.ionicConfig = ionicConfig;
}
create(overlayType, ComponentType: Type, opts={}, context=null) {
@ -21,7 +22,8 @@ export class Overlay {
annotation.selector = 'ion-' + overlayType;
annotation.host = {
'[style.z-index]': 'zIndex',
'class': overlayType + ' ion-app'
'class': overlayType + ' ion-app',
'mode': this.ionicConfig.setting('mode')
};
let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);

2
ionic/components/radio/extensions/ios.scss
View File

@ -5,7 +5,7 @@
$radio-ios-color: #007aff;
.radio-group-ios {
.radio-group[mode="ios"] {
.media-radio {
color: $radio-ios-color;

11
ionic/components/radio/test/basic/index.ts
View File

@ -1,10 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -15,7 +12,3 @@ class IonicApp {
// });
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

14
ionic/components/scroll/scroll.ts
View File

@ -1,13 +1,15 @@
import {Component, View, ElementRef} from 'angular2/angular2';
import {View, ElementRef} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
/**
* ion-scroll is a non-flexboxed scroll area that can
* scroll horizontally or vertically.
*/
@Component({
@IonicComponent({
selector: 'ion-scroll',
properties: [
'scrollX', 'scrollY'
@ -18,14 +20,14 @@ import {Ion} from '../ion';
}
})
@View({
template: `<div class="scroll-content"><content></content></div>`
template: '<div class="scroll-content"><content></content></div>'
})
export class Scroll extends Ion {
constructor(elementRef: ElementRef) {
super(elementRef);
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
setTimeout(() => {
this.scrollElement = elementRef.nativeElement.children[0];
this.scrollElement = this.getNativeElement().children[0];
});
}

14
ionic/components/scroll/test/basic/index.ts
View File

@ -1,21 +1,11 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class MyApp {
constructor() {
console.log('IonicApp Start')
}
doRefresh() {
console.log('DOREFRESH')
}
}
export function main(ionicBootstrap) {
ionicBootstrap(MyApp);
}

17
ionic/components/scroll/test/pull-to-refresh/index.ts
View File

@ -1,16 +1,11 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class MyApp {
constructor() {
console.log('IonicApp Start')
}
doRefresh(refresher) {
console.log('DOREFRESH', refresher)
@ -18,14 +13,12 @@ class MyApp {
refresher.complete();
})
}
doStarting() {
console.log('DOSTARTING');
}
doPulling(amt) {
console.log('DOPULLING', amt);
}
}
export function main(ionicBootstrap) {
ionicBootstrap(MyApp);
}

2
ionic/components/search-bar/extensions/ios.scss
View File

@ -10,7 +10,7 @@ $search-bar-ios-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' v
$search-bar-ios-background-size: 13px 13px !default;
.search-bar-ios {
.search-bar[mode="ios"] {
padding: $search-bar-ios-padding;
background: $search-bar-ios-background-color;
@include hairline(bottom, $search-bar-ios-border-color);

15
ionic/components/search-bar/search-bar.ts
View File

@ -1,6 +1,8 @@
import {ElementRef, onInit, Pipe} from 'angular2/angular2';
import {ElementRef, Pipe} from 'angular2/angular2';
//import {ControlGroup, ControlDirective} from 'angular2/forms'
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent, IonicView} from '../../config/annotations';
@ -24,22 +26,19 @@ import {IonicComponent, IonicView} from '../../config/annotations';
</div>
<button class="search-bar-cancel">{{cancelText}}</button>`
})
export class SearchBar {
export class SearchBar extends Ion {
constructor(
elementRef: ElementRef//,
elementRef: ElementRef,
ionicConfig: IonicConfig//,
//cd:ControlDirective
) {
this.ele = elementRef.nativeElement;
super(elementRef, ionicConfig);
// this.controlDirective = cd;
// cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
this.query = '';
}
onInit() {
SearchBar.applyConfig(this);
}
/**
* Much like ngModel, this is called from our valueAccessor for the attached
* ControlDirective to update the value internally.

14
ionic/components/search-bar/test/basic/index.ts
View File

@ -1,8 +1,6 @@
import {Component, Directive} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
import {SearchPipe} from 'ionic/components/search-bar/search-bar';
@ -11,14 +9,11 @@ function randomTitle() {
return items[Math.floor(Math.random() * items.length)];
}
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
var fb = new FormBuilder();
this.form = fb.group({
searchQuery: ['', Validators.required]
@ -34,6 +29,7 @@ class IonicApp {
})
}
}
getItems() {
var q = this.form.controls.searchQuery.value;
if(q.trim() == '') {
@ -47,7 +43,3 @@ class IonicApp {
})
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

7
ionic/components/segment/extensions/ios.scss
View File

@ -1,4 +1,9 @@
.segment-ios .ion-segment {
// iOS Segment
// --------------------------------------------------
.segment[mode="ios"] .ion-segment {
> button,
> [button] {
border-width: 1px;

20
ionic/components/segment/segment.ts
View File

@ -1,11 +1,12 @@
import {View, Renderer, ElementRef, EventEmitter, onInit, Ancestor, forwardRef} from 'angular2/angular2';
import {View, Renderer, ElementRef, EventEmitter, Ancestor, forwardRef} from 'angular2/angular2';
import {Control, NgControl,NgFormControl} from 'angular2/forms';
import {ControlGroup, ControlDirective} from 'angular2/forms'
import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicDirective, IonicComponent} from '../../config/annotations'
import {dom} from 'ionic/util';
console.log(forwardRef(() => SegmentButton));
@IonicComponent({
selector: 'ion-segment',
@ -13,7 +14,6 @@ console.log(forwardRef(() => SegmentButton));
properties: [
'value'
],
lifecycle: [onInit],
host: {
'(click)': 'buttonClicked($event)',
'(change)': 'onChange($event)',
@ -32,12 +32,15 @@ console.log(forwardRef(() => SegmentButton));
template: '<div class="ion-segment"><content></content></div>',
directives: [forwardRef(() => SegmentButton)]
})
export class Segment {
export class Segment extends Ion {
constructor(
cd: NgControl,
elementRef: ElementRef,
ionicConfig: IonicConfig,
renderer: Renderer
) {
super(elementRef, ionicConfig);
this.ele = elementRef.nativeElement
this.elementRef = elementRef;
this.renderer = renderer;
@ -50,10 +53,6 @@ export class Segment {
this.buttons = [];
}
onInit() {
Segment.applyConfig(this);
}
/**
* Called by child SegmentButtons to bind themselves to
* the Segment.
@ -164,8 +163,7 @@ export class SegmentControlValueAccessor {
host: {
'(click)': 'buttonClicked($event)',
'[class.active]': 'isActive'
},
lifecycle: [onInit]
}
})
export class SegmentButton {
constructor(

14
ionic/components/segment/test/basic/index.ts
View File

@ -1,15 +1,11 @@
import {Component} from 'angular2/angular2';
import {formDirectives, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app',
appInjector: [FormBuilder]
})
@IonicView({
@App({
templateUrl: 'main.html',
appInjector: [FormBuilder],
directives: [formDirectives]
})
class IonicApp {
@ -26,7 +22,3 @@ class IonicApp {
event.preventDefault();
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

13
ionic/components/slides/test/basic/index.ts
View File

@ -1,12 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -17,7 +12,3 @@ class IonicApp {
console.log('Prev');
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

13
ionic/components/slides/test/continuous/index.ts
View File

@ -1,12 +1,7 @@
import {Component} from 'angular2/angular2';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
template: `
<ion-slides #slides loop>
<ion-slide style="background-color: blue">
@ -36,7 +31,3 @@ class IonicApp {
console.log('Prev');
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

4
ionic/components/split-view/split-nav-view.ts
View File

@ -1,4 +0,0 @@
export class SplitNavView extends NavView {
}

121
ionic/components/split-view/split-view.ts
View File

@ -1,121 +0,0 @@
import {Component, Parent, Decorator, View, ElementRef} from 'angular2/angular2'
import {Nav} from '../nav/nav'
import * as util from 'ionic/util'
// TODO consider more explicit API, a la tabs
/**
* SplitViewportDecorator is temporary until the SplitView is able to query
* its children for viewports.
*/
@Decorator({
selector: 'ion-nav[split-viewport]'
})
class SplitViewportDecorator {
constructor(
@Parent() splitView: SplitView,
navViewport: Nav
) {
splitView.setNav(navViewport)
}
}
@Component({
selector: 'ion-split-view',
properties: [
'defaultView',
'navTitle'
],
})
@View({
template: `
<ion-view [nav-title]="navTitle" class="split-view">
<div class="pane-container">
<content></content>
</div>
</ion-view>
<ion-nav split-viewport>
</ion-nav>
<style>
ion-split-view {
width: 100%;
height: 100%;
display: flex;
}
ion-split-view > .view.split-view {
max-width: 300px;
border-right: 1px solid black;
z-index: 1;
background: white;
}
ion-split-view > [split-viewport] {
left: 300px !important;
width: calc(100% - 300px);
}
</style>
`,
directives: [SplitViewportDecorator, Nav]
})
export class SplitView {
constructor(
elementRef: ElementRef,
@Parent() navPane: NavPane
) {
this.ele = elementRef.nativeElement
this.navPane = navPane
// TODO mq.addEventListener() doesn't work with zone.js
// let checkScreen = () => {
// const mq = window.matchMedia('(min-width: 720px)')
// this.setEnabled(mq.matches)
// }
// window.addEventListener('resize', checkScreen)
// checkScreen()
this.setEnabled(true)
}
// Sets the first view to be shown in the viewport to the right of the splitView.
set defaultView(DefaultClass) {
this.splitViewport.push(DefaultClass, {sync: true})
}
isActive(Class) {
for (let item of this.splitViewport._stack) {
if (item.Class === Class) return true
}
return false
}
setNav(viewport) {
this.splitViewport = viewport
this.navPane.__$push = this.navPane.push
this.navPane.push = (Class, opts) => {
if (this.isEnabled) {
opts = opts || {}
util.defaults(opts, { sync: true })
if (this.splitViewport.containsClass(Class)) {
return this.splitViewport.popTo(0)
} else {
this.splitViewport.popAll()
return this.splitViewport.push(Class, opts)
}
} else {
return this.navPane.__$push(Class, opts)
}
};
}
// TODO set enabled depending on some condition (media query in this case)
setEnabled(isEnabled) {
if (isEnabled !== this.isEnabled) {
if (isEnabled) {
this.splitViewport
}
this.isEnabled = isEnabled
}
}
}

2
ionic/components/switch/extensions/ios.scss
View File

@ -9,7 +9,7 @@ $switch-ios-slider-on-background: #4cd964 !default;
$switch-ios-toggle-on-background: #fff !default;
.switch-ios {
.switch[mode="ios"] {
.switch-toggle {
width: $switch-ios-width;

36
ionic/components/switch/switch.ts
View File

@ -1,7 +1,9 @@
import {ElementRef} from 'angular2/angular2';
import {View, ElementRef} from 'angular2/angular2';
import {ControlGroup, ControlDirective} from 'angular2/forms';
import {IonicComponent, IonicView} from '../../config/annotations';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
@IonicComponent({
@ -10,10 +12,11 @@ import {IonicComponent, IonicView} from '../../config/annotations';
'checked'
],
host: {
'(click)': 'switchClicked($event)'
'(click)': 'switchClicked($event)',
'class': 'item'
}
})
@IonicView({
@View({
template: `
<div class="item-content">
<div class="item-title">
@ -24,26 +27,17 @@ import {IonicComponent, IonicView} from '../../config/annotations';
</div>
</div>`
})
export class Switch {
export class Switch extends Ion {
constructor(
elementRef: ElementRef,
cd: ControlDirective
ionicConfig: IonicConfig
//cd: ControlDirective
) {
this.ele = elementRef.nativeElement
this.config = Switch.config.invoke(this)
this.controlDirective = cd;
cd.valueAccessor = this;
super(elementRef, ionicConfig)
// TODO: These are temporary until we figure out what to do
// with @PropertSetter
//let setAriaRole = (v) => { this.ele.setAttribute('aria-role', v) }
//let setAriaChecked = (v) => { this.ele.setAttribute('aria-checked', v) }
//let setAriaInvalid = (v) => { this.ele.setAttribute('aria-invalid', v) }
//let setAriaDisabled = (v) => { this.ele.setAttribute('aria-disabled', v) }
//let setChecked = (v) => this.ele.setAttribute('checked', v);
this.ele.classList.add('item')
// this.config = Switch.config.invoke(this)
// this.controlDirective = cd;
// cd.valueAccessor = this;
// TODO: These rely on the commented-out PropertySetter's above
//setAriaRole('checkbox')
@ -71,7 +65,7 @@ export class Switch {
return this._checked
}
switchClicked(event) {
switchClicked(ev) {
this.checked = !this.checked;
}
}

16
ionic/components/switch/test/basic/index.ts
View File

@ -1,11 +1,9 @@
import {Component} from 'angular2/angular2';
import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
import {FormBuilder, Validators} from 'angular2/forms';
import {IonicView} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@Component({ selector: 'ion-app' })
@IonicView({
@App({
templateUrl: 'main.html'
})
class IonicApp {
@ -19,12 +17,8 @@ class IonicApp {
});
}
doSubmit(event) {
doSubmit(ev) {
console.log('Submitting form', this.form.value);
event.preventDefault();
ev.preventDefault();
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

4
ionic/components/tabs/extensions/ios.scss
View File

@ -1,5 +1,5 @@
// iOS Tab Bar
// iOS Tabs
// --------------------------------------------------
$tab-bar-ios-item-padding: 0px 10px !default;
@ -8,7 +8,7 @@ $tab-bar-ios-item-icon-size: 30px !default;
$tab-bar-ios-height: 49px !default;
.tabs-ios {
.tabs[mode="ios"] {
.tab-bar {
// iOS's UITabBar is at most 49px high

4
ionic/components/tabs/extensions/material.scss
View File

@ -1,5 +1,5 @@
// Material Design Toolbar
// Material Design Tabs
// --------------------------------------------------
$tab-bar-material-item-padding: 4px 10px !default;
@ -9,7 +9,7 @@ $tab-bar-material-text-transform: uppercase !default;
$tab-bar-material-text-font-weight: 500 !default;
.tabs-md {
.tabs[mode="md"] {
.tab-bar-item {
padding: $tab-bar-material-item-padding;

9
ionic/components/tabs/tabs.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, View, onInit, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2';
import {Component, Directive, View, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2';
import {ViewController} from '../view/view-controller';
import {ViewItem} from '../view/view-item';
@ -64,10 +64,6 @@ export class Tabs extends ViewController {
}
onInit() {
Tabs.applyConfig(this);
}
addTab(tab) {
// tab.item refers to the ViewItem of the individual Tab being added to Tabs (ViewController)
// this.item refers to the ViewItem instsance on Tabs
@ -124,8 +120,7 @@ export class Tabs extends ViewController {
'[attr.aria-controls]': 'panelId',
'[attr.aria-selected]': 'tab.isSelected',
'(^click)': 'onClick($event)'
},
lifecycle: [onInit]
}
})
class TabButton {
constructor(@Parent() tabs: Tabs) {

11
ionic/components/tabs/test/advanced/index.ts
View File

@ -1,6 +1,6 @@
import {Component} from 'angular2/angular2';
import {IonicView, NavController} from 'ionic/ionic';
import {App, IonicView, NavController} from 'ionic/ionic';
@Component({selector: 'ion-view'})
@ -176,10 +176,7 @@ class Tab2Page3 {
}
@Component({
selector: 'ion-app'
})
@IonicView({
@App({
template: '<ion-nav [root]="rootView"></ion-nav>'
})
class IonicApp {
@ -187,7 +184,3 @@ class IonicApp {
this.rootView = SignIn;
}
}
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
}

Some files were not shown because too many files have changed in this diff Show More