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): fix MD animations and start from the right side

Browse Source 
references #5420
This commit is contained in:
Brandy Carney
2016-05-27 11:35:41 -04:00
parent 60f02ce04d
commit e419ec61d2
2 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,14 +3,14 @@
// Material Design Popover
// --------------------------------------------------
$popover-md-width: 200px !default;
$popover-md-width: 250px !default;
$popover-md-max-height: 90% !default;
$popover-md-border-radius: 2px !default;
$popover-md-text-color: #000 !default;
$popover-md-background: #fafafa !default;
$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default;
$popover-md-box-shadow: 0 3px 12px 2px $alert-md-box-shadow-color !default;
$popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-color !default;
$popover-md-item-background: $popover-md-background !default;
@@ -24,6 +24,8 @@ $popover-md-item-background: $popover-md-background !default;
min-height: 0;
max-height: $popover-md-max-height;
transform-origin: top left;
border-radius: $popover-md-border-radius;
color: $popover-md-text-color;
background: $popover-md-background;

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

@@ -242,6 +242,9 @@ class PopoverTransition extends Transition {
positionView(nativeEle: HTMLElement, ev) {
let originY = 'top';
let originX = 'left';
// Popover content width and height
let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
let popoverDim = popoverEle.getBoundingClientRect();
@@ -289,6 +292,7 @@ class PopoverTransition extends Transition {
popoverCSS.left = POPOVER_BODY_PADDING;
} else if (popoverWidth + POPOVER_BODY_PADDING + popoverCSS.left > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_BODY_PADDING;
originX = 'right';
}
// If the popover when popped down stretches past bottom of screen,
@@ -297,6 +301,7 @@ class PopoverTransition extends Transition {
arrowCSS.top = targetTop - (arrowHeight + 1);
popoverCSS.top = targetTop - popoverHeight - (arrowHeight - 1);
nativeEle.className = nativeEle.className + ' popover-bottom';
originY = 'bottom';
// If there isn't room for it to pop up above the target cut it off
} else if (targetTop + targetHeight + popoverHeight > bodyHeight) {
popoverEle.style.bottom = POPOVER_BODY_PADDING + '%';
@@ -307,6 +312,8 @@ class PopoverTransition extends Transition {
popoverEle.style.top = popoverCSS.top + 'px';
popoverEle.style.left = popoverCSS.left + 'px';
popoverEle.style.transformOrigin = originY + " " + originX;
}
}
@@ -370,12 +377,11 @@ class PopoverMdPopIn extends PopoverTransition {
let content = new Animation(ele.querySelector('.popover-content'));
let viewport = new Animation(ele.querySelector('.popover-viewport'));
content.fromTo('maxWidth', '0%', '90%');
content.fromTo('maxHeight', '0%', '90%');
content.fromTo('scale', '0', '1');
viewport.fromTo('opacity', '0', '1');
this
.easing('ease')
.easing('cubic-bezier(.55,0,.55,.2)')
.duration(500)
.add(content)
.add(viewport);