gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

feat(react/settings): port highlight list settings

Browse Source
This commit is contained in:
Elian Doran 2025-08-18 12:11:29 +03:00
parent 9ebee42118
commit 4ef6169041
No known key found for this signature in database
3 changed files with 29 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
View File

@ -1,5 +1,3 @@
import { useEffect, useState } from "preact/hooks";
interface CheckboxListProps<T> {
values: T[];
keyProperty: keyof T;

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

@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "preact/hooks";
import { t } from "../../../services/i18n";
import FormCheckbox from "../../react/FormCheckbox";
import FormRadioGroup from "../../react/FormRadioGroup";
import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
import OptionsSection from "./components/OptionsSection";
import { toggleBodyClass } from "../../../services/utils";
import FormGroup from "../../react/FormGroup";
@ -15,6 +15,7 @@ import { getHtml } from "../../react/RawHtml";
import { CSSProperties } from "preact/compat";
import FormText from "../../react/FormText";
import { FormTextBoxWithUnit } from "../../react/FormTextBox";
import CheckboxList from "./components/CheckboxList";
export default function TextNoteSettings() {
return (
@ -24,6 +25,7 @@ export default function TextNoteSettings() {
<HeadingStyle />
<CodeBlockStyle />
<TableOfContent />
<HighlightsList />
</>
)
}
@ -252,3 +254,29 @@ function TableOfContent() {
</OptionsSection>
)
}
function HighlightsList() {
const [ highlightsList, setHighlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
return (
<OptionsSection title={t("highlights_list.title")}>
<FormText>{t("highlights_list.description")}</FormText>
<CheckboxList
values={[
{ val: "bold", title: t("highlights_list.bold") },
{ val: "italic", title: t("highlights_list.italic") },
{ val: "underline", title: t("highlights_list.underline") },
{ val: "color", title: t("highlights_list.color") },
{ val: "bgColor", title: t("highlights_list.bg_color") }
]}
keyProperty="val" titleProperty="title"
currentValue={highlightsList} onChange={setHighlightsList}
/>
<hr />
<h5>{t("highlights_list.visibility_title")}</h5>
<FormText>{t("highlights_list.visibility_description")}</FormText>
<FormText>{t("highlights_list.shortcut_info")}</FormText>
</OptionsSection>
)
}

56
apps/client/src/widgets/type_widgets/options/text_notes/highlights_list.ts
View File

@ -1,56 +0,0 @@
import OptionsWidget from "../options_widget.js";
import { t } from "../../../../services/i18n.js";
import type { OptionMap } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="options-section">
<h4>${t("highlights_list.title")}</h4>
<p>${t("highlights_list.description")}</p>
<div>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")}</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")}</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")}</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")}</label>
<label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")}</label>
</div>
<hr />
<h5>${t("highlights_list.visibility_title")}</h5>
<p class="form-text">${t("highlights_list.visibility_description")}</p>
<p class="form-text">${t("highlights_list.shortcut_info")}</p>
</div>`;
export default class HighlightsListOptions extends OptionsWidget {
private $hlt!: JQuery<HTMLInputElement>;
doRender() {
this.$widget = $(TPL);
this.$hlt = this.$widget.find("input.highlights-list-check");
this.$hlt.on("change", () => {
const hltVals = this.$widget
.find('input.highlights-list-check[type="checkbox"]:checked')
.map(function () {
return (this as HTMLInputElement).value;
})
.get();
this.updateOption("highlightsList", JSON.stringify(hltVals));
});
}
async optionsLoaded(options: OptionMap) {
const hltVals = JSON.parse(options.highlightsList);
this.$widget.find('input.highlights-list-check[type="checkbox"]').each(function () {
if ($.inArray($(this).val(), hltVals) !== -1) {
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
}
}