From a0d068dae05c8bd1d45373dd876e1a1c8fcb993f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Mar 2016 23:04:13 -0500 Subject: [PATCH] docs(demos): update gulp file and API demos to include windows theme --- demos/action-sheet/index.ts | 61 +++++---------------------- demos/app.wp.scss | 1 + demos/output.wp.scss | 36 ++++++++++++++++ gulpfile.js | 11 ++++- scripts/demos/index.template.dev.html | 1 + scripts/demos/index.template.html | 1 + 6 files changed, 60 insertions(+), 51 deletions(-) create mode 100644 demos/app.wp.scss create mode 100644 demos/output.wp.scss diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts index c3f7ae100c..37b5a41e7f 100644 --- a/demos/action-sheet/index.ts +++ b/demos/action-sheet/index.ts @@ -15,84 +15,45 @@ class ApiDemoApp { templateUrl: 'main.html' }) export class InitialPage { - constructor(nav: NavController, platform: Platform) { - this.nav = nav; - this.platform = platform; - } + constructor(public nav: NavController, public platform: Platform) { } present() { - if (this.platform.is('android')) { - var androidSheet = { - title: 'Albums', - buttons: [ - { - text: 'Delete', - style: 'destructive', - icon: 'md-trash', - handler: () => { - console.log('Destructive clicked'); - } - }, - { text: 'Share', - icon: 'share', - handler: () => { - console.log('Share clicked'); - } - }, - { text: 'Play', - icon: 'arrow-dropright-circle', - handler: () => { - console.log('Play clicked'); - } - }, - { text: 'Favorite', - icon: 'md-heart-outline', - handler: () => { - console.log('Favorite clicked'); - } - }, - { - text: 'Cancel', - style: 'cancel', - icon: 'md-close', - handler: () => { - console.log('Cancel clicked'); - } - } - ], - }; - } - - let actionSheet = ActionSheet.create( androidSheet || { + let actionSheet = ActionSheet.create({ + title: 'Albums', buttons: [ { text: 'Delete', - style: 'destructive', + role: 'destructive', + icon: !this.platform.is('ios') ? 'trash' : null, handler: () => { - console.log('Destructive clicked'); + console.log('Delete clicked'); } }, { text: 'Share', + icon: !this.platform.is('ios') ? 'share' : null, handler: () => { console.log('Share clicked'); } }, { text: 'Play', + icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null, handler: () => { console.log('Play clicked'); } }, { text: 'Favorite', + icon: !this.platform.is('ios') ? 'heart-outline' : null, handler: () => { console.log('Favorite clicked'); } }, { text: 'Cancel', - style: 'cancel', + role: 'cancel', // will always sort to be on the bottom + icon: !this.platform.is('ios') ? 'close' : null, handler: () => { console.log('Cancel clicked'); } diff --git a/demos/app.wp.scss b/demos/app.wp.scss new file mode 100644 index 0000000000..0a2266b457 --- /dev/null +++ b/demos/app.wp.scss @@ -0,0 +1 @@ +@import "../ionic/ionic.wp"; diff --git a/demos/output.wp.scss b/demos/output.wp.scss new file mode 100644 index 0000000000..d51d931adf --- /dev/null +++ b/demos/output.wp.scss @@ -0,0 +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.wp"; diff --git a/gulpfile.js b/gulpfile.js index 7b61bcc646..5925c75711 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -648,11 +648,20 @@ function buildDemoSass(isProductionMode) { .pipe(concat('output.md.scss')) .pipe(gulp.dest('demos/')) + gulp.src([ + sassVars, + 'demos/app.variables.scss', + 'demos/app.wp.scss' + ]) + .pipe(concat('output.wp.scss')) + .pipe(gulp.dest('demos/')) + })(); gulp.src([ 'demos/output.ios.scss', - 'demos/output.md.scss' + 'demos/output.md.scss', + 'demos/output.wp.scss' ]) .pipe(sass({ diff --git a/scripts/demos/index.template.dev.html b/scripts/demos/index.template.dev.html index 84f5fd335a..a4020dbcaf 100644 --- a/scripts/demos/index.template.dev.html +++ b/scripts/demos/index.template.dev.html @@ -8,6 +8,7 @@ + diff --git a/scripts/demos/index.template.html b/scripts/demos/index.template.html index 30cbe6b066..8fd5da71e9 100644 --- a/scripts/demos/index.template.html +++ b/scripts/demos/index.template.html @@ -8,6 +8,7 @@ +