Compare commits

..

5 Commits

Author SHA1 Message Date
Adorian Doran
ea25477e3d ui/pager: fix some issues 2026-02-16 02:06:39 +02:00
Adorian Doran
82576c9703 ui/pager: rewrite the pagination button distribution algorithm to better control the length 2026-02-16 01:51:32 +02:00
Adorian Doran
0b8cba78d5 ui/pager: remove unused styles 2026-02-15 21:36:53 +02:00
Adorian Doran
d8806eaa04 ui/pager: replace the page number links with buttons 2026-02-15 21:31:58 +02:00
Adorian Doran
b8bc85856b ui/pager: add prev/next page navigation buttons 2026-02-15 21:12:42 +02:00
22 changed files with 141 additions and 160 deletions

View File

@@ -1064,6 +1064,10 @@
"default_new_note_title": "新笔记",
"click_on_canvas_to_place_new_note": "点击画布以放置新笔记"
},
"render": {
"note_detail_render_help_1": "之所以显示此帮助说明,是因为这个类型为渲染 HTML 的笔记没有正常工作所需的关系。",
"note_detail_render_help_2": "渲染 HTML 笔记类型用于<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">编写脚本</a>。简而言之,您有一份 HTML 代码笔记(可包含一些 JavaScript然后这个笔记会把页面渲染出来。要使其正常工作您需要定义一个名为 \"renderNote\" 的<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">关系</a>指向要渲染的 HTML 笔记。"
},
"backend_log": {
"refresh": "刷新"
},

View File

@@ -1063,6 +1063,10 @@
"default_new_note_title": "neue Notiz",
"click_on_canvas_to_place_new_note": "Klicke auf den Canvas, um eine neue Notiz zu platzieren"
},
"render": {
"note_detail_render_help_1": "Diese Hilfesnotiz wird angezeigt, da diese Notiz vom Typ „HTML rendern“ nicht über die erforderliche Beziehung verfügt, um ordnungsgemäß zu funktionieren.",
"note_detail_render_help_2": "Render-HTML-Notiztyp wird benutzt für <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. Kurzgesagt, du hast ein HTML-Code-Notiz (optional mit JavaScript) und diese Notiz rendert es. Damit es funktioniert, musst du eine a <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">Beziehung</a> namens \"renderNote\" zeigend auf die HTML-Notiz zum rendern definieren."
},
"backend_log": {
"refresh": "Aktualisieren"
},

View File

