diff --git a/apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts b/apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts index 13c0bde5f..7ea12c48c 100644 --- a/apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts +++ b/apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts @@ -24,6 +24,31 @@ export class ColumnDragHandler implements BaseDragHandler { $titleEl.attr("draggable", "true"); + // Delay drag start to allow click detection + let dragStartTimer: number | null = null; + + $titleEl.on("mousedown", () => { + // Clear any existing timer + if (dragStartTimer) { + clearTimeout(dragStartTimer); + dragStartTimer = null; + } + + // Set a short delay before enabling dragging + dragStartTimer = window.setTimeout(() => { + $titleEl.attr("draggable", "true"); + dragStartTimer = null; + }, 150); + }); + + $titleEl.on("mouseup mouseleave", () => { + // Cancel drag start timer on mouse up or leave + if (dragStartTimer) { + clearTimeout(dragStartTimer); + dragStartTimer = null; + } + }); + $titleEl.on("dragstart", (e) => { // Only start dragging if the target is not an input (for inline editing) if ($(e.target).is('input') || $titleEl.hasClass('editing')) { @@ -54,10 +79,13 @@ export class ColumnDragHandler implements BaseDragHandler { this.context.draggedColumnElement = null; this.cleanupColumnDropIndicators(); this.cleanupGlobalColumnDragTracking(); + + // Re-enable draggable + $titleEl.attr("draggable", "true"); }); } - setupColumnDropZone($columnEl: JQuery, _columnValue: string) { + setupColumnDropZone($columnEl: JQuery) { $columnEl.on("dragover", (e) => { // Only handle column drops when a column is being dragged if (this.context.draggedColumn && !this.context.draggedNote) { diff --git a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts index fc967ec02..9aa602ae0 100644 --- a/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts +++ b/apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts @@ -321,7 +321,7 @@ export class DifferentialBoardRenderer { // Setup drop zones for both notes and columns this.dragHandler.setupNoteDropZone($columnEl, column); - this.dragHandler.setupColumnDropZone($columnEl, column); + this.dragHandler.setupColumnDropZone($columnEl); // Add cards for (const item of columnItems) { diff --git a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts index 4f8866cd2..8cda22f50 100644 --- a/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts +++ b/apps/client/src/widgets/view_widgets/board_view/drag_handler.ts @@ -42,8 +42,8 @@ export class BoardDragHandler { this.columnDragHandler.setupColumnDrag($columnEl, columnValue); } - setupColumnDropZone($columnEl: JQuery, columnValue: string) { - this.columnDragHandler.setupColumnDropZone($columnEl, columnValue); + setupColumnDropZone($columnEl: JQuery) { + this.columnDragHandler.setupColumnDropZone($columnEl); } // Common methods diff --git a/apps/client/src/widgets/view_widgets/board_view/index.ts b/apps/client/src/widgets/view_widgets/board_view/index.ts index 9ea06f6a9..366aff876 100644 --- a/apps/client/src/widgets/view_widgets/board_view/index.ts +++ b/apps/client/src/widgets/view_widgets/board_view/index.ts @@ -348,15 +348,39 @@ export default class BoardView extends ViewMode { } private setupBoardInteractions() { - // Handle column title editing - double-click on h3 to edit - this.$container.on('dblclick', 'h3[data-column-value]', (e) => { - e.stopPropagation(); + // Handle column title editing with click detection that works with dragging + this.$container.on('mousedown', 'h3[data-column-value]', (e) => { const $titleEl = $(e.currentTarget); - const columnValue = $titleEl.attr('data-column-value'); - if (columnValue) { - const columnItems = this.api?.getColumn(columnValue) || []; - this.startEditingColumnTitle($titleEl, columnValue, columnItems); - } + const startTime = Date.now(); + let hasMoved = false; + const startX = e.clientX; + const startY = e.clientY; + + const handleMouseMove = (moveEvent: JQuery.MouseMoveEvent) => { + const deltaX = Math.abs(moveEvent.clientX - startX); + const deltaY = Math.abs(moveEvent.clientY - startY); + if (deltaX > 5 || deltaY > 5) { + hasMoved = true; + } + }; + + const handleMouseUp = (upEvent: JQuery.MouseUpEvent) => { + const duration = Date.now() - startTime; + $(document).off('mousemove', handleMouseMove); + $(document).off('mouseup', handleMouseUp); + + // If it was a quick click without much movement, treat as edit request + if (duration < 500 && !hasMoved && upEvent.button === 0) { + const columnValue = $titleEl.attr('data-column-value'); + if (columnValue) { + const columnItems = this.api?.getColumn(columnValue) || []; + this.startEditingColumnTitle($titleEl, columnValue, columnItems); + } + } + }; + + $(document).on('mousemove', handleMouseMove); + $(document).on('mouseup', handleMouseUp); }); // Handle add column button @@ -370,7 +394,7 @@ export default class BoardView extends ViewMode { const $titleText = $("").text(title); const $editIcon = $("") .addClass("edit-icon icon bx bx-edit-alt") - .attr("title", "Double-click to edit column title"); + .attr("title", "Click to edit column title"); return { $titleText, $editIcon }; }