Skip to content

Commit 43c492c

Browse files
yannbfyannbf
committed
feat(popup-menu): Add popup menu two page
1 parent e2d2f7c commit 43c492c

File tree

8 files changed

+313
-39
lines changed

8 files changed

+313
-39
lines changed

‎src/pages/popup-menu/popup-menu-one/popup-menu-one.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@
66

77
<ion-content padding>
88
<div class="popup-menu">
9-
<div class="popup-menu-overlay" [ngClass]="{'in': menu_is_open}" (click)="togglePopupMenu()"></div>
10-
<div class="popup-menu-toggle" (click)="togglePopupMenu()" [ngClass]="{'out': menu_is_open}"></div>
11-
<div class="popup-menu-panel" [ngClass]="{'in': menu_is_open}">
9+
<div class="popup-menu-overlay" [ngClass]="{'in': openMenu}" (click)="togglePopupMenu()"></div>
10+
<div class="popup-menu-toggle" (click)="togglePopupMenu()" [ngClass]="{'out': openMenu}"></div>
11+
<div class="popup-menu-panel" [ngClass]="{'in': openMenu}">
1212
<div class="popup-menu-item" (click)="goToHome()">
1313
<ion-icon name="home"></ion-icon>
14-
<ion-badge>25</ion-badge>
1514
<span>HOME</span>
1615
</div>
1716
<div class="popup-menu-item" (click)="goToCups()">
@@ -20,7 +19,6 @@
2019
</div>
2120
<div class="popup-menu-item" (click)="goToLeaderboard()">
2221
<ion-icon name="podium"></ion-icon>
23-
<ion-badge>10</ion-badge>
2422
<span>LEADERBOARD</span>
2523
</div>
2624
<div class="popup-menu-item" (click)="goToHelp()">
@@ -29,12 +27,10 @@
2927
</div>
3028
<div class="popup-menu-item" (click)="goToAccount()">
3129
<ion-icon name="person"></ion-icon>
32-
<ion-badge>5</ion-badge>
3330
<span>ACCOUNT</span>
3431
</div>
3532
<div class="popup-menu-item" (click)="goToShop()">
3633
<ion-icon name="cart"></ion-icon>
37-
<ion-badge>25</ion-badge>
3834
<span>SHOP</span>
3935
</div>
4036
</div>

