greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: collision element

pull/7111/head
Konstantinos Kaloutas 2022-11-01 17:45:00 +02:00
parent 328e9df6f9
commit c33f5dff2d
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
View File

@ -358,6 +358,7 @@ const SwatchAction = observer(() => {
title="Color Picker"
color={color}
opacity={shapes[0].props.opacity}
collisionRef={document.getElementById('main-content-container')}
setOpacity={handleSetOpacity}
setColor={handleSetColor}
/>

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

@ -6,11 +6,12 @@ import { Color } from '@tldraw/core'
interface ColorInputProps extends React.InputHTMLAttributes<HTMLButtonElement> {
color: string
opacity: number
collisionRef: HTMLElement | null
setColor: (value: string) => void
setOpacity: (value: number) => void
}
export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: ColorInputProps) {
export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity, ...rest }: ColorInputProps) {
const ref = React.useRef<HTMLDivElement>(null)
function renderColor(color: string) {
@ -32,7 +33,7 @@ export function ColorInput({ color, opacity, setColor, setOpacity, ...rest }: Co
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="tl-popover-content" side="top" sideOffset={15}>
<Popover.Content className="tl-popover-content" side="top" sideOffset={15} collisionBoundary={collisionRef}>
<div className={'tl-color-palette'}>
{Object.values(Color).map(value => (
<button