@@ -1010,7 +1010,7 @@
"no_attachments": "This note has no attachments."
},
"book": {
"no_children_help": "This collection doesn't have any child notes so there's nothing to display.",
"no_children_help": "This collection doesn't have any child notes so there's nothing to display. See <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a> for details.",
"drag_locked_title": "Locked for editing",
"drag_locked_message": "Dragging not allowed since the collection is locked for editing."
},
@@ -2190,8 +2190,9 @@
"percentage": "%"
},
"pagination": {
"page_title": "Page of {{startIndex}} - {{endIndex}}",
"total_notes": "{{count}} notes"
"total_notes": "{{count}} notes",
"prev_page": "Previous page",
"next_page": "Next page"
},
"collections": {
"rendering_error": "Unable to show content due to an error."

View File

@@ -1068,6 +1068,10 @@
"default_new_note_title": "nueva nota",
"click_on_canvas_to_place_new_note": "Haga clic en el lienzo para colocar una nueva nota"
},
"render": {
"note_detail_render_help_1": "Esta nota de ayuda se muestra porque esta nota de tipo Renderizar HTML no tiene la relación requerida para funcionar correctamente.",
"note_detail_render_help_2": "El tipo de nota Render HTML es usado para <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. De forma resumida, tiene una nota con código HTML (opcionalmente con algo de JavaScript) y esta nota la renderizará. Para que funcione, es necesario definir una <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relación</a> llamada \"renderNote\" apuntando a la nota HTML nota a renderizar."
},
"backend_log": {
"refresh": "Refrescar"
},
@@ -2298,43 +2302,6 @@
"url_placeholder": "Ingresar o pegar la dirección del sitio web, por ejemplo https://triliumnotes.org",
"create_button": "Crear Vista Web",
"invalid_url_title": "Dirección inválida",
"invalid_url_message": "Ingrese una dirección web válida, por ejemplo https://triliumnotes.org.",
"disabled_description": "Esta vista web fue importada de una fuente externa. Para ayudarlo a protegerse del phishing o el contenido malicioso, no se está cargando automáticamente. Puede activarlo si confía en la fuente.",
"disabled_button_enable": "Habilita vista web"
},
"render": {
"setup_title": "Mostrar HTML personalizado o Preact JSX dentro de esta nota",
"setup_create_sample_preact": "Crear nota de muestra con Preact",
"setup_create_sample_html": "Crear nota de muestra con HTML",
"setup_sample_created": "Se creó una nota de muestra como subnota.",
"disabled_description": "Esta nota de renderización proviene de una fuente externa. Para protegerlo de contenido malicioso, no está habilitado por defecto. Asegúrese de confiar en la fuente antes de habilitarla.",
"disabled_button_enable": "Habilitar nota de renderización"
},
"active_content_badges": {
"type_icon_pack": "Paquete de iconos",
"type_backend_script": "Script de backend",
"type_frontend_script": "Script de frontend",
"type_widget": "Widget",
"type_app_css": "CSS personalizado",
"type_render_note": "Nota de renderización",
"type_web_view": "Vista web",
"type_app_theme": "Tema personalizado",
"toggle_tooltip_enable_tooltip": "Haga clic para habilitar este {{type}}.",
"toggle_tooltip_disable_tooltip": "Haga clic para deshabilitar este {{type}}.",
"menu_docs": "Abrir documentación",
"menu_execute_now": "Ejecutar script ahora",
"menu_run": "Ejecutar automáticamente",
"menu_run_disabled": "Manualmente",
"menu_run_backend_startup": "Cuando el backend inicia",
"menu_run_hourly": "Cada hora",
"menu_run_daily": "Diariamente",
"menu_run_frontend_startup": "Cuando el frontend de escritorio inicia",
"menu_run_mobile_startup": "Cuando el frontend móvil inicia",
"menu_change_to_widget": "Cambiar a widget",
"menu_change_to_frontend_script": "Cambiar a script de frontend",
"menu_theme_base": "Tema base"
},
"setup_form": {
"more_info": "Para saber más"
"invalid_url_message": "Ingrese una dirección web válida, por ejemplo https://triliumnotes.org."
}
}

View File

@@ -1053,6 +1053,10 @@
"default_new_note_title": "nouvelle note",
"click_on_canvas_to_place_new_note": "Cliquez sur le canevas pour placer une nouvelle note"
},
"render": {
"note_detail_render_help_1": "Cette note d'aide s'affiche car cette note de type Rendu HTML n'a pas la relation requise pour fonctionner correctement.",
"note_detail_render_help_2": "Le type de note Rendu HTML est utilisé pour les <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripts</a>. En résumé, vous disposez d'une note de code HTML (éventuellement contenant JavaScript) et cette note affichera le rendu. Pour que cela fonctionne, vous devez définir une <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relation</a> appelée \"renderNote\" pointant vers la note HTML à rendre."
},
"backend_log": {
"refresh": "Rafraîchir"
},

View File

