diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js index f520d1cf1ca..2e90374820f 100644 --- a/js/ext/angular/src/directive/ionicActionSheet.js +++ b/js/ext/angular/src/directive/ionicActionSheet.js @@ -31,7 +31,7 @@ angular.module('ionic.ui.actionSheet', []) $element.bind('click', backdropClick); }, template: '
' + - '
' + + '
' + '
' + '
' + '
{{titleText}}
' + diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js index fdbaf31df0c..227fec96426 100644 --- a/js/ext/angular/src/service/ionicActionSheet.js +++ b/js/ext/angular/src/service/ionicActionSheet.js @@ -1,14 +1,13 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.service.platform', 'ionic.ui.actionSheet', 'ngAnimate']) -.factory('$ionicActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', - '$ionicTemplateLoader', '$ionicPlatform', - function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) { +.factory('$ionicActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', '$ionicTemplateLoader', '$ionicPlatform', + function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) { return { /** * Load an action sheet with the given template string. * - * A new isolated scope will be created for the + * A new isolated scope will be created for the * action sheet and the new element will be appended into the body. * * @param {object} opts the options for this ActionSheet (see docs) @@ -25,12 +24,13 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni var sheetEl = angular.element(element[0].querySelector('.action-sheet-wrapper')); var hideSheet = function(didCancel) { - $animate.leave(sheetEl, function() { - if(didCancel) { + sheetEl.removeClass('action-sheet-up'); + if(didCancel) { + $timeout(function(){ opts.cancel(); - } - }); - + }, 200); + } + $animate.removeClass(element, 'active', function() { scope.$destroy(); }); @@ -77,8 +77,10 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni scope.sheet = sheet; $animate.addClass(element, 'active'); - $animate.enter(sheetEl, element, null, function() { - }); + + $timeout(function(){ + sheetEl.addClass('action-sheet-up'); + }, 20); return sheet; } diff --git a/js/ext/angular/test/service/ionicActionSheet.unit.js b/js/ext/angular/test/service/ionicActionSheet.unit.js index 723492064a7..a2c8319c324 100644 --- a/js/ext/angular/test/service/ionicActionSheet.unit.js +++ b/js/ext/angular/test/service/ionicActionSheet.unit.js @@ -13,6 +13,16 @@ describe('Ionic ActionSheet Service', function() { expect(s.el.classList.contains('active')).toBe(true); }); + it('Should add .action-sheet-up to .action-sheet-wrapper', function() { + var s = sheet.show(); + var el = angular.element(s.el); + var wrapper = angular.element(s.el.querySelector('.action-sheet-wrapper')); + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('action-sheet-up')).toEqual(false); + timeout.flush(); + expect(wrapper.hasClass('action-sheet-up')).toEqual(true); + }); + it('Should handle hardware back button', function() { // Fake cordova window.device = {}; @@ -30,7 +40,7 @@ describe('Ionic ActionSheet Service', function() { var s = sheet.show(); expect(angular.element(document.body).hasClass('action-sheet-open')).toBe(true); - + ionic.trigger('backbutton', { target: document }); diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss index 2a330eff41e..37d47f2d63f 100644 --- a/scss/_action-sheet.scss +++ b/scss/_action-sheet.scss @@ -3,23 +3,6 @@ * -------------------------------------------------- */ -@-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; @@ -41,62 +24,21 @@ } } -@-webkit-keyframes actionSheetUp { - 0% { - @include translate3d(0, 100%, 0); - opacity: 0; - } - 100% { - @include translate3d(0, 0, 0); - opacity: 1; - } -} -@-webkit-keyframes actionSheetOut { - 0% { - @include translate3d(0, 0, 0); - opacity: 1; - } - 100% { - @include translate3d(0, 100%, 0); - opacity: 0; - } +.action-sheet-wrapper { + @include translate3d(0, 100%, 0); + @include transition(all ease-in-out 300ms); + position: absolute; + bottom: 0; + width: 100%; } -$slide-in-up-function: cubic-bezier(.1, .7, .1, 1); .action-sheet-up { - // Start it down low - @include translate3d(0, 0%, 0); - opacity: 1; - - &.ng-enter, .ng-enter { - // Start it down low - @include translate3d(0, 100%, 0); - - @include animation-duration(400ms); - @include animation-fill-mode(both); - @include animation-timing-function($slide-in-up-function); - // Start hidden - opacity: 0; - } - - &.ng-enter-active, .ng-enter-active { - @include animation-name(actionSheetUp); - } - - &.ng-leave, .ng-leave { - @include animation-duration(400ms); - @include animation-fill-mode(both); - @include animation-timing-function($slide-in-up-function); - } - - &.ng-leave-active, .ng-leave { - @include animation-name(actionSheetOut); - } + @include translate3d(0, 0, 0); } .action-sheet { - margin-left: 15px; - margin-right: 15px; + margin-left: 15px; + margin-right: 15px; width: auto; z-index: $z-index-action-sheet; overflow: hidden; @@ -118,12 +60,6 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1); } } -.action-sheet-wrapper { - width: 100%; - position: fixed; - bottom: 0; -} - .action-sheet-title { padding: 10px; color: lighten($base-color, 40%); diff --git a/scss/_animations.scss b/scss/_animations.scss index dba15bc65e2..9faea62f5ae 100644 --- a/scss/_animations.scss +++ b/scss/_animations.scss @@ -5,7 +5,9 @@ * and pretty easy on performance. They can be overidden * and enhanced easily. */ - $transition-duration: 250ms; + +$transition-duration: 250ms; +$slide-in-up-function: cubic-bezier(.1, .7, .1, 1); /** @@ -13,48 +15,40 @@ * -------------------------------------------------- */ -$slide-in-up-function: cubic-bezier(.1, .7, .1, 1); +// Slide In From The Bottom To The Top +// ------------------------------- + @-webkit-keyframes slideInUp { - 0% { - @include translate3d(0, 100%, 0); - opacity: 1; - } - 100% { - @include translate3d(0, 0, 0); - opacity: 1; - } + 0% { -webkit-transform: translate3d(0, 100%, 0); } + 100% { -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes slideInUp { - 0% { - @include translate3d(0, 100%, 0); - opacity: 1; - } - 100% { - @include translate3d(0, 0, 0); - opacity: 1; - } + 0% { -moz-transform: translate3d(0, 100%, 0); } + 100% { -moz-transform: translate3d(0, 0, 0); } } +@keyframes slideInUp { + 0% { transform: translate3d(0, 100%, 0); } + 100% { transform: translate3d(0, 0, 0); } +} + + +// Slide Out From The Top To Bottom +// ------------------------------- + @-webkit-keyframes slideOutUp { - 0% { - @include translate3d(0, 0, 0); - opacity: 1; - } - 100% { - @include translate3d(0, 100%, 0); - opacity: 1; - } + 0% { -webkit-transform: translate3d(0, 0, 0); } + 100% { -webkit-transform: translate3d(0, 100%, 0); } } @-moz-keyframes slideOutUp { - 0% { - @include translate3d(0, 0, 0); - opacity: 1; - } - 100% { - @include translate3d(0, 100%, 0); - opacity: 1; - } + 0% { -moz-transform: translate3d(0, 0, 0); } + 100% { -moz-transform: translate3d(0, 100%, 0); } +} +@keyframes slideOutUp { + 0% { transform: translate3d(0, 0, 0); } + 100% { transform: translate3d(0, 100%, 0); } } + // Slide In From Left // ------------------------------- @@ -157,6 +151,40 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1); } +// Fade Half In +// ------------------------------- + +@-webkit-keyframes fadeInHalf { + from { background-color: rgba(0,0,0,0); } + to { background-color: rgba(0,0,0,0.5); } +} +@-moz-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); } +} + + +// Fade Half Out +// ------------------------------- + +@-webkit-keyframes fadeOutHalf { + from { background-color: rgba(0,0,0,0.5); } + to { background-color: rgba(0,0,0,0); } +} +@-moz-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); } +} + + // Spin // -------------------------------