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

MOBILE-3275 tabs: Fix course area tabs are too short when text size increased

Browse Source
This commit is contained in:
Tien Nguyen Phuc 2020-01-03 16:26:00 +07:00
parent ad85ded49f
commit 6ccc65625f
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,9 @@ import { Subscription } from 'rxjs';
import { CoreDomUtilsProvider } from '@providers/utils/dom'; import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreAppProvider } from '@providers/app'; import { CoreAppProvider } from '@providers/app';
import { CoreTabComponent } from './tab'; import { CoreTabComponent } from './tab';
import { CoreConfigProvider } from '@providers/config';
import { CoreConstants } from '@core/constants';
import { CoreConfigConstants } from '../../configconstants';
/** /**
* This component displays some tabs that usually share data between them. * This component displays some tabs that usually share data between them.
@ -46,6 +49,10 @@ import { CoreTabComponent } from './tab';
templateUrl: 'core-tabs.html' templateUrl: 'core-tabs.html'
}) })
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
// Minimum tab's width to display fully the word "Competencies" which is the longest tab in the app.
static MIN_TAB_WIDTH = 107;
@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. @Input() parentScrollable = false; // Determine if the scroll should be in the parent content or the tab itself.
@ -85,7 +92,8 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
protected languageChangedSubscription: Subscription; protected languageChangedSubscription: Subscription;
constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider, constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider,
protected appProvider: CoreAppProvider, platform: Platform, translate: TranslateService) { protected appProvider: CoreAppProvider, private configProvider: CoreConfigProvider, platform: Platform,
translate: TranslateService) {
this.tabBarElement = element.nativeElement; this.tabBarElement = element.nativeElement;
this.direction = platform.isRTL ? 'rtl' : 'ltr'; this.direction = platform.isRTL ? 'rtl' : 'ltr';
@ -223,8 +231,9 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
return; return;
} }
this.calculateMaxSlides(); this.calculateMaxSlides().then(() => {
this.updateSlides(); this.updateSlides();
});
} }
/** /**
@ -376,18 +385,25 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
}, 400); }, 400);
} }
protected calculateMaxSlides(): void { protected calculateMaxSlides(): Promise<void> {
if (this.slides) { return new Promise<void>((resolve, reject): void => {
const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth; this.maxSlides = 3;
if (this.slides) {
if (width) { const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth;
this.maxSlides = Math.floor(width / 100); if (width) {
this.configProvider.get(CoreConstants.SETTINGS_FONT_SIZE, CoreConfigConstants.font_sizes[0].toString()).
return; then((fontSize) => {
this.maxSlides = Math.floor(width / (fontSize / CoreConfigConstants.font_sizes[0] *
CoreTabsComponent.MIN_TAB_WIDTH));
resolve();
});
} else {
resolve();
}
} else {
resolve();
} }
} });
this.maxSlides = 3;
} }
/** /**