Merge pull request #1844 from crazyserver/MOBILE-2937

Mobile 2937

src/components/tabs/tab.ts

@@ -66,7 +66,7 @@ export class CoreTabComponent implements OnInit, OnDestroy {
     @Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
 
     @ContentChild(TemplateRef) template: TemplateRef<any>; // Template defined by the content.
-    @ContentChild(Content) scroll: Content;
+    @ContentChild(Content) content: Content;
 
     element: HTMLElement; // The core-tab element.
     loaded = false;
@@ -122,10 +122,15 @@ export class CoreTabComponent implements OnInit, OnDestroy {
 
         // Setup tab scrolling.
         setTimeout(() => {
-            if (this.scroll) {
+            // Workarround to solve undefined this.scroll on tab change.
-                this.scroll.getScrollElement().onscroll = (e): void => {
+            const scroll: HTMLElement = this.content ? this.content.getScrollElement() :
-                    this.tabs.showHideTabs(e);
+                this.element.querySelector('ion-content > .scroll-content');
+
+            if (scroll) {
+                scroll.onscroll = (e): void => {
+                    this.tabs.showHideTabs(e.target);
                 };
+                this.tabs.showHideTabs(scroll);
             }
         }, 1);
     }

src/components/tabs/tabs.scss

@@ -36,13 +36,6 @@ ion-app.app-root .core-tabs-bar {
             @include margin(null, 5px, null, null);
         }
 
-        ion-badge.tab-badge {
-            position: relative;
-            @include position(auto, auto, auto, auto);
-            @include margin(null, null, null, 5px);
-
-        }
-
         &[aria-selected=true] {
             color: $core-top-tabs-color-active !important;
             border-bottom-color: $core-top-tabs-border-active !important;
@@ -118,8 +111,10 @@ ion-app.app-root core-tabs {
     &.tabs-hidden {
         .core-tabs-bar {
             display: none !important;
+            transform: translateY(0) !important;
         }
         .core-tabs-content-container {
+            transform: translateY(0) !important;
             padding-bottom: 0 !important;
         }
     }

src/components/tabs/tabs.ts

@@ -63,6 +63,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     numTabsShown = 0;
     direction = 'ltr';
     description = '';
+    lastScroll = 0;
 
     protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content.
     protected initialized = false;
@@ -406,22 +407,38 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     /**
      * Show or hide the tabs. This is used when the user is scrolling inside a tab.
      *
-     * @param {any} e Scroll event.
+     * @param {any} scrollElement Scroll element to check scroll position.
      */
-    showHideTabs(e: any): void {
+    showHideTabs(scrollElement: any): void {
         if (!this.tabBarHeight) {
             // We don't have the tab bar height, this means the tab bar isn't shown.
             return;
         }
 
-        if (this.tabsShown && e.target.scrollTop - this.tabBarHeight > this.tabBarHeight) {
+        const scroll = parseInt(scrollElement.scrollTop, 10);
-            this.tabBarElement.classList.add('tabs-hidden');
+        if (scroll == this.lastScroll) {
+            // Ensure scroll has been modified to avoid flicks.
+            return;
+        }
+
+        if (this.tabsShown && scroll > this.tabBarHeight) {
             this.tabsShown = false;
-        } else if (!this.tabsShown && e.target.scrollTop < this.tabBarHeight) {
+
-            this.tabBarElement.classList.remove('tabs-hidden');
+            // Hide tabs.
+            this.tabBarElement.classList.add('tabs-hidden');
+        } else if (!this.tabsShown && scroll <= this.tabBarHeight) {
             this.tabsShown = true;
+            this.tabBarElement.classList.remove('tabs-hidden');
             this.calculateSlides();
         }
+
+        if (this.tabsShown) {
+            // Smooth translation.
+            this.topTabsElement.style.transform = 'translateY(-' + scroll + 'px)';
+            this.originalTabsContainer.style.transform = 'translateY(-' + scroll + 'px)';
+            this.originalTabsContainer.style.paddingBottom = this.tabBarHeight - scroll + 'px';
+        }
+        this.lastScroll = parseInt(scrollElement.scrollTop, 10);
     }
 
     /**