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

Merge pull request #1844 from crazyserver/MOBILE-2937 

Mobile 2937
main
Juan Leyva 2019-04-26 11:38:50 +02:00 committed by GitHub
parent 637ea39b02 aac1f24185
commit 4e63168e06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) {
this.scroll.getScrollElement().onscroll = (e): void => {
this.tabs.showHideTabs(e);
// 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 (scroll) {
scroll.onscroll = (e): void => {
this.tabs.showHideTabs(e.target);
};
this.tabs.showHideTabs(scroll);
}
}, 1);
}

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

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

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