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

Merge branch '2.0' into windows-mode

Browse Source
This commit is contained in:
Brandy Carney
2016-03-01 14:16:22 -05:00
parent 143616b9b1 5fb1e08347
commit 1d95e6c339
18 changed files with 357 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
demos/app.variables.scss Normal file
View File

@ -0,0 +1,31 @@
// http://ionicframework.com/docs/v2/theming/
// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files. Setting
// variables before Ionic's Sass will use these variables rather than
// Ionic's default Sass variable values. App Shared Sass imports belong
// in the app.core.scss file and not this file. Sass variables specific
// to the mode belong in either the app.ios.scss or app.md.scss files.
// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
// Both iOS and MD colors can be further customized if colors
// are different per mode.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #FFC125
);

1
demos/config/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

66
demos/config/config-demo.js
View File

@ -1,66 +0,0 @@
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
aCouple = aCouples[nIdx].split(/\s*=\s*/);
if (aCouple.length > 1) {
oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
if (window.localStorage.getItem('configDemo')) {
CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
} else {
CONFIG_DEMO = null;
}

25
demos/config/index.html
View File

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/dist/demos/scrollbar-fix.css">
<link ios-href="/dist/bundles/ionic.ios.css" rel="stylesheet">
<link md-href="/dist/bundles/ionic.md.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
<script type="text/javascript" src="config-demo.js"></script>
</head>
<body>
<ion-app>
<ion-loading-icon></ion-loading-icon>
</ion-app>
<script src="bundle.js"></script>
</body>
</html>

69
demos/config/index.ts
View File

@ -1,7 +1,74 @@
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
aCouple = aCouples[nIdx].split(/\s*=\s*/);
if (aCouple.length > 1) {
oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
var CONFIG_DEMO = null;
if (window.localStorage.getItem('configDemo')) {
CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
}
import {App, Page, IonicApp, Platform, NavController} from 'ionic-angular';
@App({
templateUrl: 'app.html',
template: '<ion-nav id="nav" [root]="rootPage" #content></ion-nav>',
config: CONFIG_DEMO || {}
})
class ApiDemoApp {

72
demos/icon/main.html
View File

@ -4,50 +4,50 @@
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name='ionic' primary></ion-icon></ion-col>
<ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>
<ion-col><ion-icon name='heart' danger></ion-icon></ion-col>
<ion-col><ion-icon name='ionitron' primary></ion-icon></ion-col>
<ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>
<ion-col><ion-icon name='happy'></ion-icon></ion-col>
<ion-col><ion-icon name='people'></ion-icon></ion-col>
<ion-col><ion-icon name='person'></ion-icon></ion-col>
<ion-col><ion-icon name='contact'></ion-icon></ion-col>
<ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name='apps'></ion-icon></ion-col>
<ion-col><ion-icon name='lock'></ion-icon></ion-col>
<ion-col><ion-icon name='key'></ion-icon></ion-col>
<ion-col><ion-icon name='unlock'></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" bright></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name='map' secondary></ion-icon></ion-col>
<ion-col><ion-icon name='navigate'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name='locate'></ion-icon></ion-col>
<ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name='mic'></ion-icon></ion-col>
<ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
<ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
<ion-col><ion-icon name='microphone'></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name='cafe'></ion-icon></ion-col>
<ion-col><ion-icon name='calculator'></ion-icon></ion-col>
<ion-col><ion-icon name='bus'></ion-icon></ion-col>
<ion-col><ion-icon name='wine' danger></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" danger></ion-icon></ion-col>
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
<ion-col><ion-icon name='image' secondary></ion-icon></ion-col>
<ion-col><ion-icon name='star'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
<ion-col><ion-icon name="star" bright></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropup-circle'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name='cloud'></ion-icon></ion-col>
<ion-col><ion-icon name='sunny'></ion-icon></ion-col>
<ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
<ion-col><ion-icon name='rainy' primary></ion-icon></ion-col>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
</ion-row>
</ion-content>

62
demos/infinite-scroll/index.ts
View File

@ -1,5 +1,65 @@
import {App, InfiniteScroll} from 'ionic-angular';
import {MockProvider} from './mock-provider';
import {Injectable} from 'angular2/core';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData() {
// return mock data synchronously
let data = [];
for (var i = 0; i < 20; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData() {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}
@App({

61
demos/infinite-scroll/mock-provider.ts
View File

@ -1,61 +0,0 @@
import {Injectable} from 'angular2/core';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData() {
// return mock data synchronously
let data = [];
for (var i = 0; i < 3; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData() {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}

32
demos/output.ios.scss
View File

@ -1,4 +1,36 @@
$font-path: "../fonts";
$roboto-font-path: "../fonts";
// http://ionicframework.com/docs/v2/theming/
// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files. Setting
// variables before Ionic's Sass will use these variables rather than
// Ionic's default Sass variable values. App Shared Sass imports belong
// in the app.core.scss file and not this file. Sass variables specific
// to the mode belong in either the app.ios.scss or app.md.scss files.
// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
// Both iOS and MD colors can be further customized if colors
// are different per mode.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #FFC125
);
@import "../ionic/ionic.ios";

32
demos/output.md.scss
View File

@ -1,4 +1,36 @@
$font-path: "../fonts";
$roboto-font-path: "../fonts";
// http://ionicframework.com/docs/v2/theming/
// App Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files. Setting
// variables before Ionic's Sass will use these variables rather than
// Ionic's default Sass variable values. App Shared Sass imports belong
// in the app.core.scss file and not this file. Sass variables specific
// to the mode belong in either the app.ios.scss or app.md.scss files.
// App Shared Color Variables
// --------------------------------------------------
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
// Both iOS and MD colors can be further customized if colors
// are different per mode.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #FFC125
);
@import "../ionic/ionic.md";

62
demos/refresher/index.ts
View File

@ -1,5 +1,65 @@
import {App, Page, Refresher} from 'ionic-angular';
import {MockProvider} from './mock-provider';
import {Injectable} from 'angular2/core';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData() {
// return mock data synchronously
let data = [];
for (var i = 0; i < 3; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData() {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}
@App({

2
demos/refresher/main.html
View File

@ -1,5 +1,5 @@
<ion-toolbar>
<ion-title>Pull To Refresh</ion-title>
<ion-title>Refresher</ion-title>
</ion-toolbar>

61
demos/refresher/mock-provider.ts
View File

@ -1,61 +0,0 @@
import {Injectable} from 'angular2/core';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData() {
// return mock data synchronously
let data = [];
for (var i = 0; i < 3; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData() {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}

8
gulpfile.js
View File

@ -525,10 +525,6 @@ gulp.task('demos', ['bundle.demos'], function() {
return merge([demosStream, cssStream]);
});
gulp.task('demos.dev', function() {
});
/**
* Builds necessary files for each demo then bundles them using webpack. Unlike
* e2e tests, demos are bundled for performance (but have a slower build).
@ -545,7 +541,7 @@ gulp.task('bundle.demos', ['build.demos', 'transpile', 'copy.libs', 'sass', 'fon
// add our bundle entry, removing previous if necessary
// since config is cached
if (config.entry.length > 4) {
if (config.entry.length > 3) {
config.entry.pop();
}
config.entry.push('./' + file);
@ -637,6 +633,7 @@ function buildDemoSass(isProductionMode) {
(function combineSass() {
gulp.src([
sassVars,
'demos/app.variables.scss',
'demos/app.ios.scss'
])
.pipe(concat('output.ios.scss'))
@ -644,6 +641,7 @@ function buildDemoSass(isProductionMode) {
gulp.src([
sassVars,
'demos/app.variables.scss',
'demos/app.md.scss'
])
.pipe(concat('output.md.scss'))

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

@ -10,12 +10,12 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
/**
* @name Refresher
* @description
* Allows you to add Pull-To-Refresh to an Content component.
* Place `ion-refresher` as the first child of your `ion-content` element.
* The Refresher provides pull-to-refresh functionality on a content component.
* Place the `ion-refresher` as the first child of your `ion-content` element.
*
* Pages can then can listen to the refreshers various output events. The
* `refresh` output event is the one that's fired when the user has pulled
* down far enough to kick off the refreshing process. Once the async operation
* Pages can then listen to the refresher's various output events. The
* `refresh` output event is fired when the user has pulled down far
* enough to kick off the refreshing process. Once the async operation
* has completed and the refreshing should end, call `complete()`.
*
* @usage
@ -71,13 +71,14 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
*
* ## Further Customizing Refresher Content
*
* The `ion-refresh` component holds the refresh logic, and it requires a
* child refresher content component for its display. The `ion-refresher-content`
* component is Ionic's default that shows the actual display of the refresher
* and changes its look depending on the refresher's state. With this separation,
* it also allows developers to create their own refresher content components.
* Ideas include having some cool SVG or CSS animations that are customized to
* your app and animates the various refresher states to your liking.
* The `ion-refresher` component holds the refresh logic.
* It requires a child component in order to display the content.
* Ionic uses `ion-refresher-content` by default. This component
* displays the refresher and changes the look depending
* on the refresher's state. Separating these components
* allows developers to create their own refresher content
* components. You could replace our default content with
* custom SVG or CSS animations.
*
* @demo /docs/v2/demos/refresher/
*

16
ionic/components/toolbar/test/scenarios/main.html
View File

@ -2,6 +2,22 @@
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>

1
ionic/components/toolbar/toolbar.ios.scss
View File

@ -57,6 +57,7 @@ ion-navbar-section {
.toolbar-content {
flex: 1;
order: map-get($toolbar-order-ios, content);
min-width: 0;
}
.toolbar-title {

1
ionic/components/toolbar/toolbar.md.scss
View File

@ -52,6 +52,7 @@ ion-navbar-section {
flex: 1;
order: map-get($toolbar-order-md, content);
max-width: 100%;
min-width: 0;
}
.toolbar-title {