Skip to content

Commit 83dec90

Browse files
yannbfyannbf
committed
feat(fapage): Add FabPopupPage
1 parent 78e0d4f commit 83dec90

File tree

14 files changed

+215
-14
lines changed

14 files changed

+215
-14
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
},
3939
"devDependencies": {
4040
"@ionic/app-scripts": "1.3.7",
41-
"@ionic/cli-plugin-ionic-angular": "1.3.0",
41+
"@ionic/cli-plugin-ionic-angular": "1.3.1",
4242
"typescript": "~2.3.3"
4343
},
4444
"cordovaPlugins": [

‎src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,9 @@ export class MyApp {
3939
{ title: 'Ionic Native Features', component: 'IonicNativePage', active: false, icon: 'ionic' },
4040
{ title: 'Login', component: 'LoginListPage', active: false, icon: 'archive' },
4141
{ title: 'Lists', component: 'ListPage', active: false, icon: 'body' },
42-
{ title: 'Popup Modal', component: 'PopupModalsPage', active: false, icon: 'basket' },
4342
{ title: 'Miscellaneous', component: 'MiscellaneousListPage', active: false, icon: 'bookmarks' },
43+
{ title: 'Popup Fab', component: 'PopupFabPage', active: false, icon: 'map' },
44+
{ title: 'Popup Modal', component: 'PopupModalsPage', active: false, icon: 'basket' },
4445
{ title: 'Popup Menu', component: 'PopupMenuListPage', active: false, icon: 'beer' },
4546
{ title: 'Profile', component: 'ProfileListPage', active: false, icon: 'camera' },
4647
{ title: 'Side Menu', component: 'SideMenuPage', active: false, icon: 'bookmark' },

‎src/pages/_home/home.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ <h3>Advanced Ionic 2 Components</h3>
1717
which are really great.
1818
</p>
1919
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
20+
2021
</ion-content>
2122

2223
<!--<sliding-drawer [options]="drawerOptions">

‎src/pages/_home/home.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Component } from '@angular/core';
2-
import { NavController, IonicPage } from 'ionic-angular';
2+
import { IonicPage, NavController } from 'ionic-angular';
33

44
@IonicPage()
55
@Component({
66
selector: 'page-home',
77
templateUrl: 'home.html'
88
})
99
export class HomePage {
10+
1011
drawerOptions: any;
1112
constructor(public navCtrl: NavController) {
1213
this.drawerOptions = {
@@ -16,7 +17,4 @@ export class HomePage {
1617
bounceBack: true
1718
};
1819
}
19-
20-
ionViewDidLoad() {
21-
}
2220
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<ion-header no-border>
2+
<ion-navbar transparent>
3+
<ion-buttons right>
4+
<button ion-button (click)="dismiss(false)">
5+
<ion-icon name="close"></ion-icon>
6+
</button>
7+
</ion-buttons>
8+
</ion-navbar>
9+
</ion-header>
10+
<ion-content fullscreen>
11+
<ion-slides pager>
12+
<ion-slide>
13+
Slide 1
14+
</ion-slide>
15+
<ion-slide>
16+
Slide 2
17+
</ion-slide>
18+
</ion-slides>
19+
</ion-content>

‎src/pages/popup-fab/popup-fab-modal/popup-fab-modal.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 { PopupFabModalPage } from './popup-fab-modal';
4+
5+
@NgModule({
6+
declarations: [
7+
PopupFabModalPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(PopupFabModalPage),
11+
],
12+
exports: [
13+
PopupFabModalPage
14+
]
15+
})
16+
export class PopupFabModalPageModule {}

‎src/pages/popup-fab/popup-fab-modal/popup-fab-modal.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
page-popup-fab-modal {
2+
animation: fade-in .8s ease-in-out;
3+
@keyframes fade-in {
4+
0% { opacity: 0; }
5+
100% { opacity: 1; }
6+
}
7+
8+
.scroll-content {
9+
background: #00ccb2;
10+
}
11+
12+
ion-icon, div {
13+
color: white;
14+
font-weight: bold;
15+
}
16+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-popup-fab-modal',
7+
templateUrl: 'popup-fab-modal.html',
8+
})
9+
export class PopupFabModalPage {
10+
11+
constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams) { }
12+
13+
dismiss() {
14+
this.viewCtrl.dismiss();
15+
}
16+
}

‎src/pages/popup-fab/popup-fab.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+
<button ion-button menuToggle>
4+
<ion-icon name="menu"></ion-icon>
5+
</button>
6+
<ion-title>Popup Fab</ion-title>
7+
</ion-navbar>
8+
</ion-header>
9+
10+
<ion-content padding>
11+
<ion-card padding>
12+
<img src="assets/img/lists/wishlist-4.jpg">
13+
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h2>
14+
<h4>Let's take a look</h4>
15+
</ion-card>
16+
<ion-fab right bottom middle>
17+
<button class="pop-in"
18+
[ngClass]="{ 'expand' : expanded, 'contract': contracted }"
19+
ion-fab mini
20+
(click)="expand()">
21+
<ion-icon [hidden]="!showIcon" name="ios-arrow-forward"></ion-icon>
22+
</button>
23+
</ion-fab>
24+
25+
</ion-content>

‎src/pages/popup-fab/popup-fab.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 { PopupFabPage } from './popup-fab';
4+
5+
@NgModule({
6+
declarations: [
7+
PopupFabPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(PopupFabPage),
11+
],
12+
exports: [
13+
PopupFabPage
14+
]
15+
})
16+
export class PopupFabPageModule {}

‎src/pages/popup-fab/popup-fab.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
page-popup-fab {
2+
3+
.preload {
4+
animation: none !important;
5+
}
6+
7+
.fab {
8+
transition: 1s all ease;
9+
margin-top: 20rem !important;
10+
margin-right: 3rem !important;
11+
background: #00ccb2;
12+
}
13+
14+
.expand {
15+
animation: expand 0.5s cubic-bezier(.66, .35,.96,.38) forwards;
16+
}
17+
18+
.contract {
19+
animation: contract 0.4s cubic-bezier(0.75, .80, 0.25, 0) forwards;
20+
}
21+
22+
.scroll-content {
23+
background: #82e850;
24+
}
25+
26+
@keyframes contract {
27+
0% {
28+
transform: scale(100);
29+
border-radius: 100%;
30+
margin: 0;
31+
}
32+
100% {
33+
transform: scale(1);
34+
}
35+
}
36+
37+
@keyframes expand {
38+
50% {
39+
transform: scale(100);
40+
}
41+
100% {
42+
transform: scale(100);
43+
border-radius: 100%;
44+
margin: 0;
45+
}
46+
}
47+
48+
ion-card {
49+
position: relative;
50+
height: 80vh;
51+
52+
h4 {
53+
left: 5%;
54+
bottom: 3%;
55+
position: absolute;
56+
}
57+
}
58+
59+
ion-icon {
60+
transition: display 1s ease-in;
61+
}
62+
63+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, ModalController, NavController, NavParams } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-popup-fab',
7+
templateUrl: 'popup-fab.html',
8+
})
9+
export class PopupFabPage {
10+
11+
expanded: any;
12+
contracted: any;
13+
showIcon = true;
14+
preload = true;
15+
16+
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams: NavParams) {
17+
}
18+
19+
expand(){
20+
this.expanded = true;
21+
this.contracted = !this.expanded;
22+
this.showIcon = false;
23+
setTimeout( () => {
24+
let modal = this.modalCtrl.create('PopupFabModalPage');
25+
modal.onDidDismiss(data => {
26+
this.expanded = false;
27+
this.contracted = !this.expanded;
28+
setTimeout(() => this.showIcon = true, 330);
29+
});
30+
modal.present();
31+
}, 200);
32+
}
33+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ page-popup-modal {
2424
}
2525
}
2626

