Merge pull request #234 from RyanCoulsonCA/fix-202

add French translations
ramp4-pcar4 · Jun 20, 2023 · 5381890 · 5381890
2 parents 3dfb398 + 2030c09
commit 5381890
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 100 deletions.
diff --git a/src/components/editor/dynamic-editor.vue b/src/components/editor/dynamic-editor.vue
@@ -7,14 +7,14 @@
                 class="border hover:bg-gray-100"
                 :class="editingStatus === 'text' ? 'border-black' : 'border-gray-300'"
             >
-                Text Section
+                {{ $t('dynamic.textSection') }}
             </button>
             <button
                 @click="() => changePanel('panels')"
                 class="border hover:bg-gray-100"
                 :class="editingStatus !== 'text' ? 'border-black' : 'border-gray-300'"
             >
-                Panel Collection
+                {{ $t('dynamic.panel.collection') }}
             </button>
         </div>
         <!-- Text Section -->
@@ -30,22 +30,22 @@
         <div v-if="editingStatus === 'panels'">
             <table class="w-2/3 mt-5">
                 <tr class="table-header">
-                    <th>Panel ID</th>
-                    <th>Panel Type</th>
-                    <th>Panel Actions</th>
+                    <th>{{ $t('dynamic.panel.id') }}</th>
+                    <th>{{ $t('dynamic.panel.type') }}</th>
+                    <th>{{ $t('dynamic.panel.actions') }}</th>
                 </tr>
                 <tr class="table-contents" v-for="(item, idx) in panel.children" :key="idx">
                     <td>{{ item.id }}</td>
                     <td>{{ item.panel.type }}</td>
                     <td>
-                        <span @click="() => switchSlide(idx)">Edit</span> |
-                        <span @click="() => removeSlide(idx)">Remove</span>
+                        <span @click="() => switchSlide(idx)">{{ $t('editor.chart.label.edit') }}</span> |
+                        <span @click="() => removeSlide(idx)">{{ $t('editor.remove') }}</span>
                     </td>
                 </tr>
                 <tr class="table-add-row">
                     <th class="flex flex-col items-center">
                         <input type="text" placeholder="Enter Panel ID" v-model="newSlideName" />
-                        <p v-if="idUsed">⚠ Panel ID is already taken.</p>
+                        <p v-if="idUsed">{{ $t('dynamic.panel.idTaken') }}</p>
                     </th>
                     <th>
                         <select v-model="newSlideType">
@@ -65,7 +65,8 @@
                 <br />
                 <hr />
                 <br />
-                <span class="font-bold text-xl">Panel Editor:</span><br />
+                <span class="font-bold text-xl">{{ $t('dynamic.panel.editor') }}</span
+                ><br />
                 <component
                     ref="slide"
                     :is="

diff --git a/src/components/editor/editor.vue b/src/components/editor/editor.vue
@@ -52,7 +52,7 @@
                             />
                         </svg>
                     </span>
-                    <span class="align-center inline-block select-none">Unsaved Changes</span>
+                    <span class="align-center inline-block select-none">{{ $t('editor.unsavedChanges') }}</span>
                 </span>
             </transition>
             <slot name="langModal" v-bind="{ unsavedChanges: unsavedChanges }"></slot>

diff --git a/src/components/editor/helpers/confirmation-modal.vue b/src/components/editor/helpers/confirmation-modal.vue
@@ -2,8 +2,8 @@
     <vue-modal :name="name" :outer-close="false" :hide-close-btn="true" size="md">
         <h2 slot="header" class="text-lg font-bold">{{ message }}</h2>
         <div class="w-full flex justify-end">
-            <button class="confirm-button hover:bg-gray-800" @click.stop="onOk">Confirm</button>
-            <button class="cancel-button hover:bg-gray-100" @click.stop="onCancel">Cancel</button>
+            <button class="confirm-button hover:bg-gray-800" @click.stop="onOk">{{ $t('editor.confirm') }}</button>
+            <button class="cancel-button hover:bg-gray-100" @click.stop="onCancel">{{ $t('editor.cancel') }}</button>
         </div>
     </vue-modal>
 </template>

diff --git a/src/components/editor/helpers/metadata-content.vue b/src/components/editor/helpers/metadata-content.vue
@@ -3,9 +3,9 @@
         <label class="mb-5">{{ $t('editor.title') }}:</label>
         <input type="text" name="title" :value="metadata.title" @change="metadataChanged" class="w-1/3" />
         <br />
-        <label class="mb-5">Intro Title:</label>
+        <label class="mb-5">{{ $t('editor.slides.title') }}:</label>
         <input type="text" name="introTitle" :value="metadata.introTitle" @change="metadataChanged" class="w-1/4" />
-        <label class="mb-5">Intro Subtitle:</label>
+        <label class="mb-5">{{ $t('editor.slides.intro') }}:</label>
         <input
             type="text"
             name="introSubtitle"
@@ -23,7 +23,7 @@
                 class="image-preview"
             />
             <p v-if="metadata.logoPreview == 'error'" class="image-preview">
