레이아웃 정리
This commit is contained in:
@@ -172,7 +172,7 @@ const ScenarioMode = ({
|
||||
<div className="editor flex-1 h-[calc(100vh-57px)] overflow-hidden">
|
||||
<ScenarioEditor/>
|
||||
</div>
|
||||
<div className="navigation-sidebar min-w-[200px] border-l bg-gray-100">
|
||||
<div className="navigation-sidebar min-w-[0px] border-l bg-gray-100">
|
||||
<APINavigation
|
||||
contextPath="/"
|
||||
side="right"
|
||||
|
||||
@@ -1,38 +1,16 @@
|
||||
import React, { useState } from 'react';
|
||||
import { FileText, MoreHorizontal } from 'lucide-react';
|
||||
import { SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction } from '@/components/ui/sidebar';
|
||||
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
|
||||
import React, {useState} from 'react';
|
||||
import {FileText, MoreHorizontal} from 'lucide-react';
|
||||
import {SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction} from '@/components/ui/sidebar';
|
||||
import {Tooltip, TooltipTrigger, TooltipContent} from '@/components/ui/tooltip';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
const ApiDropdownMenu = ({ onOpen, onRename, onDelete }) => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger data-dropdown-trigger="true" className="p-0 h-auto">
|
||||
<div className="hover:bg-accent rounded-sm">
|
||||
<MoreHorizontal className="h-4 w-4"/>
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={onOpen}>
|
||||
Open
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator/>
|
||||
<DropdownMenuItem onClick={onRename}>
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive" onClick={onDelete}>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
const DraggableApiItem = ({ api, collectionId, onApiAction }) => {
|
||||
const DraggableApiItem = ({api, collectionId, onApiAction}) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const handleDragStart = (event) => {
|
||||
@@ -69,63 +47,20 @@ const DraggableApiItem = ({ api, collectionId, onApiAction }) => {
|
||||
draggable
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={`cursor-move transition-colors duration-200 ${isDragging ? 'opacity-50 bg-accent' : ''}`}
|
||||
>
|
||||
{/*<SidebarMenuSubButton*/}
|
||||
{/* onClick={(e) => {*/}
|
||||
{/* // Prevent click when dragging ends*/}
|
||||
{/* if (!isDragging) {*/}
|
||||
{/* onApiAction.open(collectionId, api.id);*/}
|
||||
{/* }*/}
|
||||
{/* }}*/}
|
||||
{/* className="w-full justify-start gap-2"*/}
|
||||
{/* asChild*/}
|
||||
{/*>*/}
|
||||
{/* <div className="w-full flex items-center gap-2 min-w-0 pr-2">*/}
|
||||
{/* <FileText className="h-4 w-4 flex-shrink-0"/>*/}
|
||||
{/* <Tooltip>*/}
|
||||
{/* <TooltipTrigger asChild>*/}
|
||||
{/* <span className="truncate flex-1">*/}
|
||||
{/* {api.method && <span className="font-medium text-primary">{api.method} </span>}*/}
|
||||
{/* {api.name}*/}
|
||||
{/* </span>*/}
|
||||
{/* </TooltipTrigger>*/}
|
||||
{/* <TooltipContent>*/}
|
||||
{/* <div className="flex flex-col gap-1">*/}
|
||||
{/* <p className="font-medium">{api.name}</p>*/}
|
||||
{/* {api.path && <p className="text-xs text-muted-foreground">{api.path}</p>}*/}
|
||||
{/* </div>*/}
|
||||
{/* </TooltipContent>*/}
|
||||
{/* </Tooltip>*/}
|
||||
{/* <SidebarMenuAction*/}
|
||||
{/* className="p-0 m-0 flex-shrink-0"*/}
|
||||
{/* onClick={(e) => e.stopPropagation()}*/}
|
||||
{/* >*/}
|
||||
{/* <ApiDropdownMenu*/}
|
||||
{/* onOpen={() => onApiAction.open(collectionId, api.id)}*/}
|
||||
{/* onRename={() => onApiAction.rename(collectionId, api.id)}*/}
|
||||
{/* onDelete={() => onApiAction.delete(collectionId, api.id)}*/}
|
||||
{/* />*/}
|
||||
{/* </SidebarMenuAction>*/}
|
||||
{/* </div>*/}
|
||||
{/*</SidebarMenuSubButton>*/}
|
||||
<div className="w-full flex items-center gap-2 min-w-0 pr-2">
|
||||
<div
|
||||
onClick={() => !isDragging && onApiAction.open(collectionId, api.id)}
|
||||
className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer"
|
||||
>
|
||||
className={`cursor-move transition-colors duration-200 px-4 ${isDragging ? 'opacity-50 bg-accent' : ''}`}>
|
||||
<div className="w-full flex items-center gap-2 pr-2">
|
||||
<div onClick={() => !isDragging && onApiAction.open(collectionId, api.id)} className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
|
||||
<FileText className="h-4 w-4 flex-shrink-0"/>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="truncate">
|
||||
{api.method && <span className="font-medium text-primary">{api.method} </span>}
|
||||
{api.name}
|
||||
</span>
|
||||
<TooltipTrigger asChild className="block max-w-[150px]">
|
||||
<span className="block truncate">s
|
||||
{api.name}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-medium">{api.name}</p>
|
||||
{api.path && <p className="text-xs text-muted-foreground">{api.path}</p>}
|
||||
{api.path && <p className="text-xs text-muted-foreground">{api.method} {api.path}</p>}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
Reference in New Issue
Block a user