From 19b2903892e44e36268be1a5ef66b78e158b1bcc Mon Sep 17 00:00:00 2001 From: Arnaud Peich Date: Fri, 28 Oct 2022 06:38:59 +0200 Subject: [PATCH] Move i18n logic back to ExampleInfo --- app/client/ui/ExampleCard.ts | 9 +++----- app/client/ui/ExampleInfo.ts | 40 ++++++++++++++++++----------------- app/client/ui/Tools.ts | 4 ++-- static/locales/en.client.json | 2 +- static/locales/fr.client.json | 2 +- 5 files changed, 28 insertions(+), 29 deletions(-) diff --git a/app/client/ui/ExampleCard.ts b/app/client/ui/ExampleCard.ts index 5b56d94f26..7b05ad48f2 100644 --- a/app/client/ui/ExampleCard.ts +++ b/app/client/ui/ExampleCard.ts @@ -1,4 +1,3 @@ -import {makeT} from 'app/client/lib/localization'; import {IExampleInfo} from 'app/client/ui/ExampleInfo'; import {prepareForTransition, TransitionWatcher} from 'app/client/ui/transitions'; import {mediaXSmall, testId, theme, vars} from 'app/client/ui2018/cssVars'; @@ -7,8 +6,6 @@ import {cssLink} from 'app/client/ui2018/links'; import {dom, styled} from 'grainjs'; import {AutomaticHelpToolInfo} from "app/client/ui/Tools"; -const t = makeT('ExampleCard') - let prevCardClose: (() => void)|null = null; // Open a popup with a card introducing this example, if the user hasn't dismissed it in the past. @@ -29,10 +26,10 @@ export function showExampleCard( const cardElem = cssCard( cssImage({src: example.imgUrl}), cssBody( - cssTitle(t(...card.title)), - cssInfo(t(...card.text)), + cssTitle(card.title), + cssInfo(card.text), cssButtons( - cssLinkBtn(cssLinkIcon('Page'), t(...card.tutorialName), + cssLinkBtn(cssLinkIcon('Page'), card.tutorialName, {href: example.tutorialUrl, target: '_blank'}, ), // TODO: Add a link to the overview video (as popup or to a support page that shows the diff --git a/app/client/ui/ExampleInfo.ts b/app/client/ui/ExampleInfo.ts index d723b36ad7..b8f1c1f299 100644 --- a/app/client/ui/ExampleInfo.ts +++ b/app/client/ui/ExampleInfo.ts @@ -1,51 +1,53 @@ +import {makeT} from 'app/client/lib/localization' + +const t = makeT('ExampleInfo'); + export interface IExampleInfo { id: number; urlId: string; - title: KeyAndContext; + title: string; imgUrl: string; tutorialUrl: string; welcomeCard: WelcomeCard; } interface WelcomeCard { - title: KeyAndContext; - text: KeyAndContext; - tutorialName: KeyAndContext; + title: string; + text: string; + tutorialName: string; } -type KeyAndContext = [string, Record]; - -export const examples: IExampleInfo[] = [{ +export const buildExamples = (): IExampleInfo[] => [{ id: 1, // Identifies the example in UserPrefs.seenExamples urlId: 'lightweight-crm', - title: ['Title', {context: "CRM"}], + title: t('Title', {context: "CRM"}), imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/lightweight-crm.png', tutorialUrl: 'https://support.getgrist.com/lightweight-crm/', welcomeCard: { - title: ['WelcomeTitle', {context: "CRM"}], - text: ['WelcomeText', {context: "CRM"}], - tutorialName: ['WelcomeTutorialName', {context: "CRM"}], + title: t('WelcomeTitle', {context: "CRM"}), + text: t('WelcomeText', {context: "CRM"}), + tutorialName: t('WelcomeTutorialName', {context: "CRM"}), }, }, { id: 2, // Identifies the example in UserPrefs.seenExamples urlId: 'investment-research', - title: ['Title', {context: "investmentResearch"}], + title: t('Title', {context: "investmentResearch"}), imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/data-visualization.png', tutorialUrl: 'https://support.getgrist.com/investment-research/', welcomeCard: { - title: ['WelcomeTitle', {context: "investmentResearch"}], - text: ['WelcomeText', {context: "investmentResearch"}], - tutorialName: ['WelcomeTutorialName', {context: "investmentResearch"}], + title: t('WelcomeTitle', {context: "investmentResearch"}), + text: t('WelcomeText', {context: "investmentResearch"}), + tutorialName: t('WelcomeTutorialName', {context: "investmentResearch"}), }, }, { id: 3, // Identifies the example in UserPrefs.seenExamples urlId: 'afterschool-program', - title: ['Title', {context: "afterschool"}], + title: t('Title', {context: "afterschool"}), imgUrl: 'https://www.getgrist.com/themes/grist/assets/images/use-cases/business-management.png', tutorialUrl: 'https://support.getgrist.com/afterschool-program/', welcomeCard: { - title: ['WelcomeTitle', {context: "afterschool"}], - text: ['WelcomeText', {context: "afterschool"}], - tutorialName: ['WelcomeTutorialName', {context: "afterschool"}], + title: t('WelcomeTitle', {context: "afterschool"}), + text: t('WelcomeText', {context: "afterschool"}), + tutorialName: t('WelcomeTutorialName', {context: "afterschool"}), }, }]; diff --git a/app/client/ui/Tools.ts b/app/client/ui/Tools.ts index 061e931abe..a7cef50df2 100644 --- a/app/client/ui/Tools.ts +++ b/app/client/ui/Tools.ts @@ -3,7 +3,7 @@ import {GristDoc} from 'app/client/components/GristDoc'; import {urlState} from 'app/client/models/gristUrlState'; import {getUserOrgPrefObs, markAsSeen} from 'app/client/models/UserPrefs'; import {showExampleCard} from 'app/client/ui/ExampleCard'; -import {examples} from 'app/client/ui/ExampleInfo'; +import {buildExamples} from 'app/client/ui/ExampleInfo'; import {createHelpTools, cssLinkText, cssPageEntry, cssPageEntryMain, cssPageEntrySmall, cssPageIcon, cssPageLink, cssSectionHeader, cssSpacer, cssSplitPageEntry, cssTools} from 'app/client/ui/LeftPanelCommon'; @@ -78,7 +78,7 @@ export function tools(owner: Disposable, gristDoc: GristDoc, leftPanelOpen: Obse ), cssSpacer(), dom.maybe(docPageModel.currentDoc, (doc) => { - const ex = examples.find(e => e.urlId === doc.urlId); + const ex = buildExamples().find(e => e.urlId === doc.urlId); if (!ex || !ex.tutorialUrl) { return null; } return cssPageEntry( cssPageLink(cssPageIcon('Page'), cssLinkText(t('HowToTutorial')), testId('tutorial'), diff --git a/static/locales/en.client.json b/static/locales/en.client.json index 10efee198d..a037ae3111 100644 --- a/static/locales/en.client.json +++ b/static/locales/en.client.json @@ -218,7 +218,7 @@ "MakeIntoDataColumn": "Make into data column", "TriggerFormula": "TRIGGER FORMULA" }, - "ExampleCard": { + "ExampleInfo": { "Title_CRM": "Lightweight CRM", "WelcomeTitle_CRM": "Welcome to the Lightweight CRM template", "WelcomeText_CRM": "Check out our related tutorial for how to link data, and create high-productivity layouts.", diff --git a/static/locales/fr.client.json b/static/locales/fr.client.json index 8d3c1902bc..4e4b7a3ec9 100644 --- a/static/locales/fr.client.json +++ b/static/locales/fr.client.json @@ -217,7 +217,7 @@ "MakeIntoDataColumn": "Transformer en colonne de données", "TriggerFormula": "TRIGGER FORMULA" }, - "ExampleCard": { + "ExampleInfo": { "Title_CRM": "CRM léger", "WelcomeTitle_CRM": "Bienvenue dans le modèle de CRM léger", "WelcomeText_CRM": "Consultez le tutoriel associé pour savoir comment lier des données et créer des mises en page de haute productivité.",