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 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({
finalSide: disableFlip ? side : sideWithLessOverflows,
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 { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
import Popover from '@/Components/Popover/Popover'
import { PopoverClassNames } from '../ClassNames'
import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
import { isMobileScreen } from '@/Utils'
import { useApplication } from '@/Components/ApplicationProvider'
@@ -132,25 +131,23 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
side={isMobileScreen() ? 'top' : 'bottom'}
maxHeight={(mh) => mh / 2}
>
<div className={PopoverClassNames}>
<ul>
{options.map((option, i: number) => (
<BlockPickerMenuItem
index={i}
isSelected={selectedIndex === i}
onClick={() => {
setHighlightedIndex(i)
selectOptionAndCleanUp(option)
}}
onMouseEnter={() => {
setHighlightedIndex(i)
}}
key={option.key}
option={option}
/>
))}
</ul>
</div>
<ul>
{options.map((option, i: number) => (
<BlockPickerMenuItem
index={i}
isSelected={selectedIndex === i}
onClick={() => {
setHighlightedIndex(i)
selectOptionAndCleanUp(option)
}}
onMouseEnter={() => {
setHighlightedIndex(i)
}}
key={option.key}
option={option}
/>
))}
</ul>
</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 { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
import { PopoverClassNames } from '../ClassNames'
import { isMobileScreen } from '@/Utils'
import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
@@ -104,26 +103,24 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
side={isMobileScreen() ? 'top' : 'bottom'}
maxHeight={(mh) => mh / 2}
>
<div className={PopoverClassNames}>
<ul>
{options.map((option, i: number) => (
<ItemSelectionItemComponent
searchQuery={queryString || ''}
index={i}
isSelected={selectedIndex === i}
onClick={() => {
setHighlightedIndex(i)
selectOptionAndCleanUp(option)
}}
onMouseEnter={() => {
setHighlightedIndex(i)
}}
key={option.key}
option={option}
/>
))}
</ul>
</div>
<ul>
{options.map((option, i: number) => (
<ItemSelectionItemComponent
searchQuery={queryString || ''}
index={i}
isSelected={selectedIndex === i}
onClick={() => {
setHighlightedIndex(i)
selectOptionAndCleanUp(option)
}}
onMouseEnter={() => {
setHighlightedIndex(i)
}}
key={option.key}
option={option}
/>
))}
</ul>
</Popover>
)
}}