gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(react/settings): port related settings

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 22:05:45 +03:00
parent 64bffb82b1
commit d04897e011
No known key found for this signature in database
4 changed files with 42 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2000,5 +2000,12 @@
"background_effects_title": "Background effects are now stable",
"background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
"background_effects_button": "Enable background effects"
},
"settings": {
"related_settings": "Related settings"
},
"settings_appearance": {
"related_code_blocks": "Color scheme for code blocks in text notes",
"related_code_notes": "Color scheme for code notes"
}
}

11
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@ -13,6 +13,7 @@ import { FontFamily, OptionNames } from "@triliumnext/commons";
import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
import FormText from "../../react/FormText";
import Button from "../../react/Button";
import RelatedSettings from "./components/RelatedSettings";
const MIN_CONTENT_WIDTH = 640;
@ -88,6 +89,16 @@ export default function AppearanceSettings() {
{overrideThemeFonts === "true" && <Fonts />}
{isElectron() && <ElectronIntegration /> }
<MaxContentWidth />
<RelatedSettings items={[
{
title: t("settings_appearance.related_code_blocks"),
targetPage: "_optionsTextNotes"
},
{
title: t("settings_appearance.related_code_notes"),
targetPage: "_optionsCodeNotes"
}
]} />
</div>
)
}

71
apps/client/src/widgets/type_widgets/options/appearance/related_settings.ts
View File

@ -1,71 +0,0 @@
import type { OptionPages } from "../../content_widget";
import OptionsWidget from "../options_widget";
const TPL = `\
<div class="options-section">
<h4>Related settings</h4>
<nav class="related-settings use-tn-links">
<li>Color scheme for code blocks in text notes</li>
<li>Color scheme for code notes</li>
</nav>
<style>
.related-settings {
padding: 0;
margin: 0;
list-style-type: none;
}
</style>
</div>
`;
interface RelatedSettingsConfig {
items: {
title: string;
targetPage: OptionPages;
}[];
}
const RELATED_SETTINGS: Record<string, RelatedSettingsConfig> = {
"_optionsAppearance": {
items: [
{
title: "Color scheme for code blocks in text notes",
targetPage: "_optionsTextNotes"
},
{
title: "Color scheme for code notes",
targetPage: "_optionsCodeNotes"
}
]
}
};
export default class RelatedSettings extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
const config = this.noteId && RELATED_SETTINGS[this.noteId];
if (!config) {
return;
}
const $relatedSettings = this.$widget.find(".related-settings");
$relatedSettings.empty();
for (const item of config.items) {
const $item = $("<li>");
const $link = $("<a>").text(item.title);
$item.append($link);
$link.attr("href", `#root/_hidden/_options/${item.targetPage}`);
$relatedSettings.append($item);
}
}
isEnabled() {
return (!!this.noteId && this.noteId in RELATED_SETTINGS);
}
}

24
apps/client/src/widgets/type_widgets/options/components/RelatedSettings.tsx Normal file
View File

@ -0,0 +1,24 @@
import OptionsSection from "./OptionsSection";
import type { OptionPages } from "../../content_widget";
import { t } from "../../../../services/i18n";
interface RelatedSettingsProps {
items: {
title: string;
targetPage: OptionPages;
}[];
}
export default function RelatedSettings({ items }: RelatedSettingsProps) {
return (
<OptionsSection title={t("settings.related_settings")}>
<nav className="use-tn-links" style={{ padding: 0, margin: 0, listStyleType: "none" }}>
{items.map(item => (
<li>
<a href={`#root/_hidden/_options/${item.targetPage}`}>{item.title}</a>
</li>
))}
</nav>
</OptionsSection>
);
}