Skip to content

Commit 57a1274

Browse files
brandyscarneybrandyscarney
committed
feat(popover): modify the animation for each mode
add another wrapper div to fix the arrow not animating at the same time. references #5420
1 parent ff1680c commit 57a1274

File tree

8 files changed

+68
-68
lines changed

8 files changed

+68
-68
lines changed

‎src/animations/animation.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export class Animation {
156156
wc: ''
157157
};
158158

159-
// add the will-change property fo transforms or opacity
159+
// add the will-change property for transforms or opacity
160160
if (fxProp.trans) {
161161
fxProp.wc = CSS.transform;
162162

‎src/components/alert/alert.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ export class Alert extends ViewController {
273273
* | cssClass | `string` | Any additional class for the alert (optional) |
274274
* | inputs | `array` | An array of inputs for the alert. See input options. (optional) |
275275
* | buttons | `array` | An array of buttons for the alert. See buttons options. (optional) |
276-
* | enableBackdropDismiss | `boolean` | Wheather the alert should be dismissed by tapping the backdrop (optional) |
276+
* | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop (optional) |
277277
*
278278
*
279279
* Input options

‎src/components/popover/popover.ios.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ $popover-ios-max-height: 90% !default;
1010
$popover-ios-border-radius: 10px !default;
1111
$popover-ios-text-color: #000 !default;
1212

13-
$popover-ios-background: #f3f3f3 !default;
13+
$popover-ios-background: #fff !default;
1414
$popover-ios-item-background: $popover-ios-background !default;
1515
$popover-ios-arrow-background: $popover-ios-background !default;
1616

1717

18-
.popover-wrapper {
18+
.popover-content {
1919
min-width: $popover-ios-min-width;
2020
max-width: $popover-ios-max-width;
2121

@@ -26,7 +26,7 @@ $popover-ios-arrow-background: $popover-ios-background !default;
2626
background: $popover-ios-background;
2727
}
2828

29-
.popover-wrapper .item {
29+
.popover-content .item {
3030
background-color: $popover-ios-item-background;
3131
}
3232

‎src/components/popover/popover.md.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,26 @@ $popover-md-min-width: 200px !default;
88
$popover-md-max-width: 270px !default;
99
$popover-md-max-height: 90% !default;
1010
$popover-md-border-radius: 2px !default;
11+
$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default;
12+
$popover-md-box-shadow: 0px 3px 12px 2px $alert-md-box-shadow-color !default;
1113
$popover-md-text-color: #000 !default;
1214

1315
$popover-md-background: #fafafa !default;
1416
$popover-md-item-background: $popover-md-background !default;
1517

1618

17-
.popover-wrapper {
19+
.popover-content {
1820
min-width: $popover-md-min-width;
1921
max-width: $popover-md-max-width;
2022

2123
max-height: $popover-md-max-height;
2224

25+
box-shadow: $popover-md-box-shadow;
2326
border-radius: $popover-md-border-radius;
2427
color: $popover-md-text-color;
2528
background: $popover-md-background;
2629
}
2730

28-
.popover-wrapper .item {
31+
.popover-content .item {
2932
background-color: $popover-md-item-background;
3033
}

‎src/components/popover/popover.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,14 @@ ion-popover {
2222
}
2323

2424
.popover-wrapper {
25-
position: absolute;
25+
opacity: 0;
26+
z-index: $z-index-overlay-wrapper;
27+
}
2628

29+
.popover-content {
30+
position: absolute;
2731
z-index: $z-index-overlay-wrapper;
32+
2833
display: flex;
2934

3035
overflow: hidden;
@@ -37,8 +42,6 @@ ion-popover {
3742
height: $popover-height;
3843
max-height: $popover-height;
3944

40-
opacity: 0;
41-
4245
ion-page {
4346
display: flex;
4447
overflow: auto;

‎src/components/popover/popover.ts

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,11 @@ export class Popover extends ViewController {
5252
* |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
5353
* | cssClass |`string` | An additional class for custom styles. |
5454
* | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
55-
* | enableBackdropDismiss |`boolean` | Wheather the popover should be dismissed by tapping the backdrop. Default true. |
55+
* | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. |
5656
*
5757
*
58-
* @param {object} data Any data to pass to the popover view
58+
* @param {object} componentType The Popover
59+
* @param {object} data Any data to pass to the Popover view
5960
* @param {object} opts Popover options
6061
*/
6162
static create(componentType, data = {}, opts: PopoverOptions = {}) {
@@ -71,9 +72,11 @@ export class Popover extends ViewController {
7172
selector: 'ion-popover',
7273
template:
7374
'<div disable-activated class="backdrop" (click)="bdClick()" [class.hide-backdrop]="!d.showBackdrop"></div>' +
74-
'<div class="popover-arrow"></div>' +
7575
'<div class="popover-wrapper">' +
76-
'<div #viewport></div>' +
76+
'<div class="popover-arrow"></div>' +
77+
'<div class="popover-content">' +
78+
'<div #viewport></div>' +
79+
'</div>' +
7780
'</div>'
7881
})
7982
class PopoverCmp {
@@ -148,8 +151,8 @@ class PopoverTransition extends Transition {
148151
}
149152

150153
positionView(nativeEle: HTMLElement, ev) {
151-
// Popover wrapper width and height
152-
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');
154+
// Popover content width and height
155+
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
153156
let popoverDim = popoverEle.getBoundingClientRect();
154157
let popoverWidth = popoverDim.width;
155158
let popoverHeight = popoverDim.height;
@@ -216,18 +219,16 @@ class PopoverPopIn extends PopoverTransition {
216219
this.positionView(ele, opts.ev);
217220

218221
let backdrop = new Animation(ele.querySelector('.backdrop'));
219-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
220222
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
221223

222-
arrow.fromTo('opacity', '0.01', '1');
223-
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
224-
backdrop.fromTo('opacity', '0.01', '0.3');
224+
wrapper.fromTo('opacity', '0.01', '1');
225+
backdrop.fromTo('opacity', '0.01', '0.1');
225226

226227
this
227-
.easing('ease-in-out')
228-
.duration(200)
228+
.easing('ease')
229+
.duration(100)
230+
.before.addClass('show-page')
229231
.add(backdrop)
230-
.add(arrow)
231232
.add(wrapper);
232233
}
233234
}
@@ -240,18 +241,15 @@ class PopoverPopOut extends PopoverTransition {
240241

241242
let ele = leavingView.pageRef().nativeElement;
242243
let backdrop = new Animation(ele.querySelector('.backdrop'));
243-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
244244
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
245245

246-
arrow.fromTo('opacity', '1', '0');
247-
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
248-
backdrop.fromTo('opacity', '0.3', '0');
246+
wrapper.fromTo('opacity', '1', '0');
247+
backdrop.fromTo('opacity', '0.1', '0');
249248

250249
this
251-
.easing('ease-in-out')
252-
.duration(200)
250+
.easing('ease')
251+
.duration(500)
253252
.add(backdrop)
254-
.add(arrow)
255253
.add(wrapper);
256254
}
257255
}
@@ -266,19 +264,17 @@ class PopoverMdPopIn extends PopoverTransition {
266264
this.positionView(ele, opts.ev);
267265

268266
let backdrop = new Animation(ele.querySelector('.backdrop'));
269-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
270267
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
271268

272-
arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
273-
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
274-
backdrop.fromTo('opacity', '0.01', '0.5');
269+
wrapper.fromTo('opacity', '0.01', '1');
270+
backdrop.fromTo('opacity', '0', '0');
275271

276272
this
277-
.easing('ease-in-out')
278-
.duration(200)
273+
.easing('ease')
274+
.duration(100)
275+
.fadeIn()
279276
.add(backdrop)
280-
.add(wrapper)
281-
.add(arrow);
277+
.add(wrapper);
282278
}
283279
}
284280
Transition.register('popover-md-pop-in', PopoverMdPopIn);
@@ -290,19 +286,17 @@ class PopoverMdPopOut extends PopoverTransition {
290286

291287
let ele = leavingView.pageRef().nativeElement;
292288
let backdrop = new Animation(ele.querySelector('.backdrop'));
293-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
294289
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
295290

296-
arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
297-
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
298-
backdrop.fromTo('opacity', '0.5', '0');
291+
wrapper.fromTo('opacity', '1', '0');
292+
backdrop.fromTo('opacity', '0', '0');
299293

300294
this
301-
.easing('ease-in-out')
302-
.duration(200)
295+
.easing('ease')
296+
.duration(500)
297+
.fadeIn()
303298
.add(backdrop)
304-
.add(wrapper)
305-
.add(arrow);
299+
.add(wrapper);
306300
}
307301
}
308302
Transition.register('popover-md-pop-out', PopoverMdPopOut);
@@ -317,19 +311,17 @@ class PopoverWpPopIn extends PopoverTransition {
317311
this.positionView(ele, opts.ev);
318312

319313
let backdrop = new Animation(ele.querySelector('.backdrop'));
320-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
321314
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
322315

323-
arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
324-
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
316+
wrapper.fromTo('opacity', '0.01', '1');
325317
backdrop.fromTo('opacity', '0.01', '0.5');
326318

327319
this
328-
.easing('cubic-bezier(0,0 0.05,1)')
329-
.duration(200)
320+
.easing('ease')
321+
.duration(100)
322+
.fadeIn()
330323
.add(backdrop)
331-
.add(wrapper)
332-
.add(arrow);
324+
.add(wrapper);
333325
}
334326
}
335327
Transition.register('popover-wp-pop-in', PopoverWpPopIn);
@@ -341,19 +333,17 @@ class PopoverWpPopOut extends PopoverTransition {
341333

342334
let ele = leavingView.pageRef().nativeElement;
343335
let backdrop = new Animation(ele.querySelector('.backdrop'));
344-
let arrow = new Animation(ele.querySelector('.popover-arrow'));
345336
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
346337

347-
arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
348-
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
338+
wrapper.fromTo('opacity', '1', '0');
349339
backdrop.fromTo('opacity', '0.5', '0');
350340

351341
this
352-
.easing('ease-out')
353-
.duration(150)
342+
.easing('ease')
343+
.duration(500)
344+
.fadeIn()
354345
.add(backdrop)
355-
.add(wrapper)
356-
.add(arrow);
346+
.add(wrapper);
357347
}
358348
}
359349
Transition.register('popover-wp-pop-out', PopoverWpPopOut);

‎src/components/popover/popover.wp.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ $popover-wp-max-height: 90% !default;
1010
$popover-wp-border-radius: 2px !default;
1111
$popover-wp-text-color: #000 !default;
1212

13-
$popover-wp-background: #e6e6e6 !default;
13+
$popover-wp-background: #f2f2f2 !default;
1414
$popover-wp-item-background: $popover-wp-background !default;
1515

1616

17-
.popover-wrapper {
17+
.popover-content {
1818
min-width: $popover-wp-min-width;
1919
max-width: $popover-wp-max-width;
2020

@@ -25,6 +25,6 @@ $popover-wp-item-background: $popover-wp-background !default;
2525
background: $popover-wp-background;
2626
}
2727

28-
.popover-wrapper .item {
28+
.popover-content .item {
2929
background-color: $popover-wp-item-background;
3030
}

‎src/components/popover/test/basic/index.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {ViewChild, ElementRef} from '@angular/core';
2-
import {App, Page, Popover, NavController, Content, NavParams} from '../../../../../src';
2+
import {App, Page, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src';
33

44

55
@Page({
@@ -137,15 +137,19 @@ class PopoverRadioPage {
137137
template: `
138138
<ion-list>
139139
<ion-list-header>Ionic</ion-list-header>
140-
<button ion-item>Learn Ionic</button>
141-
<button ion-item>Documentation</button>
142-
<button ion-item>Showcase</button>
143-
<button ion-item>GitHub Repo</button>
140+
<button ion-item (click)="close()">Learn Ionic</button>
141+
<button ion-item (click)="close()">Documentation</button>
142+
<button ion-item (click)="close()">Showcase</button>
143+
<button ion-item (click)="close()">GitHub Repo</button>
144144
</ion-list>
145145
`
146146
})
147147
class PopoverListPage {
148+
constructor(private viewCtrl: ViewController) {}
148149

150+
close() {
151+
this.viewCtrl.dismiss();
152+
}
149153
}
150154

151155

0 commit comments

Comments
 (0)