icon map

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
 <icon name="home"></icon>
 <icon class="ion-ios-home"></icon>
 <icon class="ion-md-home"></icon>
 
 
+Always use the same no matter what
+Cuz it's not in the map of 1-for-1's
+<icon name="alert"></icon>
+<icon class="ion-alert"></icon>
+
+
+Different between modes
+Used different attributes
+<icon ios-name="search3" md-name="search2"></icon>
+<icon class="ion-ios-search3"></icon>
+<icon class="ion-md-search2"></icon>
+
+
+
 Ionicons SVG
 <icon svg="home"></icon>
 <icon><svg>...ios...</svg></icon>

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

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