Lots of little tweaks

dist/css/ionic.css

@@ -2569,56 +2569,56 @@ a.subdued‎ {
     .bar.bar-clear .title {
       color: #fff; }
   .bar.bar-default {
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: white;
     border-color: #dddddd;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     color: #333333; }
     .bar.bar-default .title {
       color: #333333; }
   .bar.bar-secondary {
-    background-color: rgba(245, 245, 245, 0.9);
+    background-color: whitesmoke;
     border-color: #bbbbbb;
     background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
     color: #333333; }
     .bar.bar-secondary .title {
       color: #333333; }
   .bar.bar-primary {
-    background-color: rgba(74, 135, 238, 0.9);
+    background-color: #4a87ee;
     border-color: #3b6dc2;
     background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
     color: white; }
     .bar.bar-primary .title {
       color: white; }
   .bar.bar-info {
-    background-color: rgba(67, 206, 230, 0.9);
+    background-color: #43cee6;
     border-color: #3bb3c8;
     background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
     color: white; }
     .bar.bar-info .title {
       color: white; }
   .bar.bar-success {
-    background-color: rgba(102, 204, 51, 0.9);
+    background-color: #66cc33;
     border-color: #5bb22f;
     background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
     color: white; }
     .bar.bar-success .title {
       color: white; }
   .bar.bar-warning {
-    background-color: rgba(240, 184, 64, 0.9);
+    background-color: #f0b840;
     border-color: #d29f31;
     background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
     color: white; }
     .bar.bar-warning .title {
       color: white; }
   .bar.bar-danger {
-    background-color: rgba(239, 78, 58, 0.9);
+    background-color: #ef4e3a;
     border-color: #c73927;
     background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
     color: white; }
     .bar.bar-danger .title {
       color: white; }
   .bar.bar-dark {
-    background-color: rgba(68, 68, 68, 0.9);
+    background-color: #444444;
     border-color: #111111;
     background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
     color: white; }

dist/js/ionic-angular.js

@@ -158,7 +158,7 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
   var ModalView = ionic.views.Modal.inherit({
     initialize: function(opts) {
       ionic.views.Modal.prototype.initialize.call(this, opts);
-      this.animation = opts.animation;
+      this.animation = opts.animation || 'slide-in-up';
     },
     // Show the modal
     show: function() {
@@ -183,6 +183,25 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
     }
   });
 
+  var createModal = function(templateString, options) {
+    // Create a new scope for the modal
+    var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
+
+    // Compile the template
+    var element = $compile(templateString)(scope);
+
+    options.el = element[0];
+    var modal = new ModalView(options);
+
+    // If this wasn't a defined scope, we can assign 'modal' to the isolated scope
+    // we created
+    if(!options.scope) {
+      scope.modal = modal;
+    }
+
+    return modal;
+  };
+
   return {
     /**
      * Load a modal with the given template string.
@@ -191,30 +210,12 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
      * modal and the new element will be appended into the body.
      */
     fromTemplate: function(templateString, options) {
-      options = options || {};
+      var modal = createModal(templateString, options || {});
-      // Create a new scope for the modal
-      var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
-
-      // Compile the template
-      var element = $compile(templateString)(scope);
-
-      options.el = element[0];
-      var modal = new ModalView(options);
       return modal;
     },
     fromTemplateUrl: function(url, cb, options) {
       TemplateLoader.load(url).then(function(templateString) {
-        options = options || {};
+        var modal = createModal(templateString, options || {});
-
-        // Create a new scope for the modal
-        var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
-
-        // Compile the template
-        var element = $compile(templateString)(scope);
-
-        options.el = element[0];
-        var modal = new ModalView(options);
-
         cb(modal);
       });
     },

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

@@ -5,7 +5,7 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
   var ModalView = ionic.views.Modal.inherit({
     initialize: function(opts) {
       ionic.views.Modal.prototype.initialize.call(this, opts);
-      this.animation = opts.animation;
+      this.animation = opts.animation || 'slide-in-up';
     },
     // Show the modal
     show: function() {
@@ -30,6 +30,25 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
     }
   });
 
+  var createModal = function(templateString, options) {
+    // Create a new scope for the modal
+    var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
+
+    // Compile the template
+    var element = $compile(templateString)(scope);
+
+    options.el = element[0];
+    var modal = new ModalView(options);
+
+    // If this wasn't a defined scope, we can assign 'modal' to the isolated scope
+    // we created
+    if(!options.scope) {
+      scope.modal = modal;
+    }
+
+    return modal;
+  };
+
   return {
     /**
      * Load a modal with the given template string.
@@ -38,30 +57,12 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
      * modal and the new element will be appended into the body.
      */
     fromTemplate: function(templateString, options) {
-      options = options || {};
+      var modal = createModal(templateString, options || {});
-      // Create a new scope for the modal
-      var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
-
-      // Compile the template
-      var element = $compile(templateString)(scope);
-
-      options.el = element[0];
-      var modal = new ModalView(options);
       return modal;
     },
     fromTemplateUrl: function(url, cb, options) {
       TemplateLoader.load(url).then(function(templateString) {
-        options = options || {};
+        var modal = createModal(templateString, options || {});
-
-        // Create a new scope for the modal
-        var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
-
-        // Compile the template
-        var element = $compile(templateString)(scope);
-
-        options.el = element[0];
-        var modal = new ModalView(options);
-
         cb(modal);
       });
     },

js/ext/angular/test/modal.html

@@ -5,15 +5,16 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
   </head>
   <body>
-    <content has-header="true" ng-controller="ModalCtrl">
+    <content has-header="true">
-      <button class="button button-primary" ng-click="openModal()">Open</button>
+      <div ng-controller="ModalCtrl">
+        <button class="button button-primary" ng-click="openModal()">Open</button>
+      </div>
     </content>
 
     <script id="modal.html" type="text/ng-template">

scss/_variables.scss

@@ -263,7 +263,7 @@ $bar-padding-landscape:          5px;
 
 $bar-bg:                      #fff;
 
-$bar-transparency: 0.9;
+$bar-transparency: 1;
 // Bar variations
 $bar-default-bg:              rgba($brand-default, $bar-transparency);
 $bar-default-border-color:    #ddd;