-                An error occurred when trying to load image.
+                {{ $t('editor.image.loadingError') }}
             </p>
         </div>
         <label class="mb-5">{{ $t('editor.logo') }}:</label>
@@ -32,7 +32,7 @@
             {{ $t('editor.browse') }}
         </button>
         <button v-if="metadata.logoName || metadata.logoPreview" @click.stop="removeLogo" class="border border-black">
-            Remove
+            {{ $t('editor.remove') }}
         </button>
         <!-- hide the actual file input -->
         <input
@@ -59,7 +59,7 @@
         <label class="mb-5"></label>
         <p class="inline-block">
             <i>
-                Context link shows up at the bottom of the page to provide additional resources for interested users
+                {{ $t('editor.contextLink.info') }}
             </i>
         </p>
         <br />
@@ -68,7 +68,7 @@
         <br />
         <label class="mb-5"></label>
         <p class="inline-block">
-            <i> Context label shows up before the context link to explain what the link is for </i>
+            <i> {{ $t('editor.contextLabel.info') }}</i>
         </p>
         <br />
         <label class="mb-5">{{ $t('editor.dateModified') }}:</label>

diff --git a/src/components/editor/image-editor.vue b/src/components/editor/image-editor.vue
@@ -31,7 +31,7 @@
         </div>
 
         <span v-show="!imagePreviewsLoading && imagePreviews.length" class="flex justify-center">
-            <i>Click and drag to reorder images</i>
+            <i> {{ $t('editor.image.reorder') }}</i>
         </span>
 
         <!-- Gallery preview of all images -->
@@ -48,19 +48,19 @@
                 @delete="deleteImage"
             >
                 <div class="flex mt-4 items-center w-full text-left">
-                    <label class="text-label">Alt tag:</label>
+                    <label class="text-label">{{ $t('editor.image.altTag') }}:</label>
                     <input class="w-4/5" type="text" v-model="image.altText" @change="onImagesEdited" />
                 </div>
 
                 <div class="flex mt-4 items-center w-full text-left">
-                    <label class="text-label">Caption:</label>
+                    <label class="text-label">{{ $t('editor.image.label.caption') }}:</label>
                     <input class="w-4/5" type="text" v-model="image.caption" @change="onImagesEdited" />
                 </div>
             </ImagePreview>
         </draggable>
 
         <div v-show="imagePreviews.length > 1" class="flex items-center w-full text-left">
-            <label class="text-label">Slideshow Caption:</label>
+            <label class="text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
             <input class="w-3/5" type="text" v-model="slideshowCaption" @change="onImagesEdited" />
         </div>
     </div>

diff --git a/src/components/editor/map-editor.vue b/src/components/editor/map-editor.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="flex flex-col">
-        <label class="text-left">Map title:</label>
+        <label class="text-left">{{ $t('editor.map.title') }}:</label>
         <input type="text" v-model="panel.title" />
 
         <div v-if="status === 'editing'">
-            <label class="mt-6">Enable Scrollguard:</label>
+            <label class="mt-6">{{ $t('editor.map.scrollguard.enable') }}:</label>
             <input type="checkbox" @change="saveScrollguard" v-model="panel.scrollguard" />
             <span class="ml-6"></span>
             <label class="mt-6">{{ $t('editor.map.timeslider.enable') }}</label>
@@ -22,7 +22,7 @@
             <div class="mb-4" v-if="usingTimeSlider"></div>
 
             <div class="flex justify-between mb-4">
-                <label class="mt-2">Map Editor:</label>
+                <label class="mt-2">{{ $t('editor.map.edit') }}:</label>
                 <button
                     class="border border-black hover:bg-gray-100"
                     @click="
@@ -31,7 +31,7 @@
                         }
                     "
                 >
-                    Cancel Editing
+                    {{ $t('editor.map.edit.cancel') }}
                 </button>
             </div>
             <iframe
@@ -41,7 +41,7 @@
             ></iframe>
         </div>
         <div v-if="status === 'creating'">
-            <label class="text-left mt-2">Map config name*:</label>
+            <label class="text-left mt-2">{{ $t('editor.map.label.name') }}*:</label>
             <div class="flex flex-row items-center"><input type="text" v-model="newFileName" />.json</div>
 
             <ul class="flex flex-wrap list-none justify-center" v-if="newFileName != ''">
@@ -52,7 +52,7 @@
             </ul>
         </div>
         <div v-if="status === 'default'">
-            <label class="text-left mt-2">Map Editor:</label>
+            <label class="text-left mt-2">{{ $t('editor.map.edit') }}:</label>
             <ul class="flex flex-wrap list-none justify-center">
                 <li class="map-item items-center my-8 mx-5 overflow-hidden" @click="openEditor">
                     <div class="edit-map"></div>

diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue
@@ -45,9 +45,7 @@
                                 />
                             </svg>
                         </span>
-                        <span class="align-center inline-block select-none"
-                            >UUID already exists. Saving this will overwrite existing product.</span
-                        >
+                        <span class="align-center inline-block select-none">{{ $t('editor.uuid.exists') }}</span>
                     </span>
                     <button
                         @click="generateRemoteConfig"
