javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): modify the animation for each mode

Browse Source 
add another wrapper div to fix the arrow not animating at the same time.

references #5420
This commit is contained in:
Brandy Carney
2016-05-24 16:00:23 -04:00
parent ff1680c26f
commit 57a1274b6c
8 changed files with 69 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/animations/animation.ts
View File

@@ -156,7 +156,7 @@ export class Animation {
wc: ''
};
// add the will-change property fo transforms or opacity
// add the will-change property for transforms or opacity
if (fxProp.trans) {
fxProp.wc = CSS.transform;

2
src/components/alert/alert.ts
View File

@@ -273,7 +273,7 @@ export class Alert extends ViewController {
* | cssClass | `string` | Any additional class for the alert (optional) |
* | inputs | `array` | An array of inputs for the alert. See input options. (optional) |
* | buttons | `array` | An array of buttons for the alert. See buttons options. (optional) |
* | enableBackdropDismiss | `boolean` | Wheather the alert should be dismissed by tapping the backdrop (optional) |
* | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop (optional) |
*
*
* Input options

6
src/components/popover/popover.ios.scss
View File

@@ -10,12 +10,12 @@ $popover-ios-max-height: 90% !default;
$popover-ios-border-radius: 10px !default;
$popover-ios-text-color: #000 !default;
$popover-ios-background: #f3f3f3 !default;
$popover-ios-background: #fff !default;
$popover-ios-item-background: $popover-ios-background !default;
$popover-ios-arrow-background: $popover-ios-background !default;
.popover-wrapper {
.popover-content {
min-width: $popover-ios-min-width;
max-width: $popover-ios-max-width;
@@ -26,7 +26,7 @@ $popover-ios-arrow-background: $popover-ios-background !default;
background: $popover-ios-background;
}
.popover-wrapper .item {
.popover-content .item {
background-color: $popover-ios-item-background;
}

7
src/components/popover/popover.md.scss
View File

@@ -8,23 +8,26 @@ $popover-md-min-width: 200px !default;
$popover-md-max-width: 270px !default;
$popover-md-max-height: 90% !default;
$popover-md-border-radius: 2px !default;
$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default;
$popover-md-box-shadow: 0px 3px 12px 2px $alert-md-box-shadow-color !default;
$popover-md-text-color: #000 !default;
$popover-md-background: #fafafa !default;
$popover-md-item-background: $popover-md-background !default;
.popover-wrapper {
.popover-content {
min-width: $popover-md-min-width;
max-width: $popover-md-max-width;
max-height: $popover-md-max-height;
box-shadow: $popover-md-box-shadow;
border-radius: $popover-md-border-radius;
color: $popover-md-text-color;
background: $popover-md-background;
}
.popover-wrapper .item {
.popover-content .item {
background-color: $popover-md-item-background;
}

11
src/components/popover/popover.scss
View File

@@ -22,9 +22,14 @@ ion-popover {
}
.popover-wrapper {
position: absolute;
opacity: 0;
z-index: $z-index-overlay-wrapper;
}
.popover-content {
position: absolute;
z-index: $z-index-overlay-wrapper;
display: flex;
overflow: hidden;
@@ -37,8 +42,6 @@ ion-popover {
height: $popover-height;
max-height: $popover-height;
opacity: 0;
ion-page {
display: flex;
overflow: auto;

90
src/components/popover/popover.ts
View File

@@ -52,10 +52,11 @@ export class Popover extends ViewController {
* |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
* | cssClass |`string` | An additional class for custom styles. |
* | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
* | enableBackdropDismiss |`boolean` | Wheather the popover should be dismissed by tapping the backdrop. Default true. |
* | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. |
*
*
* @param {object} data Any data to pass to the popover view
* @param {object} componentType The Popover
* @param {object} data Any data to pass to the Popover view
* @param {object} opts Popover options
*/
static create(componentType, data = {}, opts: PopoverOptions = {}) {
@@ -71,9 +72,11 @@ export class Popover extends ViewController {
selector: 'ion-popover',
template:
'<div disable-activated class="backdrop" (click)="bdClick()" [class.hide-backdrop]="!d.showBackdrop"></div>' +
'<div class="popover-arrow"></div>' +
'<div class="popover-wrapper">' +
'<div #viewport></div>' +
'<div class="popover-arrow"></div>' +
'<div class="popover-content">' +
'<div #viewport></div>' +
'</div>' +
'</div>'
})
class PopoverCmp {
@@ -148,8 +151,8 @@ class PopoverTransition extends Transition {
}
positionView(nativeEle: HTMLElement, ev) {
// Popover wrapper width and height
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');
// Popover content width and height
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
let popoverDim = popoverEle.getBoundingClientRect();
let popoverWidth = popoverDim.width;
let popoverHeight = popoverDim.height;
@@ -216,18 +219,16 @@ class PopoverPopIn extends PopoverTransition {
this.positionView(ele, opts.ev);
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '0.01', '1');
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.3');
wrapper.fromTo('opacity', '0.01', '1');
backdrop.fromTo('opacity', '0.01', '0.1');
this
.easing('ease-in-out')
.duration(200)
.easing('ease')
.duration(100)
.before.addClass('show-page')
.add(backdrop)
.add(arrow)
.add(wrapper);
}
}
@@ -240,18 +241,15 @@ class PopoverPopOut extends PopoverTransition {
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '1', '0');
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.3', '0');
wrapper.fromTo('opacity', '1', '0');
backdrop.fromTo('opacity', '0.1', '0');
this
.easing('ease-in-out')
.duration(200)
.easing('ease')
.duration(500)
.add(backdrop)
.add(arrow)
.add(wrapper);
}
}
@@ -266,19 +264,17 @@ class PopoverMdPopIn extends PopoverTransition {
this.positionView(ele, opts.ev);
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.5');
wrapper.fromTo('opacity', '0.01', '1');
backdrop.fromTo('opacity', '0', '0');
this
.easing('ease-in-out')
.duration(200)
.easing('ease')
.duration(100)
.fadeIn()
.add(backdrop)
.add(wrapper)
.add(arrow);
.add(wrapper);
}
}
Transition.register('popover-md-pop-in', PopoverMdPopIn);
@@ -290,19 +286,17 @@ class PopoverMdPopOut extends PopoverTransition {
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.5', '0');
wrapper.fromTo('opacity', '1', '0');
backdrop.fromTo('opacity', '0', '0');
this
.easing('ease-in-out')
.duration(200)
.easing('ease')
.duration(500)
.fadeIn()
.add(backdrop)
.add(wrapper)
.add(arrow);
.add(wrapper);
}
}
Transition.register('popover-md-pop-out', PopoverMdPopOut);
@@ -317,19 +311,17 @@ class PopoverWpPopIn extends PopoverTransition {
this.positionView(ele, opts.ev);
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
wrapper.fromTo('opacity', '0.01', '1');
backdrop.fromTo('opacity', '0.01', '0.5');
this
.easing('cubic-bezier(0,0 0.05,1)')
.duration(200)
.easing('ease')
.duration(100)
.fadeIn()
.add(backdrop)
.add(wrapper)
.add(arrow);
.add(wrapper);
}
}
Transition.register('popover-wp-pop-in', PopoverWpPopIn);
@@ -341,19 +333,17 @@ class PopoverWpPopOut extends PopoverTransition {
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let arrow = new Animation(ele.querySelector('.popover-arrow'));
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
arrow.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
wrapper.fromTo('opacity', '1', '0');
backdrop.fromTo('opacity', '0.5', '0');
this
.easing('ease-out')
.duration(150)
.easing('ease')
.duration(500)
.fadeIn()
.add(backdrop)
.add(wrapper)
.add(arrow);
.add(wrapper);
}
}
Transition.register('popover-wp-pop-out', PopoverWpPopOut);

6
src/components/popover/popover.wp.scss
View File

@@ -10,11 +10,11 @@ $popover-wp-max-height: 90% !default;
$popover-wp-border-radius: 2px !default;
$popover-wp-text-color: #000 !default;
$popover-wp-background: #e6e6e6 !default;
$popover-wp-background: #f2f2f2 !default;
$popover-wp-item-background: $popover-wp-background !default;
.popover-wrapper {
.popover-content {
min-width: $popover-wp-min-width;
max-width: $popover-wp-max-width;
@@ -25,6 +25,6 @@ $popover-wp-item-background: $popover-wp-background !default;
background: $popover-wp-background;
}
.popover-wrapper .item {
.popover-content .item {
background-color: $popover-wp-item-background;
}

14
src/components/popover/test/basic/index.ts
View File

@@ -1,5 +1,5 @@
import {ViewChild, ElementRef} from '@angular/core';
import {App, Page, Popover, NavController, Content, NavParams} from '../../../../../src';
import {App, Page, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src';
@Page({
@@ -137,15 +137,19 @@ class PopoverRadioPage {
template: `
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<button ion-item>Learn Ionic</button>
<button ion-item>Documentation</button>
<button ion-item>Showcase</button>
<button ion-item>GitHub Repo</button>
<button ion-item (click)="close()">Learn Ionic</button>
<button ion-item (click)="close()">Documentation</button>
<button ion-item (click)="close()">Showcase</button>
<button ion-item (click)="close()">GitHub Repo</button>
</ion-list>
`
})
class PopoverListPage {
constructor(private viewCtrl: ViewController) {}
close() {
this.viewCtrl.dismiss();
}
}