fix: button as sibling of draggable div — desktop drag no longer blocks click
This commit is contained in:
@@ -152,40 +152,39 @@ function FolderTreeItem({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
|
||||||
draggable
|
<div
|
||||||
onDragStart={(e) => {
|
draggable
|
||||||
e.dataTransfer.setData('text/folder-id', node.id);
|
onDragStart={(e) => {
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
e.dataTransfer.setData('text/folder-id', node.id);
|
||||||
}}
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
onDragOver={(e) => onDragOver(e, node.id)}
|
}}
|
||||||
onDragLeave={() => onDragLeave(node.id)}
|
onDragOver={(e) => onDragOver(e, node.id)}
|
||||||
onDrop={(e) => onDrop(e, node.id)}
|
onDragLeave={() => onDragLeave(node.id)}
|
||||||
className={clsx(
|
onDrop={(e) => onDrop(e, node.id)}
|
||||||
'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
|
className={clsx(
|
||||||
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
'group flex items-center gap-1.5 flex-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
|
||||||
isDragOver
|
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||||
? 'bg-primary-100 ring-2 ring-primary-400'
|
isDragOver
|
||||||
: isActive
|
? 'bg-primary-100 ring-2 ring-primary-400'
|
||||||
? 'bg-primary-50 text-primary-700'
|
: isActive
|
||||||
: 'text-secondary-700 hover:bg-secondary-100',
|
? 'bg-primary-50 text-primary-700'
|
||||||
)}
|
: 'text-secondary-700 hover:bg-secondary-100',
|
||||||
style={{ paddingLeft: depth * 12 + 8 }}
|
)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setExpanded(!expanded);
|
setExpanded(!expanded);
|
||||||
onSelectFolder(node.id);
|
onSelectFolder(node.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{chevron(expanded)}
|
{chevron(expanded)}
|
||||||
{icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
|
{icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
|
||||||
<span className="flex-1 truncate">{node.name}</span>
|
<span className="flex-1 truncate">{node.name}</span>
|
||||||
{node.contact_count > 0 && (
|
{node.contact_count > 0 && (
|
||||||
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
draggable={false}
|
|
||||||
onPointerDown={(e) => { e.stopPropagation(); }}
|
|
||||||
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
|
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
|
||||||
className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
|
className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
|
||||||
title="Optionen"
|
title="Optionen"
|
||||||
|
|||||||
Reference in New Issue
Block a user