feat(split-pane): support for side=right

ionic-team · Mar 16, 2017 · 963cdcb · 963cdcb · alaa-alshamy · Mar 23, 2017
1 parent c79bd5a
commit 963cdcb
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 6 deletions.
diff --git a/src/components/datetime/test/issues/app.module.ts b/src/components/datetime/test/issues/app.module.ts
@@ -21,7 +21,6 @@ export class E2EPage {
   }
 }
 
-
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })

diff --git a/src/components/split-pane/split-pane.ios.scss b/src/components/split-pane/split-pane.ios.scss
@@ -4,9 +4,17 @@
 // Split Pane
 // --------------------------------------------------
 
+$split-pane-ios-border: $hairlines-width solid $list-ios-border-color;
+
 .split-pane-ios.split-pane-visible >.split-pane-side {
   min-width: 270px;
   max-width: 28%;
 
-  border-right: $hairlines-width solid $list-ios-border-color;
+  border-right: $split-pane-ios-border;
+  border-left: 0;
+}
+
+.split-pane-ios.split-pane-visible > .split-pane-side[side=right] {
+  border-right: 0;
+  border-left: $split-pane-ios-border;
 }
diff --git a/src/components/split-pane/split-pane.md.scss b/src/components/split-pane/split-pane.md.scss
@@ -4,10 +4,17 @@
 // Split Pane
 // --------------------------------------------------
 
+$split-pane-md-border: 1px solid $list-md-border-color;
+
 .split-pane-md.split-pane-visible >.split-pane-side {
   min-width: 270px;
   max-width: 28%;
 
-  border-right: 1px solid $list-md-border-color;
+  border-right: $split-pane-md-border;
+  border-left: 0;
 }
 
+.split-pane-md.split-pane-visible > .split-pane-side[side=right] {
+  border-right: 0;
+  border-left: $split-pane-md-border;
+}
diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss
@@ -72,3 +72,7 @@ ion-split-pane {
     display: hidden !important;
   }
 }
+
+.split-pane-visible >.split-pane-side[side=right] {
+  order: 1;
+}
diff --git a/src/components/split-pane/split-pane.wp.scss b/src/components/split-pane/split-pane.wp.scss
@@ -4,9 +4,17 @@
 // Split Pane
 // --------------------------------------------------
 
+$split-pane-wp-border: 1px solid $list-wp-border-color;
+
 .split-pane-wp.split-pane-visible >.split-pane-side {
   min-width: 270px;
   max-width: 28%;
 
-  border-right: 1px solid $list-wp-border-color;
+  border-right: $split-pane-wp-border;
+  border-left: 0;
+}
+
+.split-pane-wp.split-pane-visible > .split-pane-side[side=right] {
+  border-right: 0;
+  border-left: $split-pane-wp-border;
 }
diff --git a/src/components/split-pane/test/menus/app.module.ts b/src/components/split-pane/test/menus/app.module.ts
@@ -35,6 +35,8 @@ export class E2EPage2 {}
     <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>
@@ -49,20 +51,33 @@ export class E2EPage {
   constructor(
     public navCtrl: NavController,
     public menuCtrl: MenuController,
-  ) { }
+  ) {
+    this.menuCtrl.enable(false, 'menu4');
+  }
 
   push() {
     this.navCtrl.push(E2EPage2);
   }
+
   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);
   }

diff --git a/src/components/split-pane/test/menus/main.html b/src/components/split-pane/test/menus/main.html
@@ -48,5 +48,20 @@
     </ion-content>
   </ion-menu>
 
+  <ion-menu [content]="content" id="menu4" side="right">
+
+    <ion-header>
+      <ion-toolbar color="dark">
+        <ion-title>Menu 4</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>Example</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
   <ion-nav [root]="root" main #content></ion-nav>
 </ion-split-pane>
diff --git a/src/components/split-pane/test/tabs/app.module.ts b/src/components/split-pane/test/tabs/app.module.ts
@@ -8,6 +8,7 @@ import { IonicApp, IonicModule, NavController, MenuController } from '../../../.
   <ion-navbar><ion-title>Navigation</ion-title></ion-navbar>
   </ion-header>
   <ion-content>
+
     <ion-slides style="background: black"
                 pager="true"
                 effect="flip">
@@ -47,6 +48,7 @@ export class SidePage {
     </ion-navbar>
   </ion-header>
   <ion-content padding>
+
     <button ion-button (click)="push()">Push</button>
     <div f></div>
     <div f></div>
@@ -57,6 +59,7 @@ export class SidePage {
   `
 })
 export class E2EPage {
+
   constructor(
     public navCtrl: NavController,
     public menuCtrl: MenuController,
@@ -74,6 +77,7 @@ export class E2EPage {
 export class E2EApp {
   root = E2EPage;
   root2 = SidePage;
+  side = 'right';
 }
 
 @NgModule({

diff --git a/src/components/split-pane/test/tabs/main.html b/src/components/split-pane/test/tabs/main.html
@@ -1,7 +1,7 @@
 
 <ion-split-pane>
   <ion-nav [root]="root2" #content main></ion-nav>
-  <ion-tabs>
+  <ion-tabs [attr.side]="side">
     <ion-tab [root]="root" tabTitle="Page1"></ion-tab>
     <ion-tab [root]="root" tabTitle="Page2"></ion-tab>
   </ion-tabs>