diff --git a/demos/app.variables.scss b/demos/app.variables.scss
new file mode 100644
index 0000000000..12b647616d
--- /dev/null
+++ b/demos/app.variables.scss
@@ -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
+);
diff --git a/demos/config/app.html b/demos/config/app.html
deleted file mode 100644
index 776be9a94a..0000000000
--- a/demos/config/app.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/demos/config/config-demo.js b/demos/config/config-demo.js
deleted file mode 100644
index e18ab9659b..0000000000
--- a/demos/config/config-demo.js
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/demos/config/index.html b/demos/config/index.html
deleted file mode 100644
index 49f6db8d67..0000000000
--- a/demos/config/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/demos/config/index.ts b/demos/config/index.ts
index 4647505d3a..f863175ed1 100644
--- a/demos/config/index.ts
+++ b/demos/config/index.ts
@@ -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: '',
config: CONFIG_DEMO || {}
})
class ApiDemoApp {
diff --git a/demos/icon/main.html b/demos/icon/main.html
index 7897a7aee8..821993fa7f 100644
--- a/demos/icon/main.html
+++ b/demos/icon/main.html
@@ -4,50 +4,50 @@
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
diff --git a/demos/infinite-scroll/index.ts b/demos/infinite-scroll/index.ts
index dc45f02012..bdf2f02dae 100644
--- a/demos/infinite-scroll/index.ts
+++ b/demos/infinite-scroll/index.ts
@@ -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({
diff --git a/demos/infinite-scroll/mock-provider.ts b/demos/infinite-scroll/mock-provider.ts
deleted file mode 100644
index 515a6d2172..0000000000
--- a/demos/infinite-scroll/mock-provider.ts
+++ /dev/null
@@ -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',
- ];
-
-}
diff --git a/demos/output.ios.scss b/demos/output.ios.scss
index 052237e8f5..f3018826e5 100644
--- a/demos/output.ios.scss
+++ b/demos/output.ios.scss
@@ -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";
diff --git a/demos/output.md.scss b/demos/output.md.scss
index d4d8a86aa8..4c0d7bd119 100644
--- a/demos/output.md.scss
+++ b/demos/output.md.scss
@@ -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";
diff --git a/demos/refresher/index.ts b/demos/refresher/index.ts
index 12db707b99..b4393df432 100644
--- a/demos/refresher/index.ts
+++ b/demos/refresher/index.ts
@@ -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({
diff --git a/demos/refresher/main.html b/demos/refresher/main.html
index 186be0ab41..458575f6da 100644
--- a/demos/refresher/main.html
+++ b/demos/refresher/main.html
@@ -1,5 +1,5 @@
- Pull To Refresh
+ Refresher
diff --git a/demos/refresher/mock-provider.ts b/demos/refresher/mock-provider.ts
deleted file mode 100644
index 515a6d2172..0000000000
--- a/demos/refresher/mock-provider.ts
+++ /dev/null
@@ -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',
- ];
-
-}
diff --git a/gulpfile.js b/gulpfile.js
index 9905a53f8b..1875fb3526 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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'))
diff --git a/ionic/components/refresher/refresher.ts b/ionic/components/refresher/refresher.ts
index 94d196159e..c32635cae2 100644
--- a/ionic/components/refresher/refresher.ts
+++ b/ionic/components/refresher/refresher.ts
@@ -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/
*
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index be6f13db2c..7fe453ae2c 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -2,6 +2,22 @@
This is the title that never ends. It just goes on and on my friend.
+
+
+
+
+
+
+
+
+ This is a long title with buttons. It just goes on and on my friend.
+
@@ -207,4 +223,4 @@
.toolbar {
border-bottom: 1px solid black;
}
-
\ No newline at end of file
+
diff --git a/ionic/components/toolbar/toolbar.ios.scss b/ionic/components/toolbar/toolbar.ios.scss
index c292340481..75f6721faa 100644
--- a/ionic/components/toolbar/toolbar.ios.scss
+++ b/ionic/components/toolbar/toolbar.ios.scss
@@ -57,6 +57,7 @@ ion-navbar-section {
.toolbar-content {
flex: 1;
order: map-get($toolbar-order-ios, content);
+ min-width: 0;
}
.toolbar-title {
diff --git a/ionic/components/toolbar/toolbar.md.scss b/ionic/components/toolbar/toolbar.md.scss
index bc8304f199..f227617116 100644
--- a/ionic/components/toolbar/toolbar.md.scss
+++ b/ionic/components/toolbar/toolbar.md.scss
@@ -52,6 +52,7 @@ ion-navbar-section {
flex: 1;
order: map-get($toolbar-order-md, content);
max-width: 100%;
+ min-width: 0;
}
.toolbar-title {