Ver código fonte

fix: popover position on canvas pan

Konstantinos Kaloutas 3 anos atrás
pai
commit
9b61110911

+ 29 - 30
tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -32,38 +32,37 @@ export function ColorInput({ color, opacity, collisionRef, setColor, setOpacity,
         <button className="tl-color-drip mx-1">{renderColor(color)}</button>
       </Popover.Trigger>
 
-      <Popover.Portal>
-        <Popover.Content className="tl-popover-content" side="top" sideOffset={15} collisionBoundary={collisionRef}>
-          <div className={'tl-color-palette'}>
-            {Object.values(Color).map(value => (
-              <button
-                className={`tl-color-drip m-1${value === color ? ' active' : ''}`}
-                onClick={() => setColor(value)}
-              >
-                {renderColor(value)}
-              </button>
-            ))}
-          </div>
-
-          <div className="mx-1 my-2">
-            <Slider.Root
-              defaultValue={[opacity]}
-              onValueCommit={value => setOpacity(value[0])}
-              max={1}
-              step={0.1}
-              aria-label="Opacity"
-              className="tl-slider-root"
+      <Popover.Content className="tl-popover-content" side="top" sideOffset={15} collisionBoundary={collisionRef}>
+        <div className={'tl-color-palette'}>
+          {Object.values(Color).map(value => (
+            <button
+              className={`tl-color-drip m-1${value === color ? ' active' : ''}`}
+              onClick={() => setColor(value)}
             >
-              <Slider.Track className="tl-slider-track">
-                <Slider.Range className="tl-slider-range" />
-              </Slider.Track>
-              <Slider.Thumb className="tl-slider-thumb" />
-            </Slider.Root>
-          </div>
+              {renderColor(value)}
+            </button>
+          ))}
+        </div>
+
+        <div className="mx-1 my-2">
+          <Slider.Root
+            defaultValue={[opacity]}
+            onValueCommit={value => setOpacity(value[0])}
+            max={1}
+            step={0.1}
+            aria-label="Opacity"
+            className="tl-slider-root"
+          >
+            <Slider.Track className="tl-slider-track">
+              <Slider.Range className="tl-slider-range" />
+            </Slider.Track>
+            <Slider.Thumb className="tl-slider-thumb" />
+          </Slider.Root>
+        </div>
+
+        <Popover.Arrow className="tl-popover-arrow" />
+      </Popover.Content>
 
-          <Popover.Arrow className="tl-popover-arrow" />
-        </Popover.Content>
-      </Popover.Portal>
     </Popover.Root>
   )
 }