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

feat(collections/board): keep title of the column always visible

Browse Source
This commit is contained in:
Elian Doran 2025-10-06 18:10:54 +03:00
parent b1638e1ffc
commit c820b5caa4
No known key found for this signature in database
2 changed files with 37 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,7 +88,6 @@ export default function Column({
onDragOver={isAnyColumnDragging ? handleColumnDragOver : handleDragOver} onDragOver={isAnyColumnDragging ? handleColumnDragOver : handleDragOver}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDrop={handleDrop} onDrop={handleDrop}
onWheel={handleScroll}
style={{ style={{
display: !isVisible ? "none" : undefined display: !isVisible ? "none" : undefined
}} }}
@ -120,33 +119,35 @@ export default function Column({
)} )}
</h3> </h3>
{(columnItems ?? []).map(({ note, branch }, index) => { <div className="board-column-content" onWheel={handleScroll}>
const showIndicatorBefore = dropPosition?.column === column && {(columnItems ?? []).map(({ note, branch }, index) => {
dropPosition.index === index && const showIndicatorBefore = dropPosition?.column === column &&
draggedCard?.noteId !== note.noteId; dropPosition.index === index &&
draggedCard?.noteId !== note.noteId;
return ( return (
<> <>
{showIndicatorBefore && ( {showIndicatorBefore && (
<div className="board-drop-placeholder show" /> <div className="board-drop-placeholder show" />
)} )}
<Card <Card
key={note.noteId} key={note.noteId}
api={api} api={api}
note={note} note={note}
branch={branch} branch={branch}
column={column} column={column}
index={index} index={index}
isDragging={draggedCard?.noteId === note.noteId} isDragging={draggedCard?.noteId === note.noteId}
/> />
</> </>
); );
})} })}
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && ( {dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
<div className="board-drop-placeholder show" /> <div className="board-drop-placeholder show" />
)} )}
<AddNewItem api={api} column={column} /> <AddNewItem api={api} column={column} />
</div>
</div> </div>
) )
} }

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

@ -24,10 +24,13 @@
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 8px; border-radius: 8px;
padding: 0.5em; padding: 0.5em;
padding-bottom: 0;
background-color: var(--accented-background-color); background-color: var(--accented-background-color);
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
overflow-y: auto; overflow-y: auto;
max-height: 100%; max-height: 100%;
display: flex;
flex-direction: column;
} }
.board-view-container .board-column.drag-over { .board-view-container .board-column.drag-over {
@ -37,7 +40,7 @@
.board-view-container .board-column h3 { .board-view-container .board-column h3 {
font-size: 1em; font-size: 1em;
margin-bottom: 0.75em; margin: 0;
padding: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em;
border-bottom: 1px solid var(--main-border-color); border-bottom: 1px solid var(--main-border-color);
cursor: grab; cursor: grab;
@ -98,6 +101,12 @@
cursor: pointer; cursor: pointer;
} }
.board-view-container .board-column > .board-column-content {
flex-grow: 1;
overflow: scroll;
padding-bottom: 0.5em;
}
.board-view-container .board-column h3:hover .edit-icon, .board-view-container .board-column h3:hover .edit-icon,
.board-view-container .board-note:hover .edit-icon { .board-view-container .board-note:hover .edit-icon {
opacity: 1; opacity: 1;