From bc3aa2169520536c9fc1ca7a6f0dc90ffe1b744a Mon Sep 17 00:00:00 2001 From: Abdelaziz Bennouna Date: Tue, 5 Feb 2019 21:51:15 +0100 Subject: [PATCH] fix(popover): originate animation from right in RTL/MD (#17381) --- core/src/components/popover/animations/md.enter.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts index e667f83cd5..554ad308e4 100644 --- a/core/src/components/popover/animations/md.enter.ts +++ b/core/src/components/popover/animations/md.enter.ts @@ -4,8 +4,10 @@ import { Animation } from '../../../interface'; * Md Popover Enter Animation */ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev?: Event): Promise { + const isRTL = document.dir === 'rtl'; + let originY = 'top'; - let originX = 'left'; + let originX = isRTL ? 'right' : 'left'; const contentEl = baseEl.querySelector('.popover-content') as HTMLElement; const contentDimentions = contentEl.getBoundingClientRect(); @@ -24,7 +26,6 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev? ? targetDim.top : bodyHeight / 2 - contentHeight / 2; - const isRTL = document.dir === 'rtl'; const targetLeft = targetDim != null && 'left' in targetDim ? isRTL @@ -49,7 +50,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev? bodyWidth ) { popoverCSS.left = bodyWidth - contentWidth - POPOVER_MD_BODY_PADDING; - originX = 'right'; + originX = isRTL ? 'left' : 'right'; } // If the popover when popped down stretches past bottom of screen,