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

chore: fix super block picker menu height in certain cases

Browse Source
This commit is contained in:
Aman Harwara
2023-12-12 21:52:35 +05:30
parent 6e3b337f67
commit a092d134c6
3 changed files with 40 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -134,8 +134,12 @@ export const getPositionedPopoverStyles = ({
const preferredSideRectCollisions = checkCollisions(rectForPreferredSide, documentRect) const preferredSideRectCollisions = checkCollisions(rectForPreferredSide, documentRect)
const oppositeSide = OppositeSide[side] const oppositeSide = OppositeSide[side]
const rectForOppositeSide = getPositionedPopoverRect(popoverRect, anchorRect, oppositeSide, align)
const oppositeSideRectCollisions = checkCollisions(rectForOppositeSide, documentRect)
const sideWithLessOverflows =
preferredSideRectCollisions[side] < oppositeSideRectCollisions[oppositeSide] ? side : oppositeSide
const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side
const finalAlignment = getNonCollidingAlignment({ const finalAlignment = getNonCollidingAlignment({
finalSide: disableFlip ? side : sideWithLessOverflows, finalSide: disableFlip ? side : sideWithLessOverflows,
preferredAlignment: align, preferredAlignment: align,

37
packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
View File

@@ -9,7 +9,6 @@ import { BlockPickerMenuItem } from './BlockPickerMenuItem'
import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password' import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table' import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
import Popover from '@/Components/Popover/Popover' import Popover from '@/Components/Popover/Popover'
import { PopoverClassNames } from '../ClassNames'
import { GetDatetimeBlockOptions } from '../Blocks/DateTime' import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
import { isMobileScreen } from '@/Utils' import { isMobileScreen } from '@/Utils'
import { useApplication } from '@/Components/ApplicationProvider' import { useApplication } from '@/Components/ApplicationProvider'
@@ -132,25 +131,23 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
side={isMobileScreen() ? 'top' : 'bottom'} side={isMobileScreen() ? 'top' : 'bottom'}
maxHeight={(mh) => mh / 2} maxHeight={(mh) => mh / 2}
> >
<div className={PopoverClassNames}> <ul>
<ul> {options.map((option, i: number) => (
{options.map((option, i: number) => ( <BlockPickerMenuItem
<BlockPickerMenuItem index={i}
index={i} isSelected={selectedIndex === i}
isSelected={selectedIndex === i} onClick={() => {
onClick={() => { setHighlightedIndex(i)
setHighlightedIndex(i) selectOptionAndCleanUp(option)
selectOptionAndCleanUp(option) }}
}} onMouseEnter={() => {
onMouseEnter={() => { setHighlightedIndex(i)
setHighlightedIndex(i) }}
}} key={option.key}
key={option.key} option={option}
option={option} />
/> ))}
))} </ul>
</ul>
</div>
</Popover> </Popover>
) )
}} }}

39
packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
View File

@@ -10,7 +10,6 @@ import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
import Popover from '@/Components/Popover/Popover' import Popover from '@/Components/Popover/Popover'
import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands' import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider' import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
import { PopoverClassNames } from '../ClassNames'
import { isMobileScreen } from '@/Utils' import { isMobileScreen } from '@/Utils'
import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation' import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
@@ -104,26 +103,24 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
side={isMobileScreen() ? 'top' : 'bottom'} side={isMobileScreen() ? 'top' : 'bottom'}
maxHeight={(mh) => mh / 2} maxHeight={(mh) => mh / 2}
> >
<div className={PopoverClassNames}> <ul>
<ul> {options.map((option, i: number) => (
{options.map((option, i: number) => ( <ItemSelectionItemComponent
<ItemSelectionItemComponent searchQuery={queryString || ''}
searchQuery={queryString || ''} index={i}
index={i} isSelected={selectedIndex === i}
isSelected={selectedIndex === i} onClick={() => {
onClick={() => { setHighlightedIndex(i)
setHighlightedIndex(i) selectOptionAndCleanUp(option)
selectOptionAndCleanUp(option) }}
}} onMouseEnter={() => {
onMouseEnter={() => { setHighlightedIndex(i)
setHighlightedIndex(i) }}
}} key={option.key}
key={option.key} option={option}
option={option} />
/> ))}
))} </ul>
</ul>
</div>
</Popover> </Popover>
) )
}} }}