EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2937 ux: Smooth top tabs show and hide

main
Pau Ferrer Ocaña 2019-03-25 10:32:46 +01:00
parent 42d8891a08
commit 6718d36d6c
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/tabs/tab.ts
View File

@ -122,10 +122,13 @@ export class CoreTabComponent implements OnInit, OnDestroy {
// Setup tab scrolling. // Setup tab scrolling.
setTimeout(() => { setTimeout(() => {
// TODO: Solve undefined this.scroll on tab change.
if (this.scroll) { if (this.scroll) {
this.scroll.getScrollElement().onscroll = (e): void => { this.scroll.getScrollElement().onscroll = (e): void => {
this.tabs.showHideTabs(e); this.tabs.showHideTabs(e.target);
}; };
this.tabs.showHideTabs(this.scroll.getScrollElement());
} }
}, 1); }, 1);
} }

2
src/components/tabs/tabs.scss
View File

@ -118,8 +118,10 @@ ion-app.app-root core-tabs {
&.tabs-hidden { &.tabs-hidden {
.core-tabs-bar { .core-tabs-bar {
display: none !important; display: none !important;
transform: translateY(0) !important;
} }
.core-tabs-content-container { .core-tabs-content-container {
transform: translateY(0) !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
} }

29
src/components/tabs/tabs.ts
View File

@ -63,6 +63,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
numTabsShown = 0; numTabsShown = 0;
direction = 'ltr'; direction = 'ltr';
description = ''; description = '';
lastScroll = 0;
protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content. protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content.
protected initialized = false; 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. * 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) { if (!this.tabBarHeight) {
// We don't have the tab bar height, this means the tab bar isn't shown. // We don't have the tab bar height, this means the tab bar isn't shown.
return; 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; 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.tabsShown = true;
this.tabBarElement.classList.remove('tabs-hidden');
this.calculateSlides(); 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);
} }
/** /**