fix(split-pane): rtf support

fixes #10903
ionic-team · Apr 1, 2017 · 57f3f97 · 57f3f97
1 parent 74f90e6
commit 57f3f97
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss
@@ -4,7 +4,7 @@
 // Split Pane
 // --------------------------------------------------
 
-ion-split-pane {
+.split-pane {
   position: absolute;
   top: 0;
   right: 0;
@@ -13,11 +13,16 @@ ion-split-pane {
 
   display: flex;
 
+  flex-direction: row;
   flex-wrap: nowrap;
 
   contain: strict;
 }
 
+.split-pane.split-pane-rtl {
+  flex-direction: row-reverse;
+}
+
 .split-pane-side:not(ion-menu) {
   display: none;
 }

diff --git a/src/components/split-pane/split-pane.ts b/src/components/split-pane/split-pane.ts
@@ -200,12 +200,14 @@ export class SplitPane extends Ion implements RootNode {
     private _plt: Platform,
     config: Config,
     elementRef: ElementRef,
-    renderer: Renderer,
+    renderer: Renderer
   ) {
     super(config, elementRef, renderer, 'split-pane');
+    if (_plt.isRTL()) {
+      this.setElementClass('split-pane-rtl', true);
+    }
   }
 
-
   /**
    * @hidden
    */

diff --git a/src/components/split-pane/test/menus/pages/page-one/page-one.html b/src/components/split-pane/test/menus/pages/page-one/page-one.html
@@ -12,6 +12,7 @@ <h1>Page 1</h1>
   <button ion-button (click)="menu1Active()">Enable menu 1</button>
   <button ion-button (click)="menu2Active()">Enable menu 2</button>
   <button ion-button (click)="menu3Active()">Enable menu 3</button>
+  <button ion-button (click)="menu4Active()">Enable menu 4 (right)</button>
   <button ion-button (click)="disableAll()">Disable all</button>
 
   <div f></div>

diff --git a/src/components/split-pane/test/menus/pages/page-one/page-one.ts b/src/components/split-pane/test/menus/pages/page-one/page-one.ts
@@ -8,20 +8,34 @@ export class PageOne {
   constructor(
     public navCtrl: NavController,
     public menuCtrl: MenuController,
-  ) { }
+  ) {
+    this.menuCtrl.enable(false, 'menu4');
+  }
 
   push() {
     this.navCtrl.push('PageTwo');
   }
+
   menu1Active() {
+    this.menuCtrl.enable(false, 'menu4');
     this.menuCtrl.enable(true, 'menu1');
   }
   menu2Active() {
+    this.menuCtrl.enable(false, 'menu4');
     this.menuCtrl.enable(true, 'menu2');
   }
   menu3Active() {
+    this.menuCtrl.enable(false, 'menu4');
     this.menuCtrl.enable(true, 'menu3');
   }
+  menu4Active() {
+    this.menuCtrl.enable(false, 'menu1');
+    this.menuCtrl.enable(false, 'menu2');
+    this.menuCtrl.enable(false, 'menu3');
+
+    this.menuCtrl.enable(true, 'menu4');
+  }
+
   disableAll() {
     this.menuCtrl.enable(false);
   }