feat(call_to_action): add actual functionality on action buttons

This commit is contained in:
Elian Doran 2025-08-12 17:48:44 +03:00
parent e125809fe0
commit 4871dbd7ef
No known key found for this signature in database

View File

@ -3,6 +3,8 @@ import Button from "../react/Button";
import Modal from "../react/Modal"; import Modal from "../react/Modal";
import ReactBasicWidget from "../react/ReactBasicWidget"; import ReactBasicWidget from "../react/ReactBasicWidget";
import options from "../../services/options"; import options from "../../services/options";
import { OptionNames } from "@triliumnext/commons";
import utils from "../../services/utils";
interface CallToAction { interface CallToAction {
title: string; title: string;
@ -10,6 +12,7 @@ interface CallToAction {
enabled: () => boolean; enabled: () => boolean;
buttons: { buttons: {
text: string; text: string;
onClick: () => (void | Promise<void>);
}[]; }[];
} }
@ -23,15 +26,28 @@ const CALL_TO_ACTIONS: CallToAction[] = [
message: "For a while now, we've been working on a new theme to give the application a more modern look.", message: "For a while now, we've been working on a new theme to give the application a more modern look.",
enabled: () => !isNextTheme(), enabled: () => !isNextTheme(),
buttons: [ buttons: [
{ text: "Switch to the TriliumNext theme"} {
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", 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.", 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"), enabled: () => isNextTheme() && !options.is("backgroundEffects"),
buttons: [ buttons: [
{ text: "Enable background effects" } {
text: "Enable background effects",
async onClick() {
await options.save("backgroundEffects", "true");
utils.restartDesktopApp();
}
}
] ]
} }
]; ];
@ -55,13 +71,17 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
return ( return (
<Modal <Modal
className="call-to-action"
size="md"
title="New features" title="New features"
show={shown} show={shown}
onHidden={() => setShown(false)}
footerAlignment="between" footerAlignment="between"
footer={<> footer={<>
<Button text="Dismiss" onClick={goToNext} /> <Button text="Dismiss" onClick={goToNext} />
{activeItem.buttons.map((button) => {activeItem.buttons.map((button) =>
<Button text={button.text} onClick={() => { <Button text={button.text} onClick={async () => {
await button.onClick();
goToNext(); goToNext();
}}/> }}/>
)} )}