Hacker-Software/opencrm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PdfDragButton: Info-Icon mit Chrome/Edge-Hinweis als Tooltip

Browse Source 
Kleines Info-Icon hinter dem Drag-Element mit Tooltip, dass das Ziehen
nur in Chrome/Edge funktioniert und man in Firefox stattdessen klicken
soll. Gilt automatisch an allen Einbaustellen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
duffyduck
2026-07-30 11:55:06 +02:00
co-authored by Claude Opus 4.8
parent a509bb7826
commit 8e74f7733a
1 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/PdfDragButton.tsx
+19 -11
View File
@@ -1,4 +1,4 @@
import { GripVertical, FileDown } from 'lucide-react'; import { GripVertical, FileDown, Info } from 'lucide-react';
import { fileUrl } from '../../utils/fileUrl'; import { fileUrl } from '../../utils/fileUrl';
/** /**
@@ -81,16 +81,24 @@ export default function PdfDragButton({
const iconSize = size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4'; const iconSize = size === 'sm' ? 'w-3.5 h-3.5' : 'w-4 h-4';
return ( return (
<span <span className={`inline-flex items-center gap-1 ${className}`}>
draggable <span
onDragStart={handleDragStart} draggable
onClick={() => window.open(fileUrl(path, { inline: true }), '_blank', 'noopener')} onDragStart={handleDragStart}
title={title || 'In Outlook/Explorer ziehen (Chrome/Edge). Klick: im Tab öffnen.'} onClick={() => window.open(fileUrl(path, { inline: true }), '_blank', 'noopener')}
className={`inline-flex items-center gap-1 cursor-grab active:cursor-grabbing select-none rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs text-gray-600 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50 transition-colors ${className}`} title={title || 'In Outlook/Explorer ziehen (Chrome/Edge). Klick: im Tab öffnen.'}
> className="inline-flex items-center gap-1 cursor-grab active:cursor-grabbing select-none rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs text-gray-600 hover:text-blue-600 hover:border-blue-300 hover:bg-blue-50 transition-colors"
<GripVertical className={`${iconSize} text-gray-400`} /> >
<FileDown className={iconSize} /> <GripVertical className={`${iconSize} text-gray-400`} />
<span>{label}</span> <FileDown className={iconSize} />
<span>{label}</span>
</span>
<span
className="inline-flex cursor-help text-gray-400"
title="Ziehen funktioniert nur in Chrome/Edge. In Firefox stattdessen anklicken, um das PDF zu öffnen."
>
<Info className={iconSize} />
</span>
</span> </span>
); );
} }