From 3178d7953ef0f525060e812937aa721c87e6eb12 Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Tue, 12 Nov 2013 14:49:59 -0600 Subject: [PATCH 01/12] i want to halp guise --- scss/_form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_form.scss b/scss/_form.scss index 4e2ac0f63c..6dea446f67 100644 --- a/scss/_form.scss +++ b/scss/_form.scss @@ -134,7 +134,7 @@ input[type="tel"], input[type="color"] { display: inline-block; height: $line-height-computed + $font-size-base; - color: $stable; + color: #E5E5E5; vertical-align: middle; font-size: $font-size-base; line-height: $line-height-computed; From 0cecf74f568ab3e8d82b4cefbdff0930a6647191 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 12 Nov 2013 16:11:40 -0600 Subject: [PATCH 02/12] Update _form.scss --- scss/_form.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/_form.scss b/scss/_form.scss index 6dea446f67..55ea3ca5c4 100644 --- a/scss/_form.scss +++ b/scss/_form.scss @@ -1,4 +1,3 @@ - /** * Forms * -------------------------------------------------- @@ -134,7 +133,7 @@ input[type="tel"], input[type="color"] { display: inline-block; height: $line-height-computed + $font-size-base; - color: #E5E5E5; + color: darken($stable, 10%); vertical-align: middle; font-size: $font-size-base; line-height: $line-height-computed; From 8b8ef122736e310ddeac5618faddaa6b5a264429 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 12 Nov 2013 16:12:20 -0600 Subject: [PATCH 03/12] Update _variables.scss --- scss/_variables.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index fd05f24ea9..9bdf1a6129 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,4 +1,3 @@ - // Brand Colors // ------------------------------- @@ -88,7 +87,7 @@ $input-bg-disabled: $stable; $input-color: $dark; $input-label-color: $dark; -$input-color-placeholder: $stable; +$input-color-placeholder: darken($stable, 10%); // Toggle From 7d4756eaefb23e5baa0aa61920a4ce8494ab3ba2 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 12 Nov 2013 16:34:48 -0600 Subject: [PATCH 04/12] Fixed #95 and #121 --- dist/css/ionic.css | 15 ++- dist/css/themes/ionic-ios7.css | 5 +- dist/js/ionic-angular.js | 80 +++++++++++-- dist/js/ionic.js | 120 ++++++++++++++++++-- js/ext/angular/src/directive/ionicHeader.js | 34 ++++++ js/ext/angular/src/directive/ionicNav.js | 44 +++++-- js/ext/angular/src/ionicAngular.js | 1 + js/ext/angular/test/header.html | 40 +++++++ js/ext/angular/test/nav.html | 13 ++- js/utils/dom.js | 23 ++++ js/views/headerBarView.js | 97 ++++++++++++++-- scss/_bar.scss | 7 ++ 12 files changed, 423 insertions(+), 56 deletions(-) create mode 100644 js/ext/angular/src/directive/ionicHeader.js create mode 100644 js/ext/angular/test/header.html diff --git a/dist/css/ionic.css b/dist/css/ionic.css index ef5a161aad..92bd4120b1 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -4,7 +4,7 @@ * -------------------------------------------------- * Useful utilities and mixins for SCSS files. */ -/*! +/* Ionicons, v1.3.3 Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ https://twitter.com/helloimben https://twitter.com/ionicframework @@ -2046,7 +2046,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -2647,8 +2647,11 @@ a.subdued‎ { text-align: center; text-overflow: ellipsis; white-space: nowrap; + overflow: hidden; font-size: 18px; line-height: 44px; } + .bar .title.title-left { + text-align: left; } .bar .title a { color: inherit; } .bar .button { @@ -4136,7 +4139,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -4195,7 +4198,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -4210,7 +4213,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -4752,7 +4755,7 @@ input[type="range"] { .button-icon:active, .button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .padding > .button.block:first-child { margin-top: 0; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index e119d59757..e027d9919a 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /** * Mixins * -------------------------------------------------- @@ -123,7 +124,7 @@ right: 20px; transition: 0.2s ease; transition-property: left, right; - transition-delay: 0s, .05s; } + transition-delay: 0s, 0.05s; } .toggle :checked + .track { /* When the toggle is "on" */ @@ -138,4 +139,4 @@ right: 0; left: 20px; -webkit-transform: none; - transition-delay: .05s, 0s; } + transition-delay: 0.05s, 0s; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 77d02e4549..ebb1889cba 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -16,6 +16,7 @@ angular.module('ionic.ui', [ 'ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav', + 'ionic.ui.header', 'ionic.ui.sideMenu', 'ionic.ui.list', 'ionic.ui.checkbox', @@ -584,6 +585,41 @@ angular.module('ionic.ui.content', []) })(); ; +(function(ionic) { +'use strict'; + +angular.module('ionic.ui.header', ['ngAnimate']) + + +.directive('headerBar', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + scope: { + type: '@', + alignTitle: '@', + }, + link: function($scope, $element, $attr) { + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$on('$destroy', function() { + // + }); + } + }; +}); + +})(ionic); +; (function() { 'use strict'; @@ -773,6 +809,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Pop function, throttled this.popController = ionic.throttle(function() { _this.pop(); + $scope.$broadcast('navs.pop'); }, 300, { trailing: false }); @@ -820,6 +857,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ $scope.pushController = function(scope, element) { _this.push(scope); + $scope.$broadcast('navs.push', scope); }; $scope.navController = this; @@ -846,22 +884,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges restrict: 'E', require: '^navs', replace: true, - scope: true, + scope: { + type: '@', + backButtonType: '@', + alignTitle: '@' + }, template: '
' + - 'Back' + + '' + '

{{navController.getTopController().title}}

' + '
', - link: function(scope, element, attrs, navCtrl) { - scope.navController = navCtrl; + link: function($scope, $element, $attr, navCtrl) { + var backButton; - scope.barType = attrs.barType || 'bar-dark'; - element.addClass(scope.barType); + $scope.navController = navCtrl; - scope.$watch('navController.controllers.length', function(value) { - }); - scope.goBack = function() { + $scope.goBack = function() { navCtrl.popController(); }; + + + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$parent.$on('navs.push', function() { + backButton = angular.element($element[0].querySelector('.button')); + backButton.addClass($scope.backButtonType); + hb.align(); + }); + $scope.$parent.$on('navs.pop', function() { + hb.align(); + }); + + $scope.$on('$destroy', function() { + // + }); } }; }) diff --git a/dist/js/ionic.js b/dist/js/ionic.js index f5067571ea..c9a0cca61d 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -135,6 +135,29 @@ window.ionic = { ; (function(ionic) { ionic.DomUtil = { + getTextBounds: function(textNode) { + if(document.createRange) { + var range = document.createRange(); + range.selectNodeContents(textNode); + if(range.getBoundingClientRect) { + var rect = range.getBoundingClientRect(); + + var sx = window.scrollX; + var sy = window.scrollY; + + return { + top: rect.top + sy, + left: rect.left + sx, + right: rect.left + sx + rect.width, + bottom: rect.top + sy + rect.height, + width: rect.width, + height: rect.height + }; + } + } + return null + }, + getChildIndex: function(element) { return Array.prototype.slice.call(element.parentNode.children).indexOf(element); }, @@ -2844,22 +2867,95 @@ window.ionic = { initialize: function(opts) { this.el = opts.el; - this._titleEl = this.el.querySelector('.title'); + ionic.extend(this, { + alignTitle: 'center' + }, opts); + + this.align(); }, - 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; + /** + * Align the title text given the buttons in the header + * so that the header text size is maximized and aligned + * correctly as long as possible. + */ + align: function() { + var _this = this; + + window.rAF(ionic.proxy(function() { + var i, c, childSize, childStyle; + var children = this.el.children; + var childNodes = this.el.childNodes; + var styles = window.getComputedStyle(this.el, null); + + // Get the padding of the header for calculations + var paddingLeft = parseFloat(styles['paddingLeft']); + var paddingRight = parseFloat(styles['paddingRight']); + + // Get the full width of the header + var headerWidth = this.el.offsetWidth; + + // Find the title element + var title = this.el.querySelector('.title'); + if(!title) { + return; } - } + + var leftWidth = 0; + var rightWidth = 0; + var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title); - titleWidth = title.offsetWidth; + // Compute how wide the left children are + for(i = 0; i < titlePos; i++) { + childSize = null; + c = childNodes[i]; + if(c.nodeType == 3) { + childSize = ionic.DomUtil.getTextBounds(c); + } else if(c.nodeType == 1) { + childSize = c.getBoundingClientRect(); + } + if(childSize) { + leftWidth += childSize.width; + } + } + + // Compute how wide the right children are + for(i = titlePos + 1; i < childNodes.length; i++) { + childSize = null; + c = childNodes[i]; + if(c.nodeType == 3) { + childSize = ionic.DomUtil.getTextBounds(c); + } else if(c.nodeType == 1) { + childSize = c.getBoundingClientRect(); + } + if(childSize) { + rightWidth += childSize.width; + } + } + + var margin = Math.max(leftWidth, rightWidth) + 10; + + // Size and align the header title based on the sizes of the left and + // right children, and the desired alignment mode + if(this.alignTitle == 'center') { + title.style.left = margin + 'px'; + title.style.right = margin + 'px'; + + console.log(title.offsetWidth, title.scrollWidth); + if(title.offsetWidth < title.scrollWidth) { + title.style.textAlign = 'left'; + title.style.right = (rightWidth + 5) + 'px'; + } else { + title.style.textAlign = 'center'; + } + } else if(this.alignTitle == 'left') { + title.style.textAlign = 'left'; + title.style.left = (leftWidth + 15) + 'px'; + } else if(this.alignTitle == 'right') { + title.style.textAlign = 'right'; + title.style.right = (rightWidth + 15) + 'px'; + } + }, this)); } }); diff --git a/js/ext/angular/src/directive/ionicHeader.js b/js/ext/angular/src/directive/ionicHeader.js new file mode 100644 index 0000000000..ef72aa721f --- /dev/null +++ b/js/ext/angular/src/directive/ionicHeader.js @@ -0,0 +1,34 @@ +(function(ionic) { +'use strict'; + +angular.module('ionic.ui.header', ['ngAnimate']) + + +.directive('headerBar', function() { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + scope: { + type: '@', + alignTitle: '@', + }, + link: function($scope, $element, $attr) { + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$on('$destroy', function() { + // + }); + } + }; +}); + +})(ionic); diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index c588d4f77c..efab4025d7 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -32,6 +32,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Pop function, throttled this.popController = ionic.throttle(function() { _this.pop(); + $scope.$broadcast('navs.pop'); }, 300, { trailing: false }); @@ -79,6 +80,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges */ $scope.pushController = function(scope, element) { _this.push(scope); + $scope.$broadcast('navs.push', scope); }; $scope.navController = this; @@ -105,22 +107,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges restrict: 'E', require: '^navs', replace: true, - scope: true, + scope: { + type: '@', + backButtonType: '@', + alignTitle: '@' + }, template: '
' + - 'Back' + + '' + '

{{navController.getTopController().title}}

' + '
', - link: function(scope, element, attrs, navCtrl) { - scope.navController = navCtrl; + link: function($scope, $element, $attr, navCtrl) { + var backButton; - scope.barType = attrs.barType || 'bar-dark'; - element.addClass(scope.barType); + $scope.navController = navCtrl; - scope.$watch('navController.controllers.length', function(value) { - }); - scope.goBack = function() { + $scope.goBack = function() { navCtrl.popController(); }; + + + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + + $element.addClass($scope.type); + + $scope.headerBarView = hb; + + $scope.$parent.$on('navs.push', function() { + backButton = angular.element($element[0].querySelector('.button')); + backButton.addClass($scope.backButtonType); + hb.align(); + }); + $scope.$parent.$on('navs.pop', function() { + hb.align(); + }); + + $scope.$on('$destroy', function() { + // + }); } }; }) diff --git a/js/ext/angular/src/ionicAngular.js b/js/ext/angular/src/ionicAngular.js index 98a56c8fd9..0a3f1360d3 100644 --- a/js/ext/angular/src/ionicAngular.js +++ b/js/ext/angular/src/ionicAngular.js @@ -16,6 +16,7 @@ angular.module('ionic.ui', [ 'ionic.ui.content', 'ionic.ui.tabs', 'ionic.ui.nav', + 'ionic.ui.header', 'ionic.ui.sideMenu', 'ionic.ui.list', 'ionic.ui.checkbox', diff --git a/js/ext/angular/test/header.html b/js/ext/angular/test/header.html new file mode 100644 index 0000000000..36b105b4ed --- /dev/null +++ b/js/ext/angular/test/header.html @@ -0,0 +1,40 @@ + + + + Header + + + + + + + + + + + +

A really really long title here here here here her

+ + + + + + diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html index 2be7571a69..0f4f4c0a0c 100644 --- a/js/ext/angular/test/nav.html +++ b/js/ext/angular/test/nav.html @@ -32,16 +32,17 @@ - + + -
- - -
+
+ + +
+ + + + + + + + + + diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss index e388a226b8..63ceab3a4c 100644 --- a/scss/_action-sheet.scss +++ b/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; + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 9bdf1a6129..ed58740972 100644 --- a/scss/_variables.scss +++ b/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 From a7330cdd4135d0ecaef535388e51cd27279e123f Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 12 Nov 2013 23:55:48 -0600 Subject: [PATCH 10/12] More action sheet styles and animations --- dist/css/ionic.css | 47 ++++++++++++-- dist/js/ionic-angular.js | 13 ++-- .../angular/src/directive/ionicActionSheet.js | 2 +- .../angular/src/service/ionicActionSheet.js | 11 ++-- js/ext/angular/test/actionSheet.html | 2 +- scss/_action-sheet.scss | 65 +++++++++++++++++-- 6 files changed, 120 insertions(+), 20 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 5f3935fa9d..1b2062241f 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2528,9 +2528,43 @@ a.subdued‎ { animation: fadeOutHalf 0.2s; -webkit-animation-fill-mode: forwards; } +@-webkit-keyframes actionSheetUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } } + +@-webkit-keyframes actionSheetOut { + 0% { + -webkit-transform: translate3d(0, 0, 0); + opacity: 1; } + + 100% { + -webkit-transform: translate3d(0, 100%, 0); + opacity: 0; } } + +.action-sheet-up { + opacity: 1; + -webkit-transform: translate3d(0, 0%, 0); } + .action-sheet-up.ng-enter, .action-sheet-up .ng-enter { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + -webkit-animation-duration: 200ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-enter-active, .action-sheet-up .ng-enter-active { + -webkit-animation-name: actionSheetUp; } + .action-sheet-up.ng-leave, .action-sheet-up .ng-leave { + -webkit-animation-duration: 200ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } + .action-sheet-up.ng-leave-active, .action-sheet-up .ng-leave { + -webkit-animation-name: actionSheetOut; } + .action-sheet { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); position: fixed; bottom: 0; left: 15px; @@ -2539,9 +2573,9 @@ a.subdued‎ { width: calc(100% - 30px); } .action-sheet .button { display: block; - padding: 6px; + padding: 1px; width: 100%; - border-radius: none; + border-radius: 0; background-color: transparent; color: #4a87ee; font-size: 18px; } @@ -2556,11 +2590,14 @@ a.subdued‎ { .action-sheet-group { background-color: #fff; - margin-bottom: 10px; + margin-bottom: 5px; border-radius: 3px 3px 3px 3px; } .action-sheet-group .button { border-radius: 0; border-width: 1px 0px 0px 0px; } + .action-sheet-group .button.active, .action-sheet-group .button:active { + background-color: transparent; + color: inherit; } .action-sheet-group .button:first-child:last-child { border-width: 0; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 4c3d0c6c9f..520d5c0797 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -31,8 +31,8 @@ angular.module('ionic', [ ; 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', '$animate', '$timeout', 'TemplateLoader', + function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) { return { /** @@ -61,8 +61,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni opts.cancel(); } }); - $animate.removeClass(element, 'active', function() { - scope.$destroy(); + + $timeout(function() { + $animate.removeClass(element, 'active', function() { + scope.$destroy(); + }); }); }; @@ -431,7 +434,7 @@ angular.module('ionic.ui.actionSheet', []) }); }, template: '
' + - '
' + + '
' + '
' + '
{{titleText}}
' + '' + diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js index fff929c4f9..2aacd28852 100644 --- a/js/ext/angular/src/directive/ionicActionSheet.js +++ b/js/ext/angular/src/directive/ionicActionSheet.js @@ -21,7 +21,7 @@ angular.module('ionic.ui.actionSheet', []) }); }, template: '
' + - '
' + + '
' + '
' + '
{{titleText}}
' + '' + diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js index 73ba6542df..38bee26b91 100644 --- a/js/ext/angular/src/service/ionicActionSheet.js +++ b/js/ext/angular/src/service/ionicActionSheet.js @@ -1,7 +1,7 @@ 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', '$animate', '$timeout', 'TemplateLoader', + function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) { return { /** @@ -30,8 +30,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni opts.cancel(); } }); - $animate.removeClass(element, 'active', function() { - scope.$destroy(); + + $timeout(function() { + $animate.removeClass(element, 'active', function() { + scope.$destroy(); + }); }); }; diff --git a/js/ext/angular/test/actionSheet.html b/js/ext/angular/test/actionSheet.html index b72f9edbc1..9df0496e2f 100644 --- a/js/ext/angular/test/actionSheet.html +++ b/js/ext/angular/test/actionSheet.html @@ -15,7 +15,7 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @@ -21,12 +137,11 @@ $scope.show = function() { ActionSheet.show({ buttons: [ - { text: 'Option 1' }, - { text: 'Option 2' }, - { text: 'Option 3' }, + { text: 'Share' }, + { text: 'Move' }, ], - destructiveText: 'Delete life', - titleText: 'Are you sure about life?', + destructiveText: 'Delete', + titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() { console.log('CANCELLED');