rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update super floating toolbar positioning [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-08-12 00:59:25 +05:30
parent 796e78f642
commit 2194bdaf75
4 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
View File

@@ -2,7 +2,7 @@ import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
import { isMobileScreen } from '@/Utils'
import { CSSProperties } from 'react'
import { PopoverAlignment, PopoverSide } from './Types'
import { OppositeSide, checkCollisions, getNonCollidingAlignment, getOverflows } from './Utils/Collisions'
import { OppositeSide, checkCollisions, getNonCollidingAlignment } from './Utils/Collisions'
import { getAppRect, getPopoverMaxHeight, getPositionedPopoverRect } from './Utils/Rect'
const percentOf = (percent: number, value: number) => (percent / 100) * value
@@ -122,13 +122,10 @@ export const getPositionedPopoverStyles = ({
const rectForPreferredSide = getPositionedPopoverRect(popoverRect, anchorRect, side, align)
const preferredSideRectCollisions = checkCollisions(rectForPreferredSide, documentRect)
const preferredSideOverflows = getOverflows(rectForPreferredSide, documentRect)
const oppositeSide = OppositeSide[side]
const rectForOppositeSide = getPositionedPopoverRect(popoverRect, anchorRect, oppositeSide, align)
const oppositeSideOverflows = getOverflows(rectForOppositeSide, documentRect)
const sideWithLessOverflows = preferredSideOverflows[side] < oppositeSideOverflows[oppositeSide] ? side : oppositeSide
const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side
const finalAlignment = getNonCollidingAlignment({
finalSide: sideWithLessOverflows,
preferredAlignment: align,

4
packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts
View File

@@ -1,5 +1,5 @@
import { PopoverSide, PopoverAlignment, RectCollisions } from '../Types'
import { getAppRect, getPositionedPopoverRect } from './Rect'
import { getPositionedPopoverRect } from './Rect'
export const OppositeSide: Record<PopoverSide, PopoverSide> = {
top: 'bottom',
@@ -20,7 +20,7 @@ export const getOverflows = (popoverRect: DOMRect, documentRect: DOMRect): Recor
}
export const checkCollisions = (popoverRect: DOMRect, containerRect: DOMRect): RectCollisions => {
const appRect = getAppRect(containerRect)
const appRect = containerRect
return {
top: popoverRect.top < appRect.top,