gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 06:59:04 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

chore(react/collections/board): improve column dragging experience slightly

Browse Source
This commit is contained in:
Elian Doran 2025-09-13 10:42:10 +03:00
parent 8bde2092c6
commit e77a49ace6
No known key found for this signature in database
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/widgets/collections/board/column.tsx
View File

@ -31,6 +31,7 @@ export default function Column({
isDraggingColumn: boolean, isDraggingColumn: boolean,
api: BoardApi api: BoardApi
} & DragContext) { } & DragContext) {
const [ isVisible, setVisible ] = useState(true);
const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext); const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext);
const isEditing = (columnNameToEdit === column); const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null); const editorRef = useRef<HTMLInputElement>(null);
@ -61,13 +62,20 @@ export default function Column({
editorRef.current?.focus(); editorRef.current?.focus();
}, [ isEditing ]); }, [ isEditing ]);
useEffect(() => {
setVisible(!isDraggingColumn);
}, [ isDraggingColumn ]);
return ( return (
<div <div
className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`} className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''}`}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onWheel={handleScroll} onWheel={handleScroll}
style={{
display: !isVisible ? "none" : undefined
}}
> >
<h3 <h3
className={`${isEditing ? "editing" : ""}`} className={`${isEditing ? "editing" : ""}`}

7
apps/client/src/widgets/collections/board/index.css
View File

@ -79,13 +79,6 @@
border-radius: 4px; border-radius: 4px;
} }
.board-view-container .board-column.column-dragging {
opacity: 0.5;
transform: scale(0.98) rotate(2deg);
transition: opacity 0.2s ease, transform 0.2s ease;
box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.3);
}
.board-view-container .board-column h3 input { .board-view-container .board-column h3 input {
background: transparent; background: transparent;
border: none; border: none;

3
apps/client/src/widgets/collections/board/index.tsx
View File

@ -152,6 +152,7 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
const handleContainerDrop = useCallback((e: DragEvent) => { const handleContainerDrop = useCallback((e: DragEvent) => {
e.preventDefault(); e.preventDefault();
if (draggedColumn && columnDropPosition !== null) { if (draggedColumn && columnDropPosition !== null) {
console.log("Move ", draggedColumn.index, "at", columnDropPosition);
handleColumnDrop(draggedColumn.index, columnDropPosition); handleColumnDrop(draggedColumn.index, columnDropPosition);
} }
}, [draggedColumn, columnDropPosition, handleColumnDrop]); }, [draggedColumn, columnDropPosition, handleColumnDrop]);
@ -169,7 +170,7 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
> >
{byColumn && columns?.map((column, index) => ( {byColumn && columns?.map((column, index) => (
<> <>
{columnDropPosition === index && draggedColumn?.column !== column && ( {columnDropPosition === index && (
<div className="column-drop-placeholder show" /> <div className="column-drop-placeholder show" />
)} )}
<Column <Column