gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

ui/pager: improve code
Some checks are pending
Checks / main (push) Waiting to run
Details

Browse Source
This commit is contained in:
Adorian Doran 2026-02-17 01:14:14 +02:00
parent 782cd59407
commit fcfc6f6476
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/collections/Pagination.css
View File

@ -61,7 +61,6 @@
@container note-list-pager (max-width: 550px) {
.note-list-pager-page-button-container,
.note-list-pager-total-count {
background: red;
display: none;
}

10
apps/client/src/widgets/collections/Pagination.tsx
View File

@ -28,7 +28,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
icon="bx bx-chevron-left"
disabled={(page === 1)}
text={t("pagination.prev_page")}
onClick={() => {setPage(page - 1)}}
onClick={() => setPage(page - 1)}
/>
<PageButtons page={page} setPage={setPage} pageCount={pageCount} />
@ -40,7 +40,7 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
icon="bx bx-chevron-right"
disabled={(page === pageCount)}
text={t("pagination.next_page")}
onClick={() => {setPage(page + 1)}}
onClick={() => setPage(page + 1)}
/>
<div className="note-list-pager-total-count">
@ -77,6 +77,8 @@ function PageButtons(props: PageButtonsProps) {
middleStart = Math.min(middleStart, rightStart - middleLength);
const totalButtonCount = leftLength + middleLength + rightLength;
const hasLeadingEllipsis = (middleStart - leftLength > 1);
const hasTrailingEllipsis = (rightStart - (middleStart + middleLength - 1) > 1);
return <div className={clsx("note-list-pager-page-button-container", {
"note-list-pager-ellipsis-present": (totalButtonCount === maxButtonCount)
@ -84,8 +86,8 @@ function PageButtons(props: PageButtonsProps) {
style={{"--note-list-pager-page-button-count": totalButtonCount}}>
{[
...createSegment(leftStart, leftLength, props.page, props.setPage, false),
...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),
...createSegment(rightStart, rightLength, props.page, props.setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
...createSegment(middleStart, middleLength, props.page, props.setPage, hasLeadingEllipsis),
...createSegment(rightStart, rightLength, props.page, props.setPage, hasTrailingEllipsis),
]}
</div>;
}