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

feat(right_pane_widget): options modal for highlight list

Browse Source
This commit is contained in:
Elian Doran 2025-12-19 23:02:32 +02:00
parent 9d351ae479
commit 7a5d24f968
No known key found for this signature in database
4 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1723,7 +1723,8 @@
}, },
"highlights_list_2": { "highlights_list_2": {
"title": "Highlights List", "title": "Highlights List",
"options": "Options" "options": "Options",
"modal_title": "Configure Highlights List"
}, },
"quick-search": { "quick-search": {
"placeholder": "Quick search", "placeholder": "Quick search",

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

@ -1,8 +1,12 @@
import { CKTextEditor, ModelText } from "@triliumnext/ckeditor5"; import { CKTextEditor, ModelText } from "@triliumnext/ckeditor5";
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 } from "../react/hooks"; import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
import Modal from "../react/Modal";
import { HighlightsListOptions } from "../type_widgets/options/text_notes";
import RightPanelWidget from "./RightPanelWidget"; import RightPanelWidget from "./RightPanelWidget";
interface RawHighlight { interface RawHighlight {
@ -21,12 +25,43 @@ 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 id="highlights" title={t("highlights_list_2.title")}> <>
{noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />} <RightPanelWidget
{noteType === "text" && !isReadOnly && <EditableTextHighlightsList />} id="highlights"
</RightPanelWidget> title={t("highlights_list_2.title")}
buttons={(
<ActionButton
icon="bx bx-cog"
text={t("highlights_list_2.options")}
onClick={(e) => {
e.stopPropagation();
setShown(true);
}}
/>
)}
>
{noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
{noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
</RightPanelWidget>
{createPortal(<HighlightListOptionsModal shown={shown} setShown={setShown} />, document.body)}
</>
);
}
function HighlightListOptionsModal({ shown, setShown }: { shown: boolean, setShown(value: boolean): void }) {
return (
<Modal
className="highlights-list-options-modal"
size="md"
title={t("highlights_list_2.modal_title")}
show={shown}
onHidden={() => setShown(false)}
>
<HighlightsListOptions />
</Modal>
); );
} }

1
apps/client/src/widgets/sidebar/RightPanelContainer.css
View File

@ -14,6 +14,7 @@ body.experimental-feature-new-layout #right-pane {
.card-header-title { .card-header-title {
padding-inline: 0.5em; padding-inline: 0.5em;
flex-grow: 1;
} }
} }

30
apps/client/src/widgets/type_widgets/options/text_notes.tsx
View File

@ -265,10 +265,27 @@ function TableOfContent() {
} }
function HighlightsList() { function HighlightsList() {
return (
<OptionsSection title={t("highlights_list.title")}>
<HighlightsListOptions />
{!isNewLayout && (
<>
<hr />
<h5>{t("highlights_list.visibility_title")}</h5>
<FormText>{t("highlights_list.visibility_description")}</FormText>
<FormText>{t("highlights_list.shortcut_info")}</FormText>
</>
)}
</OptionsSection>
);
}
export function HighlightsListOptions() {
const [ highlightsList, setHighlightsList ] = useTriliumOptionJson<string[]>("highlightsList"); const [ highlightsList, setHighlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
return ( return (
<OptionsSection title={t("highlights_list.title")}> <>
<FormText>{t("highlights_list.description")}</FormText> <FormText>{t("highlights_list.description")}</FormText>
<CheckboxList <CheckboxList
values={[ values={[
@ -281,16 +298,7 @@ function HighlightsList() {
keyProperty="val" titleProperty="title" keyProperty="val" titleProperty="title"
currentValue={highlightsList} onChange={setHighlightsList} currentValue={highlightsList} onChange={setHighlightsList}
/> />
</>
{!isNewLayout && (
<>
<hr />
<h5>{t("highlights_list.visibility_title")}</h5>
<FormText>{t("highlights_list.visibility_description")}</FormText>
<FormText>{t("highlights_list.shortcut_info")}</FormText>
</>
)}
</OptionsSection>
); );
} }