Merge pull request #357 from RyanCoulsonCA/fix-348

fix UI issues with slide copy modal; add success message
ramp4-pcar4 · Jul 11, 2024 · e479b7a · e479b7a
2 parents 1b7260e + 040e356
commit e479b7a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
@@ -35,36 +35,37 @@
             >
                 <h2 slot="header" class="text-xl font-bold">{{ $t('editor.slides.copyFromLang') }}</h2>
                 <div class="flex flex-col">
-                    <button
-                        class="editor-toc-button editor-button w-32 h-12 ml-0"
-                        @click="copyAllFromOtherLang(configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides)"
-                    >
+                    <button class="editor-toc-button editor-button h-12 ml-0" @click="$vfm.open(`confirm-copy-all`)">
                         {{ $t('editor.slides.copyAll') }}
                     </button>
-                    <span class="text-lg font-bold my-6"> {{ $t('editor.or') }} </span>
-                    <div class="flex">
-                        <select v-model="selectedForCopying" class="overflow-ellipsis copy-select">
-                            <option
-                                v-for="(slide, index) in configFileStructure.configs[lang === 'en' ? 'fr' : 'en']
-                                    .slides"
-                                :value="index"
-                                :key="slide.title + index"
-                            >
-                                {{ $t('editor.slides.slide') }} {{ index + ': ' + slide.title }}
-                            </option>
-                        </select>
-
-                        <button
-                            class="editor-toc-button"
-                            @click="
-                                copyFromOtherLang(
-                                    configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides[selectedForCopying]
-                                )
-                            "
+                    <span class="text-lg font-bold my-3 text-center"> {{ $t('editor.label.or') }} </span>
+
+                    <select v-model="selectedForCopying" class="overflow-ellipsis copy-select border-2 p-2">
+                        <option
+                            v-for="(slide, index) in configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides"
+                            :value="index"
+                            :key="slide.title + index"
                         >
-                            {{ $t('editor.slides.copy') }}
-                        </button>
-                    </div>
+                            {{ $t('editor.slides.slide') + ` ${index}: ` }}
+                            {{ slide.title ? slide.title : $t('editor.slide.untitled') }}
+                        </option>
+                    </select>
+
+                    <button
+                        class="editor-toc-button"
+                        @click="
+                            copyFromOtherLang(
+                                configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides[selectedForCopying]
+                            )
+                        "
+                    >
+                        {{ $t('editor.slides.copy') }}
+                    </button>
+                    <confirmation-modal
+                        :name="`confirm-copy-all`"
+                        :message="$t('editor.slides.copyAll.confirm')"
+                        @ok="copyAllFromOtherLang(configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides)"
+                    />
                 </div>
             </vue-final-modal>
         </div>
@@ -156,6 +157,8 @@ import {
     TextPanel,
     VideoPanel
 } from '@/definitions';
+
+import Message from 'vue-m-message';
 import { VueFinalModal } from 'vue-final-modal';
 import cloneDeep from 'clone-deep';
 import draggable from 'vuedraggable';
@@ -209,19 +212,22 @@ export default class SlideTocV extends Vue {
         if (slide) {
             this.slides.splice(this.slides.length, 0, cloneDeep(slide));
             this.$emit('slides-updated', this.slides);
+            Message.success(this.$t('editor.slide.copy.success'));
         }
     }
 
     copyAllFromOtherLang(slides: Slide[] | undefined): void {
         if (slides) {
             this.slides.splice(this.slides.length, 0, ...slides.map((slide) => cloneDeep(slide)));
             this.$emit('slides-updated', this.slides);
+            Message.success(this.$t('editor.slide.copy.success'));
         }
     }
 
     copySlide(index: number): void {
         this.slides.splice(index + 1, 0, cloneDeep(this.slides[index]));
         this.$emit('slides-updated', this.slides);
+        Message.success(this.$t('editor.slide.copy.success'));
     }
 
     removeSlide(index: number): void {
@@ -336,7 +342,12 @@ export default class SlideTocV extends Vue {
 .copy-select {
     width: 450px;
 }
+
 .focused {
     outline: 2px solid black;
 }
+
+.editor-toc-button {
+    margin: 10px 0px 0px 0px !important;
+}
 </style>
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
@@ -127,6 +127,7 @@ editor.slides.makeFull,Make the right panel the full slide,1,Mettre la diapositi
 editor.slides.centerPanel,Center panel content,1,Contenu de la diapositive centrale,0
 editor.slides.centerSlide,Center slide content,1,Contenu du panneau central,0
 editor.slides.copyAll,Copy all,1,Copier tout,1
+editor.slides.copyAll.confirm,Are you sure you want to copy all slides?,1,Êtes-vous sûr de vouloir copier toutes les diapositives ?,0
 editor.slides.copy,Copy,1,Copier,1
 editor.slides.slide,Slide,1,Diapositive,1
 editor.slides.previousSlide,Previous slide,1,Diapositive précédente,1
@@ -146,6 +147,8 @@ editor.slides.panel.body,Panel body,1,Corps du panneau,1
 editor.slides.panel.title,Panel title,1,Titre du panneau,1
 editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1
 editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.slide.untitled,Untitled slide,1,Diapositive sans titre,0
+editor.slide.copy.success,Slide copied successfully!,1,Diapositive copiée avec succès !,0
 editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0
 editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0
 editor.tocOrientation.vertical,Vertical,1,Vertical,0