gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 07:38:53 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

chore(react/collections/table): use a placeholder for items

Browse Source
This commit is contained in:
Elian Doran 2025-09-11 18:32:06 +03:00
parent 728c20c184
commit ce0da3fb80
No known key found for this signature in database
2 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -150,10 +150,6 @@
box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5); box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
} }
.board-view-container .board-note.shift-down {
transform: translateY(100%);
}
.board-view-container .board-note.editing { .board-view-container .board-note.editing {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35);
border-color: var(--main-text-color); border-color: var(--main-text-color);
@ -174,18 +170,19 @@
margin-right: 0.25em; margin-right: 0.25em;
} }
.board-drop-indicator { .board-drop-placeholder {
height: 2px; height: 40px;
background: linear-gradient(90deg, transparent, var(--main-text-color) 20%, var(--main-text-color) 80%, transparent); margin: 0.65em 0;
border-radius: 2px; padding: 0.5em;
margin: -1px 0; border-radius: 5px;
background-color: rgba(0, 0, 0, 0.15);
opacity: 0; opacity: 0;
transition: opacity 0.15s ease; transition: opacity 0.15s ease, height 0.2s ease;
position: relative; box-sizing: border-box;
} }
.board-drop-indicator.show { .board-drop-placeholder.show {
opacity: 0.8; opacity: 0.6;
} }
.column-drop-indicator { .column-drop-indicator {

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

@ -208,15 +208,11 @@ function Column({
const showIndicatorBefore = dropPosition?.column === column && const showIndicatorBefore = dropPosition?.column === column &&
dropPosition.index === index && dropPosition.index === index &&
draggedCard?.noteId !== note.noteId; draggedCard?.noteId !== note.noteId;
const shouldShift = dropPosition?.column === column &&
dropPosition.index <= index &&
draggedCard?.noteId !== note.noteId &&
draggedCard !== null;
return ( return (
<> <>
{showIndicatorBefore && ( {showIndicatorBefore && (
<div className="board-drop-indicator show" /> <div className="board-drop-placeholder show" />
)} )}
<Card <Card
note={note} note={note}
@ -225,13 +221,12 @@ function Column({
index={index} index={index}
setDraggedCard={setDraggedCard} setDraggedCard={setDraggedCard}
isDragging={draggedCard?.noteId === note.noteId} isDragging={draggedCard?.noteId === note.noteId}
shouldShift={shouldShift}
/> />
</> </>
); );
})} })}
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && ( {dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
<div className="board-drop-indicator show" /> <div className="board-drop-placeholder show" />
)} )}
<div className="board-new-item" onClick={() => createNewItem(parentNote, column)}> <div className="board-new-item" onClick={() => createNewItem(parentNote, column)}>
@ -248,16 +243,14 @@ function Card({
column, column,
index, index,
setDraggedCard, setDraggedCard,
isDragging, isDragging
shouldShift
}: { }: {
note: FNote, note: FNote,
branch: FBranch, branch: FBranch,
column: string, column: string,
index: number, index: number,
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void, setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
isDragging: boolean, isDragging: boolean
shouldShift?: boolean
}) { }) {
const colorClass = note.getColorClass() || ''; const colorClass = note.getColorClass() || '';
@ -273,7 +266,7 @@ function Card({
return ( return (
<div <div
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${shouldShift ? 'shift-down' : ''}`} className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''}`}
draggable="true" draggable="true"
onDragStart={handleDragStart} onDragStart={handleDragStart}
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}