diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 190e60b6e4..200db22374 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -8,12 +8,36 @@ import {Platform} from '../../platform/platform'; /* -Ionicons Font Icon +home: { + ios: 'ion-ios-home', + md: 'ion-md-home' +}, +star: { + ios: 'ion-ios-star', + md: 'ion-md-star', +} + +1-for-1 swap +Map of stuff that's 1-for-1 +Always use the same no matter what +Cuz it's not in the map of 1-for-1's + + + + +Different between modes +Used different attributes + + + + + + Ionicons SVG ...ios... diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 66a856a48d..343cb39f90 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -4,7 +4,8 @@ import {Platform} from './platform'; Platform.register({ name: 'core', settings: { - mode: 'ios' + mode: 'ios', + iconMode: 'ios' } }); Platform.setDefault('core'); @@ -48,6 +49,7 @@ Platform.register({ ], settings: { mode: 'md', + iconMode: 'md', type: 'overlay', keyboardScrollAssist: true }, @@ -72,6 +74,7 @@ Platform.register({ ], settings: { mode: 'ios', + iconMode: 'ios', viewTransition: 'ios', tapPolyfill: true, keyboardScrollAssist: true @@ -113,7 +116,9 @@ Platform.register({ 'tablet' ], settings: { - mode: 'wp' + mode: 'wp', + iconMode: 'md', + viewTransition: 'md', }, isMatch(p) { return p.isPlatform('windowsphone', 'windows phone'); diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts new file mode 100644 index 0000000000..64ae4a9b24 --- /dev/null +++ b/ionic/transitions/md-transition.ts @@ -0,0 +1,99 @@ +import {Transition} from './transition'; +import {Animation} from '../animations/animation'; + + +const DURATION = 600; +const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; + +const OPACITY = 'opacity'; +const TRANSLATEX = 'translateX'; + +const OFF_RIGHT = '100%'; +const OFF_LEFT = '-33%'; +const CENTER = '0%' +const OFF_OPACITY = 0.8; + + +class MaterialTransition extends Transition { + + constructor(nav, opts) { + super(nav, opts); + + // global duration and easing for all child animations + this.duration(DURATION); + this.easing(EASING); + + // entering item moves to center + this.enteringView + .to(TRANSLATEX, CENTER) + .to(OPACITY, 1) + .before.setStyles({ zIndex: this.entering.index }); + + this.enteringTitle + .fadeIn() + .to(TRANSLATEX, CENTER); + + // leaving view moves off screen + this.leavingView + .from(TRANSLATEX, CENTER) + .from(OPACITY, 1) + .before.setStyles({ zIndex: this.leaving.index }); + + this.leavingTitle + .from(TRANSLATEX, CENTER) + .from(OPACITY, 1); + + // set properties depending on direction + if (opts.direction === 'back') { + // back direction + this.enteringView + .from(TRANSLATEX, OFF_LEFT) + .from(OPACITY, OFF_OPACITY) + .to(OPACITY, 1); + + this.enteringTitle + .from(TRANSLATEX, OFF_LEFT); + + this.leavingView + .to(TRANSLATEX, OFF_RIGHT) + .to(OPACITY, 1); + + this.leavingTitle + .to(TRANSLATEX, OFF_RIGHT) + .to(OPACITY, 0); + + if (this.leaving.enableBack() && this.viewWidth() > 200) { + let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement()); + leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); + this.leavingNavbar.add(leavingBackButtonText); + } + + } else { + // forward direction + this.enteringView + .from(TRANSLATEX, OFF_RIGHT) + .from(OPACITY, 1); + + this.enteringTitle + .from(TRANSLATEX, OFF_RIGHT); + + this.leavingView + .to(TRANSLATEX, OFF_LEFT) + .to(OPACITY, OFF_OPACITY); + + this.leavingTitle + .to(TRANSLATEX, OFF_LEFT) + .to(OPACITY, 0); + + if (this.entering.enableBack() && this.viewWidth() > 200) { + let enteringBackButtonText = new Animation(this.entering.backButtonTextElement()); + enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER); + this.enteringNavbar.add(enteringBackButtonText); + } + } + + } + +} + +Transition.register('md', MaterialTransition);