Skip to content

Commit e2d2f7c

Browse files
yannbfyannbf
authored
Merge pull request yannbf#28 from yannbf/enhancement/popup-menu
feat(): add badge counter and update component style
2 parents 75920dc + 0aef981 commit e2d2f7c

File tree

2 files changed

+35
-19
lines changed

2 files changed

+35
-19
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<div class="popup-menu-panel" [ngClass]="{'in': menu_is_open}">
1212
<div class="popup-menu-item" (click)="goToHome()">
1313
<ion-icon name="home"></ion-icon>
14+
<ion-badge>25</ion-badge>
1415
<span>HOME</span>
1516
</div>
1617
<div class="popup-menu-item" (click)="goToCups()">
@@ -19,6 +20,7 @@
1920
</div>
2021
<div class="popup-menu-item" (click)="goToLeaderboard()">
2122
<ion-icon name="podium"></ion-icon>
23+
<ion-badge>10</ion-badge>
2224
<span>LEADERBOARD</span>
2325
</div>
2426
<div class="popup-menu-item" (click)="goToHelp()">
@@ -27,10 +29,12 @@
2729
</div>
2830
<div class="popup-menu-item" (click)="goToAccount()">
2931
<ion-icon name="person"></ion-icon>
32+
<ion-badge>5</ion-badge>
3033
<span>ACCOUNT</span>
3134
</div>
3235
<div class="popup-menu-item" (click)="goToShop()">
3336
<ion-icon name="cart"></ion-icon>
37+
<ion-badge>25</ion-badge>
3438
<span>SHOP</span>
3539
</div>
3640
</div>

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

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
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+
}
12+
213
.popup-menu ion-icon {
314
text-align: center;
415
color: white;
@@ -10,7 +21,7 @@ page-popup-menu-one {
1021
left: 0px;
1122
right: 0px;
1223
bottom: 0px;
13-
z-index: 6;
24+
z-index: 100;
1425
opacity: 0;
1526
visibility: hidden;
1627
-webkit-transition: all 0.15s ease-in-out;
@@ -26,18 +37,18 @@ page-popup-menu-one {
2637
position: fixed;
2738
width: 40px;
2839
height: 40px;
29-
bottom: 20px;
40+
bottom: 10px;
3041
left: 50%;
3142
margin-left: -20px;
32-
background-color: #886aea;
33-
border: 1px solid #5227e1;
34-
z-index: 7;
35-
-webkit-transition: all 0.35s ease-in-out;
36-
transition: all 0.35s ease-in-out;
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;
3748
}
3849
.popup-menu-toggle:before {
3950
position: absolute;
40-
content: '\f30c';
51+
content: '\f10a';
4152
font-family: "Ionicons";
4253
width: 40px;
4354
height: 40px;
@@ -48,8 +59,8 @@ page-popup-menu-one {
4859
font-size: 28px;
4960
color: white;
5061
opacity: 1;
51-
-webkit-transition: all 0.35s ease-in-out;
52-
transition: all 0.35s ease-in-out;
62+
-webkit-transition: all 0.25s ease-in-out;
63+
transition: all 0.25s ease-in-out;
5364
-webkit-transform-origin: 100% 100%;
5465
transform-origin: 100% 100%;
5566
-webkit-transform: scale(1);
@@ -72,15 +83,16 @@ page-popup-menu-one {
7283
.popup-menu-panel {
7384
position: fixed;
7485
width: 300px;
75-
height: 200px;
86+
height: 180px;
87+
border-radius: 5%;
7688
bottom: 20px;
7789
left: 50%;
7890
margin-left: -150px;
7991
padding: 0px 5px;
80-
background-color: #886aea;
81-
z-index: 8;
82-
-webkit-transition: all 0.35s ease-in-out;
83-
transition: all 0.35s ease-in-out;
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;
8496
-webkit-transition-delay: 0.15s;
8597
transition-delay: 0.15s;
8698
-webkit-transform-origin: 50% 100%;
@@ -121,8 +133,8 @@ page-popup-menu-one {
121133
-webkit-transform: scale(0);
122134
transform: scale(0);
123135
opacity: 0;
124-
-webkit-transition: all 0.35s ease-in-out;
125-
transition: all 0.35s ease-in-out;
136+
-webkit-transition: all 0.25s ease-in-out;
137+
transition: all 0.25s ease-in-out;
126138
}
127139
.popup-menu-panel .popup-menu-item i {
128140
margin: auto 0px 5px 0px;
@@ -143,12 +155,12 @@ page-popup-menu-one {
143155
line-height: 11px;
144156
}
145157
.popup-menu-panel .popup-menu-item:active i {
146-
color: gold;
158+
color: rgb(221,65,53);
147159
-webkit-transition: all 0.15s;
148160
transition: all 0.15s;
149161
}
150162
.popup-menu-panel .popup-menu-item:active span {
151-
color: gold;
163+
color: rgb(221,65,53);
152164
-webkit-transition: all 0.15s;
153165
transition: all 0.15s;
154166
}

0 commit comments

Comments
 (0)