Fixed header to display options only on flow name

This commit is contained in:
Lucas Oliveira 2023-06-05 08:02:35 -03:00
commit 2a6c8ae92e
2 changed files with 31 additions and 38 deletions

View file

@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label <DropdownMenuPrimitive.Label
ref={ref} ref={ref}
className={cn( className={cn(
"px-2 pl-8 py-1.5 text-sm font-semibold", "px-2 pl-2 py-1.5 text-sm font-semibold",
inset && "pl-8", inset && "pl-8",
className className
)} )}

View file

@ -80,41 +80,8 @@ export default function HomePage() {
className="w-full h-full flex flex-col" className="w-full h-full flex flex-col"
> >
<TabsList className="w-full flex justify-between items-center border-b"> <TabsList className="w-full flex justify-between items-center border-b">
<div className="flex gap-2 justify-start w-96"> <div className="flex gap-2 justify-start items-center w-96">
<DropdownMenu> <span className="text-2xl ml-4">⛓️</span>
<DropdownMenuTrigger className="flex items-center gap-2 text-xl bg-foreground px-2 py-1 font-semibold text-secondary">
<span className="text-2xl">⛓️</span>{" "}
<ChevronDownIcon className="w-3" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40">
<DropdownMenuLabel>Flow</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
openPopUp(<ImportModal />);
}}
>
<ArrowUpTrayIcon className="w-4 h-4 mr-2" />
Import
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
openPopUp(<ExportModal />);
}}
>
<ArrowDownTrayIcon className="w-4 h-4 mr-2" />
Export
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
openPopUp(<ApiModal flowName={flows[tabIndex].name} />);
}}
>
<CodeBracketSquareIcon className="w-4 h-4 mr-2" />
Code
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div className="flex gap-2 p-2"> <div className="flex gap-2 p-2">
<TabsTrigger value="myflow" className="flex items-center gap-2"> <TabsTrigger value="myflow" className="flex items-center gap-2">
{flows[tabIndex].name} {flows[tabIndex].name}
@ -123,6 +90,33 @@ export default function HomePage() {
<ChevronDownIcon className="w-3" /> <ChevronDownIcon className="w-3" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-40"> <DropdownMenuContent className="w-40">
<DropdownMenuLabel>Current Flow</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => {
openPopUp(<ImportModal />);
}}
>
<ArrowUpTrayIcon className="w-4 h-4 mr-2" />
Import
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
openPopUp(<ExportModal />);
}}
>
<ArrowDownTrayIcon className="w-4 h-4 mr-2" />
Export
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
openPopUp(<ApiModal flowName={flows[tabIndex].name} />);
}}
>
<CodeBracketSquareIcon className="w-4 h-4 mr-2" />
Code
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>Flows</DropdownMenuLabel>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={tabIndex.toString()} value={tabIndex.toString()}
onValueChange={(value) => { onValueChange={(value) => {
@ -132,12 +126,11 @@ export default function HomePage() {
{flows.map((flow, idx) => { {flows.map((flow, idx) => {
return ( return (
<DropdownMenuRadioItem value={idx.toString()}> <DropdownMenuRadioItem value={idx.toString()}>
{flow.name} <span onDoubleClick={() => {}}>{flow.name}</span>
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
); );
})} })}
</DropdownMenuRadioGroup> </DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
addFlow(); addFlow();