@@ -1072,6 +1072,10 @@
"default_new_note_title": "nóta nua",
"click_on_canvas_to_place_new_note": "Cliceáil ar chanbhás chun nóta nua a chur"
},
"render": {
"note_detail_render_help_1": "Taispeántar an nóta cabhrach seo mar nach bhfuil aon ghaol riachtanach ag an nóta seo den chineál Render HTML le go bhfeidhmeoidh sé i gceart.",
"note_detail_render_help_2": "Úsáidtear cineál nóta HTML rindreála le haghaidh <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scriptithe</a>. Go hachomair, tá nóta cóid HTML agat (le roinnt JavaScript más féidir) agus déanfaidh an nóta seo é a rindreáil. Chun go n-oibreoidh sé, ní mór duit <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">gaol</a> ar a dtugtar \"renderNote\" a shainiú ag pointeáil chuig an nóta HTML atá le rindreáil."
},
"backend_log": {
"refresh": "Athnuachan"
},
@@ -2108,8 +2112,7 @@
"raster": "Raster",
"vector_light": "Veicteoir (Solas)",
"vector_dark": "Veicteoir (Dorcha)",
"show-scale": "Taispeáin scála",
"show-labels": "Taispeáin ainmneacha marcóirí"
"show-scale": "Taispeáin scála"
},
"table_context_menu": {
"delete_row": "Scrios an tsraith"
@@ -2329,43 +2332,6 @@
"url_placeholder": "Cuir isteach nó greamaigh seoladh an tsuímh ghréasáin, mar shampla https://triliumnotes.org",
"create_button": "Cruthaigh Radharc Gréasáin",
"invalid_url_title": "Seoladh neamhbhailí",
"invalid_url_message": "Cuir isteach seoladh gréasáin bailí, mar shampla https://triliumnotes.org.",
"disabled_description": "Iompórtáladh an radharc gréasáin seo ó fhoinse sheachtrach. Chun cabhrú leat a chosaint ar ábhar fioscaireachta nó mailíseach, níl sé ag lódáil go huathoibríoch. Is féidir leat é a chumasú má tá muinín agat as an bhfoinse.",
"disabled_button_enable": "Cumasaigh radharc gréasáin"
},
"render": {
"setup_title": "Taispeáin HTML saincheaptha nó Preact JSX taobh istigh den nóta seo",
"setup_create_sample_preact": "Cruthaigh nóta samplach le Preact",
"setup_create_sample_html": "Cruthaigh nóta samplach le HTML",
"setup_sample_created": "Cruthaíodh nóta samplach mar nóta linbh.",
"disabled_description": "Tagann na nótaí rindreála seo ó fhoinse sheachtrach. Chun tú a chosaint ar ábhar mailíseach, níl sé cumasaithe de réir réamhshocraithe. Déan cinnte go bhfuil muinín agat as an bhfoinse sula gcumasaíonn tú é.",
"disabled_button_enable": "Cumasaigh nóta rindreála"
},
"active_content_badges": {
"type_icon_pack": "Pacáiste deilbhín",
"type_backend_script": "Script chúltaca",
"type_frontend_script": "Script tosaigh",
"type_widget": "Giuirléid",
"type_app_css": "CSS saincheaptha",
"type_render_note": "Nóta rindreála",
"type_web_view": "Radharc gréasáin",
"type_app_theme": "Téama saincheaptha",
"toggle_tooltip_enable_tooltip": "Cliceáil chun an {{type}} seo a chumasú.",
"toggle_tooltip_disable_tooltip": "Cliceáil chun an {{type}} seo a dhíchumasú.",
"menu_docs": "Doiciméadú oscailte",
"menu_execute_now": "Rith an script anois",
"menu_run": "Rith go huathoibríoch",
"menu_run_disabled": "De láimh",
"menu_run_backend_startup": "Nuair a thosaíonn an cúltaca",
"menu_run_hourly": "Gach uair an chloig",
"menu_run_daily": "Laethúil",
"menu_run_frontend_startup": "Nuair a thosaíonn tosaigh an deisce",
"menu_run_mobile_startup": "Nuair a thosaíonn an taobhlíne soghluaiste",
"menu_change_to_widget": "Athraigh go giuirléid",
"menu_change_to_frontend_script": "Athraigh chuig an script tosaigh",
"menu_theme_base": "Bunús téama"
},
"setup_form": {
"more_info": "Foghlaim níos mó"
"invalid_url_message": "Cuir isteach seoladh gréasáin bailí, mar shampla https://triliumnotes.org."
}
}

View File

@@ -1582,6 +1582,10 @@
"default_new_note_title": "nuova nota",
"click_on_canvas_to_place_new_note": "Clicca sulla tela per inserire una nuova nota"
},
"render": {
"note_detail_render_help_1": "Questa nota di aiuto viene visualizzata perché questa nota di tipo Render HTML non ha la relazione richiesta per funzionare correttamente.",
"note_detail_render_help_2": "Il tipo di nota HTML Render viene utilizzato per lo <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. In breve, si ottiene una nota in codice HTML (opzionalmente con un po' di JavaScript) che verrà visualizzata. Per farla funzionare, è necessario definire una <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relazione</a> denominata \"renderNote\" che punti alla nota HTML da visualizzare."
},
"vacuum_database": {
"title": "Pulizia del database",
"description": "Questa operazione ricostruirà il database, generando in genere un file di dimensioni inferiori. In realtà, nessun dato verrà modificato.",

View File

@@ -1860,6 +1860,10 @@
"protecting-title": "保護の状態",
"unprotecting-title": "保護解除の状態"
},
"render": {
"note_detail_render_help_1": "このヘルプートが表示されるのは、このートの「HTML のレンダリング」タイプには、正常に機能するために必要なリレーションがないためです。",
"note_detail_render_help_2": "レンダリングHTMLートタイプは、<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">スクリプティング</a>に使用されます。簡単に言うと、HTMLコードートオプションでJavaScriptを含むがあり、このートがそれをレンダリングします。これを動作させるには、レンダリングするHTMLートを指す「renderNote」という<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">リレーション</a>を定義する必要があります。"
},
"consistency_checks": {
"find_and_fix_button": "一貫性の問題を見つけて修正する",
"finding_and_fixing_message": "一貫性の問題を見つけて修正中…",

View File

@@ -1432,6 +1432,10 @@
"default_new_note_title": "nowa notatka",
"click_on_canvas_to_place_new_note": "Kliknij na płótnie, aby umieścić nową notatkę"
},
"render": {
"note_detail_render_help_1": "Ta notatka pomocy jest wyświetlana, ponieważ ta notatka typu Render HTML nie ma wymaganej relacji do poprawnego działania.",
"note_detail_render_help_2": "Typ notatki Render HTML jest używany do <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">skryptowania</a>. W skrócie, masz notatkę kodu HTML (opcjonalnie z JavaScript) i ta notatka ją wyrenderuje. Aby to zadziałało, musisz zdefiniować <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relację</a> o nazwie \"renderNote\" wskazującą na notatkę HTML do wyrenderowania."
},
"backend_log": {
"refresh": "Odśwież"
},