27-
ion-modal {
27+
ion-modal.inset-modal {
2828
// transparent black background overlay
2929
background-color: rgba(0, 0, 0, .5) !important;
3030
transition: opacity .25s ease-in-out;

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,21 @@ import { NavController, ModalController, IonicPage } from 'ionic-angular';
88
})
99
export class PopupModalsPage {
1010
rootPage: any;
11-
items: Array<{ title: string, page: any }>;
1211

13-
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
14-
15-
}
12+
constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
1613

1714
openHintModal() {
18-
let myModal = this.modalCtrl.create('HintModalPage');
15+
let myModal = this.modalCtrl.create('HintModalPage', null, { cssClass: 'inset-modal'});
1916
myModal.present();
2017
}
2118

2219
openWalkthroughModal() {
23-
let myModal = this.modalCtrl.create('WalkthroughModalPage');
20+
let myModal = this.modalCtrl.create('WalkthroughModalPage', null, { cssClass: 'inset-modal'});
2421
myModal.present();
2522
}
2623

2724
openSignupModal() {
28-
let myModal = this.modalCtrl.create('SignupModalPage');
25+
let myModal = this.modalCtrl.create('SignupModalPage', null, { cssClass: 'inset-modal'});
2926
myModal.present();
3027
}
3128
}

0 commit comments

Comments
 (0)