Skip to content

Commit b438728

Browse files
yannbfyannbf
committed
refactor(navmodal): Move NavModal to own category
1 parent bfaed50 commit b438728

15 files changed

+179
-112
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/popup-modal/modal-nav/modal-nav.html renamed to ‎src/pages/modal-with-navigation/modal-nav/modal-nav.html

File renamed without changes.

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

File renamed without changes.

‎src/pages/popup-modal/modal-nav/modal-nav.scss renamed to ‎src/pages/modal-with-navigation/modal-nav/modal-nav.scss

File renamed without changes.

‎src/pages/popup-modal/modal-nav/modal-nav.ts renamed to ‎src/pages/modal-with-navigation/modal-nav/modal-nav.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
import { Component, ViewChild } from '@angular/core';
2-
import { IonicPage, Nav, NavParams, ViewController } from 'ionic-angular';
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
33

44
@IonicPage()
55
@Component({
66
selector: 'page-modal-nav',
77
templateUrl: 'modal-nav.html',
88
})
99
export class ModalNavPage {
10-
modalPage: any = this.navParams.get('page');
11-
12-
modalParams: any = {
13-
}
10+
modalPage: any;
11+
12+
modalParams: any = { };
1413

15-
constructor(public navParams: NavParams,
14+
constructor(
15+
public navParams: NavParams,
1616
public viewCtrl: ViewController) {
1717
}
1818

1919
ionViewDidLoad() {
2020
console.log('ionViewDidLoad ModalNavPage');
21+
this.modalPage = this.navParams.get('page');
2122
}
22-
23+
2324
dismissModal(data){
2425
this.viewCtrl.dismiss(data);
2526
}
26-
2727
}

‎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 padding>
11+
<p>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();
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() {
71+
let myModal = this.modalCtrl.create('ModalNavPage', { page: 'MoveDocumentPage' });
72+
myModal.onDidDismiss(data => {
73+
if (data) {
74+
this.toastCtrl.create('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/popup-modal/modal-nav/move-document/move-document.html renamed to ‎src/pages/modal-with-navigation/move-document/move-document.html

File renamed without changes.

‎src/pages/popup-modal/modal-nav/move-document/move-document.module.ts renamed to ‎src/pages/modal-with-navigation/move-document/move-document.module.ts

File renamed without changes.

‎src/pages/popup-modal/modal-nav/move-document/move-document.scss renamed to ‎src/pages/modal-with-navigation/move-document/move-document.scss

File renamed without changes.

‎src/pages/popup-modal/modal-nav/move-document/move-document.ts renamed to ‎src/pages/modal-with-navigation/move-document/move-document.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { ModalNavPage } from '../modal-nav/modal-nav';
12
import { Component } from '@angular/core';
23
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3-
import { ModalNavPage } from '../modal-nav';
44

55
@IonicPage()
66
@Component({
@@ -9,11 +9,23 @@ import { ModalNavPage } from '../modal-nav';
99
})
1010
export class MoveDocumentPage {
1111

12-
thisFolder: any = this.navParams.get('folder') || {
13-
name: 'Documents'
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();
1421
}
1522

16-
folders:any = [{
23+
initData() {
24+
this.thisFolder = this.navParams.get('folder') || {
25+
name: 'Documents'
26+
}
27+
28+
this.folders = [{
1729
name: 'My Folder 1',
1830
}, {
1931
name: 'My Folder 2'
@@ -22,9 +34,6 @@ export class MoveDocumentPage {
2234
}, {
2335
name: 'My Folder 4'
2436
}];
25-
26-
constructor(public navCtrl: NavController, public navParams: NavParams, public modalNavPage: ModalNavPage) {
27-
2837
}
2938

3039
ionViewDidLoad() {

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,4 @@
1212
<button ion-button color="danger" block (click)="openSignupModal()">Signup with slider</button>
1313
<button ion-button color="secondary" block (click)="openWalkthroughModal()">Walkthrough modal</button>
1414
</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>
2715
</ion-content>

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

Lines changed: 1 addition & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,15 @@ import { Component } from '@angular/core';
22
import { NavController, ModalController, IonicPage } from 'ionic-angular';
33
import { ActionSheetController, AlertController } from 'ionic-angular';
44

5-
65
@IonicPage()
76
@Component({
87
selector: 'page-popup-modal',
98
templateUrl: 'popup-modal.html'
109
})
1110
export class PopupModalsPage {
1211
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-
}];
2212

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

2515
openHintModal() {
2616
let myModal = this.modalCtrl.create('HintModalPage', null, { cssClass: 'inset-modal'});
@@ -36,77 +26,4 @@ export class PopupModalsPage {
3626
let myModal = this.modalCtrl.create('SignupModalPage', null, { cssClass: 'inset-modal'});
3727
myModal.present();
3828
}
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(){
75-
let myModal = this.modalCtrl.create('ModalNavPage', {page: 'MoveDocumentPage'});
76-
myModal.onDidDismiss(data => {
77-
if(data){
78-
console.log('move to folder', data);
79-
}
80-
});
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();
111-
}
11229
}

0 commit comments

Comments
 (0)