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

MOBILE-2795 tabs: Fix slide direction on RTL

main
Pau Ferrer Ocaña 2019-01-07 11:49:15 +01:00
parent 7b93786176
commit 409a9de4ea
3 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/tabs/core-tabs.html
View File

@ -5,7 +5,7 @@
<ion-icon *ngIf="showPrevButton" name="arrow-back" md="ios-arrow-back"></ion-icon> <ion-icon *ngIf="showPrevButton" name="arrow-back" md="ios-arrow-back"></ion-icon>
</ion-col> </ion-col>
<ion-col no-padding col-10> <ion-col no-padding col-10>
<ion-slides (ionSlideDidChange)="slideChanged()" [slidesPerView]="slidesShown"> <ion-slides (ionSlideDidChange)="slideChanged()" [slidesPerView]="slidesShown" [dir]="direction">
<ng-container *ngFor="let tab of tabs; let idx = index"> <ng-container *ngFor="let tab of tabs; let idx = index">
<ion-slide *ngIf="tab.show"> <ion-slide *ngIf="tab.show">
<a [attr.aria-selected]="selected == idx" (click)="selectTab(idx)" class="tab-slide"> <a [attr.aria-selected]="selected == idx" (click)="selectTab(idx)" class="tab-slide">

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

@ -62,18 +62,6 @@ ion-app.app-root .core-tabs-bar {
} }
} }
@include rtl() {
.swiper-container-horizontal {
transform: scaleX(-1);
.swiper-wrapper {
flex-direction: row-reverse;
ion-slide {
transform: scaleX(-1);
}
}
}
}
} }
ion-app.app-root.md .core-tabs-bar a.tab-slide { ion-app.app-root.md .core-tabs-bar a.tab-slide {

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

@ -16,7 +16,9 @@ import {
Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, ViewChild, ElementRef, Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, ViewChild, ElementRef,
SimpleChange SimpleChange
} from '@angular/core'; } from '@angular/core';
import { Content, Slides } from 'ionic-angular'; import { Content, Slides, Platform } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';
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';
@ -59,6 +61,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
maxSlides = 3; maxSlides = 3;
slidesShown = this.maxSlides; slidesShown = this.maxSlides;
numTabsShown = 0; numTabsShown = 0;
direction = 'ltr';
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;
@ -77,10 +80,20 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
protected firstSelectedTab: number; protected firstSelectedTab: number;
protected unregisterBackButtonAction: any; protected unregisterBackButtonAction: any;
protected languageChangedSubscription: Subscription;
constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider, constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider,
protected appProvider: CoreAppProvider) { protected appProvider: CoreAppProvider, platform: Platform, translate: TranslateService) {
this.tabBarElement = element.nativeElement; this.tabBarElement = element.nativeElement;
this.direction = platform.isRTL ? 'rtl' : 'ltr';
// Change the side when the language changes.
this.languageChangedSubscription = translate.onLangChange.subscribe((event: any) => {
setTimeout(() => {
this.direction = platform.isRTL ? 'rtl' : 'ltr';
});
});
} }
/** /**