mirror of
https://github.com/zadam/trilium.git
synced 2025-10-29 18:49:00 +01:00
refactor(call-to-action): split into separate file & add translations
This commit is contained in:
parent
4871dbd7ef
commit
1baaee582e
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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()} />
|
||||
}
|
||||
|
||||
}
|
||||
@ -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());
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user