Skip to content

Commit 963cdcb

Browse files
committed
feat(split-pane): support for side=right
1 parent c79bd5a commit 963cdcb

File tree

9 files changed

+66
-6
lines changed

9 files changed

+66
-6
lines changed

src/components/datetime/test/issues/app.module.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export class E2EPage {
2121
}
2222
}
2323

24-
2524
@Component({
2625
template: '<ion-nav [root]="root"></ion-nav>'
2726
})

src/components/split-pane/split-pane.ios.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,17 @@
44
// Split Pane
55
// --------------------------------------------------
66

7+
$split-pane-ios-border: $hairlines-width solid $list-ios-border-color;
8+
79
.split-pane-ios.split-pane-visible >.split-pane-side {
810
min-width: 270px;
911
max-width: 28%;
1012

11-
border-right: $hairlines-width solid $list-ios-border-color;
13+
border-right: $split-pane-ios-border;
14+
border-left: 0;
15+
}
16+
17+
.split-pane-ios.split-pane-visible > .split-pane-side[side=right] {
18+
border-right: 0;
19+
border-left: $split-pane-ios-border;
1220
}

src/components/split-pane/split-pane.md.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,17 @@
44
// Split Pane
55
// --------------------------------------------------
66

7+
$split-pane-md-border: 1px solid $list-md-border-color;
8+
79
.split-pane-md.split-pane-visible >.split-pane-side {
810
min-width: 270px;
911
max-width: 28%;
1012

11-
border-right: 1px solid $list-md-border-color;
13+
border-right: $split-pane-md-border;
14+
border-left: 0;
1215
}
1316

17+
.split-pane-md.split-pane-visible > .split-pane-side[side=right] {
18+
border-right: 0;
19+
border-left: $split-pane-md-border;
20+
}

src/components/split-pane/split-pane.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,7 @@ ion-split-pane {
7272
display: hidden !important;
7373
}
7474
}
75+
76+
.split-pane-visible >.split-pane-side[side=right] {
77+
order: 1;
78+
}

src/components/split-pane/split-pane.wp.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,17 @@
44
// Split Pane
55
// --------------------------------------------------
66

7+
$split-pane-wp-border: 1px solid $list-wp-border-color;
8+
79
.split-pane-wp.split-pane-visible >.split-pane-side {
810
min-width: 270px;
911
max-width: 28%;
1012

11-
border-right: 1px solid $list-wp-border-color;
13+
border-right: $split-pane-wp-border;
14+
border-left: 0;
15+
}
16+
17+
.split-pane-wp.split-pane-visible > .split-pane-side[side=right] {
18+
border-right: 0;
19+
border-left: $split-pane-wp-border;
1220
}

src/components/split-pane/test/menus/app.module.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ export class E2EPage2 {}
3535
<button ion-button (click)="menu1Active()">Enable menu 1</button>
3636
<button ion-button (click)="menu2Active()">Enable menu 2</button>
3737
<button ion-button (click)="menu3Active()">Enable menu 3</button>
38+
<button ion-button (click)="menu4Active()">Enable menu 4 (right)</button>
39+
3840
<button ion-button (click)="disableAll()">Disable all</button>
3941
4042
<div f></div>
@@ -49,20 +51,33 @@ export class E2EPage {
4951
constructor(
5052
public navCtrl: NavController,
5153
public menuCtrl: MenuController,
52-
) { }
54+
) {
55+
this.menuCtrl.enable(false, 'menu4');
56+
}
5357

5458
push() {
5559
this.navCtrl.push(E2EPage2);
5660
}
61+
5762
menu1Active() {
63+
this.menuCtrl.enable(false, 'menu4');
5864
this.menuCtrl.enable(true, 'menu1');
5965
}
6066
menu2Active() {
67+
this.menuCtrl.enable(false, 'menu4');
6168
this.menuCtrl.enable(true, 'menu2');
6269
}
6370
menu3Active() {
71+
this.menuCtrl.enable(false, 'menu4');
6472
this.menuCtrl.enable(true, 'menu3');
6573
}
74+
menu4Active() {
75+
this.menuCtrl.enable(false, 'menu1');
76+
this.menuCtrl.enable(false, 'menu2');
77+
this.menuCtrl.enable(false, 'menu3');
78+
79+
this.menuCtrl.enable(true, 'menu4');
80+
}
6681
disableAll() {
6782
this.menuCtrl.enable(false);
6883
}

src/components/split-pane/test/menus/main.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,20 @@
4848
</ion-content>
4949
</ion-menu>
5050

51+
<ion-menu [content]="content" id="menu4" side="right">
52+
53+
<ion-header>
54+
<ion-toolbar color="dark">
55+
<ion-title>Menu 4</ion-title>
56+
</ion-toolbar>
57+
</ion-header>
58+
59+
<ion-content>
60+
<ion-list>
61+
<ion-item>Example</ion-item>
62+
</ion-list>
63+
</ion-content>
64+
</ion-menu>
65+
5166
<ion-nav [root]="root" main #content></ion-nav>
5267
</ion-split-pane>

src/components/split-pane/test/tabs/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IonicApp, IonicModule, NavController, MenuController } from '../../../.
88
<ion-navbar><ion-title>Navigation</ion-title></ion-navbar>
99
</ion-header>
1010
<ion-content>
11+
1112
<ion-slides style="background: black"
1213
pager="true"
1314
effect="flip">
@@ -47,6 +48,7 @@ export class SidePage {
4748
</ion-navbar>
4849
</ion-header>
4950
<ion-content padding>
51+
5052
<button ion-button (click)="push()">Push</button>
5153
<div f></div>
5254
<div f></div>
@@ -57,6 +59,7 @@ export class SidePage {
5759
`
5860
})
5961
export class E2EPage {
62+
6063
constructor(
6164
public navCtrl: NavController,
6265
public menuCtrl: MenuController,
@@ -74,6 +77,7 @@ export class E2EPage {
7477
export class E2EApp {
7578
root = E2EPage;
7679
root2 = SidePage;
80+
side = 'right';
7781
}
7882

7983
@NgModule({

src/components/split-pane/test/tabs/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
<ion-split-pane>
33
<ion-nav [root]="root2" #content main></ion-nav>
4-
<ion-tabs>
4+
<ion-tabs [attr.side]="side">
55
<ion-tab [root]="root" tabTitle="Page1"></ion-tab>
66
<ion-tab [root]="root" tabTitle="Page2"></ion-tab>
77
</ion-tabs>

0 commit comments

Comments
 (0)