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

fix(desktop): Fixed issue where preferences header & tooltips are overlapped by custom titlebar

Browse Source
This commit is contained in:
Aman Harwara
2023-04-27 15:57:56 +05:30
parent 76bd995c9a
commit ef27a21fb1
6 changed files with 79 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,20 +45,21 @@ const OppositeAlignment: Record<Exclude<PopoverAlignment, 'center'>, PopoverAlig
end: 'start',
}
export const getNonCollidingAlignment = (
finalSide: PopoverSide,
preferredAlignment: PopoverAlignment,
collisions: RectCollisions,
{
popoverRect,
buttonRect,
documentRect,
}: {
popoverRect: DOMRect
buttonRect: DOMRect
documentRect: DOMRect
},
): PopoverAlignment => {
export const getNonCollidingAlignment = ({
finalSide,
preferredAlignment,
collisions,
popoverRect,
buttonRect,
documentRect,
}: {
finalSide: PopoverSide
preferredAlignment: PopoverAlignment
collisions: RectCollisions
popoverRect: DOMRect
buttonRect: DOMRect
documentRect: DOMRect
}): PopoverAlignment => {
const isHorizontalSide = finalSide === 'top' || finalSide === 'bottom'
const boundToCheckForStart = isHorizontalSide ? 'right' : 'bottom'
const boundToCheckForEnd = isHorizontalSide ? 'left' : 'top'

23
packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
View File

@@ -68,49 +68,52 @@ export const getPositionedPopoverRect = (
buttonRect: DOMRect,
side: PopoverSide,
align: PopoverAlignment,
offset?: number,
): DOMRect => {
const { width, height } = popoverRect
const positionPopoverRect = DOMRect.fromRect(popoverRect)
const finalOffset = offset ? offset : 0
switch (side) {
case 'top': {
positionPopoverRect.y = buttonRect.top - height
positionPopoverRect.y = buttonRect.top - height - finalOffset
break
}
case 'bottom':
positionPopoverRect.y = buttonRect.bottom
positionPopoverRect.y = buttonRect.bottom + finalOffset
break
case 'left':
positionPopoverRect.x = buttonRect.left - width
positionPopoverRect.x = buttonRect.left - width - finalOffset
break
case 'right':
positionPopoverRect.x = buttonRect.right
positionPopoverRect.x = buttonRect.right + finalOffset
break
}
if (side === 'top' || side === 'bottom') {
switch (align) {
case 'start':
positionPopoverRect.x = buttonRect.left
positionPopoverRect.x = buttonRect.left - finalOffset
break
case 'center':
positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2
positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2 - finalOffset
break
case 'end':
positionPopoverRect.x = buttonRect.right - width
positionPopoverRect.x = buttonRect.right - width + finalOffset
break
}
} else {
switch (align) {
case 'start':
positionPopoverRect.y = buttonRect.top
positionPopoverRect.y = buttonRect.top - finalOffset
break
case 'center':
positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2
positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2 - finalOffset
break
case 'end':
positionPopoverRect.y = buttonRect.bottom - height
positionPopoverRect.y = buttonRect.bottom - height + finalOffset
break
}
}