Skip to content

Commit 2e1d5e8

Browse files
corysmccorysmc
authored
Merge pull request yannbf#40 from yannbf/feature/modal-navigation
Feature/modal navigation
2 parents e8ebea1 + dda4c90 commit 2e1d5e8

15 files changed

+308
-11
lines changed

‎src/app/app.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export class MyApp {
4646
{ title: 'Login', component: 'LoginListPage', active: false, icon: 'archive' },
4747
{ title: 'Lists', component: 'ListPage', active: false, icon: 'body' },
4848
{ title: 'Miscellaneous', component: 'MiscellaneousListPage', active: false, icon: 'bookmarks' },
49+
{ title: 'Modal with Navigation', component: 'ModalWithNavigationPage', active: false, icon: 'book' },
4950
{ title: 'Popup Fab', component: 'PopupFabPage', active: false, icon: 'map' },
5051
{ title: 'Popup Modal', component: 'PopupModalsPage', active: false, icon: 'basket' },
5152
{ title: 'Popup Menu', component: 'PopupMenuListPage', active: false, icon: 'beer' },

‎src/pages/modal-with-navigation/modal-nav/modal-nav.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ion-nav [root]="modalPage" [(rootParams)]="modalParams" #content></ion-nav>

‎src/pages/modal-with-navigation/modal-nav/modal-nav.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ModalNavPage } from './modal-nav';
2+
import { NgModule } from '@angular/core';
3+
import { IonicPageModule } from 'ionic-angular';
4+
5+
@NgModule({
6+
declarations: [
7+
ModalNavPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(ModalNavPage),
11+
],
12+
exports: [
13+
ModalNavPage
14+
]
15+
})
16+
export class ModalNavPageModule {};

‎src/pages/modal-with-navigation/modal-nav/modal-nav.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-modal-nav {
2+
3+
}

‎src/pages/modal-with-navigation/modal-nav/modal-nav.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-modal-nav',
7+
templateUrl: 'modal-nav.html',
8+
})
9+
export class ModalNavPage {
10+
modalPage: any;
11+
12+
modalParams: any = { };
13+
14+
constructor(
15+
public navParams: NavParams,
16+
public viewCtrl: ViewController) {
17+
}
18+
19+
ionViewDidLoad() {
20+
console.log('ionViewDidLoad ModalNavPage');
21+
this.modalPage = this.navParams.get('page');
22+
}
23+
24+
dismissModal(data){
25+
this.viewCtrl.dismiss(data);
26+
}
27+
}

‎src/pages/modal-with-navigation/modal-with-navigation.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<button ion-button menuToggle>
4+
<ion-icon name="menu"></ion-icon>
5+
</button>
6+
<ion-title>Modal with Navigation</ion-title>
7+
</ion-navbar>
8+
</ion-header>
9+
10+
<ion-content>
11+
<p padding>This sample simulates the behavior of moving files/folders of known apps like dropbox or google drive:</p>
12+
<ion-list>
13+
<ion-list-header border-bottom>Files</ion-list-header>
14+
<ion-item *ngFor="let document of documents">
15+
<ion-icon name="document" item-start></ion-icon>
16+
<ion-label>
17+
{{document.name}}
18+
</ion-label>
19+
<button ion-button icon-only item-end clear (click)="presentActionSheet(document)">
20+
<ion-icon name="more"></ion-icon>
21+
</button>
22+
</ion-item>
23+
</ion-list>
24+
</ion-content>

‎src/pages/modal-with-navigation/modal-with-navigation.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { ModalWithNavigationPage } from './modal-with-navigation';
4+
5+
@NgModule({
6+
declarations: [
7+
ModalWithNavigationPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(ModalWithNavigationPage),
11+
],
12+
exports: [
13+
ModalWithNavigationPage
14+
]
15+
})
16+
export class ModalWithNavigationPageModule {}

‎src/pages/modal-with-navigation/modal-with-navigation.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-modal-with-navigation {
2+
3+
}

