mirror of
https://github.com/zadam/trilium.git
synced 2025-11-13 08:45:50 +01:00
refactor(call_to_action): clean up
This commit is contained in:
@@ -5,14 +5,14 @@ import ReactBasicWidget from "../react/ReactBasicWidget";
|
|||||||
import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
|
import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
|
||||||
|
|
||||||
function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
|
function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
|
||||||
const [ activeIndex, setActiveIndex ] = useState(0);
|
|
||||||
const [ shown, setShown ] = useState(true);
|
|
||||||
const activeItem = activeCallToActions[activeIndex];
|
|
||||||
|
|
||||||
if (!activeCallToActions.length) {
|
if (!activeCallToActions.length) {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [ activeIndex, setActiveIndex ] = useState(0);
|
||||||
|
const [ shown, setShown ] = useState(true);
|
||||||
|
const activeItem = activeCallToActions[activeIndex];
|
||||||
|
|
||||||
function goToNext() {
|
function goToNext() {
|
||||||
if (activeIndex + 1 < activeCallToActions.length) {
|
if (activeIndex + 1 < activeCallToActions.length) {
|
||||||
setActiveIndex(activeIndex + 1);
|
setActiveIndex(activeIndex + 1);
|
||||||
|
|||||||
@@ -2,13 +2,40 @@ import utils from "../../services/utils";
|
|||||||
import options from "../../services/options";
|
import options from "../../services/options";
|
||||||
import { t } from "../../services/i18n";
|
import { t } from "../../services/i18n";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A "call-to-action" is an interactive message for the user, generally to present new features.
|
||||||
|
*/
|
||||||
export interface CallToAction {
|
export interface CallToAction {
|
||||||
|
/**
|
||||||
|
* A unique identifier to allow the call-to-action to be dismissed by the user and then never shown again.
|
||||||
|
*/
|
||||||
id: string;
|
id: string;
|
||||||
|
/**
|
||||||
|
* The title of the call-to-action, displayed as a heading in the message.
|
||||||
|
*/
|
||||||
title: string;
|
title: string;
|
||||||
|
/**
|
||||||
|
* The message body of the call-to-action.
|
||||||
|
*/
|
||||||
message: string;
|
message: string;
|
||||||
|
/**
|
||||||
|
* Function that determines whether the call-to-action can be displayed to the user. The check can be based on options or
|
||||||
|
* the platform of the user. If the user already dismissed this call-to-action, the value of this function doesn't matter.
|
||||||
|
*
|
||||||
|
* @returns whether to allow this call-to-action or to skip it, based on the user's environment.
|
||||||
|
*/
|
||||||
enabled: () => boolean;
|
enabled: () => boolean;
|
||||||
|
/**
|
||||||
|
* A list of buttons to display in the footer of the modal.
|
||||||
|
*/
|
||||||
buttons: {
|
buttons: {
|
||||||
|
/**
|
||||||
|
* The text displayed on the button.
|
||||||
|
*/
|
||||||
text: string;
|
text: string;
|
||||||
|
/**
|
||||||
|
* The listener that will be called when the button is pressed. Async methods are supported and will be awaited before proceeding to the next step.
|
||||||
|
*/
|
||||||
onClick: () => (void | Promise<void>);
|
onClick: () => (void | Promise<void>);
|
||||||
}[];
|
}[];
|
||||||
}
|
}
|
||||||
@@ -38,7 +65,7 @@ const CALL_TO_ACTIONS: CallToAction[] = [
|
|||||||
id: "background_effects",
|
id: "background_effects",
|
||||||
title: t("call_to_action.background_effects_title"),
|
title: t("call_to_action.background_effects_title"),
|
||||||
message: t("call_to_action.background_effects_message"),
|
message: t("call_to_action.background_effects_message"),
|
||||||
enabled: () => isNextTheme() && !options.is("backgroundEffects"),
|
enabled: () => utils.isElectron() && window.glob.platform === "win32" && isNextTheme() && !options.is("backgroundEffects"),
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: t("call_to_action.background_effects_button"),
|
text: t("call_to_action.background_effects_button"),
|
||||||
@@ -51,6 +78,12 @@ const CALL_TO_ACTIONS: CallToAction[] = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtains the list of available call-to-actions, meaning those that are enabled based on the user's environment but also with
|
||||||
|
* without the call-to-actions already dismissed by the user.
|
||||||
|
*
|
||||||
|
* @returns a list iof call to actions to display to the user.
|
||||||
|
*/
|
||||||
export function getCallToActions() {
|
export function getCallToActions() {
|
||||||
const seenCallToActions = new Set(getSeenCallToActions());
|
const seenCallToActions = new Set(getSeenCallToActions());
|
||||||
|
|
||||||
@@ -58,6 +91,12 @@ export function getCallToActions() {
|
|||||||
!seenCallToActions.has(callToAction.id) && callToAction.enabled());
|
!seenCallToActions.has(callToAction.id) && callToAction.enabled());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Marks the call-to-action as dismissed by the user, meaning that {@link getCallToActions()} will no longer list this particular action.
|
||||||
|
*
|
||||||
|
* @param id the corresponding ID of the call to action.
|
||||||
|
* @returns a promise with the option saving. Generally it's best to wait for the promise to resolve before refreshing the page.
|
||||||
|
*/
|
||||||
export async function dismissCallToAction(id: string) {
|
export async function dismissCallToAction(id: string) {
|
||||||
const seenCallToActions = getSeenCallToActions();
|
const seenCallToActions = getSeenCallToActions();
|
||||||
if (seenCallToActions.find(seenId => seenId === id)) {
|
if (seenCallToActions.find(seenId => seenId === id)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user