Snapcat fix

ionic/components/app/structure.scss

@@ -46,22 +46,6 @@ ionic {
 
 }
 
-ion-loading-icon {
-  display: flex;
-  align-self: center;
-  margin: auto;
-
-  font-family: 'Ionicons';
-  &:before {
-    content: "\f44e";
-  }
-  font-size: 128px;
-  color: #666666;
-
-  animation: rotation 45s infinite linear;
-  -webkit-animation: rotation 45s infinite linear;
-
-}
 @-webkit-keyframes rotation {
   from {
     -webkit-transform: rotate(0deg);
@@ -78,6 +62,22 @@ ion-loading-icon {
     transform: rotate(359deg);
   }
 }
+ion-loading-icon {
+  display: flex;
+  align-self: center;
+  margin: auto;
+
+  font-family: 'Ionicons';
+  &:before {
+    content: "\f44e";
+  }
+  font-size: 128px;
+  color: #666666;
+
+  animation: rotation 45s infinite linear;
+  -webkit-animation: rotation 45s infinite linear;
+
+}
 
 ion-nav {
   height: 100%;

ionic/components/app/test/snapcat/index.js

@@ -6,7 +6,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {Modal, ModalRef, Nav, Segment, Animation, SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic';
-import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
+import {NavController, NavbarTemplate, NavParams, Navbar, IonicComponent} from 'ionic/ionic';
 
 
 class FadeIn extends Animation {
@@ -111,10 +111,11 @@ class IonicApp {
   openHeart() {
     console.log('openHeart');
 
-    Modal.open(HeartModal, {
-      openAnimation: 'my-fade-in',
-      closeAnimation: 'my-fade-out'
+    Modal.open(HeartModal)/*, {
+      enterAnimation: 'my-fade-in',
+      leaveAnimation: 'my-fade-out'
     });
+    */
   }
 
   openGear() {
@@ -124,33 +125,25 @@ class IonicApp {
   }
 }
 
-@Component({
-  selector: 'settings-modal'
-})
+@IonicComponent(Modal)
 @View({
-  template: '<ion-modal><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-modal>',
-  directives: [Nav, Content, ModalContainer]
+  template: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>',
+  directives: [Nav, Content]
 })
 export class SettingsModal extends Modal {
-  // constructor() {
-  //   super();
-  // }
+  constructor() {
+    super();
+  }
 }
 
-@Component({
-  selector: 'heart-modal'
-})
+@IonicComponent(Modal)
 @View({
-  template: '<ion-modal><button icon (click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-modal>',
-  directives: [Nav, Content, ModalContainer]
+  template: '<ion-view id="heart-modal"><button icon (^click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>',
+  directives: [Nav, Content]
 })
-export class HeartModal {
-  constructor(modalRef: ModalRef) {
-    this.modalRef = modalRef;
-  }
-  close() {
-    console.log('Closing modal');
-    this.modalRef.close();
+export class HeartModal extends Modal {
+  constructor() {
+    super();
   }
 }
 

ionic/components/app/test/snapcat/main.html

@@ -109,26 +109,26 @@
     font-family: 'lato';
   }
 
-  heart-modal ion-view {
+  #heart-modal {
     background-color: #FFB400 !important;
     justify-content: center;
     align-items: center;
     color: #fff;
   }
-  heart-modal ion-view h2 {
+  #heart-modal h2 {
     font-size: 36px !important;
   }
-  heart-modal ion-view p {
+  #heart-modal p {
     font-size: 18px;
   }
 
-  heart-modal icon {
+  #heart-modal icon {
     position: absolute;
     top: 13px;
     left: 0px;
   }
 
-  heart-modal icon i {
+  #heart-modal icon i {
     font-size: 18px;
     color: #fff;
   }

ionic/components/modal/modal.js

@@ -40,7 +40,6 @@ class ModalSlideIn extends ModalAnimation {
   constructor(element) {
     super(element);
     this
-      .fadeIn()
       .fromTo('translateY', '100%', '0%');
   }
 }
@@ -50,7 +49,6 @@ class ModalSlideOut extends ModalAnimation {
   constructor(element) {
     super(element);
     this
-      .fadeOut()
       .fromTo('translateY', '0%', '100%');
   }
 }