cat/Kanban
Private
Public Access
1
0
Fork 0
Code Activity

Add drag handle icon to column headers

Browse Source 
Shows a grip dots icon in the column header when the user can edit,
making it visually clear that columns are draggable. Also adds
cursor-grab/grabbing styles to the header.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-26 07:45:58 -05:00
parent 95f8e9a70b
commit 606c1b0652
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/boards/[boardId]/+page.svelte
+8 -1
View File
@@ -472,7 +472,14 @@
animate:flip={{ duration: flipDurationMs }}
>
<!-- Column header -->
<div class="flex items-center justify-between px-3 py-2.5">
<div class="flex items-center justify-between px-3 py-2.5 cursor-grab active:cursor-grabbing">
{#if data.canEdit && editingColumnId !== column.id}
<div class="flex-shrink-0 text-gray-300 dark:text-gray-600 mr-1" aria-hidden="true">
<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 2a2 2 0 10.001 4.001A2 2 0 007 2zm0 6a2 2 0 10.001 4.001A2 2 0 007 8zm0 6a2 2 0 10.001 4.001A2 2 0 007 14zm6-8a2 2 0 10-.001-4.001A2 2 0 0013 6zm0 2a2 2 0 10.001 4.001A2 2 0 0013 8zm0 6a2 2 0 10.001 4.001A2 2 0 0013 14z" />
</svg>
</div>
{/if}
{#if editingColumnId === column.id}
<form
onsubmit={(e) => { e.preventDefault(); renameColumn(column.id); }}