fix(ion-header-bar): when hidden, correctly offset the ion-content

Fixes #1351
ionic-team · May 14, 2014 · efa6184 · efa6184
1 parent 67ea34a
commit efa6184
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/js/angular/directive/headerFooterBar.js b/js/angular/directive/headerFooterBar.js
@@ -125,19 +125,21 @@ function headerFooterBarDirective(isHeader) {
 
           if (isHeader) {
             $scope.$watch(function() { return el.className; }, function(value) {
+              var isShown = value.indexOf('ng-hide') === -1;
               var isSubheader = value.indexOf('bar-subheader') !== -1;
-              $scope.$hasHeader = !isSubheader;
-              $scope.$hasSubheader = isSubheader;
+              $scope.$hasHeader = isShown && !isSubheader;
+              $scope.$hasSubheader = isShown && isSubheader;
             });
             $scope.$on('$destroy', function() {
               delete $scope.$hasHeader;
               delete $scope.$hasSubheader;
             });
           } else {
             $scope.$watch(function() { return el.className; }, function(value) {
+              var isShown = value.indexOf('ng-hide') === -1;
               var isSubfooter = value.indexOf('bar-subfooter') !== -1;
-              $scope.$hasFooter = !isSubfooter;
-              $scope.$hasSubfooter = isSubfooter;
+              $scope.$hasFooter = isShown && !isSubfooter;
+              $scope.$hasSubfooter = isShown && isSubfooter;
             });
             $scope.$on('$destroy', function() {
               delete $scope.$hasFooter;

diff --git a/test/unit/angular/directive/headerFooterBar.unit.js b/test/unit/angular/directive/headerFooterBar.unit.js
@@ -109,6 +109,14 @@ describe('bar directives', function() {
           scope.$apply();
           expect(scope.$hasHeader).toEqual(true);
           expect(scope.$hasSubheader).toEqual(false);
+          el.addClass('ng-hide');
+          scope.$apply();
+          expect(scope.$hasHeader).toEqual(false);
+          expect(scope.$hasSubheader).toEqual(false);
+          el.removeClass('ng-hide');
+          scope.$apply();
+          expect(scope.$hasHeader).toEqual(true);
+          expect(scope.$hasSubheader).toEqual(false);
         });
       } else {
         it('$hasFooter $hasSubheader', function() {
@@ -124,6 +132,14 @@ describe('bar directives', function() {
           scope.$apply();
           expect(scope.$hasFooter).toEqual(true);
           expect(scope.$hasSubfooter).toEqual(false);
+          el.addClass('ng-hide');
+          scope.$apply();
+          expect(scope.$hasFooter).toEqual(false);
+          expect(scope.$hasSubfooter).toEqual(false);
+          el.removeClass('ng-hide');
+          scope.$apply();
+          expect(scope.$hasFooter).toEqual(true);
+          expect(scope.$hasSubfooter).toEqual(false);
         });
         it('.has-tabs', function() {
           var el = setup();