Working modal stuff

Gruntfile.js

@@ -18,11 +18,7 @@ module.exports = function(grunt) {
           'js/utils/**/*.js',
 
           // Views
-          'js/views/navBarView.js',
+          'js/views/**/*.js',
-          'js/views/headerBarView.js',
-          'js/views/sideMenuView.js',
-          'js/views/tabBarView.js',
-          'js/views/toggleView.js',
 
           // Controllers
           'js/controllers/**/*.js'

dist/ionic-angular.js

@@ -2,6 +2,44 @@ angular.module('ionic.ui', ['ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav',
 ;
 ;
 ;
+angular.module('ionic.service.modal', ['ionic.service'])
+
+
+.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+  return {
+    /**
+     * Load a modal with the given template string.
+     *
+     * A new isolated scope will be created for the 
+     * modal and the new element will be appended into the body.
+     */
+    fromTemplate: function(templateString) {
+      // Create a new isolated scope for the modal
+      var scope = $rootScope.$new(true);
+
+      // Compile the template
+      var element = $compile(templateString)(scope);
+      $document[0].body.appendChild(element[0]);
+
+      return new ionic.views.Modal({el: element[0] });
+    },
+    fromTemplateUrl: function(url, cb) {
+      TemplateLoader.load(url).then(function(templateString) {
+        // Create a new isolated scope for the modal
+        var scope = $rootScope.$new(true);
+
+        // Compile the template
+        var element = $compile(templateString)(scope);
+        $document[0].body.appendChild(element[0]);
+      
+        var modal = new ionic.views.Modal({ el: element[0] });
+
+        cb(modal);
+      });
+    }
+  };
+}]);
+;
 angular.module('ionic.service', [])
 
 .factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {

dist/ionic-ios7.css

@@ -2271,22 +2271,22 @@ a.button {
   transition: transform .25s ease-in-out, opacity 1ms .25s;
 }
 */
-.slide-in-up.enter {
+@-webkit-keyframes slide-in-up {
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+  0% {
-  transition: transform 0.4s, opacity 0.4s;
+    opacity: 0;
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-.slide-in-up.enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0); }
-.slide-in-up.leave {
-  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-  transition: transform 0.25s, opacity 0.25s; }
-.slide-in-up.leave-active {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0); }
 
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); } }
+
+.slide-in-up.active {
+  animation: slide-in-up 0.5s;
+  -webkit-animation: slide-in-up 0.5s;
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+
 @keyframes fadein {
   from {
     opacity: 0; }

dist/ionic.css

@@ -2323,22 +2323,22 @@ a.button {
   transition: transform .25s ease-in-out, opacity 1ms .25s;
 }
 */
-.slide-in-up.enter {
+@-webkit-keyframes slide-in-up {
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
+  0% {
-  transition: transform 0.4s, opacity 0.4s;
+    opacity: 0;
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-.slide-in-up.enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0); }
-.slide-in-up.leave {
-  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-  transition: transform 0.25s, opacity 0.25s; }
-.slide-in-up.leave-active {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0); }
 
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0); } }
+
+.slide-in-up.active {
+  animation: slide-in-up 0.5s;
+  -webkit-animation: slide-in-up 0.5s;
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+
 @keyframes fadein {
   from {
     opacity: 0; }

dist/ionic.js

@@ -1731,6 +1731,51 @@ window.ionic = {
 })(window.ionic);
 ;
 
+(function(ionic) {
+
+  ionic.views.HeaderBar = function(opts) {
+    this.el = opts.el;
+
+    this._titleEl = this.el.querySelector('.title');
+  };
+
+  ionic.views.HeaderBar.prototype = {
+    resizeTitle: function() {
+      var e, j, i,
+      title,
+      titleWidth,
+      children = this.el.children;
+
+      for(i = 0, j = children.length; i < j; i++) {
+        e = children[i];
+        if(/h\d/.test(e.nodeName.toLowerCase())) {
+          title = e;
+        }
+      }
+
+      titleWidth = title.offsetWidth;
+    }
+  };
+
+})(ionic);
+;
+(function(ionic) {
+  ionic.views.Modal = function(opts) {
+    this.el = opts.el;
+  };
+
+  ionic.views.Modal.prototype = {
+    show: function() {
+      this.el.classList.add('active');
+    },
+    hide: function() {
+      this.el.classList.remove('active');
+    }
+  };
+
+})(ionic);
+;
+
 (function(ionic) {
 
   ionic.views.NavBar = function(opts) {
@@ -1786,35 +1831,6 @@ window.ionic = {
 })(ionic);
 ;
 
-(function(ionic) {
-
-  ionic.views.HeaderBar = function(opts) {
-    this.el = opts.el;
-
-    this._titleEl = this.el.querySelector('.title');
-  };
-
-  ionic.views.HeaderBar.prototype = {
-    resizeTitle: function() {
-      var e, j, i,
-      title,
-      titleWidth,
-      children = this.el.children;
-
-      for(i = 0, j = children.length; i < j; i++) {
-        e = children[i];
-        if(/h\d/.test(e.nodeName.toLowerCase())) {
-          title = e;
-        }
-      }
-
-      titleWidth = title.offsetWidth;
-    }
-  };
-
-})(ionic);
-;
-
 (function(ionic) {
 
   ionic.views.SideMenu = function(opts) {

example/toderp2/css/app.css

@@ -28,7 +28,7 @@
 
 #splash-view, #signup-view {
   background: url('../img/splash.png') no-repeat transparent;
-  background-size: contain;
+  background-size: cover;
 }
 
 #signup-bottom {

example/toderp2/index.html

@@ -38,7 +38,6 @@
     <!-- Splash -->
     <script id="splash.html" type="text/ng-template">
       <div id="splash-view" class="view fade-in" nav-content nav-bar="false">
-        <img src="img/logo.svg" class="ionic-logo">
       </div>
     </script>
 
@@ -52,26 +51,26 @@
             </div>
             <div class="input-group">
               <label class="input-wrapper row">
-                <span class="input-label col-xs-4">Full name</span>
+                <span class="input-label col-xs-3">Full name</span>
                 <input class="col-xs-8" type="text" placeholder="" ng-model="signupForm.name" required>
               </label>
               <label class="input-wrapper row">
-                <span class="input-label col-xs-4">Email</span>
+                <span class="input-label col-xs-3">Email</span>
                 <input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email" required>
               </label>
               <label class="input-wrapper row">
-                <span class="input-label col-xs-4">Password</span>
+                <span class="input-label col-xs-3">Password</span>
                 <input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password" required>
               </label>
             </div>
             <div class="input-group">
-              <button type="submit" class="button button-primary button-block">Get derp</button>
+              <button type="submit" class="button button-primary button-block">Get derp'n</button>
               <div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
             </div>
           </form>
           <div id="signup-bottom">
             <h3>Already have an account?</h3>
-            <button class="button button-clear button-block">Sign in</button>
+            <button ng-click="showLogin()" class="button button-clear button-block">Sign in</button>
           </div>
         </main>
       </div>
@@ -79,8 +78,12 @@
 
     <!-- Login -->
     <script id="login.html" type="text/ng-template">
-      <div title="Login" id="login-view" class="view" nav-content ng-controller="LoginCtrl">
+      <div id="login-view" class="modal slide-in-up" ng-controller="LoginCtrl">
-        <main class="content padded">
+        <header class="bar bar-header bar-success">
+          <h1 class="title">Log in</h1>
+          <button class="button">Close</a>
+        </header>
+        <main class="content padded has-header">
           <form class="form-horizontal" ng-submit="tryLogin(loginForm)">
             <div class="input-group inset">
               <label class="input-wrapper row">

example/toderp2/js/controllers.js

@@ -1,4 +1,4 @@
-angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
+angular.module('ionic.todo.controllers', ['ionic.todo', 'ionic.service.modal', 'firebase'])
 
 // The main controller for the application
 .controller('TodoCtrl', function($scope, $rootScope, AuthService) {
@@ -45,12 +45,19 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
 })
 
 // The signup form controller
-.controller('SignupCtrl', function($scope, AuthService) {
+.controller('SignupCtrl', function($scope, AuthService, Modal) {
   $scope.signupForm = {};
 
+  Modal.fromTemplateUrl('login.html', function(modal) {
+    $scope.loginModal = modal;
+  });
+
   $scope.trySignup = function(data) {
     AuthService.signup(data.email, data.password);
   };
+
+  $scope.showLogin = function() {
+  };
 })
 
 .controller('ProjectsCtrl', function($scope, angularFire, FIREBASE_URL) {

js/ext/angular/src/service/ionicModal.js

@@ -0,0 +1,37 @@
+angular.module('ionic.service.modal', ['ionic.service'])
+
+
+.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+  return {
+    /**
+     * Load a modal with the given template string.
+     *
+     * A new isolated scope will be created for the 
+     * modal and the new element will be appended into the body.
+     */
+    fromTemplate: function(templateString) {
+      // Create a new isolated scope for the modal
+      var scope = $rootScope.$new(true);
+
+      // Compile the template
+      var element = $compile(templateString)(scope);
+      $document[0].body.appendChild(element[0]);
+
+      return new ionic.views.Modal({el: element[0] });
+    },
+    fromTemplateUrl: function(url, cb) {
+      TemplateLoader.load(url).then(function(templateString) {
+        // Create a new isolated scope for the modal
+        var scope = $rootScope.$new(true);
+
+        // Compile the template
+        var element = $compile(templateString)(scope);
+        $document[0].body.appendChild(element[0]);
+      
+        var modal = new ionic.views.Modal({ el: element[0] });
+
+        cb(modal);
+      });
+    }
+  };
+}]);

js/ext/angular/test/service/ionicModal.unit.js

@@ -0,0 +1,17 @@
+describe('Ionic Modal', function() {
+  var modal, q;
+
+  beforeEach(module('ionic.ui.modal'));
+
+  beforeEach(inject(function(Modal, $q) {
+    q = $q;
+    modal = Modal;
+  }));
+
+  iit('Should show', function() {
+    var template = '<div class="modal"></div>';
+    var deferred = q.defer();
+    modal.fromTemplate(template);
+    deferred.resolve(true);
+  });
+});

js/views/modalView.js

@@ -0,0 +1,15 @@
+(function(ionic) {
+  ionic.views.Modal = function(opts) {
+    this.el = opts.el;
+  };
+
+  ionic.views.Modal.prototype = {
+    show: function() {
+      this.el.classList.add('active');
+    },
+    hide: function() {
+      this.el.classList.remove('active');
+    }
+  };
+
+})(ionic);

scss/ionic/_animations.scss

@@ -9,33 +9,23 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
   transition: transform .25s ease-in-out, opacity 1ms .25s;
 }
 */
-
+@-webkit-keyframes slide-in-up {
-.slide-in-up {
+  0% {
-  &.enter {
+    opacity: 0;
-    -webkit-transition: -webkit-transform .4s, opacity .4s;
-            transition:         transform .4s, opacity .4s;
-
     -webkit-transform: translate3d(0, 100%, 0);
             transform: translate3d(0, 100%, 0);
-
-    -webkit-transition-timing-function: $bezier-function;
-
   }
-
+  100% {
-  &.enter-active {
+    opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
   }
-
-  &.leave {
-    -webkit-transition: -webkit-transform .25s, opacity .25s;
-            transition:         transform .25s, opacity .25s;
 }
 
-  &.leave-active {
+.slide-in-up.active {
-    -webkit-transform: translate3d(0, 100%, 0);
+  animation: slide-in-up 0.5s;
-            transform: translate3d(0, 100%, 0);
+  -webkit-animation: slide-in-up 0.5s;
-  }
+  -webkit-animation-timing-function: $bezier-function;
 }
 
 @keyframes fadein {