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
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);