View File

@@ -1064,6 +1064,10 @@
"default_new_note_title": "nova nota",
"click_on_canvas_to_place_new_note": "Clique no quadro para incluir uma nova nota"
},
"render": {
"note_detail_render_help_1": "Esta nota de ajuda é mostrada porque esta nota do tipo Renderizar HTML não possui a relação necessária para funcionar corretamente.",
"note_detail_render_help_2": "O tipo de nota Renderizar HTML é usado para <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">automação</a>. Em suma, tem uma nota de código HTML (opcionalmente com algum JavaScript) e esta nota irá renderizá-la. Para fazê-lo funcionar, deve definir uma <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relação</a> chamada \"renderNote\" que aponta para a nota HTML a ser renderizada."
},
"backend_log": {
"refresh": "Recarregar"
},

View File

@@ -1991,6 +1991,10 @@
"drag_locked_title": "Bloqueado para edição",
"drag_locked_message": "Arrastar não é permitido pois a coleção está bloqueada para edição."
},
"render": {
"note_detail_render_help_1": "Esta nota de ajuda é mostrada porque esta nota do tipo Renderizar HTML não possui a relação necessária para funcionar corretamente.",
"note_detail_render_help_2": "O tipo de nota Renderizar HTML é usado para <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">automação</a>. Em suma, você tem uma nota de código HTML (opcionalmente com algum JavaScript) e esta nota irá renderizá-la. Para fazê-lo funcionar, você precisa definir uma <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relação</a> chamada \"renderNote\" apontando para a nota HTML a ser renderizada."
},
"etapi": {
"title": "ETAPI",
"description": "ETAPI é uma API REST usada para acessar a instância do Trilium programaticamente, sem interface gráfica.",

View File

@@ -1094,6 +1094,10 @@
"rename_relation_from": "Redenumește relația din",
"to": "În"
},
"render": {
"note_detail_render_help_1": "Această notă informativă este afișată deoarece această notiță de tip „Randare HTML” nu are relația necesară pentru a funcționa corespunzător.",
"note_detail_render_help_2": "Notița de tipul „Render HTML” este utilizată pentru <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scriptare</a>. Pe scurt, se folosește o notiță de tip cod HTML (opțional cu niște JavaScript) și această notiță o va randa. Pentru a funcționa, trebuie definită o <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relație</a> denumită „renderNote” ce indică notița HTML de randat."
},
"revisions": {
"confirm_delete": "Doriți ștergerea acestei revizii?",
"confirm_delete_all": "Doriți ștergerea tuturor reviziilor acestei notițe?",

View File

@@ -2081,6 +2081,10 @@
"help-button": {
"title": "Открыть соответствующую страницу справки"
},
"render": {
"note_detail_render_help_2": "Тип заметки «Рендер HTML» используется для <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">скриптинга</a>. Если коротко, у вас есть заметка с HTML-кодом (возможно, с добавлением JavaScript), и эта заметка её отобразит. Для этого необходимо определить <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">отношение</a> с именем «renderNote», указывающее на HTML-заметку для отрисовки.",
"note_detail_render_help_1": "Эта справочная заметка отображается, поскольку эта справка типа Render HTML не имеет необходимой связи для правильной работы."
},
"file": {
"too_big": "В целях повышения производительности в режиме предварительного просмотра отображаются только первые {{maxNumChars}} символов файла. Загрузите файл и откройте его во внешнем браузере, чтобы увидеть всё содержимое.",
"file_preview_not_available": "Предварительный просмотр файла недоступен для этого файла."

View File

@@ -1063,6 +1063,10 @@
"default_new_note_title": "新筆記",
"click_on_canvas_to_place_new_note": "點擊畫布以放置新筆記"
},
"render": {
"note_detail_render_help_1": "之所以顯示此說明筆記,是因為該類型的渲染 HTML 沒有設定好必須的關聯。",
"note_detail_render_help_2": "渲染筆記類型用於編寫 <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">腳本</a>。簡單說就是您可以寫HTML程式碼或者加上一些JavaScript程式碼 然後這個筆記會把頁面渲染出來。要使其正常工作,您需要定義一個名為 \"renderNote\" 的 <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">關聯</a> 指向要呈現的 HTML 筆記。"
},
"backend_log": {
"refresh": "重新整理"
},

View File

@@ -1130,6 +1130,10 @@
"default_new_note_title": "нова нотатка",
"click_on_canvas_to_place_new_note": "Натисніть на полотно, щоб розмістити нову нотатку"
},
"render": {
"note_detail_render_help_1": "Ця довідка відображається, оскільки ця нотатка типу Render HTML не має необхідного зв'язку для належного функціонування.",
"note_detail_render_help_2": "Тип нотатки Render HTML використовується для <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">скриптів</a>. Коротше кажучи, у вас є нотатка з HTML-кодом (за бажанням з деяким JavaScript), і ця нотатка її відобразить. Щоб це запрацювало, вам потрібно визначити <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">відношення</a> під назвою \"renderNote\", яке вказує на нотатку HTML для відображення."
},
"backend_log": {
"refresh": "Оновити"
},

