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
+9 -2
View File
@@ -472,7 +472,14 @@
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
> >
<!-- Column header --> <!-- 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} {#if editingColumnId === column.id}
<form <form
onsubmit={(e) => { e.preventDefault(); renameColumn(column.id); }} onsubmit={(e) => { e.preventDefault(); renameColumn(column.id); }}
@@ -504,7 +511,7 @@
onclick={() => deleteColumn(column.id)} onclick={() => deleteColumn(column.id)}
class="text-gray-400 dark:text-gray-500 hover:text-[var(--color-danger)] transition p-1" class="text-gray-400 dark:text-gray-500 hover:text-[var(--color-danger)] transition p-1"
title="Delete column" title="Delete column"
aria-label="Delete column" aria-label="Delete column"
> >
<svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />