diff --git a/apps/client/src/layouts/layout_commons.ts b/apps/client/src/layouts/layout_commons.ts index c2802c963..5ee261317 100644 --- a/apps/client/src/layouts/layout_commons.ts +++ b/apps/client/src/layouts/layout_commons.ts @@ -30,6 +30,7 @@ import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolb import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js"; import NoteDetailWidget from "../widgets/note_detail.js"; import NoteListWidget from "../widgets/note_list.js"; +import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx"; export function applyModals(rootContainer: RootContainer) { rootContainer @@ -66,4 +67,5 @@ export function applyModals(rootContainer: RootContainer) { .child(new PromotedAttributesWidget()) .child(new NoteDetailWidget()) .child(new NoteListWidget(true))) + .child(new CallToActionDialog()); } diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index f5a6656ec..28c22cf34 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -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" } } diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx new file mode 100644 index 000000000..2bdb97866 --- /dev/null +++ b/apps/client/src/widgets/dialogs/call_to_action.tsx @@ -0,0 +1,58 @@ +import { useState } from "preact/hooks"; +import Button from "../react/Button"; +import Modal from "../react/Modal"; +import ReactBasicWidget from "../react/ReactBasicWidget"; +import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions"; + +function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) { + if (!activeCallToActions.length) { + return <>; + } + + const [ activeIndex, setActiveIndex ] = useState(0); + const [ shown, setShown ] = useState(true); + const activeItem = activeCallToActions[activeIndex]; + + function goToNext() { + if (activeIndex + 1 < activeCallToActions.length) { + setActiveIndex(activeIndex + 1); + } else { + setShown(false); + } + } + + return ( + setShown(false)} + footerAlignment="between" + footer={<> +