feat(call_to_action): inform about the layout change

This commit is contained in:
Elian Doran 2025-12-17 16:05:13 +02:00
parent 261c1f77cf
commit cbecc24999
No known key found for this signature in database
3 changed files with 33 additions and 21 deletions

View File

@ -2109,6 +2109,8 @@
"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",
"new_layout_title": "New layout",
"new_layout_message": "Weve introduced a modernized layout for Trilium. The ribbon has been removed and seamlessly integrated into the main interface, with a new status bar and expandable sections (such as promoted attributes) taking over key functions.\n\nThe new layout is enabled by default, and can be temporarily disabled via Options → Appearance.",
"dismiss": "Dismiss"
},
"settings": {

View File

@ -1,11 +1,12 @@
import { useMemo, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import Button from "../react/Button";
import Modal from "../react/Modal";
import { dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
import { t } from "../../services/i18n";
export default function CallToActionDialog() {
const activeCallToActions = useMemo(() => getCallToActions(), []);
const activeCallToActions = useMemo(() => getCallToActions(), []);
const [ activeIndex, setActiveIndex ] = useState(0);
const [ shown, setShown ] = useState(true);
const activeItem = activeCallToActions[activeIndex];
@ -36,11 +37,13 @@ export default function CallToActionDialog() {
await dismissCallToAction(activeItem.id);
await button.onClick();
goToNext();
}}/>
}}/>
)}
</>}
>
<p>{activeItem.message}</p>
<p style={{
whiteSpace: "pre-wrap"
}}>{activeItem.message}</p>
</Modal>
)
);
}

View File

@ -1,6 +1,6 @@
import utils from "../../services/utils";
import options from "../../services/options";
import { t } from "../../services/i18n";
import options from "../../services/options";
import utils from "../../services/utils";
/**
* A "call-to-action" is an interactive message for the user, generally to present new features.
@ -46,20 +46,11 @@ function isNextTheme() {
const CALL_TO_ACTIONS: CallToAction[] = [
{
id: "next_theme",
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");
}
}
]
id: "new_layout",
title: t("call_to_action.new_layout_title"),
message: t("call_to_action.new_layout_message"),
enabled: () => true,
buttons: []
},
{
id: "background_effects",
@ -75,6 +66,22 @@ const CALL_TO_ACTIONS: CallToAction[] = [
}
}
]
},
{
id: "next_theme",
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");
}
}
]
}
];