From 0d7497abe046389422bdcbc61aeedaef515a4f13 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 16 Feb 2024 12:52:47 -0600 Subject: [PATCH 01/11] fix(popover): adjust position to account for approximate safe area --- .../popover/animations/ios.enter.ts | 18 +----- .../components/popover/animations/md.enter.ts | 1 - .../popover/test/adjustment/index.html | 37 ++++++++++++- core/src/components/popover/utils.ts | 55 +++++++++++++++++-- 4 files changed, 86 insertions(+), 25 deletions(-) diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts index aa4e0568143..e1e81237882 100644 --- a/core/src/components/popover/animations/ios.enter.ts +++ b/core/src/components/popover/animations/ios.enter.ts @@ -53,7 +53,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => ); const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING; - const margin = size === 'cover' ? 0 : 25; const { originX, @@ -61,8 +60,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => top, left, bottom, - checkSafeAreaLeft, - checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, @@ -75,7 +72,6 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => bodyHeight, contentWidth, contentHeight, - margin, results.originX, results.originY, results.referenceCoordinates, @@ -122,20 +118,8 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => contentEl.style.setProperty('bottom', `${bottom}px`); } - const safeAreaLeft = ' + var(--ion-safe-area-left, 0)'; - const safeAreaRight = ' - var(--ion-safe-area-right, 0)'; - - let leftValue = `${left}px`; - - if (checkSafeAreaLeft) { - leftValue = `${left}px${safeAreaLeft}`; - } - if (checkSafeAreaRight) { - leftValue = `${left}px${safeAreaRight}`; - } - contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`); - contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`); + contentEl.style.setProperty('left', `calc(${left}px + var(--offset-x, 0))`); contentEl.style.setProperty('transform-origin', `${originY} ${originX}`); if (arrowEl !== null) { diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts index e25f745cec4..51c5ab7c389 100644 --- a/core/src/components/popover/animations/md.enter.ts +++ b/core/src/components/popover/animations/md.enter.ts @@ -56,7 +56,6 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => bodyHeight, contentWidth, contentHeight, - 0, results.originX, results.originY, results.referenceCoordinates diff --git a/core/src/components/popover/test/adjustment/index.html b/core/src/components/popover/test/adjustment/index.html index 78d8dc105a6..a8dbc76a4bb 100644 --- a/core/src/components/popover/test/adjustment/index.html +++ b/core/src/components/popover/test/adjustment/index.html @@ -16,18 +16,43 @@ import { popoverController } from '../../../../dist/ionic/index.esm.js'; window.popoverController = popoverController; + + -

Click everywhere to open the popover.

+
+

Click everywhere to open the popover.

+ Show Safe Area Approximation +
+ +
+ + -

Click everywhere to open the popover.

+
+

Click everywhere to open the popover.

+ Show Safe Area Approximation +
+ +