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.
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);
}

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

@ -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;
}
}

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

@ -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);
}
/**