diff --git a/studio/package.json b/studio/package.json index f17c4dd45..535da732b 100644 --- a/studio/package.json +++ b/studio/package.json @@ -8,7 +8,9 @@ "dist/" ], "scripts": { - "prebuild": "node ./scripts/rm-www.js", + "clean": "node ./scripts/rm-www.js", + "i18n": "node ./scripts/i18n.types.js", + "prebuild": "npm run clean && npm run i18n", "build": "stencil build", "build:staging": "npm run build -- --staging", "postbuild": "./scripts/config.index.js", diff --git a/studio/scripts/i18n.types.js b/studio/scripts/i18n.types.js new file mode 100644 index 000000000..ef80660c0 --- /dev/null +++ b/studio/scripts/i18n.types.js @@ -0,0 +1,37 @@ +const {writeFileSync, readFileSync} = require('fs'); + +const prettier = require('prettier'); + +const generate = async () => { + const buffer = readFileSync('./src/assets/i18n/en.json'); + const i18n = JSON.parse(buffer.toString()); + + const data = Object.keys(i18n).map((key) => { + const properties = Object.keys(i18n[key]).map((prop) => `${prop}: string;`); + + return { + key, + name: `I18n${key.charAt(0).toUpperCase()}${key.slice(1)}`, + properties, + }; + }); + + const lang = `lang: 'en';`; + + const main = `\n\ninterface I18n {${lang}${data.map((i) => `${i.key}: ${i.name};`).join('')}}`; + const interfaces = data.map((i) => `\n\ninterface ${i.name} {${i.properties.join('')}}`).join(''); + + const output = prettier.format(`${interfaces}${main}`, {semi: false, parser: 'babel', singleQuote: true}); + + writeFileSync('./src/app/definitions/i18.d.ts', output); +}; + +(async () => { + try { + await generate(); + + console.log(`i18n type declarations generated!`); + } catch (err) { + console.error(`Error while generating i18n types.`, err); + } +})(); diff --git a/studio/src/app/components/core/app-footer/app-links.tsx b/studio/src/app/components/core/app-footer/app-links.tsx index 4c7fc017a..8e1c9772d 100644 --- a/studio/src/app/components/core/app-footer/app-links.tsx +++ b/studio/src/app/components/core/app-footer/app-links.tsx @@ -1,5 +1,7 @@ import {Component, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + @Component({ tag: 'app-links', styleUrl: 'app-links.scss', @@ -13,78 +15,79 @@ export class AppLinks { DeckDeckGo - Home + {i18n.state.links.home} - Discover + {i18n.state.links.discover} - Enterprise + {i18n.state.links.enterprise} - About + {i18n.state.links.about} - Team + {i18n.state.links.team} - Newsletter + {i18n.state.links.newsletter} - Contact + {i18n.state.links.contact} - Press + {i18n.state.links.press} - FAQ + {i18n.state.links.faq}
- Developers + {i18n.state.links.developers} - Open source + {i18n.state.links.open_source} - Services + {i18n.state.links.services} - Developer + {i18n.state.links.developer}
- Terms + {i18n.state.links.terms} - Terms of use + {i18n.state.links.terms_of_use} - Privacy Policy + {i18n.state.links.privacy_policy}
- + - + diff --git a/studio/src/app/components/core/app-menu/app-menu.tsx b/studio/src/app/components/core/app-menu/app-menu.tsx index b8a2e9dad..19f7248f1 100644 --- a/studio/src/app/components/core/app-menu/app-menu.tsx +++ b/studio/src/app/components/core/app-menu/app-menu.tsx @@ -2,11 +2,12 @@ import {Component, Element, Fragment, h} from '@stencil/core'; import navStore from '../../../stores/nav.store'; import authStore from '../../../stores/auth.store'; +import {NavDirection} from '../../../stores/nav.store'; +import i18n from '../../../stores/i18n.store'; import {signIn} from '../../../utils/core/signin.utils'; import {AuthService} from '../../../services/auth/auth.service'; -import {NavDirection} from '../../../stores/nav.store'; @Component({ tag: 'app-menu', @@ -66,7 +67,7 @@ export class AppMenu { return ( - Dashboard + {i18n.state.menu.dashboard} ); } @@ -76,14 +77,14 @@ export class AppMenu { return ( this.signOut()}> - Sign out + {i18n.state.nav.sign_out} ); } else { return ( this.signIn()}> - Sign in + {i18n.state.nav.sign_in} ); } @@ -94,12 +95,12 @@ export class AppMenu { - Poll + {i18n.state.menu.poll} - Remote control + {i18n.state.menu.remote_control} ); @@ -113,15 +114,15 @@ export class AppMenu { - Profile + {i18n.state.nav.profile} - Customization + {i18n.state.nav.customization} - Templates + {i18n.state.nav.templates} diff --git a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx index 8d4d4f3ec..4d808d195 100644 --- a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx +++ b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx @@ -5,6 +5,7 @@ import {popoverController} from '@ionic/core'; import themeStore from '../../../stores/theme.store'; import authStore from '../../../stores/auth.store'; import userStore from '../../../stores/user.store'; +import i18n from '../../../stores/i18n.store'; import {signIn} from '../../../utils/core/signin.utils'; @@ -47,7 +48,7 @@ export class AppNavigationActions { } else if (this.presentation || this.publish) { return ( ); } @@ -56,7 +57,7 @@ export class AppNavigationActions { private renderLoggedIn() { if (authStore.state.loggedIn && userStore.state.loaded) { return ( - ); @@ -75,7 +76,7 @@ export class AppNavigationActions { routerDirection="root" mode="md" color={themeStore.state.darkTheme ? 'light' : 'dark'}> - Write a presentation + {i18n.state.nav.write_a_presentation} ); } else { @@ -92,7 +93,7 @@ export class AppNavigationActions { onClick={() => this.actionPublish.emit()} mode="md" color={themeStore.state.darkTheme ? 'light' : 'dark'}> - Ready to share? + {i18n.state.nav.ready_to_share} ); } else { diff --git a/studio/src/app/components/core/app-navigation/app-navigation.tsx b/studio/src/app/components/core/app-navigation/app-navigation.tsx index ea3add700..376a26940 100644 --- a/studio/src/app/components/core/app-navigation/app-navigation.tsx +++ b/studio/src/app/components/core/app-navigation/app-navigation.tsx @@ -1,7 +1,7 @@ import {Component, Prop, h} from '@stencil/core'; import offlineStore from '../../../stores/offline.store'; - +import i18n from '../../../stores/i18n.store'; import store from '../../../stores/deck.store'; @Component({ @@ -104,7 +104,7 @@ export class AppNavigation { return ( - + @@ -138,7 +138,7 @@ export class AppNavigation { return ( - You are editing offline. + {i18n.state.offline.editing} ); } diff --git a/studio/src/app/components/core/app-signin/app-signin.tsx b/studio/src/app/components/core/app-signin/app-signin.tsx index 4d75a4644..38d859927 100644 --- a/studio/src/app/components/core/app-signin/app-signin.tsx +++ b/studio/src/app/components/core/app-signin/app-signin.tsx @@ -7,10 +7,13 @@ import {User as FirebaseUser, UserCredential, AuthCredential, OAuthCredential} f import navStore, {NavDirection} from '../../../stores/nav.store'; import authStore from '../../../stores/auth.store'; import tokenStore from '../../../stores/token.store'; +import i18n from '../../../stores/i18n.store'; import {AuthUser} from '../../../models/auth/auth.user'; import {Utils} from '../../../utils/core/utils'; +import {renderI18n} from '../../../utils/core/i18n.utils'; + import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config'; import {EnvironmentConfigService} from '../../../services/core/environment/environment-config.service'; @@ -293,7 +296,7 @@ export class AppSignIn {

- DeckDeckGo is free and open source 😃. + {i18n.state.core.free_open_source}

, ]; @@ -301,8 +304,8 @@ export class AppSignIn { private renderMsg() { return [ -

Oh, hi 👋! Good to have you.

, -

Sign in to unleash all features of the editor and to share your presentation online.

, +

{i18n.state.sign_in.hi}

, +

{i18n.state.sign_in.why}

, ]; } @@ -312,8 +315,8 @@ export class AppSignIn { } else { return ( - this.navigateBack()} color="dark"> - + this.navigateBack()} color="dark" aria-label={i18n.state.core.close}> + ); @@ -323,7 +326,7 @@ export class AppSignIn { private renderGitHub() { return (

- Additionally, push the source code of your slides to repos with the GitHub logging. + {renderI18n(i18n.state.sign_in.additionally, {placeholder: '{0}', value: })}

); } diff --git a/studio/src/app/components/core/app-template-showcase/app-template-showcase.tsx b/studio/src/app/components/core/app-template-showcase/app-template-showcase.tsx index 07b84c44f..51842a72d 100644 --- a/studio/src/app/components/core/app-template-showcase/app-template-showcase.tsx +++ b/studio/src/app/components/core/app-template-showcase/app-template-showcase.tsx @@ -1,5 +1,7 @@ import {Component, Prop, h, State, Fragment} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {Template, TemplateDataSlot} from '../../../models/data/template'; import {TemplateUtils} from '../../../utils/editor/template.utils'; @@ -61,7 +63,7 @@ export class AppTemplateShowcase { return ( ); } diff --git a/studio/src/app/components/core/app-unpublish/app-unpublish.tsx b/studio/src/app/components/core/app-unpublish/app-unpublish.tsx index 1bdb7793c..63a1f4da8 100644 --- a/studio/src/app/components/core/app-unpublish/app-unpublish.tsx +++ b/studio/src/app/components/core/app-unpublish/app-unpublish.tsx @@ -1,5 +1,9 @@ import {Component, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + +import {renderI18n} from '../../../utils/core/i18n.utils'; + @Component({ tag: 'app-unpublish', styleUrl: 'app-unpublish.scss', @@ -8,12 +12,14 @@ export class AppUnpublish { render() { return (

- Please note that currently, the presentations you have shared are not automatically removed from internet. If you wish to un-publish them, drop us a - message on one of our{' '} - - contact - {' '} - channels. + {renderI18n(i18n.state.settings.un_publish, { + placeholder: '{0}', + value: ( + + contact + + ), + })}

); } diff --git a/studio/src/app/components/dashboard/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx b/studio/src/app/components/dashboard/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx index aa3ba74be..2080669c9 100644 --- a/studio/src/app/components/dashboard/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx +++ b/studio/src/app/components/dashboard/app-dashboard-deck-actions/app-dashboard-deck-actions.tsx @@ -2,6 +2,7 @@ import {Component, Event, EventEmitter, h, Prop, Host, State} from '@stencil/cor import {loadingController, modalController, OverlayEventDetail} from '@ionic/core'; import store from '../../../stores/error.store'; +import i18n from '../../../stores/i18n.store'; import {Deck} from '../../../models/data/deck'; @@ -148,14 +149,14 @@ export class AppDashboardDeckActions { diff --git a/studio/src/app/components/dashboard/app-dashboard/app-dashboard.tsx b/studio/src/app/components/dashboard/app-dashboard/app-dashboard.tsx index 73f8eda70..9dfa73c6d 100644 --- a/studio/src/app/components/dashboard/app-dashboard/app-dashboard.tsx +++ b/studio/src/app/components/dashboard/app-dashboard/app-dashboard.tsx @@ -5,24 +5,25 @@ import {convertStyle} from '@deckdeckgo/deck-utils'; import authStore from '../../../stores/auth.store'; import navStore, {NavDirection} from '../../../stores/nav.store'; import errorStore from '../../../stores/error.store'; +import i18n from '../../../stores/i18n.store'; import {Deck} from '../../../models/data/deck'; import {Slide} from '../../../models/data/slide'; import {AuthUser} from '../../../models/auth/auth.user'; import {signIn} from '../../../utils/core/signin.utils'; - +import {renderI18n} from '../../../utils/core/i18n.utils'; import {ParseDeckSlotsUtils} from '../../../utils/editor/parse-deck-slots.utils'; - import {ParseSlidesUtils} from '../../../utils/editor/parse-slides.utils'; +import {TemplateUtils} from '../../../utils/editor/template.utils'; + import {DeckService} from '../../../services/data/deck/deck.service'; import {SlideService} from '../../../services/data/slide/slide.service'; - import {DeckDashboardCloneResult, DeckDashboardService} from '../../../services/dashboard/deck/deck-dashboard.service'; +import {TemplateService} from '../../../services/data/template/template.service'; + import {ImageEventsHandler} from '../../../handlers/core/events/image/image-events.handler'; import {ChartEventsHandler} from '../../../handlers/core/events/chart/chart-events.handler'; -import {TemplateService} from '../../../services/data/template/template.service'; -import {TemplateUtils} from '../../../utils/editor/template.utils'; interface DeckAndFirstSlide { deck: Deck; @@ -445,7 +446,7 @@ export class AppDashboard { private renderAnonymousContent() { return (
-

Welcome to DeckDeckGo 👋

+

{i18n.state.dashboard.welcome}

{this.renderNotLoggedInText()} {this.renderCreateButton(true)} @@ -456,7 +457,7 @@ export class AppDashboard { private renderGuardedContent() { return (
-

Your presentations

+

{i18n.state.dashboard.your_presentations}

{this.renderDecksFilter()} @@ -470,11 +471,8 @@ export class AppDashboard { private renderNotLoggedInText() { return ( -

- You can try right now our editor for slides but, we will kindly ask you to signIn()}>sign in after three slides. We think it's - safer that way, because your content is saved in the cloud. -

-

DeckDeckGo is free and open source 😃.

+

{renderI18n(i18n.state.dashboard.try, {placeholder: '{0}', value: signIn()}>{i18n.state.nav.sign_in.toLowerCase()}})}

+

{i18n.state.core.free_open_source}

 ); } @@ -485,7 +483,7 @@ export class AppDashboard { $event.stopImmediatePropagation()} onIonChange={(e: CustomEvent) => this.filterDecksOnChange(e)} class="ion-no-padding ion-margin-top ion-margin-bottom" @@ -493,7 +491,7 @@ export class AppDashboard { ); } - return

You don't have any slides yet. Go for it, create your first deck now!

; + return

{i18n.state.dashboard.no_slides}

; } private renderCreateButton(withSignIn: boolean) { @@ -501,12 +499,12 @@ export class AppDashboard {
{withSignIn ? ( signIn()} style={{'margin-right': '8px'}}> - Sign in + {i18n.state.nav.sign_in} ) : undefined} this.navigateEditor()}> - Write a presentation + {i18n.state.nav.write_a_presentation}
); diff --git a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx index b18724216..4b910fd6f 100644 --- a/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx +++ b/studio/src/app/components/editor/actions/deck/app-action-add-slide/app-action-add-slide.tsx @@ -2,6 +2,8 @@ import {Component, Element, EventEmitter, h, JSX, Prop} from '@stencil/core'; import {modalController, OverlayEventDetail, popoverController} from '@ionic/core'; +import i18n from '../../../../../stores/i18n.store'; + import {SlideAttributes, SlideSplitType, SlideTemplate} from '../../../../../models/data/slide'; import {CreateSlidesUtils} from '../../../../../utils/editor/create-slides.utils'; @@ -275,10 +277,10 @@ export class AppActionAddSlide { render() { return ( this.onActionOpenSlideAdd($event)}> - + ); } diff --git a/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx b/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx index acce20f4d..9525b4681 100644 --- a/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx +++ b/studio/src/app/components/editor/actions/deck/app-action-help/app-action-help.tsx @@ -2,6 +2,8 @@ import {Component, h, Element, Prop, Event, EventEmitter} from '@stencil/core'; import {popoverController} from '@ionic/core'; +import i18n from '../../../../../stores/i18n.store'; + @Component({ tag: 'app-action-help', }) @@ -31,7 +33,7 @@ export class AppActionHelp { if (this.link) { return ( this.openGetHelp()} aria-label="Help"> -

Help

+

{i18n.state.editor.help}

 ); } else { @@ -39,12 +41,12 @@ export class AppActionHelp { ); } diff --git a/studio/src/app/components/editor/actions/deck/app-action-share/app-action-share.tsx b/studio/src/app/components/editor/actions/deck/app-action-share/app-action-share.tsx index 39809aa70..4ebcb712b 100644 --- a/studio/src/app/components/editor/actions/deck/app-action-share/app-action-share.tsx +++ b/studio/src/app/components/editor/actions/deck/app-action-share/app-action-share.tsx @@ -4,6 +4,7 @@ import {OverlayEventDetail, popoverController} from '@ionic/core'; import deckStore from '../../../../../stores/deck.store'; import userStore from '../../../../../stores/user.store'; import shareStore from '../../../../../stores/share.store'; +import i18n from '../../../../../stores/i18n.store'; import {MoreAction} from '../../../../../types/editor/more-action'; @@ -60,12 +61,12 @@ export class AppActionShare { ); } diff --git a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx index d1fcc6796..098f4d3be 100644 --- a/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx +++ b/studio/src/app/components/editor/actions/deck/app-actions-deck/app-actions-deck.tsx @@ -9,6 +9,7 @@ import deckStore from '../../../../../stores/deck.store'; import userStore from '../../../../../stores/user.store'; import shareStore from '../../../../../stores/share.store'; import errorStore from '../../../../../stores/error.store'; +import i18n from '../../../../../stores/i18n.store'; import {MoreAction} from '../../../../../types/editor/more-action'; @@ -251,39 +252,39 @@ export class AppActionsDeck { this.openDeckStyle()}> - + @@ -293,13 +294,13 @@ export class AppActionsDeck { this.openEmbed()}> @@ -307,13 +308,17 @@ export class AppActionsDeck { {this.renderBackup()} @@ -328,7 +333,7 @@ export class AppActionsDeck { class="small-devices ion-activatable"> - + @@ -348,7 +353,8 @@ export class AppActionsDeck { color="primary" class="wider-devices ion-activatable"> - + {' '} + ); } @@ -362,12 +368,12 @@ export class AppActionsDeck { ); } diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx index ea38965a9..2d9c3b21c 100644 --- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx @@ -5,6 +5,7 @@ import {debounce, isFullscreen, isIOS, isMobile} from '@deckdeckgo/utils'; import {isSlide} from '@deckdeckgo/deck-utils'; import store from '../../../../../stores/busy.store'; +import i18n from '../../../../../stores/i18n.store'; import {ImageHelper} from '../../../../../helpers/editor/image.helper'; import {ShapeHelper} from '../../../../../helpers/editor/shape.helper'; @@ -940,12 +941,12 @@ export class AppActionsElement { return ( ); } @@ -956,13 +957,13 @@ export class AppActionsElement { return ( ); } @@ -972,10 +973,10 @@ export class AppActionsElement { const classSlide: string | undefined = `wider-devices ion-activatable ${displayed ? '' : 'hidden'}`; return ( - ); } @@ -987,23 +988,23 @@ export class AppActionsElement { return ( ); } private renderStyle() { return ( - ); } @@ -1027,12 +1028,12 @@ export class AppActionsElement { ? this.openEditSlide() : this.openEditSlide() } - aria-label="Edit slide options" + aria-label={i18n.state.editor.options} class={classSlide} tabindex={displayed ? 0 : -1}> - + ); } @@ -1042,10 +1043,10 @@ export class AppActionsElement { const classToggle: string | undefined = `wider-devices ion-activatable${displayed ? '' : ' hidden'}`; return ( - ); } @@ -1055,20 +1056,24 @@ export class AppActionsElement { const classSlide: string | undefined = `ion-activatable${displayed ? '' : ' hidden'}`; return [ - , - , - , ]; } @@ -1077,10 +1082,14 @@ export class AppActionsElement { const classSlideCode: string | undefined = `ion-activatable${this.selectedElement?.slot?.code ? '' : ' hidden'}`; return ( - ); } @@ -1088,10 +1097,14 @@ export class AppActionsElement { const classSlideMath: string | undefined = `ion-activatable${this.selectedElement?.slot?.math ? '' : ' hidden'}`; return ( - ); } @@ -1100,10 +1113,10 @@ export class AppActionsElement { const classImage: string | undefined = `ion-activatable${this.selectedElement?.slot?.image ? '' : ' hidden'}`; return ( - ); } @@ -1113,7 +1126,7 @@ export class AppActionsElement { ); } diff --git a/studio/src/app/components/editor/app-close-menu/app-close-menu.tsx b/studio/src/app/components/editor/app-close-menu/app-close-menu.tsx index dd18941a5..0d7778332 100644 --- a/studio/src/app/components/editor/app-close-menu/app-close-menu.tsx +++ b/studio/src/app/components/editor/app-close-menu/app-close-menu.tsx @@ -1,5 +1,7 @@ import {Component, EventEmitter, h, Host, Event} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + @Component({ tag: 'app-close-menu', styleUrl: 'app-close-menu.scss', @@ -13,7 +15,7 @@ export class AppCloseMenu { diff --git a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx index 72b54b669..c2dbe6561 100644 --- a/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx +++ b/studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx @@ -1,5 +1,7 @@ import {Component, Event, EventEmitter, h, Prop} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {TargetElement} from '../../../types/editor/target-element'; @Component({ @@ -85,7 +87,7 @@ export class AppSelectTargetElement { if (this.qrCode) { return ( - QR code + {i18n.state.editor.qr_code} ); } else { @@ -97,7 +99,7 @@ export class AppSelectTargetElement { if (this.chart) { return ( - Chart + {i18n.state.editor.chart} ); } else { @@ -109,7 +111,7 @@ export class AppSelectTargetElement { if (this.slide) { return ( - Text + {i18n.state.editor.text} ); } else { @@ -121,7 +123,7 @@ export class AppSelectTargetElement { if (this.textTarget) { return ( - Text + {i18n.state.editor.text} ); } else { @@ -133,7 +135,7 @@ export class AppSelectTargetElement { if (this.wordCloud) { return ( - Text + {i18n.state.editor.text} ); } else { @@ -145,7 +147,7 @@ export class AppSelectTargetElement { if (this.headerFooter) { return ( - Header & Footer + {i18n.state.editor.header_footer} ); } else { @@ -156,7 +158,7 @@ export class AppSelectTargetElement { private renderBackground() { return ( - Background + {i18n.state.editor.background} ); } @@ -165,7 +167,7 @@ export class AppSelectTargetElement { if (this.code) { return ( - Code + {i18n.state.editor.code} ); } else { @@ -177,7 +179,7 @@ export class AppSelectTargetElement { if (this.image) { return ( - Image + {i18n.state.editor.image} ); } else { @@ -189,7 +191,7 @@ export class AppSelectTargetElement { if (this.transition) { return ( - Transition + {i18n.state.editor.transition} ); } else { @@ -201,7 +203,7 @@ export class AppSelectTargetElement { if (this.sides) { return ( - Sides + {i18n.state.editor.sides} ); } else { diff --git a/studio/src/app/components/editor/app-share-options/app-share-options.tsx b/studio/src/app/components/editor/app-share-options/app-share-options.tsx index 3da420e56..6f2a1a33d 100644 --- a/studio/src/app/components/editor/app-share-options/app-share-options.tsx +++ b/studio/src/app/components/editor/app-share-options/app-share-options.tsx @@ -1,6 +1,7 @@ import {Component, Event, EventEmitter, h, Host} from '@stencil/core'; import store from '../../../stores/deck.store'; +import i18n from '../../../stores/i18n.store'; import {MoreAction} from '../../../types/editor/more-action'; @@ -26,7 +27,7 @@ export class AppMoreShareOptions { if (store.state.published) { return ( this.selectedOption.emit(MoreAction.PUBLISH)}> -

Publish to update share

+

{i18n.state.share.update_share}

 ); } else { @@ -38,7 +39,7 @@ export class AppMoreShareOptions { if (store.state.published) { return ( this.selectedOption.emit(MoreAction.EMBED)}> -

Embed

+

{i18n.state.share.embed}

 ); } else { @@ -50,13 +51,13 @@ export class AppMoreShareOptions { if (store.state.published) { return ( this.selectedOption.emit(MoreAction.SHARE)}> -

Share link

+

{i18n.state.share.link}

 ); } else { return ( this.selectedOption.emit(MoreAction.PUBLISH)}> -

Share

+

{i18n.state.editor.share}

 ); } diff --git a/studio/src/app/components/editor/app-slot-type/app-slot-type.tsx b/studio/src/app/components/editor/app-slot-type/app-slot-type.tsx index 6d9e5fa68..9d62d2821 100644 --- a/studio/src/app/components/editor/app-slot-type/app-slot-type.tsx +++ b/studio/src/app/components/editor/app-slot-type/app-slot-type.tsx @@ -2,6 +2,7 @@ import {Component, Event, EventEmitter, Fragment, h, JSX, Prop, State} from '@st import {SlotType} from '../../../types/editor/slot-type'; import {SlotUtils} from '../../../utils/editor/slot.utils'; +import i18n from '../../../stores/i18n.store'; @Component({ tag: 'app-slot-type', @@ -79,7 +80,7 @@ export class AppSlotType { SlotType.H1, -

Huge title

+

{i18n.state.editor.huge_title}

 )} @@ -89,7 +90,7 @@ export class AppSlotType {   -

Large title

+

{i18n.state.editor.large_title}

)} @@ -99,7 +100,7 @@ export class AppSlotType {   -

Small title

+

{i18n.state.editor.small_title}

)} @@ -109,7 +110,7 @@ export class AppSlotType {   -

Paragraph

+

{i18n.state.editor.paragraph}

)} @@ -141,7 +142,7 @@ export class AppSlotType { return ( ); @@ -158,7 +159,7 @@ export class AppSlotType { SlotType.OL, - List + {i18n.state.editor.list} )} @@ -166,7 +167,7 @@ export class AppSlotType { SlotType.IMG, - Image + {i18n.state.editor.image} )} @@ -174,7 +175,7 @@ export class AppSlotType { SlotType.CODE, - Code + {i18n.state.editor.code} )} @@ -182,7 +183,7 @@ export class AppSlotType { SlotType.MARKDOWN, - Markdown + {i18n.state.editor.markdown} )} @@ -190,7 +191,7 @@ export class AppSlotType { SlotType.MATH, - Math + {i18n.state.editor.math} )} @@ -198,7 +199,7 @@ export class AppSlotType { SlotType.WORD_CLOUD, - Word Cloud + {i18n.state.editor.word_cloud} )} diff --git a/studio/src/app/components/editor/offline/app-go-offline/app-go-offline.tsx b/studio/src/app/components/editor/offline/app-go-offline/app-go-offline.tsx index 6917fbf40..302907ed6 100644 --- a/studio/src/app/components/editor/offline/app-go-offline/app-go-offline.tsx +++ b/studio/src/app/components/editor/offline/app-go-offline/app-go-offline.tsx @@ -2,9 +2,12 @@ import {Component, h, State, Event, EventEmitter} from '@stencil/core'; import errorStore from '../../../../stores/error.store'; import offlineStore from '../../../../stores/offline.store'; +import i18n from '../../../../stores/i18n.store'; import {OfflineService} from '../../../../services/editor/offline/offline.service'; +import {renderI18n} from '../../../../utils/core/i18n.utils'; + @Component({ tag: 'app-go-offline', }) @@ -35,20 +38,26 @@ export class AppGoOffline { } catch (err) { this.goingOffline = false; this.inProgress.emit(false); - errorStore.state.error = 'Apologies, something went wrong and app was unable to go offline.'; + errorStore.state.error = i18n.state.offline.error_offline; } } render() { return (
-

Go offline

-

Low bandwidth? Have to jump in a plane? Or want to present without internet connections?

+

{i18n.state.editor.go_offline}

+

{i18n.state.offline.why}

- Turn DeckDeckGo offline to store your presentation locally. + {renderI18n(i18n.state.offline.turn, { + placeholder: '{0}', + value: {i18n.state.offline.offline}, + })}

- You are still going to be able to edit your slides further. + {renderI18n(i18n.state.offline.still_edit, { + placeholder: '{0}', + value: {i18n.state.offline.edit}, + })}

{this.renderGoOffline()}
@@ -59,14 +68,14 @@ export class AppGoOffline { if (!this.goingOffline) { return ( this.goOffline()}> - Go offline now + {i18n.state.offline.offline_now} ); } else { return (
- Hang on, we are gathering the content. + {i18n.state.offline.hang_on_gather}
); } diff --git a/studio/src/app/components/editor/offline/app-go-online/app-go-online.tsx b/studio/src/app/components/editor/offline/app-go-online/app-go-online.tsx index acb2cce12..950853b4a 100644 --- a/studio/src/app/components/editor/offline/app-go-online/app-go-online.tsx +++ b/studio/src/app/components/editor/offline/app-go-online/app-go-online.tsx @@ -2,9 +2,12 @@ import {Component, h, State, Event, EventEmitter} from '@stencil/core'; import errorStore from '../../../../stores/error.store'; import offlineStore from '../../../../stores/offline.store'; +import i18n from '../../../../stores/i18n.store'; import {OfflineService} from '../../../../services/editor/offline/offline.service'; +import {renderI18n} from '../../../../utils/core/i18n.utils'; + @Component({ tag: 'app-go-online', }) @@ -41,14 +44,14 @@ export class AppGoOnline { } catch (err) { this.goingOnline = false; this.inProgress.emit(false); - errorStore.state.error = 'Something went wrong. Double check your internet connection and try again. If it still does not work, contact us!'; + errorStore.state.error = i18n.state.offline.error_online; } } render() { return (
-

Go online

+

{i18n.state.editor.go_online}

{this.renderTextOffline()} {this.renderTextOnline()}
{this.renderGoOnline()}
@@ -61,7 +64,7 @@ export class AppGoOnline { return undefined; } - return [

Oopsie, you are not online yet.

,

Check your online connection, refresh your browser and try again!

]; + return [

{i18n.state.offline.oopsie}

,

{i18n.state.offline.check}

]; } private renderTextOnline() { @@ -71,12 +74,18 @@ export class AppGoOnline { return [

- Cool, you are back online. + {renderI18n(i18n.state.offline.cool, { + placeholder: '{0}', + value: {i18n.state.offline.online}, + })}

,

- Please note that the upload of this deck will replace its previous online version. + {renderI18n(i18n.state.offline.note, { + placeholder: '{0}', + value: {i18n.state.offline.replace}, + })}

, -

Long story short, your local presentation is going to be uploaded and saved in the database as the good one.

, +

{i18n.state.offline.long_story}

, ]; } @@ -84,14 +93,14 @@ export class AppGoOnline { if (!this.goingOnline) { return ( this.goOnline()} disabled={!this.navigatorOnline}> - Go online now + {i18n.state.offline.online_now} ); } else { return (
- Hang on still, we are uploading the content. + {i18n.state.offline.hang_on_upload}
); } diff --git a/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx b/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx index 593b9f229..095caeaa3 100644 --- a/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx +++ b/studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx @@ -4,6 +4,9 @@ import deckStore from '../../../../stores/deck.store'; import userStore from '../../../../stores/user.store'; import shareStore from '../../../../stores/share.store'; import authStore from '../../../../stores/auth.store'; +import i18n from '../../../../stores/i18n.store'; + +import {renderI18n} from '../../../../utils/core/i18n.utils'; @Component({ tag: 'app-publish-done', @@ -18,7 +21,12 @@ export class AppPublishDone { @State() private keywordIndex: number = Math.floor(Math.random() * 4); - private keywords: string[] = ['Hooray', 'You did it', 'Applause', 'Thumbs up']; + private keywords: string[] = [ + i18n.state.publish_done.hooray, + i18n.state.publish_done.did_it, + i18n.state.publish_done.applause, + i18n.state.publish_done.thumbs_up, + ]; private share() { shareStore.state.share = { @@ -33,15 +41,17 @@ export class AppPublishDone {
-

{this.keywords[this.keywordIndex]}! Your presentation has been published.

+

+ {this.keywords[this.keywordIndex]}! {i18n.state.publish_done.published} +

- this.share()}>Share it with the world, your colleagues, friends and community. + {renderI18n(i18n.state.publish_done.share, {placeholder: '{0}', value: this.share()}>{i18n.state.editor.share}})}

this.share()} class="ion-margin"> - Share + {i18n.state.editor.share} {this.renderGitHub()} @@ -61,18 +71,25 @@ export class AppPublishDone { if (!deckStore.state.deck.data.github || !deckStore.state.deck.data.github.repo) { return ( - The source code of the presentation is processing + {renderI18n(i18n.state.publish_done.source_processing, { + placeholder: '{0}', + value: , + })} ); } return ( - The source code of the presentation has been submitted to a{' '} - - repository - {' '} - on GitHub . + {renderI18n(i18n.state.publish_done.source_submitted, { + placeholder: '{0}', + value: ( + + {i18n.state.publish_done.repository} + + ), + })}{' '} + . ); } diff --git a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx index af930cd6b..dd277eb57 100644 --- a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx +++ b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx @@ -7,6 +7,7 @@ import deckStore from '../../../../stores/deck.store'; import errorStore from '../../../../stores/error.store'; import apiUserStore from '../../../../stores/api.user.store'; import authStore from '../../../../stores/auth.store'; +import i18n from '../../../../stores/i18n.store'; import {Deck} from '../../../../models/data/deck'; @@ -16,6 +17,7 @@ import {DeckService} from '../../../../services/data/deck/deck.service'; import {PublishService} from '../../../../services/editor/publish/publish.service'; import {getPublishedUrl} from '../../../../utils/core/share.utils'; +import {renderI18n} from '../../../../utils/core/i18n.utils'; interface CustomInputEvent extends KeyboardEvent { data: string | null; @@ -355,17 +357,15 @@ export class AppPublishEdit { return (
-

Share your presentation online

+

{i18n.state.publish_edit.share}

-

Publish your presentation to share it with the world, your colleagues, friends and community.

+

{i18n.state.publish_edit.publish}

-

DeckDeckGo will distribute it online as a modern app.

+

{i18n.state.publish_edit.modern_app}

-

Meta

+

{i18n.state.publish_edit.meta}

-

- Edit or review your presentation's title, summary and add or change tags (up to 5) to make your presentation more inviting to readers. -

+

{i18n.state.publish_edit.title_edit}

this.handleSubmit(e)} @@ -388,13 +388,10 @@ export class AppPublishEdit { onIonChange={() => this.validateCaptionInput()}> -

- The title should be provided with latin characters, arabic numerals, spaces and dash. It must not be longer than {Constants.DECK.TITLE_MAX_LENGTH}{' '} - characters. -

+

{i18n.state.publish_edit.title_max_chars}

- Description + {i18n.state.publish_edit.description} @@ -409,7 +406,7 @@ export class AppPublishEdit { - Tags + {i18n.state.publish_edit.tags} @@ -431,7 +428,7 @@ export class AppPublishEdit {
{this.renderPublish(disable)}
-

DeckDeckGo will automatically generate the social card for your presentation based on the first slide of your deck.

+

{i18n.state.publish_edit.social_card}

{this.renderFailure()}
@@ -445,11 +442,15 @@ export class AppPublishEdit { return (

- Previous publication attempt failed. You can try again. If the problem persists, please{' '} - - contact - {' '} - us. + {' '} + {renderI18n(i18n.state.publish_edit.error_previous, { + placeholder: '{0}', + value: ( + + {i18n.state.publish_edit.contact} + + ), + })}

); } @@ -458,7 +459,8 @@ export class AppPublishEdit { return ( - Title {this.validTitle ? undefined : } + {i18n.state.publish_edit.title}{' '} + {this.validTitle ? undefined : } ); @@ -472,14 +474,14 @@ export class AppPublishEdit { disabled={!this.validTitle || !this.validDescription || this.disablePublish || !apiUserStore.state.apiUser} color="tertiary" shape="round"> - Publish now + {i18n.state.publish_edit.publish_now} ); } else { return (
{this.renderProgressBar()} - Hang on, we are publishing your presentation + {i18n.state.publish_edit.hang_on_publishing}
); } @@ -507,12 +509,12 @@ export class AppPublishEdit { this.onGitHubChange($event)} class="inline"> - Yes + {i18n.state.core.yes} - No + {i18n.state.core.no} , @@ -521,9 +523,9 @@ export class AppPublishEdit { private renderGitHubText() { if (!deckStore.state.deck || !deckStore.state.deck.data || !deckStore.state.deck.data.github) { - return

Push the source code of the presentation to a new public repository of your GitHub account?

; + return

{i18n.state.publish_edit.source_push}

; } - return

Submit the source code of the presentation to its GitHub repository?

; + return

{i18n.state.publish_edit.source_submit}

; } } diff --git a/studio/src/app/components/editor/publish/app-publish-tags/app-publish-tags.tsx b/studio/src/app/components/editor/publish/app-publish-tags/app-publish-tags.tsx index 2e936cdab..55e20d68e 100644 --- a/studio/src/app/components/editor/publish/app-publish-tags/app-publish-tags.tsx +++ b/studio/src/app/components/editor/publish/app-publish-tags/app-publish-tags.tsx @@ -1,5 +1,7 @@ import {Component, EventEmitter, Prop, Event, h} from '@stencil/core'; +import i18n from '../../../../stores/i18n.store'; + @Component({ tag: 'app-publish-tags', styleUrl: 'app-publish-tags.scss', @@ -41,8 +43,8 @@ export class AppPublishTags { private renderCloseTags(tag: string) { return ( - ); } diff --git a/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx index 1e525ef78..8f2146eba 100644 --- a/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx +++ b/studio/src/app/components/editor/slide/app-slide-warning/app-slide-warning.tsx @@ -4,6 +4,8 @@ import {popoverController} from '@ionic/core'; import {debounce} from '@deckdeckgo/utils'; +import i18n from '../../../../stores/i18n.store'; + import {ContrastUtils} from '../../../../utils/editor/contrast.utils'; import {NodeUtils} from '../../../../utils/editor/node.utils'; import {SlotUtils} from '../../../../utils/editor/slot.utils'; @@ -229,11 +231,15 @@ export class AppSlideWarning { private renderMsg() { if (this.warningLowContrast && this.warningOverflow) { - return Low contrast + Overflow; + return ( + + {i18n.state.warning.low_contrast} + {i18n.state.warning.overflow} + + ); } else if (this.warningLowContrast) { - return Low contrast; + return {i18n.state.warning.low_contrast}; } else if (this.warningOverflow) { - return Overflow; + return {i18n.state.warning.overflow}; } else { return undefined; } diff --git a/studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx index aaa1816db..7322e3f2a 100644 --- a/studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx +++ b/studio/src/app/components/editor/styles/app-color-text-background/app-color-text-background.tsx @@ -1,6 +1,7 @@ import {Component, Element, Event, EventEmitter, h, Prop} from '@stencil/core'; import settingsStore from '../../../../stores/settings.store'; +import i18n from '../../../../stores/i18n.store'; import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils'; import {SettingsUtils} from '../../../../utils/core/settings.utils'; @@ -112,7 +113,7 @@ export class AppColorTextBackground { ) => SettingsUtils.update(this.colorType === 'text' ? {color: $event.detail} : {background: $event.detail})}> - Color + {i18n.state.editor.color} ) => this.handleInput(e)} onIonChange={async () => await this.updateColorCSS()}> @@ -249,10 +250,15 @@ export class AppColor { return (
- this.onColorPickerChange($event)}> + this.onColorPickerChange($event)}> {this.renderColorInput()} - {this.renderColorSwitcher()} @@ -272,7 +278,7 @@ export class AppColor { value={this.color?.hex} name="color" placeholder="#000000" - arial-label="Color"> + arial-label={i18n.state.editor.color}> ); } else { return ( @@ -287,7 +293,7 @@ export class AppColor { max={'255'} name="r" placeholder="R" - arial-label="Rgb - Red"> + arial-label={i18n.state.editor.rgb_red}> + arial-label={i18n.state.editor.rgb_green}> + arial-label={i18n.state.editor.rgb_blue}>
); } diff --git a/studio/src/app/components/editor/styles/app-image/app-image.tsx b/studio/src/app/components/editor/styles/app-image/app-image.tsx index 79fb21651..f241fc61a 100644 --- a/studio/src/app/components/editor/styles/app-image/app-image.tsx +++ b/studio/src/app/components/editor/styles/app-image/app-image.tsx @@ -2,14 +2,15 @@ import {Component, Element, Prop, State, h, EventEmitter, Event} from '@stencil/ import {alertController} from '@ionic/core'; +import settingsStore from '../../../../stores/settings.store'; +import i18n from '../../../../stores/i18n.store'; + import {EditAction} from '../../../../types/editor/edit-action'; import {ImageAction} from '../../../../types/editor/image-action'; import {Expanded} from '../../../../types/core/settings'; import {ImageHistoryService} from '../../../../services/editor/image-history/image-history.service'; -import settingsStore from '../../../../stores/settings.store'; - import {SettingsUtils} from '../../../../utils/core/settings.utils'; @Component({ @@ -99,8 +100,8 @@ export class AppImage { private async presentHistoryInfo() { const alert: HTMLIonAlertElement = await alertController.create({ - message: 'The editor keeps track of the last 10 images you would have use in any of your presentations.

Select one to add it again quickly.', - buttons: ['Ok'], + message: i18n.state.editor.history_details, + buttons: [i18n.state.core.ok], }); return await alert.present(); @@ -111,7 +112,7 @@ export class AppImage { ) => SettingsUtils.update({image: $event.detail})}> - Images, GIF or Waves + {i18n.state.editor.images}
{this.renderStockPhotos()} @@ -123,7 +124,7 @@ export class AppImage { - History + {i18n.state.editor.history} @@ -143,7 +144,7 @@ export class AppImage { return ( this.selectAction(EditAction.OPEN_PHOTOS)} color="primary"> - Stock photo + {i18n.state.editor.stock_photo} ); } @@ -156,7 +157,7 @@ export class AppImage { return ( this.selectAction(EditAction.OPEN_GIFS)} color="secondary"> - GIF + {i18n.state.editor.gif} ); } @@ -164,7 +165,7 @@ export class AppImage { private renderCustom() { return ( this.selectAction(EditAction.OPEN_CUSTOM)} color="tertiary"> - Your images + {i18n.state.editor.your_images} ); } @@ -177,7 +178,7 @@ export class AppImage { return ( this.selectAction(EditAction.OPEN_SVG_WAVES)} color="quaternary"> - Waves + {i18n.state.editor.waves} ); } @@ -188,7 +189,7 @@ export class AppImage { } else { return ( this.selectAction(EditAction.DELETE_BACKGROUND)} fill="outline" class="delete"> - Reset image + {i18n.state.core.reset} ); } @@ -199,7 +200,7 @@ export class AppImage { return ( - You have not used any images so far. + {i18n.state.editor.no_images} ); diff --git a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx index 15a00e9a9..6af84df1e 100644 --- a/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx +++ b/studio/src/app/components/editor/styles/deck/app-deck-fonts/app-deck-fonts.tsx @@ -1,5 +1,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {FontsService} from '../../../../../services/editor/fonts/fonts.service'; @Component({ @@ -70,7 +72,7 @@ export class AppDeckFonts { private renderFonts() { return ( - Typography + {i18n.state.editor.typography}
{this.renderDefaultFont(this.selectedFont === undefined)} {this.renderGoogleFonts()} @@ -94,7 +96,7 @@ export class AppDeckFonts {
this.selectFont(null)}>

- Default + {i18n.state.editor.default}

diff --git a/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.scss b/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.scss index 89c136ca3..73555a21e 100644 --- a/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.scss +++ b/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.scss @@ -37,4 +37,9 @@ app-deck-header-footer { grid-column-end: 3; } } + + div > a, + div ion-label a { + text-decoration: underline; + } } diff --git a/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.tsx b/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.tsx index 2e4b31530..e87f12592 100644 --- a/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.tsx +++ b/studio/src/app/components/editor/styles/deck/app-deck-header-footer/app-deck-header-footer.tsx @@ -2,11 +2,14 @@ import {Component, Element, h, Prop, Host, JSX, EventEmitter, State, Event} from import userStore from '../../../../../stores/user.store'; import authStore from '../../../../../stores/auth.store'; +import i18n from '../../../../../stores/i18n.store'; import {SocialUtils} from '../../../../../utils/editor/social.utils'; import {HeaderFooterUtils} from '../../../../../utils/editor/header-footer.utils'; import navStore, {NavDirection} from '../../../../../stores/nav.store'; +import {renderI18n} from '../../../../../utils/core/i18n.utils'; + @Component({ tag: 'app-deck-header-footer', styleUrl: 'app-deck-header-footer.scss', @@ -97,12 +100,14 @@ export class AppDeckHeaderFooter { private renderNotLoggedIn() { return ( - Header & Footer + {i18n.state.editor.header_footer}
- Oh, hi! Users' settings are the options for the header and footer. Therefore, if you wish to give a try to this feature, please{' '} - this.onNavigateSignIn()}>sign in. + {renderI18n(i18n.state.editor.header_footer_sign_in, { + placeholder: '{0}', + value: this.onNavigateSignIn()}>{i18n.state.nav.sign_in.toLowerCase()}, + })}
@@ -151,7 +156,7 @@ export class AppDeckHeaderFooter { return undefined; } - return No options provided yet.; + return {i18n.state.editor.no_options}; } private renderReset( @@ -166,7 +171,7 @@ export class AppDeckHeaderFooter { return ( this.reset(slotName)} fill="outline" class="delete" disabled={selectedType === undefined}> - Reset + {i18n.state.core.reset} ); @@ -267,7 +272,10 @@ export class AppDeckHeaderFooter { private optionsNotice() { return (
- Your custom and predefined (Twitter, etc.) options can be edited in your this.onNavigateSettings()}>settings. + {renderI18n(i18n.state.editor.header_footer_edit, { + placeholder: '{0}', + value: this.onNavigateSettings()}>{i18n.state.nav.settings.toLowerCase()}, + })}
); } diff --git a/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx b/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx index ac2e4e8d3..94ad212a8 100644 --- a/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx +++ b/studio/src/app/components/editor/styles/deck/app-deck-transition/app-deck-transition.tsx @@ -1,6 +1,7 @@ import {Component, Element, Event, EventEmitter, Prop, h, State} from '@stencil/core'; import deckStore from '../../../../../stores/deck.store'; +import i18n from '../../../../../stores/i18n.store'; import {DeckAction} from '../../../../../types/editor/deck-action'; @@ -200,18 +201,18 @@ export class AppDeckTransition { private renderAutoSlide() { return ( - Auto Slide + {i18n.state.editor.auto_slide} this.onAutoSlideChange($event)} class="inline ion-margin-start"> - Yes + {i18n.state.core.yes} - No + {i18n.state.core.no} @@ -222,17 +223,29 @@ export class AppDeckTransition { private renderDirection() { return ( - Direction + {i18n.state.editor.direction} {this.renderDirectionDevice()}
- {this.renderDeckItem('direction', 'horizontal', 'horizontal', this.selectedAnimation, 'Horizontal', this.selectedDirection === 'horizontal', () => - this.applyDirection('horizontal') + {this.renderDeckItem( + 'direction', + 'horizontal', + 'horizontal', + this.selectedAnimation, + i18n.state.editor.horizontal, + this.selectedDirection === 'horizontal', + () => this.applyDirection('horizontal') )} - {this.renderDeckItem('direction', 'vertical', 'vertical', this.selectedAnimation, 'Vertical', this.selectedDirection === 'vertical', () => - this.applyDirection('vertical') + {this.renderDeckItem( + 'direction', + 'vertical', + 'vertical', + this.selectedAnimation, + i18n.state.editor.vertical, + this.selectedDirection === 'vertical', + () => this.applyDirection('vertical') )} {this.renderShowcasePapyrus('Papyrus', this.selectedDirection === 'papyrus', () => this.applyDirection('papyrus'))} @@ -246,10 +259,10 @@ export class AppDeckTransition {
this.selectDevice($event)}> - Desktop + {i18n.state.editor.desktop} - Mobile + {i18n.state.editor.mobile}
@@ -259,15 +272,17 @@ export class AppDeckTransition { private renderAnimation() { return ( - Animation + {i18n.state.editor.animation}
- {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'slide', 'Swipe', this.selectedAnimation === 'slide', () => + {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'slide', i18n.state.editor.swipe, this.selectedAnimation === 'slide', () => this.applyAnimation('slide') )} - {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'fade', 'Fade', this.selectedAnimation === 'fade', () => this.applyAnimation('fade'))} + {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'fade', i18n.state.editor.fade, this.selectedAnimation === 'fade', () => + this.applyAnimation('fade') + )} - {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'none', 'Instant', this.selectedAnimation === 'none', () => + {this.renderDeckItem('animation', 'horizontal', 'horizontal', 'none', i18n.state.editor.instant, this.selectedAnimation === 'none', () => this.applyAnimation('none') )}
diff --git a/studio/src/app/components/editor/styles/element/app-block/app-block.tsx b/studio/src/app/components/editor/styles/element/app-block/app-block.tsx index dd795f75a..425268a91 100644 --- a/studio/src/app/components/editor/styles/element/app-block/app-block.tsx +++ b/studio/src/app/components/editor/styles/element/app-block/app-block.tsx @@ -3,6 +3,7 @@ import {Component, Event, EventEmitter, Fragment, h, Prop, State} from '@stencil import {RangeChangeEventDetail} from '@ionic/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {SettingsUtils} from '../../../../../utils/core/settings.utils'; @@ -186,7 +187,7 @@ export class AppBlock { ) => SettingsUtils.update({block: $event.detail})}> - Block + {i18n.state.editor.block} {this.renderWidth()} {this.renderPadding()} @@ -200,7 +201,15 @@ export class AppBlock { return ( - Rotate {settingsStore.state.editMode === 'properties' ? {this.rotate}deg : undefined} + + {i18n.state.editor.rotate}{' '} + {settingsStore.state.editMode === 'properties' ? ( + + {this.rotate} + {i18n.state.editor.deg} + + ) : undefined} + @@ -216,7 +225,7 @@ export class AppBlock { ) => this.handleTransformInput(e)} onIonChange={() => this.updateTransformCSS()}> @@ -229,7 +238,9 @@ export class AppBlock { return ( - Padding {settingsStore.state.editMode === 'properties' ? {this.padding}px : undefined} + + {i18n.state.editor.padding} {settingsStore.state.editMode === 'properties' ? {this.padding}px : undefined} + @@ -243,7 +254,7 @@ export class AppBlock { ) => this.handlePaddingInput(e)} onIonChange={() => this.updatePaddingCSS()}> @@ -256,7 +267,9 @@ export class AppBlock { return ( - Width {settingsStore.state.editMode === 'properties' ? {this.width}% : undefined} + + {i18n.state.editor.width} {settingsStore.state.editMode === 'properties' ? {this.width}% : undefined} + ) => this.handleWidthInput(e)} onIonChange={() => this.updateWidthCSS()}> diff --git a/studio/src/app/components/editor/styles/element/app-border-radius/app-border-radius.tsx b/studio/src/app/components/editor/styles/element/app-border-radius/app-border-radius.tsx index 704869ed7..40ae88795 100644 --- a/studio/src/app/components/editor/styles/element/app-border-radius/app-border-radius.tsx +++ b/studio/src/app/components/editor/styles/element/app-border-radius/app-border-radius.tsx @@ -3,6 +3,7 @@ import {Component, Event, EventEmitter, h, Prop, State, Fragment} from '@stencil import {RangeChangeEventDetail} from '@ionic/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {SettingsUtils} from '../../../../../utils/core/settings.utils'; @@ -136,7 +137,7 @@ export class AppBorderRadius { ) => SettingsUtils.update({borderRadius: $event.detail})}> - Border radius + {i18n.state.editor.border_radius} - All corners - Individual corners + {i18n.state.editor.all_corners} + {i18n.state.editor.individual_corners} {!this.cornersExpanded ? this.renderOption('General', 'Every corner') : undefined} {this.cornersExpanded && ( - {this.renderOption('TopLeft', 'Top left')} - {this.renderOption('TopRight', 'Top right')} - {this.renderOption('BottomRight', 'Bottom right')} - {this.renderOption('BottomLeft', 'Bottom left')} + {this.renderOption('TopLeft', i18n.state.editor.top_left)} + {this.renderOption('TopRight', i18n.state.editor.top_right)} + {this.renderOption('BottomRight', i18n.state.editor.bottom_right)} + {this.renderOption('BottomLeft', i18n.state.editor.bottom_left)} )} @@ -164,7 +165,7 @@ export class AppBorderRadius { ) => this.handleInput(e)} onIonChange={async () => await this.updateBorderRadiusCSS()}> diff --git a/studio/src/app/components/editor/styles/element/app-box-shadow/app-box-shadow.tsx b/studio/src/app/components/editor/styles/element/app-box-shadow/app-box-shadow.tsx index 94132b701..3aabd0226 100644 --- a/studio/src/app/components/editor/styles/element/app-box-shadow/app-box-shadow.tsx +++ b/studio/src/app/components/editor/styles/element/app-box-shadow/app-box-shadow.tsx @@ -3,6 +3,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; import {RangeChangeEventDetail} from '@ionic/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; import {SettingsUtils} from '../../../../../utils/core/settings.utils'; @@ -221,7 +222,7 @@ export class AppBoxShadow { ) => SettingsUtils.update({boxShadow: $event.detail})}> - Box shadow + {i18n.state.editor.box_shadow} - Horizontal length {this.boxShadowProperties.get('hLength')}px + {i18n.state.editor.horizontal_length} {this.boxShadowProperties.get('hLength')}px @@ -247,7 +248,7 @@ export class AppBoxShadow { - Vertical length {this.boxShadowProperties.get('vLength')}px + {i18n.state.editor.vertical_length} {this.boxShadowProperties.get('vLength')}px @@ -262,7 +263,7 @@ export class AppBoxShadow { - Blur radius {this.boxShadowProperties.get('blurRadius')}px + {i18n.state.editor.blur_radius} {this.boxShadowProperties.get('blurRadius')}px @@ -277,7 +278,7 @@ export class AppBoxShadow { - Spread radius {this.boxShadowProperties.get('spreadRadius')}px + {i18n.state.editor.spread_radius} {this.boxShadowProperties.get('spreadRadius')}px diff --git a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx index a20dcaf49..370556e0c 100644 --- a/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx +++ b/studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx @@ -2,6 +2,8 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; import {alertController} from '@ionic/core'; +import i18n from '../../../../../stores/i18n.store'; + import {DeckdeckgoHighlightCodeCarbonTheme, DeckdeckgoHighlightCodeTerminal} from '@deckdeckgo/highlight-code'; import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; @@ -268,27 +270,27 @@ export class AppColorCode { private renderCategoryColor() { return ( - More colors + {i18n.state.editor.more_colors} - Apply a color to + {i18n.state.editor.apply_a_color_to} this.toggleColorType(e)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Comments - Functions - Keywords - Operators - Punctuation - Properties - Regex - Selector - Line numbers + {i18n.state.editor.comments} + {i18n.state.editor.functions} + {i18n.state.editor.keywords} + {i18n.state.editor.operators} + {i18n.state.editor.punctuation} + {i18n.state.editor.properties} + {i18n.state.editor.regex} + {i18n.state.editor.selector} + {i18n.state.editor.line_numbers} @@ -306,15 +308,15 @@ export class AppColorCode { private renderTerminal() { return ( - Terminal + {i18n.state.editor.terminal} - Terminal + {i18n.state.editor.terminal} this.toggle($event, 'terminal')} interface="popover" mode="md" @@ -336,15 +338,15 @@ export class AppColorCode { private renderTheme() { return ( - Theme + {i18n.state.editor.theme} - Theme + {i18n.state.editor.theme} this.toggle($event, 'theme')} interface="popover" @@ -361,7 +363,7 @@ export class AppColorCode { - Display toolbar + {i18n.state.editor.display_toolbar} - Highlight lines + {i18n.state.editor.highlight_lines} @@ -385,7 +387,7 @@ export class AppColorCode { ) => this.handleInput(e)} onIonChange={() => this.highlightSelectedLines()}> diff --git a/studio/src/app/components/editor/styles/element/app-color-word-cloud/app-color-word-cloud.tsx b/studio/src/app/components/editor/styles/element/app-color-word-cloud/app-color-word-cloud.tsx index b5f7471d1..4aa897a5b 100644 --- a/studio/src/app/components/editor/styles/element/app-color-word-cloud/app-color-word-cloud.tsx +++ b/studio/src/app/components/editor/styles/element/app-color-word-cloud/app-color-word-cloud.tsx @@ -1,5 +1,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; @Component({ @@ -73,15 +75,15 @@ export class AppColorWordCloud { render() { return ( - Colors + {i18n.state.editor.colors} - Series + {i18n.state.editor.series} this.selectColorIndex(e)} interface="popover" mode="md" @@ -103,7 +105,7 @@ export class AppColorWordCloud { // A select is more user friendly than an input private renderChartIndexes() { return this.indexes.map((index: number) => { - return {`Word ${index + 1}`}; + return {`${i18n.state.editor.word} ${index + 1}`}; }); } } diff --git a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx index b9c7c8d6c..9106ba5dc 100644 --- a/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx +++ b/studio/src/app/components/editor/styles/element/app-font-size/app-font-size.tsx @@ -1,6 +1,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {SettingsUtils} from '../../../../../utils/core/settings.utils'; @@ -122,24 +123,24 @@ export class AppFontSize { ) => SettingsUtils.update({fontSize: $event.detail})}> - Size + {i18n.state.editor.size} - Size + {i18n.state.editor.size} this.toggleFontSize($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Very small - Small - Normal - Big - Very big + {i18n.state.editor.very_small} + {i18n.state.editor.small} + {i18n.state.editor.normal} + {i18n.state.editor.big} + {i18n.state.editor.very_big} diff --git a/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx b/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx index ebd5a1924..b66f763a9 100644 --- a/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx +++ b/studio/src/app/components/editor/styles/element/app-image-style/app-image-style.tsx @@ -3,6 +3,7 @@ import {Component, Element, Prop, State, h, EventEmitter, Event} from '@stencil/ import {isSlide} from '@deckdeckgo/deck-utils'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {EditMode, Expanded} from '../../../../../types/core/settings'; @@ -210,7 +211,7 @@ export class AppImageStyle { ) => SettingsUtils.update({imageStyle: $event.detail})}> - Image + {i18n.state.editor.image} {this.renderImageSize()} {this.renderImageAlignment()} @@ -222,11 +223,11 @@ export class AppImageStyle { private renderImageSize() { return [ - Size + {i18n.state.editor.size} , - Size + {i18n.state.editor.size} - Small - Medium - Large - Original + {i18n.state.editor.small} + {i18n.state.editor.medium} + {i18n.state.editor.large} + {i18n.state.editor.original} , @@ -256,11 +257,11 @@ export class AppImageStyle { private renderImageAlignment() { return [ - Alignment + {i18n.state.editor.alignment} , - Alignment + {i18n.state.editor.alignment} - Start - Center - End + {i18n.state.editor.start} + {i18n.state.editor.center} + {i18n.state.editor.end} , diff --git a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx index df7840422..afce92f9d 100644 --- a/studio/src/app/components/editor/styles/element/app-list/app-list.tsx +++ b/studio/src/app/components/editor/styles/element/app-list/app-list.tsx @@ -1,6 +1,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {SlotType} from '../../../../../types/editor/slot-type'; import {ListStyle} from '../../../../../types/editor/list-style'; @@ -127,31 +128,31 @@ export class AppList { ) => SettingsUtils.update({list: $event.detail})}> - List + {i18n.state.editor.list} - List + {i18n.state.editor.list} this.setListType($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Ordered - Unordered + {i18n.state.editor.ordered} + {i18n.state.editor.unordered} - List Style + {i18n.state.editor.list_style} this.setListStyle($event)} interface="popover" mode="md" @@ -175,20 +176,20 @@ export class AppList { private renderOrderedStyles() { return [ - Decimal, - Decimal with Zero, - Latin Lowercase, - Latin Uppercase, - Roman Lowercase, - Roman Uppercase, + {i18n.state.editor.decimal}, + {i18n.state.editor.decimal_with_zero}, + {i18n.state.editor.latin_lowercase}, + {i18n.state.editor.latin_uppercase}, + {i18n.state.editor.roman_lowercase}, + {i18n.state.editor.roman_uppercase}, ]; } private renderUnorderedStyles() { return [ - Bullet, - Circle, - Square, + {i18n.state.editor.bullet}, + {i18n.state.editor.circle}, + {i18n.state.editor.square}, ]; } } diff --git a/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx index f7b5e17a9..851246585 100644 --- a/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx +++ b/studio/src/app/components/editor/styles/element/app-reveal/app-reveal.tsx @@ -1,5 +1,7 @@ import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {SlotUtils} from '../../../../../utils/editor/slot.utils'; @Component({ @@ -28,7 +30,7 @@ export class AppReveal { return ( - Animate transition + {i18n.state.editor.animate_transition} this.toggle()}> diff --git a/studio/src/app/components/editor/styles/element/app-text/app-text.tsx b/studio/src/app/components/editor/styles/element/app-text/app-text.tsx index 214c1f6f7..10c64aa0c 100644 --- a/studio/src/app/components/editor/styles/element/app-text/app-text.tsx +++ b/studio/src/app/components/editor/styles/element/app-text/app-text.tsx @@ -1,6 +1,7 @@ import {Component, Event, EventEmitter, Fragment, h, Prop, State} from '@stencil/core'; import settingsStore from '../../../../../stores/settings.store'; +import i18n from '../../../../../stores/i18n.store'; import {SettingsUtils} from '../../../../../utils/core/settings.utils'; @@ -174,7 +175,7 @@ export class AppText { ) => SettingsUtils.update({text: $event.detail})}> - Text + {i18n.state.editor.text} {this.renderLetterSpacing()} {this.renderAlign()} @@ -187,32 +188,32 @@ export class AppText { return ( - Letter spacing + {i18n.state.editor.letter_spacing} - Letter spacing + {i18n.state.editor.letter_spacing} this.updateLetterSpacing($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Tighter - Tight - Normal - Wide - Wider - Superwide - Widest + {i18n.state.editor.tighter} + {i18n.state.editor.tight} + {i18n.state.editor.normal} + {i18n.state.editor.wide} + {i18n.state.editor.wider} + {i18n.state.editor.superwide} + {i18n.state.editor.widest} ) => this.handleLetterSpacingInput(e)} onIonChange={async () => await this.updateLetterSpacingCSS()}> @@ -229,29 +230,29 @@ export class AppText { return ( - Alignment + {i18n.state.editor.alignment} - Alignment + {i18n.state.editor.alignment} this.updateAlign($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Left - Center - Right + {i18n.state.editor.left} + {i18n.state.editor.center} + {i18n.state.editor.right} ) => this.handleAlignInput(e)} onIonChange={() => this.updateAlignCSS()}> diff --git a/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx index 139aee648..5104d3b46 100644 --- a/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx +++ b/studio/src/app/components/editor/styles/slide/app-color-chart/app-color-chart.tsx @@ -1,5 +1,7 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {SlideChartType} from '../../../../../models/data/slide'; import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; @@ -131,19 +133,19 @@ export class AppColorDeckSlide { render() { return ( - Colors + {i18n.state.editor.colors} - Apply a color to + {i18n.state.editor.apply_a_color_to} - Apply a color to + {i18n.state.editor.apply_a_color_to} this.toggleColorType(e)} interface="popover" mode="md" @@ -153,15 +155,15 @@ export class AppColorDeckSlide { - Series + {i18n.state.editor.series} - Series + {i18n.state.editor.series} this.selectColorIndex(e)} interface="popover" @@ -173,7 +175,7 @@ export class AppColorDeckSlide { - Color + {i18n.state.editor.color} Fill, - Stroke, - Font, + {i18n.state.editor.fill}, + {i18n.state.editor.stroke}, + {i18n.state.editor.font}, ]; if (this.chartType != SlideChartType.PIE) { - options.push(Axis); - options.push(Grid); + options.push({i18n.state.editor.axis}); + options.push({i18n.state.editor.grid}); } return options; diff --git a/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx b/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx index f5d873aac..71571c102 100644 --- a/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx +++ b/studio/src/app/components/editor/styles/slide/app-color-qrcode/app-color-qrcode.tsx @@ -1,5 +1,7 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; enum ApplyColorType { @@ -77,21 +79,21 @@ export class AppColorQRCode { render() { return ( - Colors + {i18n.state.editor.colors} - Apply a color to + {i18n.state.editor.apply_a_color_to} this.selectApplyType($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Fill, - Backdrop, + {i18n.state.editor.fill}, + {i18n.state.editor.backdrop}, diff --git a/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx index 909cff761..4e7f9a66f 100644 --- a/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx +++ b/studio/src/app/components/editor/styles/slide/app-color-sides/app-color-sides.tsx @@ -1,5 +1,7 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core'; +import i18n from '../../../../../stores/i18n.store'; + import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils'; enum ApplyColorType { @@ -96,50 +98,50 @@ export class AppColorSides { render() { return ( - Colors + {i18n.state.editor.colors} - Apply a color to + {i18n.state.editor.apply_a_color_to} - Apply a color to + {i18n.state.editor.apply_a_color_to} this.selectApplyType($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Font - Background + {i18n.state.editor.font} + {i18n.state.editor.background} - Side + {i18n.state.editor.side} - Side + {i18n.state.editor.side} this.toggleSide($event)} interface="popover" mode="md" class="ion-padding-start ion-padding-end"> - Start - End + {i18n.state.editor.start} + {i18n.state.editor.end} - Color + {i18n.state.editor.color} - You do not have any personal templates yet. Follow this{' '} - - guide - {' '} - to get started. + {renderI18n(i18n.state.templates.no_personal_templates, { + placeholder: '{0}', + value: ( + + {i18n.state.templates.no_personal_templates_guide} + + ), + })} ); } diff --git a/studio/src/app/components/editor/templates/app-templates-user/app-templates-user.tsx b/studio/src/app/components/editor/templates/app-templates-user/app-templates-user.tsx index af4a94f26..b75fabb06 100644 --- a/studio/src/app/components/editor/templates/app-templates-user/app-templates-user.tsx +++ b/studio/src/app/components/editor/templates/app-templates-user/app-templates-user.tsx @@ -2,12 +2,14 @@ import {Component, Event, EventEmitter, Fragment, h} from '@stencil/core'; import errorStore from '../../../../stores/error.store'; import templatesStore from '../../../../stores/templates.store'; +import i18n from '../../../../stores/i18n.store'; import {signIn} from '../../../../utils/core/signin.utils'; import {Template} from '../../../../models/data/template'; import {TemplateService} from '../../../../services/data/template/template.service'; import authStore from '../../../../stores/auth.store'; +import {renderI18n} from '../../../../utils/core/i18n.utils'; @Component({ tag: 'app-templates-user', @@ -55,13 +57,17 @@ export class AppTemplatesUser { private renderNotLoggedIn() { return (
-

DeckDeckGo provides a set of default and community templates for your slides but, you can also use your own.

+

{i18n.state.templates.set_of_default}

- - to add yours. + {renderI18n(i18n.state.templates.sign_in_to_add, { + placeholder: '{0}', + value: ( + + ), + })}

); diff --git a/studio/src/app/components/editor/templates/platform/app-templates-charts/app-templates-charts.tsx b/studio/src/app/components/editor/templates/platform/app-templates-charts/app-templates-charts.tsx index 3d525b81a..26bb8867f 100644 --- a/studio/src/app/components/editor/templates/platform/app-templates-charts/app-templates-charts.tsx +++ b/studio/src/app/components/editor/templates/platform/app-templates-charts/app-templates-charts.tsx @@ -1,6 +1,7 @@ import {Component, Element, Event, EventEmitter, h} from '@stencil/core'; import assetsStore from '../../../../../stores/assets.store'; +import i18n from '../../../../../stores/i18n.store'; import {SlideAttributes, SlideChartType, SlideTemplate} from '../../../../../models/data/slide'; @@ -75,7 +76,7 @@ export class AppTemplatesCharts { height={68} src={assetsStore.state.chart.pieSrc} custom-loader={true}> -

Pie

+

{i18n.state.templates.pie}

, @@ -96,7 +97,7 @@ export class AppTemplatesCharts { inner-radius={16} src={assetsStore.state.chart.pieSrc} custom-loader={true}> -

Donut

+

{i18n.state.templates.donut}

, @@ -117,7 +118,7 @@ export class AppTemplatesCharts { height={68} src={assetsStore.state.chart.barCompareSrc} custom-loader={true}> -

Pie comparison

+

{i18n.state.templates.pie_comparison}

, @@ -136,7 +137,7 @@ export class AppTemplatesCharts { date-pattern="dd.MM.yyyy" src={assetsStore.state.chart.lineCompareSrc} custom-loader={true}> -

Area

+

{i18n.state.templates.area}

, @@ -159,7 +160,7 @@ export class AppTemplatesCharts { smooth={'false'} src={assetsStore.state.chart.lineSrc} custom-loader={true}> -

Sharp area

+

{i18n.state.templates.sharp_area}

, @@ -180,7 +181,7 @@ export class AppTemplatesCharts { area={'false'} src={assetsStore.state.chart.lineNoDatesSrc} custom-loader={true}> -

Lines

+

{i18n.state.templates.lines}

, @@ -203,7 +204,7 @@ export class AppTemplatesCharts { animation={true} src={assetsStore.state.chart.lineMultipleSrc} custom-loader={true}> -

Line graph comparison

+

{i18n.state.templates.line_graph_comparison}

, @@ -220,7 +221,7 @@ export class AppTemplatesCharts { height={68} src={assetsStore.state.chart.pieSrc} custom-loader={true}> -

Bar

+

{i18n.state.templates.bar}

, @@ -242,7 +243,7 @@ export class AppTemplatesCharts { '--deckgo-chart-fill-color-3': 'var(--ion-color-tertiary)', }} custom-loader={true}> -

Grouped bars

+

{i18n.state.templates.grouped_bars}

, @@ -268,7 +269,7 @@ export class AppTemplatesCharts { '--deckgo-chart-fill-color-3': 'var(--ion-color-tertiary)', }} custom-loader={true}> -

Bar comparison

+

{i18n.state.templates.bar_comparison}

, ]; diff --git a/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx b/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx index 570fa83f7..3a9a0b5c7 100644 --- a/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx +++ b/studio/src/app/components/editor/templates/platform/app-templates-default/app-templates-default.tsx @@ -2,6 +2,7 @@ import {Component, Element, Event, EventEmitter, Fragment, h, State} from '@sten import userStore from '../../../../../stores/user.store'; import assetsStore from '../../../../../stores/assets.store'; +import i18n from '../../../../../stores/i18n.store'; import {SlideAttributes, SlideSplitType, SlideTemplate} from '../../../../../models/data/slide'; import {Template} from '../../../../../models/data/template'; @@ -126,11 +127,11 @@ export class AppTemplatesDefault { poll-server={EnvironmentConfigService.getInstance().get('deckdeckgo').pollServerUrl} count-answers={3} connectPollSocket={false}> -

Engage Your Audience / Poll

-

Yes

-

No

-

Don't know

-

Live Votes With Mobile Devices

+

{i18n.state.templates.poll}

+

{i18n.state.core.yes}

+

{i18n.state.core.no}

+

{i18n.state.templates.do_not_know}

+

{i18n.state.templates.live_votes}

); @@ -152,7 +153,7 @@ export class AppTemplatesDefault { height={68} src={assetsStore.state.chart.lineCompareSrc} custom-loader={true}> -

Charts

+

{i18n.state.templates.charts}

); @@ -162,21 +163,39 @@ export class AppTemplatesDefault { return (
this.addSlideAspectRatio.emit()}> - - - - + + + + - - - Diagrams + + + {i18n.state.templates.diagrams}
); @@ -190,7 +209,7 @@ export class AppTemplatesDefault { return (
this.selectedTemplate.emit({template: SlideTemplate.GIF})}> - +

@@ -229,7 +248,7 @@ export class AppTemplatesDefault { return (
this.selectedTemplate.emit({template: SlideTemplate.PLAYGROUND})}> -

Playground

+

{i18n.state.templates.playground}
@@ -252,7 +271,7 @@ export class AppTemplatesDefault { : 'https://pbs.twimg.com/profile_images/941274539979366400/bTKGkd-O_400x400.jpg' } img-alt="Author"> -

Author

+

{i18n.state.templates.author}

@@ -271,7 +290,7 @@ export class AppTemplatesDefault { class="showcase" content={EnvironmentConfigService.getInstance().get('deckdeckgo').appUrl} img-src={`${EnvironmentConfigService.getInstance().get('deckdeckgo').globalAssetsUrl}/img/deckdeckgo-logo.svg`}> -

QR Code Deep Linking

+

{i18n.state.templates.qr_code}

); @@ -288,7 +307,7 @@ export class AppTemplatesDefault {

- Showcase Your Apps + {i18n.state.templates.showcase}
diff --git a/studio/src/app/definitions/i18.d.ts b/studio/src/app/definitions/i18.d.ts new file mode 100644 index 000000000..70491d1c3 --- /dev/null +++ b/studio/src/app/definitions/i18.d.ts @@ -0,0 +1,506 @@ +interface I18nCore { + close: string; + free_open_source: string; + loading: string; + in_progress: string; + yes: string; + no: string; + reset: string; + ok: string; + save: string; + delete: string; + sure: string; + add: string; + submit: string; + cancel: string; + got_it: string; +} + +interface I18nNav { + menu: string; + sign_out: string; + sign_in: string; + write_a_presentation: string; + ready_to_share: string; + profile: string; + customization: string; + templates: string; + settings: string; + dashboard: string; +} + +interface I18nMenu { + dashboard: string; + poll: string; + remote_control: string; +} + +interface I18nLinks { + home: string; + discover: string; + enterprise: string; + about: string; + team: string; + newsletter: string; + contact: string; + press: string; + faq: string; + developers: string; + open_source: string; + services: string; + developer: string; + terms: string; + terms_of_use: string; + privacy_policy: string; +} + +interface I18nShare { + a_presentation: string; + a_presentation_by: string; + a_presentation_no_author: string; + update_share: string; + embed: string; + link: string; +} + +interface I18nSign_in { + hi: string; + why: string; + additionally: string; +} + +interface I18nSettings { + un_publish: string; + cannot_undone: string; + type_to_confirm: string; + i_understand: string; + customization: string; + edit_mode: string; + properties: string; + profile: string; + access_settings: string; + access_templates: string; + profile_note: string; + name: string; + email: string; + newsletter: string; + username: string; + danger_zone: string; + no_way_back: string; + delete_user: string; + profile_picture: string; + profile_picture_tips: string; + summary: string; + bio: string; + custom: string; + custom_url: string; + logo_address: string; + custom_logo: string; + contribute_community: string; + contact: string; + add_a_template: string; +} + +interface I18nDashboard { + welcome: string; + your_presentations: string; + try: string; + filter: string; + no_slides: string; + copy: string; + delete: string; + cannot_undone: string; + understand: string; +} + +interface I18nEditor { + add_slide: string; + help: string; + share: string; + previous: string; + next: string; + slides: string; + slide: string; + style: string; + present: string; + go_online: string; + go_offline: string; + more: string; + exit_fullscreen: string; + backup: string; + delete: string; + notes: string; + notes_display: string; + copy: string; + format: string; + options: string; + transform: string; + add_text: string; + add_shape: string; + add_image: string; + image: string; + qr_code: string; + chart: string; + text: string; + header_footer: string; + header_footer_sign_in: string; + header_footer_edit: string; + background: string; + code: string; + code_options: string; + transition: string; + sides: string; + side: string; + huge_title: string; + large_title: string; + small_title: string; + paragraph: string; + skip: string; + list: string; + list_style: string; + decimal: string; + decimal_with_zero: string; + latin_lowercase: string; + latin_uppercase: string; + roman_lowercase: string; + roman_uppercase: string; + bullet: string; + circle: string; + square: string; + markdown: string; + math: string; + word_cloud: string; + color: string; + colors: string; + series: string; + series_index: string; + word: string; + color_picker: string; + rgb_red: string; + rgb_green: string; + rgb_blue: string; + images: string; + history: string; + history_details: string; + stock_photo: string; + photos_by_unsplash: string; + searching: string; + gif: string; + your_images: string; + waves: string; + no_images: string; + typography: string; + default: string; + community: string; + yours: string; + no_options: string; + auto_slide: string; + direction: string; + horizontal: string; + vertical: string; + animation: string; + swipe: string; + fade: string; + instant: string; + desktop: string; + mobile: string; + block: string; + rotate: string; + deg: string; + padding: string; + width: string; + border_radius: string; + all_corners: string; + individual_corners: string; + top_left: string; + top_right: string; + bottom_right: string; + bottom_left: string; + box_shadow: string; + horizontal_length: string; + vertical_length: string; + blur_radius: string; + spread_radius: string; + more_colors: string; + apply_a_color_to: string; + select_category: string; + comments: string; + functions: string; + keywords: string; + operators: string; + punctuation: string; + properties: string; + regex: string; + selector: string; + line_numbers: string; + display_line_number: string; + terminal: string; + select_terminal: string; + theme: string; + select_theme: string; + display_toolbar: string; + highlight_lines: string; + size: string; + select_font_size: string; + very_small: string; + small: string; + normal: string; + big: string; + very_big: string; + medium: string; + large: string; + original: string; + alignment: string; + start: string; + center: string; + left: string; + right: string; + end: string; + animate_transition: string; + ordered: string; + unordered: string; + letter_spacing: string; + tighter: string; + tight: string; + wide: string; + wider: string; + superwide: string; + widest: string; + text_align: string; + fill: string; + backdrop: string; + stroke: string; + font: string; + axis: string; + grid: string; + languages: string; + language: string; + filter_languages: string; + your_data: string; + your_collection_empty: string; + upload_data: string; + upload_image: string; + demo: string; + enter_demo_url: string; + embed: string; + copy_embed_code: string; + copy_to_clipboard: string; + gifs: string; + search_tenor: string; + url_playground: string; + embed_codepen: string; + youtube_video: string; + question: string; + enter_question: string; + add_answer: string; + published: string; + remote: string; + scan: string; + direction_up: string; + direction_down: string; + enter_youtube_url: string; + copy_style: string; + apply_style: string; + add_new_slide: string; + select_chart: string; + compose_slide: string; + back_to_slides: string; + action_cannot_undone: string; + delete_question: string; + fullscreen_tips: string; + fullscreen_edit: string; + fullscreen_typo: string; + fullscreen_swipe: string; + need_help: string; + need_help_comment: string; + reach_us: string; + or: string; + slide_background: string; + macros: string; + remote_enabled: string; + remote_disabled: string; + presenter_view: string; + remote_features: string; + open_presenter_view: string; + control_presentation: string; + connect: string; + start_presenting: string; + enter_fullscreen_to_start: string; + enter_fullscreen: string; + no_pending_requests: string; + grant_access: string; + deny: string; + accept: string; + add_a_shape: string; + shapes: string; + arrows: string; + status: string; + computers: string; + date_time: string; + files: string; + finance: string; + jump_or_change: string; + math_options: string; + qr_code_options: string; + chart_options: string; + author_options: string; + slide_options: string; + display_mode_image: string; + cover: string; + none: string; + data_separator: string; + date_pattern: string; + radius_display: string; + smooth: string; + area: string; + y_axis: string; + domain: string; + max: string; + extent: string; + ticks: string; + custom_number_ticks: string; + qr_code_explanation: string; + target: string; + your_presentation: string; + custom_url: string; + your_logo: string; + delete_logo: string; + deck_style: string; + slide_style: string; + transform_element: string; +} + +interface I18nOffline { + editing: string; + why: string; + turn: string; + offline: string; + still_edit: string; + edit: string; + offline_now: string; + hang_on_gather: string; + oopsie: string; + check: string; + cool: string; + online: string; + note: string; + replace: string; + long_story: string; + online_now: string; + hang_on_upload: string; + error_offline: string; + error_online: string; +} + +interface I18nPublish_done { + hooray: string; + did_it: string; + applause: string; + thumbs_up: string; + published: string; + share: string; + source_processing: string; + source_submitted: string; + repository: string; +} + +interface I18nPublish_edit { + share: string; + publish: string; + modern_app: string; + meta: string; + title_edit: string; + title_max_chars: string; + description: string; + tags: string; + social_card: string; + error_previous: string; + contact: string; + title: string; + publish_now: string; + hang_on_publishing: string; + source_push: string; + source_submit: string; +} + +interface I18nWarning { + low_contrast: string; + overflow: string; + overflow_explanation: string; + overflow_visibility: string; + contrast_ratio: string; + wcag: string; + note: string; +} + +interface I18nTemplates { + no_personal_templates: string; + no_personal_templates_guide: string; + set_of_default: string; + sign_in_to_add: string; + pie: string; + donut: string; + pie_comparison: string; + area: string; + sharp_area: string; + lines: string; + line_graph_comparison: string; + bar: string; + grouped_bars: string; + bar_comparison: string; + poll: string; + do_not_know: string; + live_votes: string; + charts: string; + diagrams: string; + playground: string; + author: string; + qr_code: string; + showcase: string; + template: string; + tag: string; + definition: string; + cdn: string; + get_in_touch: string; + url: string; + tag_format: string; + upload_definition: string; +} + +interface I18nShapes { + robot: string; + desktop: string; + arrow: string; + cloud: string; + database: string; + envelope: string; +} + +interface I18nPoll { + vote_now: string; + scan: string; + vote_cast: string; + enjoy: string; + vote_again: string; + created_with: string; +} + +interface I18n { + lang: 'en'; + core: I18nCore; + nav: I18nNav; + menu: I18nMenu; + links: I18nLinks; + share: I18nShare; + sign_in: I18nSign_in; + settings: I18nSettings; + dashboard: I18nDashboard; + editor: I18nEditor; + offline: I18nOffline; + publish_done: I18nPublish_done; + publish_edit: I18nPublish_edit; + warning: I18nWarning; + templates: I18nTemplates; + shapes: I18nShapes; + poll: I18nPoll; +} diff --git a/studio/src/app/modals/core/app-deck-delete/app-deck-delete.tsx b/studio/src/app/modals/core/app-deck-delete/app-deck-delete.tsx index 33bbf6fb4..17e498498 100644 --- a/studio/src/app/modals/core/app-deck-delete/app-deck-delete.tsx +++ b/studio/src/app/modals/core/app-deck-delete/app-deck-delete.tsx @@ -1,5 +1,8 @@ import {Component, Element, Listen, Prop, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; +import {renderI18n} from '../../../utils/core/i18n.utils'; + @Component({ tag: 'app-deck-delete', styleUrl: 'app-deck-delete.scss', @@ -37,21 +40,24 @@ export class AppDeckDelete { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Are you absolutely sure? + {i18n.state.core.sure} ,

- This action cannot be undone. This will permanently delete your presentation {this.deckName}. + {renderI18n(i18n.state.dashboard.cannot_undone, { + placeholder: '{0}', + value: {this.deckName}, + })}

this.handleSubmit($event)}> - I understand, delete my presentation + {i18n.state.dashboard.understand}
diff --git a/studio/src/app/modals/core/app-template/app-template.tsx b/studio/src/app/modals/core/app-template/app-template.tsx index 37e2a73d2..e04d3efff 100644 --- a/studio/src/app/modals/core/app-template/app-template.tsx +++ b/studio/src/app/modals/core/app-template/app-template.tsx @@ -2,8 +2,10 @@ import {Component, Element, Fragment, h, Listen, Prop, State} from '@stencil/cor import authStore from '../../../stores/auth.store'; import navStore, {NavDirection} from '../../../stores/nav.store'; +import i18n from '../../../stores/i18n.store'; import {Template, TemplateData} from '../../../models/data/template'; +import {renderI18n} from '../../../utils/core/i18n.utils'; @Component({ tag: 'app-template', @@ -154,11 +156,11 @@ export class AppTemplate { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Template + {i18n.state.templates.template} @@ -184,7 +186,7 @@ export class AppTemplate { - Tag 2 + {i18n.state.templates.tag} 2 @@ -201,7 +203,7 @@ export class AppTemplate { - Definition 3 + {i18n.state.templates.definition} 3 @@ -215,7 +217,7 @@ export class AppTemplate { - Save + {i18n.state.core.save} @@ -230,19 +232,34 @@ export class AppTemplate { return (

- 1 URL to the ES Modules as for example https://unpkg.com/my-component@latest/dist/my-component/my-component.esm.js. + 1{' '} + {renderI18n(i18n.state.templates.url, { + placeholder: '{0}', + value: https://unpkg.com/my-component@latest/dist/my-component/my-component.esm.js, + })}

- We support Unpkg, Cloudfare and jsDelivr. If you would like to use another CDN, this.navigateContact()}>get in touch. + {renderI18n(i18n.state.templates.cdn, { + placeholder: '{0}', + value: this.navigateContact()}>get in touch, + })}

- 2 The tag should not contain any of the reserved keywords deckdeckgo, deckgo or ddg. + 2{' '} + {renderI18n(i18n.state.templates.tag_format, { + placeholder: '{0}', + value: deckdeckgo, deckgo or ddg, + })}

- 3 Upload the definition which was automatically generated when you built your template ./src/components.desc.json. + 3{' '} + {renderI18n(i18n.state.templates.upload_definition, { + placeholder: '{0}', + value: ./src/components.desc.json, + })}

); diff --git a/studio/src/app/modals/core/app-user-delete/app-user-delete.tsx b/studio/src/app/modals/core/app-user-delete/app-user-delete.tsx index 9252c2614..aea6df720 100644 --- a/studio/src/app/modals/core/app-user-delete/app-user-delete.tsx +++ b/studio/src/app/modals/core/app-user-delete/app-user-delete.tsx @@ -1,6 +1,9 @@ import {Component, Element, Listen, Prop, State, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {UserUtils} from '../../../utils/core/user.utils'; +import {renderI18n} from '../../../utils/core/i18n.utils'; @Component({ tag: 'app-user-delete', @@ -53,20 +56,23 @@ export class AppUserDelete { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Are you absolutely sure? + {i18n.state.core.sure} ,

- This action cannot be undone. This will permanently delete your user {this.username}. + {renderI18n(i18n.state.settings.cannot_undone, { + placeholder: '{0}', + value: {this.username}, + })}

this.handleSubmit(e)}> -

Please type your username to confirm.

+

{i18n.state.settings.type_to_confirm}

- I understand, delete my user + {i18n.state.settings.i_understand} diff --git a/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx b/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx index 8977fcb0b..3db981b69 100644 --- a/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx +++ b/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx @@ -1,5 +1,7 @@ import {Component, Element, EventEmitter, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {filterCodeLanguages} from '../../../utils/editor/prism.utils'; import {PrismLanguage} from '../../../types/editor/prism-language'; @@ -97,11 +99,11 @@ export class AppCodeLanguages { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Languages + {i18n.state.editor.languages} , @@ -113,7 +115,7 @@ export class AppCodeLanguages { this.clear()} onIonInput={(e: CustomEvent) => this.handleInput(e)} diff --git a/studio/src/app/modals/editor/app-custom-data/app-custom-data.tsx b/studio/src/app/modals/editor/app-custom-data/app-custom-data.tsx index 9aa77af92..338e5134a 100644 --- a/studio/src/app/modals/editor/app-custom-data/app-custom-data.tsx +++ b/studio/src/app/modals/editor/app-custom-data/app-custom-data.tsx @@ -1,5 +1,7 @@ import {Component, Element, Listen, State, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {Constants} from '../../../types/core/constants'; import {StorageService} from '../../../services/storage/storage.service'; @@ -163,11 +165,11 @@ export class AppCustomData { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Your data + {i18n.state.editor.your_data} , @@ -176,7 +178,7 @@ export class AppCustomData { this.upload()} /> ) => this.searchNext(e)}> - + , @@ -219,7 +221,7 @@ export class AppCustomData {
- Your collection of data is empty + {i18n.state.editor.your_collection_empty}
); @@ -230,11 +232,11 @@ export class AppCustomData { return ( this.openFilePicker()} shape="round" color="tertiary"> - Upload a new data + {i18n.state.editor.upload_data} ); } else { - return [, Upload in progress]; + return [, {i18n.state.core.in_progress}]; } } } diff --git a/studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx b/studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx index 4518b4fc4..e01d6b469 100644 --- a/studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx +++ b/studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx @@ -1,5 +1,7 @@ import {Component, Element, Listen, State, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {Constants} from '../../../types/core/constants'; import {ImageHistoryService} from '../../../services/editor/image-history/image-history.service'; @@ -180,11 +182,11 @@ export class AppCustomImages { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Your images + {i18n.state.editor.your_images} , @@ -198,7 +200,7 @@ export class AppCustomImages { this.upload()} /> ) => this.searchNext(e)}> - + , @@ -219,7 +221,7 @@ export class AppCustomImages {
- Your collection of images is empty + {i18n.state.editor.your_collection_empty}
); @@ -233,11 +235,11 @@ export class AppCustomImages { return ( this.openFilePicker()} shape="round" color="tertiary"> - Upload a new image + {i18n.state.editor.upload_image} ); } else { - return [, Upload in progress]; + return [, {i18n.state.core.in_progress}]; } } } diff --git a/studio/src/app/modals/editor/app-demo/app-demo.tsx b/studio/src/app/modals/editor/app-demo/app-demo.tsx index 646e1b6ad..c3ea09d11 100644 --- a/studio/src/app/modals/editor/app-demo/app-demo.tsx +++ b/studio/src/app/modals/editor/app-demo/app-demo.tsx @@ -1,5 +1,7 @@ import {Component, Element, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {DemoAction} from '../../../types/editor/demo-action'; @Component({ @@ -62,11 +64,11 @@ export class AppDemo { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Demo + {i18n.state.editor.demo} , @@ -74,7 +76,7 @@ export class AppDemo { ) => this.handleInput(e)}> @@ -88,7 +90,7 @@ export class AppDemo { shape="round" onClick={() => this.save()} class="ion-margin-top"> - Save + {i18n.state.core.save} , ]; diff --git a/studio/src/app/modals/editor/app-embed/app-embed.tsx b/studio/src/app/modals/editor/app-embed/app-embed.tsx index d7e2c393a..05d59fa1a 100644 --- a/studio/src/app/modals/editor/app-embed/app-embed.tsx +++ b/studio/src/app/modals/editor/app-embed/app-embed.tsx @@ -2,6 +2,7 @@ import {Component, Element, h, Listen, State} from '@stencil/core'; import deckStore from '../../../stores/deck.store'; import errorStore from '../../../stores/error.store'; +import i18n from '../../../stores/i18n.store'; import {getPublishedUrl} from '../../../utils/core/share.utils'; @@ -67,17 +68,17 @@ export class AppEmbed { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Embed + {i18n.state.editor.embed} , - Copy the following code to embed your presentation. + {i18n.state.editor.copy_embed_code} this.copyEmbedCode()}> - Copy to clipboard + {i18n.state.editor.copy_to_clipboard} , ]; diff --git a/studio/src/app/modals/editor/app-gif/app-gif.tsx b/studio/src/app/modals/editor/app-gif/app-gif.tsx index 2eef72259..84bb15d54 100644 --- a/studio/src/app/modals/editor/app-gif/app-gif.tsx +++ b/studio/src/app/modals/editor/app-gif/app-gif.tsx @@ -1,5 +1,7 @@ import {Component, Element, Listen, State, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {GifService} from '../../../services/tenor/gif/gif.service'; import {ImageHistoryService} from '../../../services/editor/image-history/image-history.service'; @@ -221,7 +223,7 @@ export class AppGif { {this.renderCloseButton()} - GIFs + {i18n.state.editor.gifs} , @@ -233,14 +235,14 @@ export class AppGif { onSelectImage={($event: CustomEvent) => this.selectGif($event)}> ) => this.searchNext(e)}> - + , this.clear()} onIonInput={(e: CustomEvent) => this.handleInput(e)} @@ -261,8 +263,8 @@ export class AppGif { ); } else { return ( - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + ); } diff --git a/studio/src/app/modals/editor/app-notes/app-notes.scss b/studio/src/app/modals/editor/app-notes/app-notes.scss index 96d3f8a8e..f4bf4f0cf 100644 --- a/studio/src/app/modals/editor/app-notes/app-notes.scss +++ b/studio/src/app/modals/editor/app-notes/app-notes.scss @@ -4,10 +4,6 @@ app-notes { p { margin-top: 8px; - - ion-icon { - vertical-align: text-bottom; - } } ion-item.item-input ion-textarea[class*="sc-ion-textarea"] { diff --git a/studio/src/app/modals/editor/app-notes/app-notes.tsx b/studio/src/app/modals/editor/app-notes/app-notes.tsx index 50e5b304e..df2b8412f 100644 --- a/studio/src/app/modals/editor/app-notes/app-notes.tsx +++ b/studio/src/app/modals/editor/app-notes/app-notes.tsx @@ -1,5 +1,8 @@ import {Component, Element, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; +import {renderI18n} from '../../../utils/core/i18n.utils'; + @Component({ tag: 'app-notes', styleUrl: 'app-notes.scss', @@ -90,20 +93,23 @@ export class AppNotes { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Notes + {i18n.state.editor.notes} ,

- Your notes are displayed in the{' '} - - remote control - - . Markdown is supported 😉 + {renderI18n(i18n.state.editor.notes_display, { + placeholder: '{0}', + value: ( + + {i18n.state.menu.remote_control} + + ), + })}

@@ -121,11 +127,11 @@ export class AppNotes {
this.save()}> - Save + {i18n.state.core.save} this.delete()} fill="outline"> - Delete + {i18n.state.core.delete}
, diff --git a/studio/src/app/modals/editor/app-offline/app-offline.tsx b/studio/src/app/modals/editor/app-offline/app-offline.tsx index 0e301b580..bd2c81bf9 100644 --- a/studio/src/app/modals/editor/app-offline/app-offline.tsx +++ b/studio/src/app/modals/editor/app-offline/app-offline.tsx @@ -1,8 +1,10 @@ import {Component, Element, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + @Component({ tag: 'app-offline', - styleUrl: 'app-offline.scss' + styleUrl: 'app-offline.scss', }) export class AppNotes { @Element() el: HTMLElement; @@ -43,16 +45,16 @@ export class AppNotes { - this.closeModal()} disabled={this.jobInProgress}> - + this.closeModal()} disabled={this.jobInProgress} aria-label={i18n.state.core.close}> + - {this.offline ? 'Go Online' : 'Go Offline'} + {this.offline ? i18n.state.editor.go_online : i18n.state.editor.go_offline} ,
{this.renderContent()}
- + , ]; } diff --git a/studio/src/app/modals/editor/app-photo/app-photo.tsx b/studio/src/app/modals/editor/app-photo/app-photo.tsx index 08f2909d3..0a7a244c6 100644 --- a/studio/src/app/modals/editor/app-photo/app-photo.tsx +++ b/studio/src/app/modals/editor/app-photo/app-photo.tsx @@ -1,12 +1,14 @@ import {Component, Element, Listen, State, h} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {ApiPhotoService} from '../../../services/api/photo/api.photo.service'; import {ApiPhotoFactoryService} from '../../../services/api/photo/api.photo.factory.service'; import {ImageHistoryService} from '../../../services/editor/image-history/image-history.service'; @Component({ tag: 'app-photo', - styleUrl: 'app-photo.scss' + styleUrl: 'app-photo.scss', }) export class AppPhoto { @Element() el: HTMLElement; @@ -189,7 +191,7 @@ export class AppPhoto { {this.renderCloseButton()} - Stock photo + {i18n.state.editor.stock_photo} , @@ -201,7 +203,7 @@ export class AppPhoto { {this.renderPhotosPlaceHolder()} ) => this.searchNext(e)}> - + , @@ -216,15 +218,15 @@ export class AppPhoto { this.search(); }}> - + , ]; } private renderCloseButton() { if (!this.searchTerm || this.searchTerm.length <= 0 || this.searching) { return ( - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + ); } else { @@ -242,7 +244,7 @@ export class AppPhoto {
- Photos by Unsplash + {i18n.state.editor.photos_by_unsplash} {this.renderPlaceHolderSearching()}
@@ -256,7 +258,7 @@ export class AppPhoto { if (this.searching) { return (

- Searching + {i18n.state.editor.searching}

); } else { diff --git a/studio/src/app/modals/editor/app-playground/app-playground.tsx b/studio/src/app/modals/editor/app-playground/app-playground.tsx index 04714d368..80cdba2e1 100644 --- a/studio/src/app/modals/editor/app-playground/app-playground.tsx +++ b/studio/src/app/modals/editor/app-playground/app-playground.tsx @@ -1,7 +1,11 @@ import {Component, Element, h, Listen, Prop, State} from '@stencil/core'; import {DeckdeckgoPlaygroundTheme} from '@deckdeckgo/slide-playground'; + +import i18n from '../../../stores/i18n.store'; + import {PlaygroundAction} from '../../../types/editor/playground-action'; +import {renderI18n} from '../../../utils/core/i18n.utils'; @Component({ tag: 'app-playground', @@ -78,11 +82,11 @@ export class AppPlayground { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Playground + {i18n.state.templates.playground} , @@ -90,7 +94,7 @@ export class AppPlayground { ) => this.handleInput(e)}> @@ -100,7 +104,7 @@ export class AppPlayground { this.toggleTheme($event)} interface="popover" mode="md" @@ -121,15 +125,18 @@ export class AppPlayground { shape="round" class="ion-margin-top" onClick={() => this.save()}> - Save + {i18n.state.core.save}

- Embed your best CodePen, JSFiddle or WebComponents.dev. All you need is to enter their full links. Check out this{' '} - - YouTube video - {' '} - for a quick tutorial. + {renderI18n(i18n.state.editor.embed_codepen, { + placeholder: '{0}', + value: ( + + {i18n.state.editor.youtube_video} + + ), + })}

, ]; diff --git a/studio/src/app/modals/editor/app-poll-options/app-poll-options.tsx b/studio/src/app/modals/editor/app-poll-options/app-poll-options.tsx index f918b49dc..2faedb9cd 100644 --- a/studio/src/app/modals/editor/app-poll-options/app-poll-options.tsx +++ b/studio/src/app/modals/editor/app-poll-options/app-poll-options.tsx @@ -1,5 +1,7 @@ import {Component, Element, EventEmitter, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + @Component({ tag: 'app-poll-options', styleUrl: 'app-poll-options.scss', @@ -223,20 +225,20 @@ export class AppPollOptions { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Poll + {i18n.state.menu.poll} , -

Question

+

{i18n.state.editor.question}

) => this.handleQuestionInput(e)}> @@ -248,13 +250,13 @@ export class AppPollOptions {
this.addAnswer()} disabled={this.editDisabled}> - Add an answer + {i18n.state.editor.add_answer}
this.save()}> - Save + {i18n.state.core.save} , ]; diff --git a/studio/src/app/modals/editor/app-publish/app-publish.tsx b/studio/src/app/modals/editor/app-publish/app-publish.tsx index 91944ff58..b38a7f045 100644 --- a/studio/src/app/modals/editor/app-publish/app-publish.tsx +++ b/studio/src/app/modals/editor/app-publish/app-publish.tsx @@ -1,5 +1,7 @@ import {Component, Element, Listen, h, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + import {PublishService} from '../../../services/editor/publish/publish.service'; @Component({ @@ -78,8 +80,8 @@ export class AppPublish { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + {this.renderTitle()} @@ -95,9 +97,9 @@ export class AppPublish { private renderTitle() { if (this.publishedUrl && this.publishedUrl !== undefined && this.publishedUrl !== '') { - return Published; + return {i18n.state.editor.published}; } else { - return Ready to share?; + return {i18n.state.nav.ready_to_share}; } } diff --git a/studio/src/app/modals/editor/app-remote-connect/app-remote-connect.tsx b/studio/src/app/modals/editor/app-remote-connect/app-remote-connect.tsx index 336966e45..34697b414 100644 --- a/studio/src/app/modals/editor/app-remote-connect/app-remote-connect.tsx +++ b/studio/src/app/modals/editor/app-remote-connect/app-remote-connect.tsx @@ -1,8 +1,10 @@ import {Component, Element, State, h, Listen, Fragment} from '@stencil/core'; import remoteStore from '../../../stores/remote.store'; +import i18n from '../../../stores/i18n.store'; import {RemoteService} from '../../../services/editor/remote/remote.service'; +import {renderI18n} from '../../../utils/core/i18n.utils'; @Component({ tag: 'app-remote-connect', @@ -102,20 +104,24 @@ export class AppRemoteConnect { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + - Remote control + {i18n.state.menu.remote_control} -

Control your presentation from your phone, tablet or any devices where you can also see your notes, set a timer and draw over your slides.

+

{i18n.state.editor.remote}

- Scan the QR-Code or get the Progressive Web Apps at{' '} - - https://deckdeckgo.app - + {renderI18n(i18n.state.editor.scan, { + placeholder: '{0}', + value: ( + + https://deckdeckgo.app + + ), + })}

diff --git a/studio/src/app/modals/editor/app-waves/app-waves.tsx b/studio/src/app/modals/editor/app-waves/app-waves.tsx index 7bc15abec..415131e5a 100644 --- a/studio/src/app/modals/editor/app-waves/app-waves.tsx +++ b/studio/src/app/modals/editor/app-waves/app-waves.tsx @@ -2,6 +2,8 @@ import {Component, Element, Listen, State, h, Fragment} from '@stencil/core'; import {RangeChangeEventDetail} from '@ionic/core'; +import i18n from '../../../stores/i18n.store'; + import {ColorUtils, InitStyleColor} from '../../../utils/editor/color.utils'; import {WavesUtils} from '../../../utils/editor/waves.utils'; @@ -121,7 +123,7 @@ export class AppWaves { {this.renderCloseButton()} - Waves + {i18n.state.editor.waves} @@ -132,17 +134,17 @@ export class AppWaves {
- Waves + {i18n.state.editor.waves} {this.renderOptions()} - Color + {i18n.state.editor.color} {this.renderColor()} this.selectWave()} color="dark" shape="round"> - Add + {i18n.state.core.add} @@ -151,8 +153,8 @@ export class AppWaves { private renderCloseButton() { return ( - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + ); } @@ -168,7 +170,7 @@ export class AppWaves { size="small" onClick={() => this.setOrientation('upward')} color={this.orientation === 'upward' ? 'quaternary' : 'medium'} - aria-label="Direction up"> + aria-label={i18n.state.editor.direction_up}> @@ -176,7 +178,7 @@ export class AppWaves { size="small" onClick={() => this.setOrientation('downward')} color={this.orientation === 'downward' ? 'quaternary' : 'medium'} - aria-label="Direction down"> + aria-label={i18n.state.editor.direction_down}> diff --git a/studio/src/app/modals/editor/app-youtube/app-youtube.tsx b/studio/src/app/modals/editor/app-youtube/app-youtube.tsx index 55462b955..0008612c2 100644 --- a/studio/src/app/modals/editor/app-youtube/app-youtube.tsx +++ b/studio/src/app/modals/editor/app-youtube/app-youtube.tsx @@ -1,5 +1,7 @@ import {Component, Element, h, Listen, Prop, State} from '@stencil/core'; +import i18n from '../../../stores/i18n.store'; + @Component({ tag: 'app-youtube', styleUrl: 'app-youtube.scss', @@ -45,8 +47,8 @@ export class AppYoutube { - this.closeModal()}> - + this.closeModal()} aria-label={i18n.state.core.close}> + YouTube @@ -57,7 +59,7 @@ export class AppYoutube { ) => this.handleInput(e)}> @@ -68,7 +70,7 @@ export class AppYoutube { color="dark" shape="round" onClick={() => this.save()}> - Save + {i18n.state.core.save} , ]; diff --git a/studio/src/app/pages/core/app-poll/app-poll.tsx b/studio/src/app/pages/core/app-poll/app-poll.tsx index eeb05099b..cde85d472 100644 --- a/studio/src/app/pages/core/app-poll/app-poll.tsx +++ b/studio/src/app/pages/core/app-poll/app-poll.tsx @@ -2,12 +2,14 @@ import {Component, h, Prop, State} from '@stencil/core'; import errorStore from '../../../stores/error.store'; import pollStore from '../../../stores/poll.store'; +import i18n from '../../../stores/i18n.store'; import {get, set} from 'idb-keyval'; import {DeckdeckgoPoll, DeckdeckgoPollAnswer} from '@deckdeckgo/types'; import {PollService} from '../../../services/poll/poll.service'; +import {renderI18n} from '../../../utils/core/i18n.utils'; @Component({ tag: 'app-poll', @@ -185,7 +187,7 @@ export class AppPoll { return undefined; } - return [

Vote now!

,

Scan the QR-Code displayed on screen or enter the code to make your voice heard.

, this.renderJoinPollForm()]; + return [

{i18n.state.poll.vote_now}

,

{i18n.state.poll.scan}

, this.renderJoinPollForm()]; } private renderJoinPollForm() { @@ -216,7 +218,7 @@ export class AppPoll { disabled={!this.pollKey || this.pollKey === undefined || this.pollKey === '' || this.connecting} color="primary" shape="round"> - Submit + {i18n.state.core.submit} ); } @@ -225,10 +227,10 @@ export class AppPoll { return (
- Submit + {i18n.state.core.submit} this.cancel()}> - Cancel + {i18n.state.core.cancel}
); @@ -243,21 +245,27 @@ export class AppPoll {
-

{this.keywords[this.keywordIndex]}! Your vote has been cast.

+

+ {this.keywords[this.keywordIndex]}! {i18n.state.poll.vote_cast} +

-

Enjoy the presentation and watch out the screen for the real-time polling.

+

{i18n.state.poll.enjoy}

this.cancel()} color="primary" shape="round" class="ion-margin-top"> - Vote for another poll + {i18n.state.poll.vote_again}
- Created with{' '} - -
- DeckDeckGo -
- + {renderI18n(i18n.state.poll.created_with, { + placeholder: '{0}', + value: ( + +
+ DeckDeckGo +
+ + ), + })}
); diff --git a/studio/src/app/pages/core/settings/app-customization/app-customization.tsx b/studio/src/app/pages/core/settings/app-customization/app-customization.tsx index 06e3b3aca..847c4838b 100644 --- a/studio/src/app/pages/core/settings/app-customization/app-customization.tsx +++ b/studio/src/app/pages/core/settings/app-customization/app-customization.tsx @@ -2,6 +2,7 @@ import {Component, Fragment, h} from '@stencil/core'; import themeStore from '../../../../stores/theme.store'; import settingsStore from '../../../../stores/settings.store'; +import i18n from '../../../../stores/i18n.store'; import {ThemeService} from '../../../../services/theme/theme.service'; @@ -33,7 +34,7 @@ export class AppCustomization { ,
-

Customization

+

{i18n.state.settings.customization}

{this.renderDarkLightToggle()} @@ -60,13 +61,13 @@ export class AppCustomization { return ( - Edit mode + {i18n.state.settings.edit_mode} this.toggleEditMode()}> - Properties + {i18n.state.settings.properties} diff --git a/studio/src/app/pages/core/settings/app-profile/app-profile.tsx b/studio/src/app/pages/core/settings/app-profile/app-profile.tsx index b910ed1ce..2ac6d4c61 100644 --- a/studio/src/app/pages/core/settings/app-profile/app-profile.tsx +++ b/studio/src/app/pages/core/settings/app-profile/app-profile.tsx @@ -10,6 +10,7 @@ import navStore, {NavDirection} from '../../../../stores/nav.store'; import authStore from '../../../../stores/auth.store'; import userStore from '../../../../stores/user.store'; import apiUserStore from '../../../../stores/api.user.store'; +import i18n from '../../../../stores/i18n.store'; import {ApiUser} from '../../../../models/api/api.user'; import {User} from '../../../../models/data/user'; @@ -26,6 +27,8 @@ import {ApiUserFactoryService} from '../../../../services/api/user/api.user.fact import {EnvironmentDeckDeckGoConfig} from '../../../../types/core/environment-config'; import {EnvironmentConfigService} from '../../../../services/core/environment/environment-config.service'; +import {renderI18n} from '../../../../utils/core/i18n.utils'; + @Component({ tag: 'app-profile', styleUrl: 'app-profile.scss', @@ -446,7 +449,7 @@ export class AppProfile { ,
-

Profile

+

{i18n.state.settings.profile}

{this.renderGuardedContent()}
, @@ -462,14 +465,14 @@ export class AppProfile { } private renderNotLoggedInContent() { - return [ -

+ return renderI18n(i18n.state.settings.access_settings, { + placeholder: '{0}', + value: ( - to access your profile and settings. -

, - ]; + ), + }); } private renderUserContent() { @@ -489,14 +492,14 @@ export class AppProfile { {this.renderSubmitForm()} , -

Note that your update has no effect on the presentations you would have already published.

, +

{i18n.state.settings.profile_note}

, ]; } private renderName() { return [ - Name + {i18n.state.settings.name} , - Email + {i18n.state.settings.email} , this.validateEmailInput()}> ,