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

chore: take popover offset into account when fitting inside rect

Browse Source
This commit is contained in:
Aman Harwara
2023-07-10 14:29:49 +05:30
parent bb997312e8
commit e4488dcb8c
3 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ const percentOf = (percent: number, value: number) => (percent / 100) * value
export type PopoverCSSProperties = CSSProperties & {
'--translate-x': string
'--translate-y': string
'--offset': string
}
const getStylesFromRect = (
@@ -17,6 +18,7 @@ const getStylesFromRect = (
options: {
disableMobileFullscreenTakeover?: boolean
maxHeight?: number | 'none'
offset?: number
},
): PopoverCSSProperties => {
const { disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options
@@ -29,6 +31,7 @@ const getStylesFromRect = (
willChange: 'transform',
'--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`,
'--translate-y': `${rect.y}px`,
'--offset': `${options.offset}px`,
transform: 'translate(var(--translate-x), var(--translate-y))',
visibility: 'visible',
...(canApplyMaxHeight && {
@@ -108,5 +111,5 @@ export const getPositionedPopoverStyles = ({
maxHeight = maxHeightFunction(maxHeight)
}
return getStylesFromRect(finalPositionedRect, { disableMobileFullscreenTakeover, maxHeight })
return getStylesFromRect(finalPositionedRect, { disableMobileFullscreenTakeover, maxHeight, offset })
}

9
packages/web/src/javascripts/Components/Popover/Utils/movePopoverToFitInsideRect.ts
View File

@@ -4,21 +4,22 @@ export const movePopoverToFitInsideRect = (popoverElement: HTMLElement, rect: DO
const popoverRect = popoverElement.getBoundingClientRect()
const x = parseInt(popoverElement.style.getPropertyValue('--translate-x')) || 0
const y = parseInt(popoverElement.style.getPropertyValue('--translate-y')) || 0
const offset = parseInt(popoverElement.style.getPropertyValue('--offset')) || 0
const overflows = getOverflows(popoverRect, rect)
if (overflows['top'] > 0) {
popoverElement.style.setProperty('--translate-y', `${y + overflows['top']}px`)
popoverElement.style.setProperty('--translate-y', `${y + overflows['top'] + offset}px`)
}
if (overflows['bottom'] > 0) {
popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom']}px`)
popoverElement.style.setProperty('--translate-y', `${y - overflows['bottom'] - offset}px`)
}
if (overflows['left'] > 0) {
popoverElement.style.setProperty('--translate-x', `${x + overflows['left']}px`)
popoverElement.style.setProperty('--translate-x', `${x + overflows['left'] + offset}px`)
}
if (overflows['right'] > 0) {
popoverElement.style.setProperty('--translate-x', `${x - overflows['right']}px`)
popoverElement.style.setProperty('--translate-x', `${x - overflows['right'] - offset}px`)
}
}

3
packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
View File

@@ -202,6 +202,9 @@ function TextFormatFloatingToolbar({
offset: 12,
maxHeightFunction: () => 'none',
})
if (calculatedStyles) {
toolbarElement.style.setProperty('--offset', calculatedStyles['--offset'])
}
if (calculatedStyles) {
Object.assign(toolbarElement.style, calculatedStyles)