Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases 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
2 changed files with 15 additions and 25 deletions
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);
}
.board-view-container .board-note.shift-down {
transform: translateY(100%);
}
.board-view-container .board-note.editing {
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35);
border-color: var(--main-text-color);
@@ -174,18 +170,19 @@
margin-right: 0.25em;
}
.board-drop-indicator {
height: 2px;
background: linear-gradient(90deg, transparent, var(--main-text-color) 20%, var(--main-text-color) 80%, transparent);
border-radius: 2px;
margin: -1px 0;
.board-drop-placeholder {
height: 40px;
margin: 0.65em 0;
padding: 0.5em;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.15s ease;
position: relative;
transition: opacity 0.15s ease, height 0.2s ease;
box-sizing: border-box;
}
.board-drop-indicator.show {
opacity: 0.8;
.board-drop-placeholder.show {
opacity: 0.6;
}
.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 &&
dropPosition.index === index &&
draggedCard?.noteId !== note.noteId;
const shouldShift = dropPosition?.column === column &&
dropPosition.index <= index &&
draggedCard?.noteId !== note.noteId &&
draggedCard !== null;
return (
<>
{showIndicatorBefore && (
<div className="board-drop-indicator show" />
<div className="board-drop-placeholder show" />
)}
<Card
note={note}
@@ -225,13 +221,12 @@ function Column({
index={index}
setDraggedCard={setDraggedCard}
isDragging={draggedCard?.noteId === note.noteId}
shouldShift={shouldShift}
/>
</>
);
})}
{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)}>
@@ -248,16 +243,14 @@ function Card({
column,
index,
setDraggedCard,
isDragging,
shouldShift
isDragging
}: {
note: FNote,
branch: FBranch,
column: string,
index: number,
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
isDragging: boolean,
shouldShift?: boolean
isDragging: boolean
}) {
const colorClass = note.getColorClass() || '';
@@ -273,7 +266,7 @@ function Card({
return (
<div
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${shouldShift ? 'shift-down' : ''}`}
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''}`}
draggable="true"
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}