Skip to content

Commit bfaed50

Browse files
corysmccorysmc
committed
updating example
adding multiple files, action sheet under the more icon, rename, and change location.
1 parent adf2ee2 commit bfaed50

File tree

5 files changed

+125
-25
lines changed

5 files changed

+125
-25
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ export class ModalNavPage {
1111

1212
modalParams: any = {
1313
}
14+
1415
constructor(public navParams: NavParams,
1516
public viewCtrl: ViewController) {
1617
}
1718

1819
ionViewDidLoad() {
1920
console.log('ionViewDidLoad ModalNavPage');
2021
}
22+
2123
dismissModal(data){
2224
this.viewCtrl.dismiss(data);
2325
}

‎src/pages/popup-modal/modal-nav/move-document/move-document.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<ion-header>
22
<ion-navbar>
3+
<ion-buttons start *ngIf="thisFolder.name === 'Documents'">
4+
<button ion-button (click)="moveHere()">
5+
Cancel
6+
</button>
7+
</ion-buttons>
38
<ion-title>{{thisFolder.name}}</ion-title>
49
</ion-navbar>
510
</ion-header>
6-
<ion-content padding>
11+
<ion-content>
712
<ion-list>
813
<ion-item *ngFor="let folder of folders" (click)="goToFolder(folder)">
914
<ion-icon name="folder" item-start></ion-icon>

‎src/pages/popup-modal/modal-nav/move-document/move-document.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import { Component } from '@angular/core';
22
import { IonicPage, NavController, NavParams } from 'ionic-angular';
33
import { ModalNavPage } from '../modal-nav';
4-
/**
5-
* Generated class for the MoveDocumentPage page.
6-
*
7-
* See http://ionicframework.com/docs/components/#navigation for more info
8-
* on Ionic pages and navigation.
9-
*/
4+
105
@IonicPage()
116
@Component({
127
selector: 'page-move-document',
@@ -17,21 +12,30 @@ export class MoveDocumentPage {
1712
thisFolder: any = this.navParams.get('folder') || {
1813
name: 'Documents'
1914
}
15+
16+
folders:any = [{
17+
name: 'My Folder 1',
18+
}, {
19+
name: 'My Folder 2'
20+
}, {
21+
name: 'My Folder 3'
22+
}, {
23+
name: 'My Folder 4'
24+
}];
25+
2026
constructor(public navCtrl: NavController, public navParams: NavParams, public modalNavPage: ModalNavPage) {
2127

2228
}
2329

2430
ionViewDidLoad() {
2531
console.log('ionViewDidLoad MoveDocumentPage');
2632
}
27-
28-
folders:any = [{name: 'My Folder 1'}, {name: 'My Folder 2'}, {name: 'My Folder 3'}, {name: 'My Folder 4'}];
2933

3034
goToFolder(folder){
3135
this.navCtrl.push('MoveDocumentPage', { folder: folder });
3236
}
37+
3338
moveHere(folder){
3439
this.modalNavPage.dismissModal(folder);
35-
3640
}
3741
}

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

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
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>
13-
<button ion-button block (click)="openModalNav()">Modal with Navigation</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>
15+
<ion-list>
16+
<ion-list-header>Modal with Navigation</ion-list-header>
17+
<ion-item *ngFor="let document of documents">
18+
<ion-icon name="document" item-start></ion-icon>
19+
<ion-label>
20+
{{document.name}}
21+
</ion-label>
22+
<button ion-button icon-only item-end clear (click)="presentActionSheet(document)">
23+
<ion-icon name="more"></ion-icon>
24+
</button>
25+
</ion-item>
26+
</ion-list>
1427
</ion-content>

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

Lines changed: 80 additions & 4 deletions
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

56
@IonicPage()
@@ -9,8 +10,17 @@ import { NavController, ModalController, IonicPage } from 'ionic-angular';
910
})
1011
export class PopupModalsPage {
1112
rootPage: any;
13+
documents:any = [{
14+
name: 'Ionic.sketch',
15+
}, {
16+
name: 'Envudu.sketch'
17+
}, {
18+
name: 'Fazescardgame.sketch'
19+
}, {
20+
name: 'Lucidchart.sketch'
21+
}];
1222

13-
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
23+
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController) { }
1424

1525
openHintModal() {
1626
let myModal = this.modalCtrl.create('HintModalPage', null, { cssClass: 'inset-modal'});
@@ -26,11 +36,77 @@ export class PopupModalsPage {
2636
let myModal = this.modalCtrl.create('SignupModalPage', null, { cssClass: 'inset-modal'});
2737
myModal.present();
2838
}
29-
openModalNav(){
39+
40+
presentActionSheet(document) {
41+
let actionSheet = this.actionSheetCtrl.create({
42+
title: document.name,
43+
buttons: [
44+
{
45+
text: 'Move',
46+
handler: () => {
47+
this.moveDocumentModal();
48+
console.log('Move clicked');
49+
}
50+
},{
51+
text: 'Rename',
52+
handler: () => {
53+
let navTransition = actionSheet.dismiss();
54+
navTransition.then(() => {
55+
// wait until action sheet dismisses
56+
// https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/#advanced
57+
this.renameDocument(document);
58+
console.log('Rename clicked');
59+
});
60+
return false;
61+
}
62+
},{
63+
text: 'Cancel',
64+
role: 'cancel',
65+
handler: () => {
66+
console.log('Cancel clicked');
67+
}
68+
}
69+
]
70+
});
71+
actionSheet.present();
72+
}
73+
74+
moveDocumentModal(){
3075
let myModal = this.modalCtrl.create('ModalNavPage', {page: 'MoveDocumentPage'});
3176
myModal.onDidDismiss(data => {
32-
console.log('move to folder', data);
77+
if(data){
78+
console.log('move to folder', data);
79+
}
3380
});
34-
myModal.present();
81+
myModal.present();
82+
}
83+
84+
renameDocument(document){
85+
let prompt = this.alertCtrl.create({
86+
title: 'Rename Document',
87+
inputs: [
88+
{
89+
name: 'title',
90+
placeholder: 'Title',
91+
value: document.name
92+
},
93+
],
94+
buttons: [
95+
{
96+
text: 'Cancel',
97+
handler: data => {
98+
console.log('Cancel clicked');
99+
}
100+
},
101+
{
102+
text: 'Save',
103+
handler: data => {
104+
document.name = data.title;
105+
console.log('Saved clicked');
106+
}
107+
}
108+
]
109+
});
110+
prompt.present();
35111
}
36112
}

0 commit comments

Comments
 (0)