prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Display the highlight bar near the cursor on non-touch devices

Browse source
This commit is contained in:
Jackson Harper 2022-10-07 16:51:01 +08:00
parent 791c9a9113
commit 7f9e898a1b
1 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/web/components/patterns/HighlightBar.tsx
View file

@ -27,12 +27,12 @@ type HighlightBarProps = {
anchorCoordinates: PageCoordinates
isNewHighlight: boolean
isSharedToFeed: boolean
isTouchscreenDevice: boolean
displayNearCursor: boolean
handleButtonClick: (action: HighlightAction) => void
}
export function HighlightBar(props: HighlightBarProps): JSX.Element {
if (props.isTouchscreenDevice) {
if (props.displayNearCursor) {
return (
<Box
css={{
@ -58,23 +58,22 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
)
} else {
return (
<AnchoredPopover
xAnchorCoordinate={props.anchorCoordinates.pageX}
yAnchorCoordinate={props.anchorCoordinates.pageY}
preventAutoFocus={false}
<Box
css={{
width: '100%',
maxWidth: '240px',
height: '48px',
position: 'absolute',
background: '$grayBg',
borderRadius: '4px',
border: '1px solid $grayBorder',
boxShadow: theme.shadows.cardBoxShadow.toString(),
left: props.anchorCoordinates.pageX,
top: props.anchorCoordinates.pageY,
}}
>
<Box>
css=
{{
width: '350px',
background: '$grayBg',
borderRadius: '4px',
border: '1px solid $grayBorder',
boxShadow: '$cardBoxShadow',
}}
<BarContent {...props} />
</Box>
</AnchoredPopover>
<BarContent {...props} />
</Box>
)
}
}