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(backButton): add .header-item class

Browse Source 
Add the .header-item class to each of the root child items of a nav
header bar. This gives CSS more power to state what should and should
not be shown during the different states of a transition, specifically
for iOS nav bar transitions.
This commit is contained in:
Adam Bradley
2014-11-19 12:44:15 -06:00
parent b4e4055a06
commit 57bf4f1683
6 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/angular/controller/headerBarController.js vendored
View File

@@ -22,7 +22,7 @@ function($scope, $element, $attrs, $q, $ionicConfig, $ionicHistory) {
var titleRight = 0;
var titleCss = '';
var isBackEnabled = false;
var isBackShown = false;
var isBackShown = true;
var titleTextWidth = 0;
@@ -46,7 +46,7 @@ function($scope, $element, $attrs, $q, $ionicConfig, $ionicHistory) {
// to the navigation and history
if (arguments.length && shouldEnable !== isBackEnabled) {
var backBtnEle = getEle(BACK_BUTTON);
backBtnEle && backBtnEle.classList[ shouldEnable ? 'remove' : 'add' ](HIDE);
backBtnEle && backBtnEle.classList[ shouldEnable ? 'remove' : 'add' ]('back-disabled');
isBackEnabled = shouldEnable;
}
return isBackEnabled;
@@ -58,7 +58,7 @@ function($scope, $element, $attrs, $q, $ionicConfig, $ionicHistory) {
// visually hidden if false, even if the history says it should show
if (arguments.length && shouldShow !== isBackShown) {
var backBtnEle = getEle(BACK_BUTTON);
if (backBtnEle) backBtnEle.style.display = (shouldShow ? '' : 'none');
backBtnEle && backBtnEle.classList[ shouldShow ? 'remove' : 'add' ](HIDE);
isBackShown = shouldShow;
}
return isBackShown;
@@ -122,7 +122,6 @@ function($scope, $element, $attrs, $q, $ionicConfig, $ionicHistory) {
defaultTitleEle.classList.remove(HIDE);
}
}
self.showBack(true);
};

5
js/angular/controller/navBarController.js vendored
View File

@@ -69,6 +69,11 @@ function($scope, $element, $attrs, $compile, $timeout, $ionicNavBarDelegate, $io
positionButtons(navEle[buttonType], buttonType);
});
// add header-item to the root children
for (var x = 0; x < headerBarEle[0].children.length; x++) {
headerBarEle[0].children[x].classList.add('header-item');
}
// compile header and append to the DOM
containerEle.append(headerBarEle);
$element.append($compile(containerEle)($scope.$new()));

2
js/angular/directive/navBackButton.js vendored
View File

@@ -71,7 +71,7 @@ IonicModule
buttonEle.setAttribute('ng-click', '$ionicGoBack($event)');
}
buttonEle.className = 'button back-button hide buttons ' + (tElement.attr('class') || '');
buttonEle.className = 'button back-button back-disabled buttons ' + (tElement.attr('class') || '');
buttonEle.innerHTML = tElement.html() || '';
var childNode;

1
scss/_bar.scss
View File

@@ -361,6 +361,7 @@
z-index: $z-index-bar;
}
.bar .back-button.back-disabled,
.bar .back-button.hide,
.bar .buttons .hide {
display: none;

4
scss/_transitions.scss
View File

@@ -62,6 +62,10 @@ $ios-transition-container-bg-color: #000 !default;
[nav-bar="cached"] {
display: block;
.header-item {
display: none;
}
}
}

2
test/unit/angular/directive/navBackButton.unit.js
View File

@@ -34,7 +34,7 @@ describe('ionNavBackButton directive', function() {
expect( outputEle[0].tagName ).toBe('BUTTON');
expect( outputEle.hasClass('button') ).toBe(true);
expect( outputEle.hasClass('back-button') ).toBe(true);
expect( outputEle.hasClass('hide') ).toBe(true);
expect( outputEle.hasClass('back-disabled') ).toBe(true);
expect( outputEle.hasClass('buttons') ).toBe(true);
}));