javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(back-button): Fade in/out back button instead of animating left/right, closes #624

Browse Source
This commit is contained in:
Adam Bradley
2014-02-25 13:03:01 -06:00
parent 5b42df392c
commit 7deefe1ddb
3 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/ext/angular/src/directive/ionicViewState.js vendored
View File

@@ -40,8 +40,8 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
template:
'<header class="bar bar-header nav-bar{{navBarClass()}}">' +
'<ion-nav-back-button ng-if="(backType || backLabel || backIcon)" ' +
'type="backType" label="backLabel" icon="backIcon" class="hide" ' +
'ng-class="{hide: !backButtonEnabled}">' +
'type="backType" label="backLabel" icon="backIcon" class="opacity-hide" ' +
'ng-class="{\'opacity-hide\': !backButtonEnabled}">' +
'</ion-nav-back-button>' +
'<div class="buttons left-buttons"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +

10
js/ext/angular/test/directive/ionicView.unit.js
View File

@@ -51,23 +51,23 @@ describe('Ionic View', function() {
function backButton() {
return angular.element(element[0].querySelector('.back-button'));
};
expect(backButton().hasClass('hide')).toEqual(true);
expect(backButton().hasClass('opacity-hide')).toEqual(true);
scope.$broadcast('viewState.showBackButton', false);
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(true);
expect(backButton().hasClass('opacity-hide')).toEqual(true);
scope.$broadcast('viewState.showBackButton', true);
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(false);
expect(backButton().hasClass('opacity-hide')).toEqual(false);
scope.$broadcast('$viewHistory.historyChange', { showBack: false });
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(true);
expect(backButton().hasClass('opacity-hide')).toEqual(true);
scope.$broadcast('$viewHistory.historyChange', { showBack: true });
scope.$apply();
expect(backButton().hasClass('hide')).toEqual(false);
expect(backButton().hasClass('opacity-hide')).toEqual(false);
});
it('should show/hide navBar', function() {

12
scss/_util.scss
View File

@@ -4,13 +4,23 @@
* --------------------------------------------------
*/
.hidden,
.hide {
display: none;
}
.opacity-hide {
opacity: 0;
}
.grade-b .opacity-hide,
.grade-c .opacity-hide {
opacity: 1;
display: none;
}
.show {
display: block;
}
.opacity-show {
opacity: 1;
}
.invisible {
visibility: hidden;
}