View File

@@ -1,7 +1,6 @@
import "./NoteDetail.css";
import clsx from "clsx";
import { note } from "mermaid/dist/rendering-util/rendering-elements/shapes/note.js";
import { isValidElement, VNode } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
@@ -356,14 +355,6 @@ export function checkFullHeight(noteContext: NoteContext | undefined, type: Exte
// https://github.com/zadam/trilium/issues/2522
const isBackendNote = noteContext?.noteId === "_backendLog";
const isFullHeightNoteType = type && TYPE_MAPPINGS[type].isFullHeight;
// Allow vertical centering when there are no results.
if (type === "book" &&
[ "grid", "list" ].includes(noteContext.note?.getLabelValue("viewType") ?? "grid") &&
!noteContext.note?.hasChildren()) {
return true;
}
return (!noteContext?.hasNoteList() && isFullHeightNoteType)
|| noteContext?.viewScope?.viewMode === "attachments"
|| isBackendNote;

View File

@@ -2,12 +2,8 @@
min-height: 0;
max-width: var(--max-content-width); /* Inherited from .note-split */
overflow: visible;
overflow: auto;
contain: none !important;
&.full-height {
overflow: auto;
}
}
body.prefers-centered-content .note-list-widget:not(.full-height) {
@@ -23,14 +19,3 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
.note-list-widget video {
height: 100%;
}
/* #region Pagination */
.note-list-pager {
font-size: 1rem;
span.current-page {
text-decoration: underline;
font-weight: bold;
}
}
/* #endregion */

View File

@@ -4,6 +4,8 @@ import FNote from "../../entities/fnote";
import froca from "../../services/froca";
import { useNoteLabelInt } from "../react/hooks";
import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
import Button from "../react/Button";
interface PaginationContext {
page: number;
@@ -17,46 +19,79 @@ interface PaginationContext {
export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<PaginationContext, "pageNotes">) {
if (pageCount < 2) return;
let lastPrinted = false;
let children: ComponentChildren[] = [];
for (let i = 1; i <= pageCount; i++) {
if (pageCount < 20 || i <= 5 || pageCount - i <= 5 || Math.abs(page - i) <= 2) {
lastPrinted = true;
const startIndex = (i - 1) * pageSize + 1;
const endIndex = Math.min(totalNotes, i * pageSize);
if (i !== page) {
children.push((
<a
href="javascript:"
title={t("pagination.page_title", { startIndex, endIndex })}
onClick={() => setPage(i)}
>
{i}
</a>
))
} else {
// Current page
children.push(<span className="current-page">{i}</span>)
}
children.push(<>{" "}&nbsp;{" "}</>);
} else if (lastPrinted) {
children.push(<>{"... "}&nbsp;{" "}</>);
lastPrinted = false;
}
}
const children = createPageButtons(page, setPage, pageCount);
return (
<div class="note-list-pager">
{children}
<ActionButton
icon="bx bx-caret-left"
disabled={(page === 1)}
text={t("pagination.prev_page")}
onClick={() => {setPage(page - 1)}}
/>
{children}
<ActionButton
icon="bx bx-caret-right"
disabled={(page === pageCount)}
text={t("pagination.next_page")}
onClick={() => {setPage(page + 1)}}
/>
<span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
</div>
)
}
function createPageButtons(page: number, setPage: Dispatch<StateUpdater<number>>, pageCount: number): ComponentChildren[] {
const maxButtonCount = 9;
const maxLeftRightSegmentLength = 2;
// The left-side segment
const leftLength = Math.min(pageCount, maxLeftRightSegmentLength);
const leftStart = 1;
// The middle segment
const middleMaxLength = maxButtonCount - maxLeftRightSegmentLength * 2;
const middleLength = Math.min(pageCount - leftLength, middleMaxLength);
let middleStart = page - Math.floor(middleLength / 2);
middleStart = Math.max(middleStart, leftLength + 1);
// The right-side segment
const rightLength = Math.min(pageCount - (middleLength + leftLength), maxLeftRightSegmentLength);
const rightStart = pageCount - rightLength + 1;
middleStart = Math.min(middleStart, rightStart - middleLength);
return [
...createSegment(leftStart, leftLength, page, setPage, false),
...createSegment(middleStart, middleLength, page, setPage, (middleStart - leftLength > 1)),
...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
];
}
function createSegment(start: number, length: number, currentPage: number, setPage: Dispatch<StateUpdater<number>>, prependEllipsis: boolean): ComponentChildren[] {
const children: ComponentChildren[] = [];
if (prependEllipsis) {
children.push("...");
}
for (let i = 0; i < length; i++) {
const pageNum = start + i;
children.push((
<Button
text={pageNum.toString()}
disabled={(pageNum === currentPage)}
onClick={() => setPage(pageNum)}
/>
));
}
return children;
}
export function usePagination(note: FNote, noteIds: string[]): PaginationContext {
const [ page, setPage ] = useState(1);
const [ pageNotes, setPageNotes ] = useState<FNote[]>();

View File

@@ -18,10 +18,6 @@ body.mobile .geo-view > .collection-properties {
.geo-map-container {
height: 100%;
overflow: hidden;
.maplibregl-canvas-container {
position: relative;
}
}
.leaflet-pane {

View File

@@ -1,5 +1,5 @@
.note-list {
overflow: visible;
overflow: hidden;
position: relative;
height: 100%;
}
@@ -100,10 +100,6 @@
overflow: auto;
}
.note-list-pager {
text-align: center;
}
/* #region List view */
@keyframes note-preview-show {

View File

@@ -5,7 +5,7 @@
align-items: center;
width: 100%;
max-width: unset;
font-size: 0.8rem;
font-size: 0.8em;
.dropdown-menu {
input.form-control {

View File

@@ -1,13 +1,11 @@
import "./Book.css";
import { useEffect, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import { ViewTypeOptions } from "../collections/interface";
import CollectionProperties from "../note_bars/CollectionProperties";
import Alert from "../react/Alert";
import { useNoteLabelWithDefault, useTriliumEvent } from "../react/hooks";
import NoItems from "../react/NoItems";
import RawHtml from "../react/RawHtml";
import { TypeWidgetProps } from "./type_widget";
import "./Book.css";
import { useEffect, useState } from "preact/hooks";
import { ViewTypeOptions } from "../collections/interface";
const VIEW_TYPES: ViewTypeOptions[] = [ "list", "grid", "presentation" ];
@@ -29,12 +27,10 @@ export default function Book({ note }: TypeWidgetProps) {
return (
<>
{shouldDisplayNoChildrenWarning && (
<>
<CollectionProperties note={note} />
<NoItems icon="bx bx-collection" text={t("book.no_children_help")} />
</>
<Alert type="warning" className="note-detail-book-empty-help">
<RawHtml html={t("book.no_children_help")} />
</Alert>
)}
</>
);
)
}