Merge pull request #349 from ReadAlongs/dev.ej/translate-route-buttons

Dev.ej/translate route buttons

packages/studio-web/project.json

@@ -49,8 +49,8 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "2mb"
+              "maximumWarning": "1500kb",
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",

packages/studio-web/src/app/app.component.html

@@ -3,14 +3,44 @@
     ReadAlong Studio
   </span>
   <span class="nav-spacer"></span>
-  <div class="nav__buttons">
+  <button class="d-md-none" mat-button [matMenuTriggerFor]="menu">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button
+      mat-button
+      [color]="currentURL === '/' ? 'accent' : ''"
+      [routerLink]="''"
+    >
+      <mat-icon>home</mat-icon>
+      <span i18n="Studio">Studio</span>
+    </button>
+    <br />
+    <button
+      id="goToEditor"
+      class="plausible-event-name=Editor"
+      mat-button
+      [color]="currentURL === '/editor' ? 'accent' : ''"
+      [routerLink]="'editor'"
+    >
+      <mat-icon>edit</mat-icon>
+      <span i18n="Editor">Editor</span>
+    </button>
+    <br />
+    <button mat-button (click)="openPrivacyDialog()">
+      <mat-icon>policy</mat-icon>
+      <span i18n="Privacy">Privacy</span>
+    </button>
+  </mat-menu>
+  <div class="nav__buttons d-none d-md-block">
     <button
       class="nav__button"
       mat-button
       [color]="currentURL === '/' ? 'accent' : ''"
       [routerLink]="''"
     >
-      Studio
+      <mat-icon>home</mat-icon>
+      <span i18n="Studio">Studio</span>
     </button>
     <button
       id="goToEditor"
@@ -20,11 +50,11 @@
       [routerLink]="'editor'"
     >
       <mat-icon>edit</mat-icon>
-      Editor
+      <span i18n="Editor">Editor</span>
     </button>
     <button class="nav__button" mat-button (click)="openPrivacyDialog()">
       <mat-icon>policy</mat-icon>
-      Privacy
+      <span i18n="Privacy">Privacy</span>
     </button>
   </div>
 </mat-toolbar>

packages/studio-web/src/app/editor/editor.component.html

@@ -6,7 +6,7 @@
         <h1 i18n="Welcome message for app editor" id="welcome-header">
           Welcome to the ReadAlong Studio Editor
         </h1>
-        <p>
+        <p i18n="Editor synopsis">
           This is a tool to help you edit your existing 'readalongs'. To get
           started, click on the tour button below, and follow the steps.
         </p>

packages/studio-web/src/app/material.module.ts

@@ -10,6 +10,7 @@ import { MatRadioModule } from "@angular/material/radio";
 import { MatSelectModule } from "@angular/material/select";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { MatStepperModule } from "@angular/material/stepper";
+import { MatMenuModule } from "@angular/material/menu";
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { MatStepperModule } from "@angular/material/stepper";
     MatIconModule,
     MatProgressBarModule,
     MatRadioModule,
+    MatMenuModule,
     MatButtonToggleModule,
   ],
   exports: [
@@ -36,6 +38,7 @@ import { MatStepperModule } from "@angular/material/stepper";
     MatIconModule,
     MatProgressBarModule,
     MatRadioModule,
+    MatMenuModule,
     MatButtonToggleModule,
   ],
 })

packages/studio-web/src/app/shepherd.steps.ts

