clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-04-24 22:25:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

replace popover component

Browse Source
This commit is contained in:
Konstantinos Kaloutas
2024-01-24 17:16:50 +02:00
parent c4003fe297
commit 311555db3f
6 changed files with 35 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/tldraw/apps/tldraw-logseq/package.json
View File

@@ -12,7 +12,6 @@
"devDependencies": {
"@radix-ui/react-context-menu": "^2.1.0",
"@radix-ui/react-dropdown-menu": "^2.0.1",
"@radix-ui/react-popover": "^1.0.0",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-separator": "^1.0.1",
"@radix-ui/react-slider": "^1.1.0",

18
packages/tldraw/apps/tldraw-logseq/src/components/GeometryTools/GeometryTools.tsx
View File

@@ -1,11 +1,13 @@
import { observer } from 'mobx-react-lite'
import type { Side } from '@radix-ui/react-popper'
import { ToolButton } from '../ToolButton'
import * as Popover from '@radix-ui/react-popover'
import { TablerIcon } from '../icons'
import React from 'react'
import { LogseqContext } from '../../lib/logseq-context'
// @ts-ignore
const LSUI = window.LSUI
interface GeometryToolsProps extends React.HTMLAttributes<HTMLElement> {
popoverSide?: Side
activeGeometry?: string
@@ -51,8 +53,8 @@ export const GeometryTools = observer(function GeometryTools({
const activeTool = activeGeometry ? geometries.find(geo => geo.id === activeGeometry) : shapes
return (
<Popover.Root>
<Popover.Trigger asChild>
<LSUI.Popover>
<LSUI.PopoverTrigger asChild>
<div {...rest} className="tl-geometry-tools-pane-anchor">
<ToolButton {...activeTool} tooltipSide={popoverSide} />
{chevron && (
@@ -63,9 +65,9 @@ export const GeometryTools = observer(function GeometryTools({
/>
)}
</div>
</Popover.Trigger>
</LSUI.PopoverTrigger>
<Popover.Content className="tl-popover-content" side={popoverSide} sideOffset={15}>
<LSUI.PopoverContent className="p-0 w-auto" side={popoverSide} sideOffset={15}>
<div
className={`tl-toolbar tl-geometry-toolbar ${
['left', 'right'].includes(popoverSide) ? 'flex-col' : 'flex-row'
@@ -82,9 +84,7 @@ export const GeometryTools = observer(function GeometryTools({
/>
))}
</div>
<Popover.Arrow className="tl-popover-arrow" />
</Popover.Content>
</Popover.Root>
</LSUI.PopoverContent>
</LSUI.Popover>
)
})

93
packages/tldraw/apps/tldraw-logseq/src/components/PopoverButton/PopoverButton.tsx
View File

@@ -1,9 +1,7 @@
import * as Popover from '@radix-ui/react-popover'
import type { Side, Align } from '@radix-ui/react-popper'
import { BoundsUtils } from '@tldraw/core'
import { useApp } from '@tldraw/react'
import { observer } from 'mobx-react-lite'
import * as React from 'react'
// @ts-ignore
const LSUI = window.LSUI
interface PopoverButton extends React.HTMLAttributes<HTMLButtonElement> {
side: Side // default side
@@ -12,68 +10,29 @@ interface PopoverButton extends React.HTMLAttributes<HTMLButtonElement> {
label: React.ReactNode
children: React.ReactNode
border?: boolean
arrow?: boolean
}
export const PopoverButton = observer(
({ side, align, alignOffset, label, arrow, children, border, ...rest }: PopoverButton) => {
const contentRef = React.useRef<HTMLDivElement>(null)
export function PopoverButton({ side, align, alignOffset, label, children, border, ...rest }: PopoverButton) {
return (
<LSUI.Popover>
<LSUI.PopoverTrigger
{...rest}
data-border={border}
className="tl-button tl-popover-trigger-button"
>
{label}
</LSUI.PopoverTrigger>
const [isOpen, setIsOpen] = React.useState(false)
const {
viewport: {
bounds,
camera: { point, zoom },
},
} = useApp()
const [tick, setTick] = React.useState<number>(0)
// Change side if popover is out of bounds
React.useEffect(() => {
if (!contentRef.current || !isOpen) return
const boundingRect = contentRef.current.getBoundingClientRect()
const outOfView = !BoundsUtils.boundsContain(bounds, {
minX: boundingRect.x,
minY: boundingRect.y,
maxX: boundingRect.right,
maxY: boundingRect.bottom,
width: boundingRect.width,
height: boundingRect.height,
})
if (outOfView) {
setTick(tick => tick + 1)
}
}, [point[0], point[1], zoom, isOpen])
return (
<Popover.Root onOpenChange={o => setIsOpen(o)}>
<Popover.Trigger
{...rest}
data-border={border}
className="tl-button tl-popover-trigger-button"
>
{label}
</Popover.Trigger>
<Popover.Content
// it seems like the Popover.Content component doesn't update collision when camera changes
key={'popover-content-' + tick}
ref={contentRef}
className="tl-popover-content"
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={15}
collisionBoundary={document.querySelector('.logseq-tldraw')}
>
{children}
{arrow && <Popover.Arrow className="tl-popover-arrow" />}
</Popover.Content>
</Popover.Root>
)
}
)
<LSUI.PopoverContent
className="w-auto"
align={align}
alignOffset={alignOffset}
side={side}
sideOffset={15}
collisionBoundary={document.querySelector('.logseq-tldraw')}
>
{children}
</LSUI.PopoverContent>
</LSUI.Popover>
)
}

1
packages/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
View File

@@ -59,7 +59,6 @@ export function ColorInput({
<PopoverButton
{...rest}
border
arrow
side={popoverSide}
label={
<Tooltip content={t('whiteboard/color')} side={popoverSide} sideOffset={14}>

8
packages/tldraw/apps/tldraw-logseq/src/styles.css
View File

@@ -910,14 +910,6 @@ html[data-theme='dark'] {
stroke-width: min(100px, calc(12px * var(--tl-scale)));
}
.tl-popover-content {
@apply rounded-lg;
background-color: var(--ls-secondary-background-color);
box-shadow: var(--shadow-large);
z-index: 100000;
}
.tl-geometry-toolbar {
box-shadow: none;
}

22
packages/tldraw/yarn.lock
View File

@@ -788,28 +788,6 @@
aria-hidden "^1.1.1"
react-remove-scroll "2.5.5"
"@radix-ui/react-popover@^1.0.0":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.2.tgz#f761c8aafb61519522b8e80501c589e619073a2c"
integrity sha512-4tqZEl9w95R5mlZ/sFdgBnfhCBOEPepLIurBA5kt/qaAhldJ1tNQd0ngr0ET0AHbPotT4mwxMPr7a+MA/wbK0g==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/primitive" "1.0.0"
"@radix-ui/react-compose-refs" "1.0.0"
"@radix-ui/react-context" "1.0.0"
"@radix-ui/react-dismissable-layer" "1.0.2"
"@radix-ui/react-focus-guards" "1.0.0"
"@radix-ui/react-focus-scope" "1.0.1"
"@radix-ui/react-id" "1.0.0"
"@radix-ui/react-popper" "1.0.1"
"@radix-ui/react-portal" "1.0.1"
"@radix-ui/react-presence" "1.0.0"
"@radix-ui/react-primitive" "1.0.1"
"@radix-ui/react-slot" "1.0.1"
"@radix-ui/react-use-controllable-state" "1.0.0"
aria-hidden "^1.1.1"
react-remove-scroll "2.5.5"
"@radix-ui/react-popper@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.1.tgz#9fa8a6a493404afa225866a5cd75af23d141baa0"