InstallDialog: add translations

zbycz · Jun 30, 2021 · 6629c8e · 6629c8e
1 parent 6316d1c
commit 6629c8e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/src/components/HomepagePanel/InstallDialog.tsx b/src/components/HomepagePanel/InstallDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';
 import { DialogContent, Paper, Tab, Tabs, Typography } from '@material-ui/core';
@@ -12,8 +12,7 @@ import styled from 'styled-components';
 
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import AddToHomeScreenIcon from '@material-ui/icons/AddToHomeScreen';
-import { isServer } from '../helpers';
-import { t } from '../../services/intl';
+import { t, Translation } from '../../services/intl';
 import { ClosePanelButton } from '../utils/ClosePanelButton';
 
 const isIOS = () =>
@@ -32,7 +31,7 @@ const isAndroid = () =>
   navigator.userAgent.toLowerCase().indexOf('android') > -1;
 
 const getPlatform = () => {
-  if (isServer() || isIOS()) return 'ios';
+  if (isIOS()) return 'ios';
   if (isAndroid()) return 'android';
   return 'desktop';
 };
@@ -95,7 +94,11 @@ const PaperImg = ({ src, width }) => (
 );
 
 export function InstallDialog() {
-  const [value, setValue] = React.useState(getPlatform());
+  const [value, setValue] = React.useState('ios');
+
+  useEffect(() => {
+    setValue(getPlatform());
+  }, []);
 
   const handleClose = () => Router.push('/');
   const handleChange = (event, newValue) => {
@@ -118,7 +121,7 @@ export function InstallDialog() {
           <Tabs
             value={value}
             onChange={handleChange}
-            aria-label="Choose your platform"
+            aria-label={t('install.tabs_aria_label')}
           >
             <Tab icon={<AppleIcon />} label="iOS" value="ios" />
             <Tab icon={<AndroidIcon />} label="Android" value="android" />
@@ -128,11 +131,11 @@ export function InstallDialog() {
         <DialogContent dividers>
           <TabPanel value="ios">
             <Typography paragraph color="textSecondary">
-              Open osmapp.org in the <strong>Safari browser</strong>
+              <Translation id="install.ios_intro" />
             </Typography>
             <ul>
               <li>
-                Tap <strong>Share icon</strong>{' '}
+                <Translation id="install.ios_share" />{' '}
                 <img
                   src="install/ios_shareicon.png"
                   srcSet="install/ios_shareicon.png 1x, install/[email protected] 2x"
@@ -144,7 +147,7 @@ export function InstallDialog() {
                 <PaperImg src="install/ios_share.png" width={300} />
               </li>
               <li>
-                Tap <strong>Add to Home Screen</strong>{' '}
+                <Translation id="install.ios_add" />{' '}
                 <img
                   src="install/ios_addicon.png"
                   alt="add icon"
@@ -157,48 +160,45 @@ export function InstallDialog() {
             </ul>
 
             <Typography paragraph color="textPrimary">
-              Thats all! Look for OsmAPP at your home screen.
+              <Translation id="install.outro" />
             </Typography>
 
             <Typography paragraph color="textSecondary">
-              Note: This app uses PWA technology – featuring quick installation
-              and no need for Google Play or App Store.
+              <Translation id="install.note" />
             </Typography>
           </TabPanel>
           <TabPanel value="android">
             <Typography paragraph color="textSecondary">
-              Open osmapp.org in the <strong>Chrome browser</strong>
+              <Translation id="install.android_intro" />
             </Typography>
             <ul>
               <li>
-                Tap the <strong>three dots menu</strong> <MoreVertIcon />
+                <Translation id="install.android_share" /> <MoreVertIcon />
                 <br />
                 <PaperImg src="install/android_menu.png" width={300} />
               </li>
               <li>
-                Tap <strong>Install app</strong> <AddToHomeScreenIcon />
+                <Translation id="install.android_add" /> <AddToHomeScreenIcon />
                 <br />
                 <PaperImg src="install/android_add.png" width={300} />
               </li>
             </ul>
 
             <Typography paragraph color="textPrimary">
-              Thats all! Look for OsmAPP at your home screen.
+              <Translation id="install.outro" />
             </Typography>
 
             <Typography paragraph color="textSecondary">
-              Note: This app uses PWA technology – featuring quick installation
-              and no need for Google Play or App Store.
+              <Translation id="install.note" />
             </Typography>
           </TabPanel>
           <TabPanel value="desktop">
             <Typography paragraph color="textSecondary">
-              Open osmapp.org in <strong>Chrome</strong>,{' '}
-              <strong>FirefoxOS</strong> or <strong>Opera</strong>
+              <Translation id="install.desktop_intro" />
             </Typography>
             <ul>
               <li>
-                Click the <strong>install button</strong>{' '}
+                <Translation id="install.desktop_install" />{' '}
                 <img
                   src="install/desktop_add.png"
                   width={16}
@@ -211,12 +211,11 @@ export function InstallDialog() {
             </ul>
 
             <Typography paragraph color="textPrimary">
-              Thats all! Look for OsmAPP at your home screen.
+              <Translation id="install.outro" />
             </Typography>
 
             <Typography paragraph color="textSecondary">
-              Note: This app uses PWA technology – featuring quick installation
-              and no need for Google Play or App Store.
+              <Translation id="install.note" />
             </Typography>
           </TabPanel>
         </DialogContent>

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -5,6 +5,17 @@ export default {
   webgl_error: `Jejda. Tato mapa potřebuje technologii WebGL.<br /><br />Pokud máte moderní zařízení, zkuste nainstalovat poslední verzi prohlížeče Chrome.`,
 
   'install.button': 'Stáhnout aplikaci',
+  'install.tabs_aria_label': 'Vyberte si svou platformu',
+  'install.ios_intro': 'Otevřete osmapp.org v <strong>prohlížeči Safari</strong>',
+  'install.ios_share': 'Ťukněte na <strong>ikonku Sdílet</strong>',
+  'install.ios_add': 'Ťukněte na <strong>Přidat na domovskou obrazovku</strong>',
+  'install.android_intro': 'Otevřete osmapp.org v <strong>prohlížeči Chrome</strong>',
+  'install.android_share': 'Ťukněte na <strong>trojtečkové menu</strong>',
+  'install.android_add': 'Ťukněte na <strong>Instalovat aplikaci</strong>',
+  'install.desktop_intro': 'Otevřete osmapp.org v prohlížečích <strong>Chrome</strong>, <strong>FirefoxOS</strong> nebo <strong>Opera</strong>',
+  'install.desktop_install': 'Klikněte na <strong>Instalovat aplikaci</strong>',
+  'install.outro': 'To je vše! Aplikaci najdete na své domovské obrazovce.',
+  'install.note': 'Poznámka: Používáme technologii PWA – rychlá instalace bez nutnosti Google Play či App Storu.',
 
   'homepage.subtitle': 'Univerzální appka pro OpenStreetMap',
   'homepage.how_to_start': 'Začněte ve vyhledávacím poli,\nnebo klikněte na libovolnou ikonku v mapě.',

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -7,6 +7,17 @@ export default {
   webgl_error: `Oops. This map needs WebGL technology.<br /><br />If you have a compatible device, try using the last version of Chrome browser.`,
 
   'install.button': 'Install app',
+  'install.tabs_aria_label': 'Choose your platform',
+  'install.ios_intro': 'Open osmapp.org in the <strong>Safari browser</strong>',
+  'install.ios_share': 'Tap <strong>Share icon</strong>',
+  'install.ios_add': 'Tap <strong>Add to Home Screen</strong>',
+  'install.android_intro': 'Open osmapp.org in the <strong>Chrome browser</strong>',
+  'install.android_share': 'Tap the <strong>three dots menu</strong>',
+  'install.android_add': 'Tap <strong>Install app</strong>',
+  'install.desktop_intro': 'Open osmapp.org in <strong>Chrome</strong>, <strong>FirefoxOS</strong> or <strong>Opera</strong>',
+  'install.desktop_install': 'Click the <strong>install button</strong>',
+  'install.outro': 'Thats all! Look for OsmAPP at your home screen.',
+  'install.note': 'Note: This app uses PWA technology – featuring quick installation and no need for Google Play or App Store.',
 
   'homepage.subtitle': 'A universal OpenStreetMap app',
   'homepage.how_to_start': 'Start by typing your query into the searchbox.\nOr click any item on the map.',