gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(views/board): reintroduce one-click title edit

Browse Source
This commit is contained in:
Elian Doran 2025-07-25 12:00:04 +03:00
parent 69f12a2916
commit dfeb414aff
No known key found for this signature in database
4 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts
View File

@ -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<HTMLElement>, _columnValue: string) {
setupColumnDropZone($columnEl: JQuery<HTMLElement>) {
$columnEl.on("dragover", (e) => {
// Only handle column drops when a column is being dragged
if (this.context.draggedColumn && !this.context.draggedNote) {

2
apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts
View File

@ -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) {

4
apps/client/src/widgets/view_widgets/board_view/drag_handler.ts
View File

@ -42,8 +42,8 @@ export class BoardDragHandler {
this.columnDragHandler.setupColumnDrag($columnEl, columnValue);
}
setupColumnDropZone($columnEl: JQuery<HTMLElement>, columnValue: string) {
this.columnDragHandler.setupColumnDropZone($columnEl, columnValue);
setupColumnDropZone($columnEl: JQuery<HTMLElement>) {
this.columnDragHandler.setupColumnDropZone($columnEl);
}
// Common methods

32
apps/client/src/widgets/view_widgets/board_view/index.ts
View File

@ -348,15 +348,39 @@ export default class BoardView extends ViewMode<BoardData> {
}
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 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<BoardData> {
const $titleText = $("<span>").text(title);
const $editIcon = $("<span>")
.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 };
}