瀏覽代碼

fix: links popover alignment

Konstantinos Kaloutas 2 年之前
父節點
當前提交
b1c11895c4

+ 6 - 2
tldraw/apps/tldraw-logseq/src/components/PopoverButton/PopoverButton.tsx

@@ -1,5 +1,5 @@
 import * as Popover from '@radix-ui/react-popover'
-import type { Side } from '@radix-ui/react-popper'
+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'
@@ -7,6 +7,8 @@ import * as React from 'react'
 
 interface PopoverButton extends React.HTMLAttributes<HTMLButtonElement> {
   side: Side // default side
+  align?: Align
+  alignOffset?: number
   label: React.ReactNode
   children: React.ReactNode
   border?: boolean
@@ -14,7 +16,7 @@ interface PopoverButton extends React.HTMLAttributes<HTMLButtonElement> {
 }
 
 export const PopoverButton = observer(
-  ({ side, label, arrow, children, border, ...rest }: PopoverButton) => {
+  ({ side, align, alignOffset, label, arrow, children, border, ...rest }: PopoverButton) => {
     const contentRef = React.useRef<HTMLDivElement>(null)
 
     const [isOpen, setIsOpen] = React.useState(false)
@@ -62,6 +64,8 @@ export const PopoverButton = observer(
           key={'popover-content-' + tick}
           ref={contentRef}
           className="tl-popover-content"
+          align={align}
+          alignOffset={alignOffset}
           side={side}
           sideOffset={15}
           collisionBoundary={document.querySelector('.logseq-tldraw')}

+ 2 - 0
tldraw/apps/tldraw-logseq/src/components/inputs/ShapeLinksInput.tsx

@@ -123,6 +123,8 @@ export function ShapeLinksInput({
     <PopoverButton
       {...rest}
       side={side}
+      align="start"
+      alignOffset={-6}
       label={
         <div className="flex gap-1 relative items-center justify-center px-1">
           <TablerIcon name={noOfLinks > 0 ? "link" : "add-link"} />