gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 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,
api: BoardApi
} & DragContext) {
const [ isVisible, setVisible ] = useState(true);
const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition } = useContext(BoardViewContext);
const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null);
@ -61,13 +62,20 @@ export default function Column({
editorRef.current?.focus();
}, [ isEditing ]);
useEffect(() => {
setVisible(!isDraggingColumn);
}, [ isDraggingColumn ]);
return (
<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}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
onWheel={handleScroll}
style={{
display: !isVisible ? "none" : undefined
}}
>
<h3
className={`${isEditing ? "editing" : ""}`}

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

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