@@ -550,7 +550,7 @@ export const readalong_go_to_editor: any = {
     },
     {
       classes: "shepherd-button-warning",
-      text: $localize`Editor`,
+      text: $localize`To the Editor`,
       action: function () {
         if (this) (this as unknown as Tour).complete();
         window.location.hash = "#/editor?startTour=yes";

packages/studio-web/src/i18n/messages.es.json

@@ -2,10 +2,14 @@
   "locale": "es",
   "translations": {
     "8299719445551358262": "Studio de ReadAlong",
+    "6389312883797462351": "Studio",
+    "3742657416068781599": "Editor",
+    "8440128775129354214": "Privacidad",
     "2148054857885504777": " ¡Felicidades! ¡Aquí está su ReadAlong! ",
     "880407735794041263": "Error de descarga.",
     "3790351978262872462": "¡Perdón!",
     "1743078436798702107": " Bienvenidos al editor del Studio de ReadAlong ",
+    "5946680664458019339": " Esta herramienta le permite modificar su ReadAlong. Para empezar, haga clic en «¡Siga el tour!» y siga las etapas. ",
     "8366946611697584032": " ¡Siga el tour! ",
     "3903003521039334232": " Seleccione un documento HTML offline de ReadAlong. ",
     "5192585697967841844": " Para obtener este documento, debería haber creado un ReadAlong utilizando el {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} Studio{$CLOSE_LINK} y luego haber seleccionado «HTML offline» como formato. O puede utilizar el archivo HTML offline incluido en el formato de descarga Archivos web comprimidos. ",
@@ -87,10 +91,10 @@
     "9150310094905104116": "Esto representa visualmente el alineamiento audio-texto de su ReadAlong. Haga clic en la forma de onda para escuchar una palabra. Mueve las barras en los bordes de una palabra para ajustar su alineamiento. Luego haga clic en el «play» botón del ReadAlong para observar los resultados de sus ajustes en el resaltado de texto de su ReadAlong.",
     "444446810820436138": "Corregir errores de ortografía",
     "2773189193481434399": "Puede corregir errores de ortografía haciendo clic en una palabra y editándola.",
-    "4796729421526127263": "Ir al Editor",
-    "1630288581226787121": "Después de haber descargado su ReadAlong, puede volver a abrirlo en el Editor para continuar editándolo.",
+    "4796729421526127263": "Ir al editor",
+    "1630288581226787121": "Después de haber descargado su ReadAlong, puede volver a abrirlo en el editor para continuar editándolo.",
     "65984904390749158": "Terminar",
-    "3742657416068781599": "Al editor",
+    "3769638354035900644": "Al editor",
     "8428348909593474745": "Paso 1",
     "3614618598824071164": " Esta es una herramienta diseñada para ayudarlo a crear su propio 'readalong' que resalta las palabras a medida que se pronuncian. Puede ver {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} este ejemplo en el idioma cree oriental{$CLOSE_LINK} para tener una mejor idea de qué es un 'readalong'. ",
     "5224223351795929492": "Para empezar a crear su propio 'readalong' siga el tour del sitio haciendo clic en el botón «Siga el tour» y siguiendo los pasos descritos aquí debajo.",

packages/studio-web/src/i18n/messages.fr.json

@@ -2,10 +2,14 @@
   "locale": "fr",
   "translations": {
     "8299719445551358262": "Studio ReadAlong",
+    "6389312883797462351": "Studio",
+    "3742657416068781599": "Éditeur",
+    "8440128775129354214": "Confidentialité",
     "2148054857885504777": " Félicitations! Voici votre ReadAlong! ",
     "880407735794041263": "Erreur de téléchargement.",
     "3790351978262872462": "Désolé!",
     "1743078436798702107": " Bienvenue à l'éditeur du Studio ReadAlong ",
+    "5946680664458019339": " Cet outil vous permet de modifier vos ReadAlong. Pour commencer, cliquez sur « Visite guidée » et suivez les étapes. ",
     "8366946611697584032": " Visite guidée ",
     "3903003521039334232": " Choisissez un fichier HTML ReadAlong. ",
     "5192585697967841844": " Pour obtenir ce fichier, vous devez avoir créé un ReadAlong en utilisant le {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} Studio{$CLOSE_LINK}, puis sélectionné « Fichier HTML hors réseau » comme format. Ou, vous pouvez utiliser le fichier HTML hors réseau (« Offline-HTML ») inclus dans le format de Fichiers Web zippés. ",
@@ -88,9 +92,9 @@
     "444446810820436138": "Corriger les fautes d'orthographe",
     "2773189193481434399": "Pour corriger une faute d'orthographe, cliquez sur un mot et modifiez-le.",
     "4796729421526127263": "Passer à l'éditeur",
-    "1630288581226787121": "Après avoir téléchargé votre ReadAlong, vous pouvez le rouvrir dans l'Éditeur pour continuer à le modifier.",
+    "1630288581226787121": "Après avoir téléchargé votre ReadAlong, vous pouvez le rouvrir dans l'éditeur pour continuer à le modifier.",
     "65984904390749158": "Terminer",
-    "3742657416068781599": "À l'éditeur",
+    "3769638354035900644": "À l'éditeur",
     "8428348909593474745": "Étape 1",
     "3614618598824071164": " Cet outil vous aidera à créer une page interactive de lecture accompagnée, sur laquelle les mots sont surlignés lorsqu'ils sont lus à voix haute. Jetez un coup d'œil à {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} cet exemple en cri de l'Est{$CLOSE_LINK} pour mieux comprendre le concept. ",
     "5224223351795929492": "Avant de commencer à en faire vous-même faites une visite guidée en cliquant sur le bouton « Visite guidée » puis suivez les étapes ci-dessous.",

packages/studio-web/src/i18n/messages.json

@@ -2,10 +2,14 @@
   "locale": "en",
   "translations": {
     "8299719445551358262": " ReadAlong Studio ",
+    "6389312883797462351": "Studio",
+    "3742657416068781599": "Editor",
+    "8440128775129354214": "Privacy",
     "2148054857885504777": " Congratulations! Here's your ReadAlong! ",
     "880407735794041263": "Download failed.",
     "3790351978262872462": "Sorry!",
     "1743078436798702107": " Welcome to the ReadAlong Studio Editor ",
+    "5946680664458019339": " This is a tool to help you edit your existing 'readalongs'. To get started, click on the tour button below, and follow the steps. ",
     "8366946611697584032": " Take the tour! ",
     "3903003521039334232": " Select an offline HTML ReadAlong file. ",
     "5192585697967841844": " To get this file, you should have created a ReadAlong using the {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} Studio{$CLOSE_LINK}, and then selected \"Offline HTML\" as the output. Or, you can use the Offline-HTML file included in the Web Bundle download format. ",
@@ -90,7 +94,7 @@
     "4796729421526127263": "Go to the Editor",
     "1630288581226787121": "Once you've downloaded your ReadAlong, you can reload it into the Editor to continue editing it.",
     "65984904390749158": "Finish",
-    "3742657416068781599": "Editor",
+    "3769638354035900644": "To the Editor",
     "8428348909593474745": "Step 1",
     "3614618598824071164": " This is a tool to help you make your own interactive 'readalong' that highlights words as they are spoken. Have a look at {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} this example in East Cree{$CLOSE_LINK} to get a better idea of what these are. ",
     "5224223351795929492": " To get started making your own, click on the tour button below, and follow the steps. ",