rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 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 & { export type PopoverCSSProperties = CSSProperties & {
'--translate-x': string '--translate-x': string
'--translate-y': string '--translate-y': string
'--offset': string
} }
const getStylesFromRect = ( const getStylesFromRect = (
@@ -17,6 +18,7 @@ const getStylesFromRect = (
options: { options: {
disableMobileFullscreenTakeover?: boolean disableMobileFullscreenTakeover?: boolean
maxHeight?: number | 'none' maxHeight?: number | 'none'
offset?: number
}, },
): PopoverCSSProperties => { ): PopoverCSSProperties => {
const { disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options const { disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options
@@ -29,6 +31,7 @@ const getStylesFromRect = (
willChange: 'transform', willChange: 'transform',
'--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`, '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`,
'--translate-y': `${rect.y}px`, '--translate-y': `${rect.y}px`,
'--offset': `${options.offset}px`,
transform: 'translate(var(--translate-x), var(--translate-y))', transform: 'translate(var(--translate-x), var(--translate-y))',
visibility: 'visible', visibility: 'visible',
...(canApplyMaxHeight && { ...(canApplyMaxHeight && {
@@ -108,5 +111,5 @@ export const getPositionedPopoverStyles = ({
maxHeight = maxHeightFunction(maxHeight) 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 popoverRect = popoverElement.getBoundingClientRect()
const x = parseInt(popoverElement.style.getPropertyValue('--translate-x')) || 0 const x = parseInt(popoverElement.style.getPropertyValue('--translate-x')) || 0
const y = parseInt(popoverElement.style.getPropertyValue('--translate-y')) || 0 const y = parseInt(popoverElement.style.getPropertyValue('--translate-y')) || 0
const offset = parseInt(popoverElement.style.getPropertyValue('--offset')) || 0
const overflows = getOverflows(popoverRect, rect) const overflows = getOverflows(popoverRect, rect)
if (overflows['top'] > 0) { 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) { 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) { 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) { 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, offset: 12,
maxHeightFunction: () => 'none', maxHeightFunction: () => 'none',
}) })
if (calculatedStyles) {
toolbarElement.style.setProperty('--offset', calculatedStyles['--offset'])
}
if (calculatedStyles) { if (calculatedStyles) {
Object.assign(toolbarElement.style, calculatedStyles) Object.assign(toolbarElement.style, calculatedStyles)