Skip to content

Commit

Permalink
Merge pull request #115 from prathameshjchavan/fix/collision-detectio…
Browse files Browse the repository at this point in the history
…n-for-selector-dropdowns
  • Loading branch information
steven-tey authored Aug 26, 2023
2 parents 2196990 + 6d8c774 commit 06cc16f
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 34 deletions.
44 changes: 24 additions & 20 deletions ui/editor/components/color-selector.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Editor } from "@tiptap/core";
import { Check, ChevronDown } from "lucide-react";
import { Dispatch, FC, SetStateAction } from "react";
import * as Popover from "@radix-ui/react-popover";

export interface BubbleColorMenuItem {
name: string;
Expand Down Expand Up @@ -105,26 +106,29 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
);

return (
<div className="relative h-full">
<button
className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
onClick={() => setIsOpen(!isOpen)}
>
<span
className="rounded-sm px-1"
style={{
color: activeColorItem?.color,
backgroundColor: activeHighlightItem?.color,
}}
<Popover.Root open={isOpen}>
<div className="relative h-full">
<Popover.Trigger
className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
onClick={() => setIsOpen(!isOpen)}
>
A
</span>
<span
className="rounded-sm px-1"
style={{
color: activeColorItem?.color,
backgroundColor: activeHighlightItem?.color,
}}
>
A
</span>

<ChevronDown className="h-4 w-4" />
</button>
<ChevronDown className="h-4 w-4" />
</Popover.Trigger>

{isOpen && (
<section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
<Popover.Content
align="start"
className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
>
<div className="my-1 px-2 text-sm text-stone-500">Color</div>
{TEXT_COLORS.map(({ name, color }, index) => (
<button
Expand Down Expand Up @@ -180,8 +184,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
)}
</button>
))}
</section>
)}
</div>
</Popover.Content>
</div>
</Popover.Root>
);
};
31 changes: 17 additions & 14 deletions ui/editor/components/node-selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {
Code,
CheckSquare,
} from "lucide-react";
import * as Popover from "@radix-ui/react-popover";
import { Dispatch, FC, SetStateAction } from "react";

import { BubbleMenuItem } from "./bubble-menu";

interface NodeSelectorProps {
Expand Down Expand Up @@ -99,17 +99,20 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
};

return (
<div className="relative h-full">
<button
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
onClick={() => setIsOpen(!isOpen)}
>
<span>{activeItem?.name}</span>
<ChevronDown className="h-4 w-4" />
</button>
<Popover.Root open={isOpen}>
<div className="relative h-full">
<Popover.Trigger
className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
onClick={() => setIsOpen(!isOpen)}
>
<span>{activeItem?.name}</span>
<ChevronDown className="h-4 w-4" />
</Popover.Trigger>

{isOpen && (
<section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
<Popover.Content
align="start"
className="z-[99999] my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
>
{items.map((item, index) => (
<button
key={index}
Expand All @@ -128,8 +131,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
{activeItem.name === item.name && <Check className="h-4 w-4" />}
</button>
))}
</section>
)}
</div>
</Popover.Content>
</div>
</Popover.Root>
);
};

1 comment on commit 06cc16f

@vercel
Copy link

@vercel vercel bot commented on 06cc16f Aug 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.