‎src/pages/modal-with-navigation/modal-with-navigation.ts

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { ToastService } from '../../providers/util/toast.service';
2+
import { Component } from '@angular/core';
3+
import {
4+
ActionSheetController,
5+
AlertController,
6+
IonicPage,
7+
ModalController,
8+
NavController,
9+
} from 'ionic-angular';
10+
11+
@IonicPage()
12+
@Component({
13+
selector: 'page-modal-with-navigation',
14+
templateUrl: 'modal-with-navigation.html',
15+
})
16+
export class ModalWithNavigationPage {
17+
18+
constructor(
19+
public navCtrl: NavController,
20+
public actionSheetCtrl: ActionSheetController,
21+
public modalCtrl: ModalController,
22+
public alertCtrl: AlertController,
23+
public toastCtrl: ToastService) {
24+
}
25+
26+
documents: any = [{
27+
name: 'Ionic.sketch',
28+
}, {
29+
name: 'Envudu.sketch'
30+
}, {
31+
name: 'Fazescardgame.sketch'
32+
}, {
33+
name: 'Lucidchart.sketch'
34+
}];
35+
36+
presentActionSheet(document) {
37+
let actionSheet = this.actionSheetCtrl.create({
38+
title: document.name,
39+
buttons: [
40+
{
41+
text: 'Move',
42+
handler: () => {
43+
this.moveDocumentModal(document);
44+
console.log('Move clicked');
45+
}
46+
}, {
47+
text: 'Rename',
48+
handler: () => {
49+
let navTransition = actionSheet.dismiss();
50+
navTransition.then(() => {
51+
// wait until action sheet dismisses
52+
// https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/#advanced
53+
this.renameDocument(document);
54+
console.log('Rename clicked');
55+
});
56+
return false;
57+
}
58+
}, {
59+
text: 'Cancel',
60+
role: 'cancel',
61+
handler: () => {
62+
console.log('Cancel clicked');
63+
}
64+
}
65+
]
66+
});
67+
actionSheet.present();
68+
}
69+
70+
moveDocumentModal(document) {
71+
let myModal = this.modalCtrl.create('ModalNavPage', { page: 'MoveDocumentPage' });
72+
myModal.onDidDismiss(data => {
73+
if (data) {
74+
this.toastCtrl.create('"' + document.name + '" moved to folder "' + data.name + '"');
75+
}
76+
});
77+
myModal.present();
78+
}
79+
80+
renameDocument(document) {
81+
let prompt = this.alertCtrl.create({
82+
title: 'Rename Document',
83+
inputs: [
84+
{
85+
name: 'title',
86+
placeholder: 'Title',
87+
value: document.name
88+
},
89+
],
90+
buttons: [
91+
{
92+
text: 'Cancel',
93+
handler: data => {
94+
console.log('Cancel clicked');
95+
}
96+
},
97+
{
98+
text: 'Save',
99+
handler: data => {
100+
document.name = data.title;
101+
console.log('Saved clicked');
102+
}
103+
}
104+
]
105+
});
106+
107+
prompt.present();
108+
}
109+
}

‎src/pages/modal-with-navigation/move-document/move-document.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-buttons start *ngIf="thisFolder.name === 'Documents'">
4+
<button ion-button (click)="moveHere()">
5+
Cancel
6+
</button>
7+
</ion-buttons>
8+
<ion-title>{{thisFolder.name}}</ion-title>
9+
</ion-navbar>
10+
</ion-header>
11+
<ion-content>
12+
<ion-list>
13+
<ion-item *ngFor="let folder of folders" (click)="goToFolder(folder)">
14+
<ion-icon name="folder" item-start></ion-icon>
15+
<h2>{{folder.name}}</h2>
16+
</ion-item>
17+
</ion-list>
18+
</ion-content>
19+
<ion-footer padding>
20+
<ion-buttons end>
21+
<button ion-button color="primary" (click)="moveHere(thisFolder)">
22+
Move Here
23+
</button>
24+
</ion-buttons>
25+
</ion-footer>

