From 6718d36d6cf80588711e38b0e15c8e28050cdb09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 25 Mar 2019 10:32:46 +0100 Subject: [PATCH 1/3] MOBILE-2937 ux: Smooth top tabs show and hide --- src/components/tabs/tab.ts | 5 ++++- src/components/tabs/tabs.scss | 2 ++ src/components/tabs/tabs.ts | 29 +++++++++++++++++++++++------ 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index e47563acc..884ed7e15 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -122,10 +122,13 @@ export class CoreTabComponent implements OnInit, OnDestroy { // Setup tab scrolling. setTimeout(() => { + // TODO: Solve undefined this.scroll on tab change. + if (this.scroll) { this.scroll.getScrollElement().onscroll = (e): void => { - this.tabs.showHideTabs(e); + this.tabs.showHideTabs(e.target); }; + this.tabs.showHideTabs(this.scroll.getScrollElement()); } }, 1); } diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 8d6c3a5e1..dcad7fd56 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -118,8 +118,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; } } diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index d15eec81a..7d8944949 100644 --- a/src/components/tabs/tabs.ts +++ b/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) { - this.tabBarElement.classList.add('tabs-hidden'); + const scroll = parseInt(scrollElement.scrollTop, 10); + 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); } /** From 3878ea71417e0b2c09f26285ca3615bb61cf4da5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 25 Mar 2019 13:08:44 +0100 Subject: [PATCH 2/3] MOBILE-2937 tabs: Solve hide tabs on dynamic components --- src/components/tabs/tab.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index 884ed7e15..6a64fb9f1 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -66,7 +66,7 @@ export class CoreTabComponent implements OnInit, OnDestroy { @Output() ionSelect: EventEmitter = new EventEmitter(); @ContentChild(TemplateRef) template: TemplateRef; // Template defined by the content. - @ContentChild(Content) scroll: Content; + @ContentChild(Content) content: Content; element: HTMLElement; // The core-tab element. loaded = false; @@ -122,13 +122,15 @@ export class CoreTabComponent implements OnInit, OnDestroy { // Setup tab scrolling. setTimeout(() => { - // TODO: Solve undefined this.scroll on tab change. + // Workarround to solve undefined this.scroll on tab change. + const scroll: HTMLElement = this.content ? this.content.getScrollElement() : + this.element.querySelector('ion-content > .scroll-content'); - if (this.scroll) { - this.scroll.getScrollElement().onscroll = (e): void => { + if (scroll) { + scroll.onscroll = (e): void => { this.tabs.showHideTabs(e.target); }; - this.tabs.showHideTabs(this.scroll.getScrollElement()); + this.tabs.showHideTabs(scroll); } }, 1); } From aac1f24185b73e36d9e7c3763f550a2d96e82a1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 25 Mar 2019 13:18:18 +0100 Subject: [PATCH 3/3] MOBILE-2937 tabs: Review tab badge style --- src/components/tabs/tabs.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index dcad7fd56..5dfa3c960 100644 --- a/src/components/tabs/tabs.scss +++ b/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;