‎src/pages/popup-menu/popup-menu-one/popup-menu-one.scss

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
11
page-popup-menu-one {
2-
ion-badge{
3-
right: calc(50% - 30px) !important;
4-
top: -5px;
5-
position: absolute;
6-
right: 4%;
7-
padding: 1px 6px;
8-
height: auto;
9-
font-size: 12px;
10-
line-height: 16px;
11-
}
122

133
.popup-menu ion-icon {
144
text-align: center;
@@ -21,7 +11,7 @@ page-popup-menu-one {
2111
left: 0px;
2212
right: 0px;
2313
bottom: 0px;
24-
z-index: 100;
14+
z-index: 6;
2515
opacity: 0;
2616
visibility: hidden;
2717
-webkit-transition: all 0.15s ease-in-out;
@@ -37,18 +27,18 @@ page-popup-menu-one {
3727
position: fixed;
3828
width: 40px;
3929
height: 40px;
40-
bottom: 10px;
30+
bottom: 20px;
4131
left: 50%;
4232
margin-left: -20px;
43-
background-color: rgb(15,157,88);
44-
border-radius: 50%;
45-
z-index: 101;
46-
-webkit-transition: all 0.25s ease-in-out;
47-
transition: all 0.25s ease-in-out;
33+
background-color: #886aea;
34+
border: 1px solid #5227e1;
35+
z-index: 7;
36+
-webkit-transition: all 0.35s ease-in-out;
37+
transition: all 0.35s ease-in-out;
4838
}
4939
.popup-menu-toggle:before {
5040
position: absolute;
51-
content: '\f10a';
41+
content: '\f30c';
5242
font-family: "Ionicons";
5343
width: 40px;
5444
height: 40px;
@@ -59,8 +49,8 @@ page-popup-menu-one {
5949
font-size: 28px;
6050
color: white;
6151
opacity: 1;
62-
-webkit-transition: all 0.25s ease-in-out;
63-
transition: all 0.25s ease-in-out;
52+
-webkit-transition: all 0.35s ease-in-out;
53+
transition: all 0.35s ease-in-out;
6454
-webkit-transform-origin: 100% 100%;
6555
transform-origin: 100% 100%;
6656
-webkit-transform: scale(1);
@@ -83,16 +73,15 @@ page-popup-menu-one {
8373
.popup-menu-panel {
8474
position: fixed;
8575
width: 300px;
86-
height: 180px;
87-
border-radius: 5%;
76+
height: 200px;
8877
bottom: 20px;
8978
left: 50%;
9079
margin-left: -150px;
9180
padding: 0px 5px;
92-
background-color: rgb(15,157,88);
93-
z-index: 102;
94-
-webkit-transition: all 0.25s ease-in-out;
95-
transition: all 0.25s ease-in-out;
81+
background-color: #886aea;
82+
z-index: 8;
83+
-webkit-transition: all 0.35s ease-in-out;
84+
transition: all 0.35s ease-in-out;
9685
-webkit-transition-delay: 0.15s;
9786
transition-delay: 0.15s;
9887
-webkit-transform-origin: 50% 100%;
@@ -133,8 +122,8 @@ page-popup-menu-one {
133122
-webkit-transform: scale(0);
134123
transform: scale(0);
135124
opacity: 0;
136-
-webkit-transition: all 0.25s ease-in-out;
137-
transition: all 0.25s ease-in-out;
125+
-webkit-transition: all 0.35s ease-in-out;
126+
transition: all 0.35s ease-in-out;
138127
}
139128
.popup-menu-panel .popup-menu-item i {
140129
margin: auto 0px 5px 0px;
@@ -155,12 +144,12 @@ page-popup-menu-one {
155144
line-height: 11px;
156145
}
157146
.popup-menu-panel .popup-menu-item:active i {
158-
color: rgb(221,65,53);
147+
color: gold;
159148
-webkit-transition: all 0.15s;
160149
transition: all 0.15s;
161150
}
162151
.popup-menu-panel .popup-menu-item:active span {
163-
color: rgb(221,65,53);
152+
color: gold;
164153
-webkit-transition: all 0.15s;
165154
transition: all 0.15s;
166155
}

‎src/pages/popup-menu/popup-menu-one/popup-menu-one.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { NavController, IonicPage } from 'ionic-angular';
77
templateUrl: 'popup-menu-one.html'
88
})
99
export class PopupMenuOnePage {
10-
menu_is_open = false;
10+
openMenu = false;
1111
constructor(public navCtrl: NavController) { }
1212

1313
togglePopupMenu() {
14-
return this.menu_is_open = !this.menu_is_open;
14+
return this.openMenu = !this.openMenu;
1515
};
1616

1717
goToAccount() {

‎src/pages/popup-menu/popup-menu-two/popup-menu-two.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<ion-header>
2+
<ion-navbar>
3+
<ion-title>Popup Menu Two</ion-title>
4+
</ion-navbar>
5+
</ion-header>
6+
7+
<ion-content padding>
8+
<div class="popup-menu">
9+
<div class="popup-menu-overlay" [ngClass]="{'in': openMenu}" (click)="togglePopupMenu()"></div>
10+
<div class="popup-menu-toggle" (click)="togglePopupMenu()" [ngClass]="{'out': openMenu}"></div>
11+
<div class="popup-menu-panel" [ngClass]="{'in': openMenu}">
12+
<div class="popup-menu-item" (click)="goToHome()">
13+
<ion-icon name="home"></ion-icon>
14+
<ion-badge>25</ion-badge>
15+
<span>HOME</span>
16+
</div>
17+
<div class="popup-menu-item" (click)="goToCups()">
18+
<ion-icon name="trophy"></ion-icon>
19+
<span>CUPS</span>
20+
</div>
21+
<div class="popup-menu-item" (click)="goToLeaderboard()">
22+
<ion-icon name="podium"></ion-icon>
23+
<ion-badge>10</ion-badge>
24+
<span>LEADERBOARD</span>
25+
</div>
26+
<div class="popup-menu-item" (click)="goToHelp()">
27+
<ion-icon name="help"></ion-icon>
28+
<span>HELP</span>
29+
</div>
30+
<div class="popup-menu-item" (click)="goToAccount()">
31+
<ion-icon name="person"></ion-icon>
32+
<ion-badge>5</ion-badge>
33+
<span>ACCOUNT</span>
34+
</div>
35+
<div class="popup-menu-item" (click)="goToShop()">
36+
<ion-icon name="cart"></ion-icon>
37+
<ion-badge>25</ion-badge>
38+
<span>SHOP</span>
39+
</div>
40+
</div>
41+
</div>
42+
</ion-content>

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

0 commit comments

Comments
 (0)