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

MOBILE-2334 assign: Fix tab scrolling

main
Pau Ferrer Ocaña 2018-04-13 12:33:17 +02:00 committed by Dani Palou
parent cf927d4344
commit 9d69c0f623
3 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/mod/assign/components/submission/submission.html
View File

@ -22,7 +22,7 @@
</ion-item> </ion-item>
<!-- Tabs: see the submission or grade it. --> <!-- Tabs: see the submission or grade it. -->
<core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded"> <core-tabs [selectedIndex]="selectedTab" [hideUntil]="loaded" parentScrollable="true">
<!-- View the submission tab. --> <!-- View the submission tab. -->
<core-tab [title]="'addon.mod_assign.submission' | translate"> <core-tab [title]="'addon.mod_assign.submission' | translate">
<ng-template> <ng-template>

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

@ -25,6 +25,17 @@ core-tabs {
.core-tabs-content-container { .core-tabs-content-container {
height: 100%; height: 100%;
&.no-scroll {
height: auto;
padding-bottom: 0 !important;
.scroll-content {
overflow: hidden !important;
contain: initial;
position: relative;
}
}
} }
&.tabs-hidden { &.tabs-hidden {

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

@ -44,6 +44,7 @@ import { Content } from 'ionic-angular';
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges { export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
@Input() selectedIndex = 0; // Index of the tab to select. @Input() selectedIndex = 0; // Index of the tab to select.
@Input() hideUntil = true; // Determine when should the contents be shown. @Input() hideUntil = true; // Determine when should the contents be shown.
@Input() parentScrollable = false; // Determine if the scroll should be in the parent content or the tab itself.
@Output() ionChange: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); // Emitted when the tab changes. @Output() ionChange: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); // Emitted when the tab changes.
@ViewChild('originalTabs') originalTabsRef: ElementRef; @ViewChild('originalTabs') originalTabsRef: ElementRef;
@ViewChild('topTabs') topTabs: ElementRef; @ViewChild('topTabs') topTabs: ElementRef;
@ -58,7 +59,6 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
protected tabBarHeight; protected tabBarHeight;
protected tabBarElement: HTMLElement; // Host element. protected tabBarElement: HTMLElement; // Host element.
protected tabsShown = true; protected tabsShown = true;
protected scroll: HTMLElement; // Parent scroll element (if core-tabs is inside a ion-content).
constructor(element: ElementRef, protected content: Content) { constructor(element: ElementRef, protected content: Content) {
this.tabBarElement = element.nativeElement; this.tabBarElement = element.nativeElement;
@ -164,9 +164,14 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
this.tabBarHeight = this.topTabsElement.offsetHeight; this.tabBarHeight = this.topTabsElement.offsetHeight;
this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px'; this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px';
if (this.content) { if (this.content) {
this.scroll = this.content.getScrollElement(); if (!this.parentScrollable) {
if (this.scroll) { // Parent scroll element (if core-tabs is inside a ion-content).
this.scroll.classList.add('no-scroll'); const scroll = this.content.getScrollElement();
if (scroll) {
scroll.classList.add('no-scroll');
}
} else {
this.originalTabsContainer.classList.add('no-scroll');
} }
} }