Skip to content

Show only icon as drag preview for TemplateCard #3210

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
+440 −62
Closed

Show only icon as drag preview for TemplateCard #3210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions client/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import YamlWorker from 'monaco-yaml/yaml.worker?worker';
import {StrictMode} from 'react';
import { StrictMode } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import {RouterProvider} from 'react-router-dom';

import {getRouter as getMainRouter} from './routes';
Expand Down Expand Up @@ -67,17 +69,18 @@ async function renderApp() {

root.render(
<StrictMode>
<ThemeProvider defaultTheme="light">
<QueryClientProvider client={queryClient}>
<ConditionalPostHogProvider>
<TooltipProvider>
<RouterProvider router={router} />
</TooltipProvider>
</ConditionalPostHogProvider>

<ReactQueryDevtools buttonPosition="bottom-right" initialIsOpen={false} />
</QueryClientProvider>
</ThemeProvider>
<DndProvider backend={HTML5Backend}>
<ThemeProvider defaultTheme="light">
<QueryClientProvider client={queryClient}>
<ConditionalPostHogProvider>
<TooltipProvider>
<RouterProvider router={router} />
</TooltipProvider>
</ConditionalPostHogProvider>
<ReactQueryDevtools buttonPosition="bottom-right" initialIsOpen={false} />
</QueryClientProvider>
</ThemeProvider>
</DndProvider>
</StrictMode>
);
}
111 changes: 62 additions & 49 deletions client/src/pages/automation/templates/components/TemplateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import LazyLoadSVG from '@/components/LazyLoadSVG/LazyLoadSVG';
import {Badge} from '@/components/ui/badge';
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from '@/components/ui/card';
import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
import {Link} from 'react-router-dom';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Link } from 'react-router-dom';

import type React from 'react';
import React from 'react';
import { useDrag } from 'react-dnd';
import { TemplateCardDragPreview } from './TemplateCardDragPreview';

const MAX_VISIBLE_ICONS = 8;

Expand All @@ -17,60 +19,71 @@ interface TemplateCardProps {
title: string;
}

export function TemplateCard({authorName, categories, description, icons, templateId, title}: TemplateCardProps) {
export function TemplateCard({ authorName, categories, description, icons, templateId, title }: TemplateCardProps) {
const hasExcessIcons = icons.length > MAX_VISIBLE_ICONS;
const visibleIcons = hasExcessIcons ? icons.slice(0, MAX_VISIBLE_ICONS - 1) : icons;
const mainIcon = icons[0];

if (hasExcessIcons) {
icons = icons.slice(0, MAX_VISIBLE_ICONS - 1);
}
const anchorRef = React.useRef<HTMLAnchorElement>(null);
const [{ isDragging }, drag] = useDrag({
type: 'TEMPLATE_CARD',
item: { templateId, icon: mainIcon },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
drag(anchorRef);

return (
<Link to={templateId}>
<Card className="flex min-h-[230px] flex-col transition-all hover:border-primary/20 hover:shadow-lg">
<CardHeader>
<div className="flex items-center justify-end">
{categories.map((category, index) => (
<Badge className="text-xs" key={index} variant="outline">
{category}
</Badge>
))}
</div>
<>
<TemplateCardDragPreview />
<Link to={templateId} ref={anchorRef} style={{ opacity: isDragging ? 0.3 : 1, cursor: 'grab' }}>
<Card className="flex min-h-[230px] flex-col transition-all hover:border-primary/20 hover:shadow-lg">
<CardHeader>
<div className="flex items-center justify-end">
{categories.map((category, index) => (
<Badge className="text-xs" key={index} variant="outline">
{category}
</Badge>
))}
</div>

<CardTitle>
<Tooltip>
<TooltipTrigger asChild className="line-clamp-1 text-base font-semibold leading-tight">
<span>{title}</span>
</TooltipTrigger>
<CardTitle>
<Tooltip>
<TooltipTrigger asChild className="line-clamp-1 text-base font-semibold leading-tight">
<span>{title}</span>
</TooltipTrigger>

<TooltipContent>{title}</TooltipContent>
</Tooltip>
</CardTitle>
<TooltipContent>{title}</TooltipContent>
</Tooltip>
</CardTitle>

<CardDescription className="line-clamp-2 text-sm text-muted-foreground">
{description || 'No description available.'}
</CardDescription>
</CardHeader>
<CardDescription className="line-clamp-2 text-sm text-muted-foreground">
{description || 'No description available.'}
</CardDescription>
</CardHeader>

<CardContent className="flex-1">
<div className="flex size-full items-end">
<div className="flex flex-wrap gap-1">
{icons.map((icon, index) => (
<div className="flex items-center justify-center rounded-full bg-muted" key={index}>
<LazyLoadSVG className="m-1.5 size-6" src={icon} />
</div>
))}
<CardContent className="flex-1">
<div className="flex size-full items-end">
<div className="flex flex-wrap gap-1">
{visibleIcons.map((icon, index) => (
<div className="flex items-center justify-center rounded-full bg-muted" key={index}>
<LazyLoadSVG className="m-1.5 size-6" src={icon} />
</div>
))}

{hasExcessIcons && (
<div className="flex items-center justify-center rounded-full bg-muted">
<span className="m-1.5 size-6">+{MAX_VISIBLE_ICONS}</span>
</div>
)}
{hasExcessIcons && (
<div className="flex items-center justify-center rounded-full bg-muted">
<span className="m-1.5 size-6">+{MAX_VISIBLE_ICONS}</span>
</div>
)}
</div>
</div>
</div>
</CardContent>
</CardContent>

<CardFooter>{authorName}</CardFooter>
</Card>
</Link>
<CardFooter>{authorName}</CardFooter>
</Card>
</Link>
</>
);
}
23 changes: 23 additions & 0 deletions client/src/pages/automation/templates/components/TemplateCardDragPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useEffect } from 'react';
import { useDragLayer } from 'react-dnd';
import LazyLoadSVG from '@/components/LazyLoadSVG/LazyLoadSVG';

export function TemplateCardDragPreview() {
const { isDragging, item } = useDragLayer((monitor) => ({
isDragging: monitor.isDragging(),
item: monitor.getItem(),
}));

if (!isDragging || !item || !item.icon) {
return null;
}

// You can style this preview as needed
return (
<div style={{ pointerEvents: 'none', zIndex: 100, position: 'fixed', left: 0, top: 0 }}>
<div className="flex items-center justify-center rounded-full bg-muted shadow-lg">
<LazyLoadSVG className="m-1.5 size-10" src={item.icon} />
</div>
</div>
);
}
Loading