gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-22 15:24:24 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

feat(right_pane): add count to highlights list

Browse Source
This commit is contained in:
Elian Doran 2025-12-20 12:25:43 +02:00
parent 35afd60d00
commit b248805905
No known key found for this signature in database
2 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/translations/en/translation.json
View File

@ -1723,6 +1723,8 @@
}, },
"highlights_list_2": { "highlights_list_2": {
"title": "Highlights List", "title": "Highlights List",
"title_with_count_one": "{{count}} highlight",
"title_with_count_other": "{{count}} highlights",
"options": "Options", "options": "Options",
"modal_title": "Configure Highlights List", "modal_title": "Configure Highlights List",
"menu_configure": "Configure highlights list...", "menu_configure": "Configure highlights list...",

89
apps/client/src/widgets/sidebar/HighlightsList.tsx
View File

@ -3,7 +3,6 @@ import { createPortal } from "preact/compat";
import { useCallback, useEffect, useState } from "preact/hooks"; import { useCallback, useEffect, useState } from "preact/hooks";
import { t } from "../../services/i18n"; import { t } from "../../services/i18n";
import ActionButton from "../react/ActionButton";
import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor, useTriliumOptionJson } from "../react/hooks"; import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor, useTriliumOptionJson } from "../react/hooks";
import Modal from "../react/Modal"; import Modal from "../react/Modal";
import { HighlightsListOptions } from "../type_widgets/options/text_notes"; import { HighlightsListOptions } from "../type_widgets/options/text_notes";
@ -25,26 +24,11 @@ export default function HighlightsList() {
const { note, noteContext } = useActiveNoteContext(); const { note, noteContext } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type"); const noteType = useNoteProperty(note, "type");
const { isReadOnly } = useIsNoteReadOnly(note, noteContext); const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
const [ shown, setShown ] = useState(false);
return ( return (
<> <>
<RightPanelWidget {noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
id="highlights" {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
title={t("highlights_list_2.title")}
contextMenuItems={[
{
title: t("highlights_list_2.menu_configure"),
uiIcon: "bx bx-cog",
handler: () => setShown(true)
}
]}
grow
>
{noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
{noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
</RightPanelWidget>
{createPortal(<HighlightListOptionsModal shown={shown} setShown={setShown} />, document.body)}
</> </>
); );
} }
@ -80,33 +64,50 @@ function AbstractHighlightsList<T extends RawHighlight>({ highlights, scrollToHi
); );
}); });
const [ shown, setShown ] = useState(false);
return ( return (
<span className="highlights-list"> <>
{filteredHighlights.length > 0 ? ( <RightPanelWidget
<ol> id="highlights"
{filteredHighlights.map(highlight => ( title={t("highlights_list_2.title_with_count", { count: filteredHighlights.length })}
<li contextMenuItems={[
key={highlight.id} {
onClick={() => scrollToHighlight(highlight)} title: t("highlights_list_2.menu_configure"),
> uiIcon: "bx bx-cog",
<span handler: () => setShown(true)
style={{ }
fontWeight: highlight.attrs.bold ? "700" : undefined, ]}
fontStyle: highlight.attrs.italic ? "italic" : undefined, grow
textDecoration: highlight.attrs.underline ? "underline" : undefined, >
color: highlight.attrs.color, <span className="highlights-list">
backgroundColor: highlight.attrs.background {filteredHighlights.length > 0 ? (
}} <ol>
>{highlight.text}</span> {filteredHighlights.map(highlight => (
</li> <li
))} key={highlight.id}
</ol> onClick={() => scrollToHighlight(highlight)}
) : ( >
<div className="no-highlights"> <span
{t("highlights_list_2.no_highlights")} style={{
</div> fontWeight: highlight.attrs.bold ? "700" : undefined,
)} fontStyle: highlight.attrs.italic ? "italic" : undefined,
</span> textDecoration: highlight.attrs.underline ? "underline" : undefined,
color: highlight.attrs.color,
backgroundColor: highlight.attrs.background
}}
>{highlight.text}</span>
</li>
))}
</ol>
) : (
<div className="no-highlights">
{t("highlights_list_2.no_highlights")}
</div>
)}
</span>
</RightPanelWidget>
{createPortal(<HighlightListOptionsModal shown={shown} setShown={setShown} />, document.body)}
</>
); );
} }