Lots of action sheet work

dist/css/ionic.css

@@ -2484,6 +2484,50 @@ a.subdued‎ {
  * Action Sheets
  * --------------------------------------------------
  */
+@-webkit-keyframes fadeInHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5); } }
+
+@keyframes fadeInHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5); } }
+
+@-webkit-keyframes fadeOutHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0.5); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0); } }
+
+@keyframes fadeOutHalf {
+  from {
+    background-color: rgba(0, 0, 0, 0.5); }
+
+  to {
+    background-color: rgba(0, 0, 0, 0); } }
+
+.action-sheet-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0); }
+  .action-sheet-backdrop.active {
+    -webkit-animation: fadeInHalf 0.2s;
+    animation: fadeInHalf 0.2s;
+    -webkit-animation-fill-mode: forwards; }
+  .action-sheet-backdrop.active-remove {
+    -webkit-animation: fadeOutHalf 0.2s;
+    animation: fadeOutHalf 0.2s;
+    -webkit-animation-fill-mode: forwards; }
+
 .action-sheet {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
@@ -2495,7 +2539,7 @@ a.subdued‎ {
   width: calc(100% - 30px); }
   .action-sheet .button {
     display: block;
-    padding: 10px;
+    padding: 6px;
     width: 100%;
     border-radius: none;
     background-color: transparent;
@@ -2507,12 +2551,18 @@ a.subdued‎ {
 .action-sheet-title {
   padding: 10px;
   text-align: center;
-  font-size: 12px; }
+  font-size: 12px;
+  color: #666666; }
 
 .action-sheet-group {
+  background-color: #fff;
   margin-bottom: 10px;
-  border-radius: 3px;
+  border-radius: 3px 3px 3px 3px; }
-  background-color: rgba(255, 255, 255, 0.95); }
+  .action-sheet-group .button {
+    border-radius: 0;
+    border-width: 1px 0px 0px 0px; }
+  .action-sheet-group .button:first-child:last-child {
+    border-width: 0; }
 
 /**
  * Bar (Headers and Footers)

dist/js/ionic-angular.js

@@ -29,9 +29,11 @@ angular.module('ionic', [
     'ionic.ui',
 ]);
 ;
-angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
+
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, TemplateLoader) {
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {
     /**
      * Load an action sheet with the given template string.
@@ -41,23 +43,38 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
      *
      * @param {object} opts the options for this ActionSheet (see docs)
      */
-    show: function(opts, $scope) {
+    show: function(opts) {
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+      var scope = $rootScope.$new(true);
 
       angular.extend(scope, opts);
 
-      scope.cancel = function() {
+
-        scope.sheet.hide();
+      // Compile the template
-        //scope.$destroy();
+      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
+
+      // Grab the sheet element for animation
+      var sheetEl = angular.element(element[0].querySelector('.action-sheet'));
+
+      var hideSheet = function(didCancel) {
+        $animate.leave(sheetEl, function() {
+          if(didCancel) {
             opts.cancel();
+          }
+        });
+        $animate.removeClass(element, 'active', function() {
+          scope.$destroy();
+        });
+      };
+
+      scope.cancel = function() {
+        hideSheet(true);
       };
 
       scope.buttonClicked = function(index) {
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
@@ -65,26 +82,23 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
-      // Compile the template
-      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
-
-      var s = element.scope();
-
       $document[0].body.appendChild(element[0]);
 
       var sheet = new ionic.views.ActionSheet({el: element[0] });
-      s.sheet = sheet;
+      scope.sheet = sheet;
 
-      sheet.show();
+      $animate.addClass(element, 'active');
+      $animate.enter(sheetEl, element, function() {
+      });
 
       return sheet;
     }
   };
+
 }]);
 ;
 angular.module('ionic.service.gesture', [])
@@ -399,7 +413,7 @@ angular.module('ionic.service.templateLoad', [])
 
 angular.module('ionic.ui.actionSheet', [])
 
-.directive('actionSheet', function() {
+.directive('actionSheet', function($document) {
   return {
     restrict: 'E',
     scope: true,
@@ -408,8 +422,16 @@ angular.module('ionic.ui.actionSheet', [])
       $scope.$on('$destroy', function() {
         $element.remove();
       });
+
+      $document.bind('keyup', function(e) {
+        if(e.which == 27) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      });
     },
-    template: '<div class="action-sheet slide-in-up">' +
+    template: '<div class="action-sheet-backdrop">' +
+                '<div class="action-sheet slide-in-up">' +
                   '<div class="action-sheet-group">' +
                     '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                     '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
@@ -420,6 +442,7 @@ angular.module('ionic.ui.actionSheet', [])
                   '<div class="action-sheet-group" ng-if="cancelText">' +
                     '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
                   '</div>' +
+                '</div>' +
               '</div>'
   };
 });

js/ext/angular/src/directive/ionicActionSheet.js

@@ -3,7 +3,7 @@
 
 angular.module('ionic.ui.actionSheet', [])
 
-.directive('actionSheet', function() {
+.directive('actionSheet', function($document) {
   return {
     restrict: 'E',
     scope: true,
@@ -12,8 +12,16 @@ angular.module('ionic.ui.actionSheet', [])
       $scope.$on('$destroy', function() {
         $element.remove();
       });
+
+      $document.bind('keyup', function(e) {
+        if(e.which == 27) {
+          $scope.cancel();
+          $scope.$apply();
+        }
+      });
     },
-    template: '<div class="action-sheet slide-in-up">' +
+    template: '<div class="action-sheet-backdrop">' +
+                '<div class="action-sheet slide-in-up">' +
                   '<div class="action-sheet-group">' +
                     '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                     '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
@@ -24,6 +32,7 @@ angular.module('ionic.ui.actionSheet', [])
                   '<div class="action-sheet-group" ng-if="cancelText">' +
                     '<button class="button" ng-click="cancel()">{{cancelText}}</button>' +
                   '</div>' +
+                '</div>' +
               '</div>'
   };
 });

js/ext/angular/src/service/ionicActionSheet.js

@@ -1,6 +1,8 @@
-angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
+
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, TemplateLoader) {
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {
     /**
      * Load an action sheet with the given template string.
@@ -10,23 +12,38 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
      *
      * @param {object} opts the options for this ActionSheet (see docs)
      */
-    show: function(opts, $scope) {
+    show: function(opts) {
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+      var scope = $rootScope.$new(true);
 
       angular.extend(scope, opts);
 
-      scope.cancel = function() {
+
-        scope.sheet.hide();
+      // Compile the template
-        //scope.$destroy();
+      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
+
+      // Grab the sheet element for animation
+      var sheetEl = angular.element(element[0].querySelector('.action-sheet'));
+
+      var hideSheet = function(didCancel) {
+        $animate.leave(sheetEl, function() {
+          if(didCancel) {
             opts.cancel();
+          }
+        });
+        $animate.removeClass(element, 'active', function() {
+          scope.$destroy();
+        });
+      };
+
+      scope.cancel = function() {
+        hideSheet(true);
       };
 
       scope.buttonClicked = function(index) {
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
@@ -34,24 +51,21 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
-      // Compile the template
-      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
-
-      var s = element.scope();
-
       $document[0].body.appendChild(element[0]);
 
       var sheet = new ionic.views.ActionSheet({el: element[0] });
-      s.sheet = sheet;
+      scope.sheet = sheet;
 
-      sheet.show();
+      $animate.addClass(element, 'active');
+      $animate.enter(sheetEl, element, function() {
+      });
 
       return sheet;
     }
   };
+
 }]);

js/ext/angular/test/actionSheet.html

@@ -0,0 +1,47 @@
+<html ng-app="actionTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Action Sheet</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+  </head>
+  <body ng-controller="ActionCtrl">
+    <button ng-click="show()" class="button">Show</button>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('actionTest', ['ionic'])
+
+      .controller('ActionCtrl', function($scope, ActionSheet) {
+        $scope.show = function() {
+          ActionSheet.show({
+            buttons: [
+              { text: 'Option 1' },
+              { text: 'Option 2' },
+              { text: 'Option 3' },
+            ],
+            destructiveText: 'Delete life',
+            titleText: 'Are you sure about life?',
+            cancelText: 'Cancel',
+            cancel: function() {
+              console.log('CANCELLED');
+            },
+            buttonClicked: function(index) {
+              console.log('BUTTON CLICKED', index);
+              return true;
+            },
+            destructiveButtonClicked: function() {
+              console.log('DESTRUCT');
+              return true;
+            }
+          });
+        };
+       });
+    </script>
+  </body>
+</html>

scss/_action-sheet.scss

@@ -4,6 +4,46 @@
  * --------------------------------------------------
  */
 
+@-webkit-keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@-webkit-keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+@keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+
+.action-sheet-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0);
+
+  &.active {
+    -webkit-animation: fadeInHalf 0.2s;
+    animation: fadeInHalf 0.2s;
+
+    -webkit-animation-fill-mode: forwards;
+  }
+
+  &.active-remove {
+    -webkit-animation: fadeOutHalf 0.2s;
+    animation: fadeOutHalf 0.2s;
+
+    -webkit-animation-fill-mode: forwards;
+  }
+}
+
 .action-sheet {
   @include translate3d(0, 100%, 0);
 
@@ -16,9 +56,10 @@
 
   .button {
     display: block;
-    padding: 10px;
+    padding: 6px;
     width: 100%;
     border-radius: none;
+
     background-color: transparent;
 
     color: $primary;
@@ -34,10 +75,18 @@
   padding: 10px;
   text-align: center;
   font-size: 12px;
+  color: lighten($base-color, 40%);
 }
 
 .action-sheet-group {
+  background-color: #fff;
   margin-bottom: 10px;
   border-radius: $sheet-border-radius;
-  background-color: rgba($sheet-bg-color, $sheet-opacity);
+  .button {
+    border-radius: 0;
+    border-width: 1px 0px 0px 0px;
+  }
+  .button:first-child:last-child {
+    border-width: 0;
+  }
 }

scss/_variables.scss

@@ -487,7 +487,11 @@ $grid-padding-width:           10px !default;
 
 $sheet-bg-color:              rgba(255, 255, 255, 0.6) !default;
 $sheet-opacity:               0.95 !default;
-$sheet-border-radius:         3px !default;
+
+// Border radii for the action sheet button groups
+$sheet-border-radius:         3px 3px 3px 3px !default;
+$sheet-border-radius-top:         3px 3px 0px 0px !default;
+$sheet-border-radius-bottom:         0px 0px 3px 3px !default;
 
 
 // Badges