‎src/pages/modal-with-navigation/move-document/move-document.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { MoveDocumentPage } from './move-document';
4+
5+
@NgModule({
6+
declarations: [
7+
MoveDocumentPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(MoveDocumentPage),
11+
],
12+
exports: [
13+
MoveDocumentPage
14+
]
15+
})
16+
export class MoveDocumentPageModule {}

‎src/pages/modal-with-navigation/move-document/move-document.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-move-document {
2+
3+
}

‎src/pages/modal-with-navigation/move-document/move-document.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ModalNavPage } from '../modal-nav/modal-nav';
2+
import { Component } from '@angular/core';
3+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
4+
5+
@IonicPage()
6+
@Component({
7+
selector: 'page-move-document',
8+
templateUrl: 'move-document.html',
9+
})
10+
export class MoveDocumentPage {
11+
12+
thisFolder: any;
13+
14+
folders: any;
15+
16+
constructor(
17+
public navCtrl: NavController,
18+
public navParams: NavParams,
19+
public modalNavPage: ModalNavPage) {
20+
this.initData();
21+
}
22+
23+
initData() {
24+
this.thisFolder = this.navParams.get('folder') || {
25+
name: 'Documents'
26+
}
27+
28+
this.folders = [{
29+
name: 'My Folder 1',
30+
}, {
31+
name: 'My Folder 2'
32+
}, {
33+
name: 'My Folder 3'
34+
}, {
35+
name: 'My Folder 4'
36+
}];
37+
}
38+
39+
ionViewDidLoad() {
40+
console.log('ionViewDidLoad MoveDocumentPage');
41+
}
42+
43+
goToFolder(folder){
44+
this.navCtrl.push('MoveDocumentPage', { folder: folder });
45+
}
46+
47+
moveHere(folder){
48+
this.modalNavPage.dismissModal(folder);
49+
}
50+
}

‎src/pages/popup-modal/popup-modal.html

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<ion-header>
2-
<ion-navbar>
3-
<button ion-button menuToggle>
4-
<ion-icon name="menu"></ion-icon>
5-
</button>
6-
<ion-title>Popup Modal</ion-title>
7-
</ion-navbar>
2+
<ion-navbar>
3+
<button ion-button menuToggle>
4+
<ion-icon name="menu"></ion-icon>
5+
</button>
6+
<ion-title>Popup Modal</ion-title>
7+
</ion-navbar>
88
</ion-header>
9-
<ion-content padding>
10-
<button ion-button block (click)="openHintModal()">Hint Modal</button>
11-
<button ion-button color="danger" block (click)="openSignupModal()">Signup with slider</button>
12-
<button ion-button color="secondary" block (click)="openWalkthroughModal()">Walkthrough modal</button>
9+
<ion-content>
10+
<div padding>
11+
<button ion-button block (click)="openHintModal()">Hint Modal</button>
12+
<button ion-button color="danger" block (click)="openSignupModal()">Signup with slider</button>
13+
<button ion-button color="secondary" block (click)="openWalkthroughModal()">Walkthrough modal</button>
14+
</div>
1315
</ion-content>

‎src/pages/popup-modal/popup-modal.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component } from '@angular/core';
22
import { NavController, ModalController, IonicPage } from 'ionic-angular';
3+
import { ActionSheetController, AlertController } from 'ionic-angular';
34

45
@IonicPage()
56
@Component({
@@ -9,7 +10,7 @@ import { NavController, ModalController, IonicPage } from 'ionic-angular';
910
export class PopupModalsPage {
1011
rootPage: any;
1112

12-
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
13+
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public alertCtrl: AlertController) { }
1314

1415
openHintModal() {
1516
let myModal = this.modalCtrl.create('HintModalPage', null, { cssClass: 'inset-modal'});

0 commit comments

Comments
 (0)