mirror of
				https://github.com/zadam/trilium.git
				synced 2025-10-31 03:29:02 +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
	 Elian Doran
						Elian Doran