refactor(call-to-action): split into separate file & add translations

This commit is contained in:
Elian Doran 2025-08-12 18:42:55 +03:00
parent 4871dbd7ef
commit 1baaee582e
No known key found for this signature in database
3 changed files with 64 additions and 52 deletions

View File

@ -1992,5 +1992,13 @@
"modal": {
"close": "Close",
"help_title": "Display more information about this screen"
},
"call_to_action": {
"next_theme_title": "TriliumNext theme is now stable",
"next_theme_message": "For a while now, we've been working on a new theme to give the application a more modern look.",
"next_theme_button": "Switch to the TriliumNext theme",
"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"
}
}

View File

@ -1,56 +1,8 @@
import { useEffect, useMemo, useState } from "preact/hooks";
import { useState } from "preact/hooks";
import Button from "../react/Button";
import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget";
import options from "../../services/options";
import { OptionNames } from "@triliumnext/commons";
import utils from "../../services/utils";
interface CallToAction {
title: string;
message: string;
enabled: () => boolean;
buttons: {
text: string;
onClick: () => (void | Promise<void>);
}[];
}
function isNextTheme() {
return [ "next", "next-light", "next-dark" ].includes(options.get("theme"));
}
const CALL_TO_ACTIONS: CallToAction[] = [
{
title: "TriliumNext theme is now stable",
message: "For a while now, we've been working on a new theme to give the application a more modern look.",
enabled: () => !isNextTheme(),
buttons: [
{
text: "Switch to the TriliumNext theme",
async onClick() {
await options.save("theme", "next");
await options.save("backgroundEffects", "true");
utils.reloadFrontendApp("call-to-action");
}
}
]
},
{
title: "Background effects are now stable",
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.",
enabled: () => isNextTheme() && !options.is("backgroundEffects"),
buttons: [
{
text: "Enable background effects",
async onClick() {
await options.save("backgroundEffects", "true");
utils.restartDesktopApp();
}
}
]
}
];
import { CallToAction, getCallToActions } from "./call_to_action_definitions";
function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
const [ activeIndex, setActiveIndex ] = useState(0);
@ -96,8 +48,7 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
export class CallToActionDialog extends ReactBasicWidget {
get component() {
const filteredCallToActions = CALL_TO_ACTIONS.filter((callToAction) => callToAction.enabled());
return <CallToActionDialogComponent activeCallToActions={filteredCallToActions} />
return <CallToActionDialogComponent activeCallToActions={getCallToActions()} />
}
}

View File

@ -0,0 +1,53 @@
import utils from "../../services/utils";
import options from "../../services/options";
import { t } from "../../services/i18n";
export interface CallToAction {
title: string;
message: string;
enabled: () => boolean;
buttons: {
text: string;
onClick: () => (void | Promise<void>);
}[];
}
function isNextTheme() {
return [ "next", "next-light", "next-dark" ].includes(options.get("theme"));
}
const CALL_TO_ACTIONS: CallToAction[] = [
{
title: t("call_to_action.next_theme_title"),
message: t("call_to_action.next_theme_message"),
enabled: () => !isNextTheme(),
buttons: [
{
text: t("call_to_action.next_theme_button"),
async onClick() {
await options.save("theme", "next");
await options.save("backgroundEffects", "true");
utils.reloadFrontendApp("call-to-action");
}
}
]
},
{
title: t("call_to_action.background_effects_title"),
message: t("call_to_action.background_effects_message"),
enabled: () => isNextTheme() && !options.is("backgroundEffects"),
buttons: [
{
text: t("call_to_action.background_effects_button"),
async onClick() {
await options.save("backgroundEffects", "true");
utils.restartDesktopApp();
}
}
]
}
];
export function getCallToActions() {
return CALL_TO_ACTIONS.filter((callToAction) => callToAction.enabled());
}