@@ -73,10 +71,9 @@
                 <br />
 
                 <div class="mb-4">
-                    <h3>Storylines product details</h3>
+                    <h3>{{ $t('editor.productDetails') }}</h3>
                     <p>
-                        Fill in metadata details about your new Storyline. Use the “Preview” button to see what your
-                        slides will look like.
+                        {{ $t('editor.metadata.instructions') }}
                     </p>
                 </div>
 

diff --git a/src/components/editor/slide-editor.vue b/src/components/editor/slide-editor.vue
@@ -12,18 +12,18 @@
                             :disabled="slideIndex === 0"
                             class="border border-black"
                         >
-                            Previous Slide
+                            {{ $t('editor.slides.previousSlide') }}
                         </button>
                         <button
                             @click.stop="selectSlide(slideIndex + 1)"
                             :disabled="isLast"
                             class="border border-black"
                         >
-                            Next Slide
+                            {{ $t('editor.slides.nextSlide') }}
                         </button>
                     </div>
                     <div class="flex mt-3">
-                        <span class="mx-2 font-bold">Make the right panel the full slide</span>
+                        <span class="mx-2 font-bold">{{ $t('editor.slides.makeFull') }}</span>
                         <input
                             type="checkbox"
                             class="rounded-none cursor-pointer w-4 h-4"
@@ -80,7 +80,7 @@
                             />
                         </svg>
                     </span>
-                    <span class="align-middle inline-block pl-1">Left Panel</span>
+                    <span class="align-middle inline-block pl-1">{{ $t('editor.slides.leftPanel') }}</span>
                 </button>
                 <button
                     @click="
@@ -127,7 +127,7 @@
                         </svg>
                     </span>
 
-                    <span class="align-middle inline-block pl-1">Right Panel</span>
+                    <span class="align-middle inline-block pl-1">{{ $t('editor.slides.rightPanel') }}</span>
                 </button>
             </div>
             <div v-else class="border-b border-black">
@@ -174,15 +174,15 @@
                         </svg>
                     </span>
 
-                    <span class="align-middle inline-block pl-1">Fullscreen Panel</span>
+                    <span class="align-middle inline-block pl-1">{{ $t('editor.slides.fullscreenPanel') }}</span>
                 </button>
             </div>
             <div>
                 <div class="flex mt-4">
-                    <span class="font-bold text-xl">Content:</span>
+                    <span class="font-bold text-xl">{{ $t('editor.slides.content') }}:</span>
                     <span class="ml-auto flex-grow"></span>
                     <div v-if="panelIndex === 1 || rightOnly" class="flex flex-col mr-8">
-                        <label class="text-left text-lg">Content type:</label>
+                        <label class="text-left text-lg">{{ $t('editor.slides.contentType') }}:</label>
                         <select
                             ref="typeSelector"
                             @input="
@@ -216,7 +216,7 @@
             </div>
         </div>
         <div v-else class="flex h-full mt-4 justify-center text-gray-600 text-xl">
-            <span>Please select a slide to edit.</span>
+            <span>{{ $t('editor.slides.select') }}</span>
         </div>
         <confirmation-modal
             :name="`change-slide-${slideIndex}`"

diff --git a/src/components/editor/slide-toc.vue b/src/components/editor/slide-toc.vue
@@ -27,7 +27,7 @@
                         class="w-32 h-12 ml-0"
                         @click="copyAllFromOtherLang(configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides)"
                     >
-                        Copy All
+                        {{ $t('editor.slides.copyAll') }}
                     </button>
                     <span class="text-lg font-bold my-6"> {{ $t('editor.image.label.or') }} </span>
                     <div class="flex">
@@ -38,7 +38,7 @@
                                 :value="index"
                                 :key="slide.title + index"
                             >
-                                Slide {{ index + ': ' + slide.title }}
+                                {{ $t('editor.slides.slide') }} {{ index + ': ' + slide.title }}
                             </option>
                         </select>
 
@@ -49,7 +49,7 @@
                                 )
                             "
                         >
-                            Copy
+                            {{ $t('editor.slides.copy') }}
                         </button>
                     </div>
                 </div>
@@ -66,7 +66,7 @@
                 >
                     <tippy delay="200" placement="right">{{ slide.title }}</tippy>
                     <div class="self-center overflow-ellipsis whitespace-nowrap overflow-hidden flex-grow ml-2">
-                        Slide {{ index + 1 }}:
+                        {{ $t('editor.slides.slide') }} {{ index + 1 }}:
                         <span class="font-bold overflow-hidden">{{ slide.title || 'Add a title' }}</span>
                     </div>
                     <div class="flex">

diff --git a/src/components/editor/text-editor.vue b/src/components/editor/text-editor.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex flex-col mt-4">
-        <label class="text-left">Panel title:</label>
+        <label class="text-left">{{ $t('editor.slides.panel.title') }}:</label>
         <input type="text" v-model="panel.title" />
-        <label class="text-left mt-2">Panel body:</label>
+        <label class="text-left mt-2">{{ $t('editor.slides.panel.body') }}:</label>
         <v-md-editor
             v-model="panel.content"
             height="400px"