From 963cdcbe7641e1c700465c24c08789bbdd465fe3 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Tue, 14 Mar 2017 21:05:16 +0100
Subject: [PATCH] feat(split-pane): support for side=right

---
 .../datetime/test/issues/app.module.ts          |  1 -
 src/components/split-pane/split-pane.ios.scss   | 10 +++++++++-
 src/components/split-pane/split-pane.md.scss    |  9 ++++++++-
 src/components/split-pane/split-pane.scss       |  4 ++++
 src/components/split-pane/split-pane.wp.scss    | 10 +++++++++-
 .../split-pane/test/menus/app.module.ts         | 17 ++++++++++++++++-
 src/components/split-pane/test/menus/main.html  | 15 +++++++++++++++
 .../split-pane/test/tabs/app.module.ts          |  4 ++++
 src/components/split-pane/test/tabs/main.html   |  2 +-
 9 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/components/datetime/test/issues/app.module.ts b/src/components/datetime/test/issues/app.module.ts
index fcd7af452fd..c3ddf7de097 100644
--- 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
index 59daf3d9978..c12a5e673e6 100644
--- 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
index e9a76e2d9b5..7d4cf0995d7 100644
--- 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
index 539d998234a..e679b708af2 100644
--- 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
index 49f91aa36b6..52e461ab8d7 100644
--- 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
index 7d817418cec..f7d874a30a7 100644
--- 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
index 353e6131975..738983577e9 100644
--- 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>
\ No newline at end of file
diff --git a/src/components/split-pane/test/tabs/app.module.ts b/src/components/split-pane/test/tabs/app.module.ts
index c28f385002c..a09d320ae66 100644
--- 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
index 342508f5a63..55dbb50d399 100644
--- 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>