Merge pull request #529 from gordlin/next-slide-buttons

Improve next/prev slide buttons, modal designs

src/components/editor.vue

@@ -290,6 +290,9 @@
                     ref="slide"
                     :configFileStructure="configFileStructure"
                     :currentSlide="currentSlide"
+                    :otherLangSlide="
+                        slides[slideIndex]?.[slides.find((slide) => slide.fr === currentSlide) ? 'en' : 'fr']
+                    "
                     :lang="slides.find((slide) => slide.fr === currentSlide) ? 'fr' : 'en'"
                     :slideIndex="slideIndex"
                     :isLast="slideIndex === slides.length - 1"
@@ -340,8 +343,8 @@ import {
     Slide,
     SourceCounts,
     StoryRampConfig,
-    TextPanel,
-    VideoPanel
+    SupportedLanguages,
+    TextPanel
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import axios from 'axios';
@@ -458,7 +461,7 @@ export default class EditorV extends Vue {
     /**
      * Change current slide to selected slide.
      */
-    selectSlide(index: number, lang?: string): void {
+    selectSlide(index: number, lang?: SupportedLanguages): void {
         // save changes to current slide before changing slides
         if (this.$refs.slide !== undefined) {
             (this.$refs.slide as SlideEditorV).saveChanges();
@@ -481,7 +484,10 @@ export default class EditorV extends Vue {
             } else {
                 const selectedLang = newLang as keyof MultiLanguageSlide;
                 const selectedSlide = this.loadSlides[index][selectedLang];
-                this.currentSlide = selectedSlide ?? '';
+
+                // If the requested language config for a slide doesn't exist, open the other language
+                // This edge case should ONLY pop up while using the "Next/Previous Slide" buttons
+                this.currentSlide = selectedSlide ?? this.loadSlides[index][selectedLang === 'en' ? 'fr' : 'en'] ?? '';
             }
             this.slideIndex = index;
             (this.$refs.slide as SlideEditorV).panelIndex = 0;

src/components/helpers/action-modal.vue

@@ -1,20 +1,25 @@
 <template>
-    <vue-final-modal
-        :modalId="name"
-        :clickToClose="false"
-        content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
-        class="flex justify-center items-center"
-    >
-        <div class="mx-5 my-2">
-            <h2 slot="header" class="text-2xl font-bold mb-1">{{ title }}</h2>
-            <p>{{ message }}</p>
-            <div class="w-full flex justify-end mt-3">
-                <button class="editor-button bg-black text-white hover:bg-gray-800" @click="onOk">
-                    {{ $t('editor.slides.continue') }}
-                </button>
-                <button class="editor-button hover:bg-gray-800" @click="onCancel">
-                    {{ $t('editor.cancel') }}
-                </button>
+    <vue-final-modal :modalId="name" :clickToClose="false" content-class="" class="flex justify-center items-center">
+        <div
+            class="action-modal flex flex-col max-h-full overflow-y-auto mx-4 p-4 bg-white border rounded-xl space-y-2"
+        >
+            <div class="mx-5 my-2">
+                <h2 slot="header" class="text-2xl mb-3 text-pretty" style="font-weight: 700; line-height: 1.3">
+                    {{ title }}
+                </h2>
+                <p style="font-weight: 500" class="text-pretty">{{ message }}</p>
+                <div class="w-full flex items-center gap-3 justify-end mt-5">
+                    <button
+                        class="editor-button bg-black hover:bg-gray-800 text-white"
+                        style="margin: 0 !important"
+                        @click="onOk"
+                    >
+                        {{ $t('editor.slides.continue') }}
+                    </button>
+                    <button class="editor-button hover:bg-gray-800" style="margin: 0 !important" @click="onCancel">
+                        {{ $t('editor.cancel') }}
+                    </button>
+                </div>
             </div>
         </div>
     </vue-final-modal>
@@ -48,6 +53,12 @@ export default class MetadataEditorV extends Vue {
 </script>
 
 <style scoped lang="css">
+.action-modal {
+    width: 500px !important;
+    min-width: 1px !important;
+    max-width: 90%;
+    border-radius: 0.75rem /* 12px */;
+}
 h2 {
     line-height: 1.3;
     border-bottom: 0px;

src/components/helpers/multi-option-modal.vue

@@ -1,29 +1,41 @@
 <template>
-    <vue-final-modal
-        :modalId="name"
-        :clickToClose="false"
-        content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
-        class="flex justify-center items-center"
-    >
-        <div class="mx-5 my-2">
-            <h2 v-if="title" slot="header" class="text-2xl font-bold mb-1">{{ title }}</h2>
-            <p v-if="message">{{ message }}</p>
-            <div class="w-full flex justify-end mt-3">
-                <button
-                    v-for="option in options"
-                    class="editor-button bg-black text-white hover:bg-gray-800"
-                    @click="
-                        () => {
-                            option.action();
-                            this.$vfm.close(this.name);
-                        }
-                    "
+    <vue-final-modal :modalId="name" :clickToClose="false" content-class="" class="flex justify-center items-center">
+        <div
+            class="multi-option-modal flex flex-col max-h-full overflow-y-auto mx-4 p-4 bg-white border rounded-xl space-y-2"
+        >
+            <div class="mx-5 my-2">
+                <h2
+                    v-if="title"
+                    slot="header"
+                    class="text-2xl mb-3 text-pretty"
+                    style="font-weight: 700; line-height: 1.3"
                 >
-                    {{ option.label }}
-                </button>
-                <button v-if="cancelAllowed" class="editor-button hover:bg-gray-800" @click="onCancel">
-                    {{ $t('editor.cancel') }}
-                </button>
+                    {{ title }}
+                </h2>
+                <p v-if="message" style="font-weight: 500" class="text-pretty">{{ message }}</p>
+                <div class="w-full flex items-center gap-3 justify-end mt-5">
+                    <button
+                        v-for="option in options"
+                        class="editor-button bg-black text-white hover:bg-gray-800"
+                        style="margin: 0 !important"
+                        @click="
+                            () => {
+                                option.action();
+                                this.$vfm.close(this.name);
+                            }
+                        "
+                    >
+                        {{ option.label }}
+                    </button>
+                    <button
+                        v-if="cancelAllowed"
+                        class="editor-button hover:bg-gray-800"
+                        style="margin: 0 !important"
+                        @click="onCancel"
+                    >
+                        {{ $t('editor.cancel') }}
+                    </button>
+                </div>
             </div>
         </div>
     </vue-final-modal>
@@ -59,6 +71,12 @@ export default class MetadataEditorV extends Vue {
 </script>
 
 <style scoped lang="css">
+.multi-option-modal {
+    width: 500px !important;
+    min-width: 1px !important;
+    max-width: 90%;
+    border-radius: 0.75rem /* 12px */;
+}
 h2 {
     line-height: 1.3;
     border-bottom: 0px;

src/components/metadata-editor.vue

@@ -2499,7 +2499,6 @@ $font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-
 
     .vfm__content {
         max-width: 80%;
-        min-width: 70%;
         max-height: 90%;
         padding: 20px;
     }

src/components/slide-editor.vue

@@ -7,22 +7,63 @@
                         <h2 class="text-2xl font-bold">
                             {{ $t('editor.slides.currentLangLabel', { lang: langTranslate, num: slideIndex + 1 }) }}
                         </h2>
+
                         <div class="flex items-stretch">
                             <button
-                                @click.stop="selectSlide(slideIndex - 1)"
+                                :aria-label="$t('editor.swapConfigs')"
+                                @click.stop="
+                                    selectSlide(slideIndex, (lang === 'en' ? 'fr' : 'en') as SupportedLanguages)
+                                "
+                                :disabled="!otherLangSlide"
+                                class="editor-button flex gap-1 items-center rounded border border-black mr-2"
+                                v-tippy="{
+                                    delay: '200',
+                                    placement: 'bottom',
+                                    content: $t('editor.swapConfigs'),
+                                    animateFill: true,
+                                    touch: ['hold', 500]
+                                }"
+                            >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                    <path
+                                        fill="currentColor"
+                                        d="M5.825 16L7.7 17.875q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L2.7 15.7q-.15-.15-.213-.325T2.426 15t.063-.375t.212-.325l3.6-3.6q.3-.3.7-.287t.7.312q.275.3.288.7t-.288.7L5.825 14H12q.425 0 .713.288T13 15t-.288.713T12 16zm12.35-6H12q-.425 0-.712-.288T11 9t.288-.712T12 8h6.175L16.3 6.125q-.275-.275-.275-.687t.275-.713q.3-.3.713-.3t.712.3L21.3 8.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.6 3.6q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7z"
+                                    />
+                                </svg>
+                            </button>
+                            <button
+                                @click.stop="selectSlide(slideIndex - 1, lang as SupportedLanguages)"
                                 :disabled="slideIndex === 0"
-                                class="editor-button rounded-l rounded-r-none border border-black"
+                                class="editor-button flex gap-1 items-center rounded-l rounded-r-none border border-black"
                                 style="border-right-width: 0"
                             >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                    <path
+                                        fill="currentColor"
+                                        d="m11 8.8l-2.9 2.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 8.8V17q0 .425-.288.713T12 18t-.712-.288T11 17z"
+                                    />
+                                </svg>
                                 {{ $t('editor.slides.previousSlide') }}
                             </button>
                             <span class="border-l border-black" style="margin: 0; padding: 0; line-height: 0"> </span>
                             <button
-                                @click.stop="selectSlide(slideIndex + 1)"
+                                @click.stop="selectSlide(slideIndex + 1, lang as SupportedLanguages)"
                                 :disabled="isLast"
-                                class="editor-button rounded-l-none rounded-r border border-black border-l-0"
+                                class="editor-button flex gap-1 items-center rounded-l-none rounded-r border border-black border-l-0"
                                 style="border-left-width: 0"
                             >
+                                <svg
+                                    class="transform rotate-180"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        fill="currentColor"
+                                        d="m11 8.8l-2.9 2.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 8.8V17q0 .425-.288.713T12 18t-.712-.288T11 17z"
+                                    />
+                                </svg>
                                 {{ $t('editor.slides.nextSlide') }}
                             </button>
                         </div>
@@ -429,6 +470,7 @@ import {
     SlideshowPanel,
     SourceCounts,
     StoryRampConfig,
+    SupportedLanguages,
     TextPanel,
     VideoPanel
 } from '@/definitions';
@@ -470,6 +512,7 @@ export default class SlideEditorV extends Vue {
     @Prop() slideIndex!: number;
     @Prop() isLast!: boolean;
     @Prop() sourceCounts!: SourceCounts;
+    @Prop() otherLangSlide!: Slide;
 
     panelIndex = 0;
     advancedEditorView = false;
@@ -670,8 +713,8 @@ export default class SlideEditorV extends Vue {
         }
     }
 
-    selectSlide(index: number): void {
-        this.$emit('slide-change', index);
+    selectSlide(index: number, lang?: SupportedLanguages): void {
+        this.$emit('slide-change', index, lang);
     }
 
     cancelTypeChange(): void {

src/components/slide-toc.vue

@@ -178,7 +178,7 @@
                                         :name="`delete-slide-${index}-en-config`"
                                         :title="
                                             $t('editor.slides.deleteConfig.title', {
-                                                lang: $t('editor.lang.en'),
+                                                lang: $t('editor.lang.en').substring(0, 2).toUpperCase(),
                                                 num: index + 1
                                             })
                                         "
@@ -230,7 +230,7 @@
                                         :name="`delete-slide-${index}-fr-config`"
                                         :title="
                                             $t('editor.slides.deleteConfig.title', {
-                                                lang: $t('editor.lang.fr'),
+                                                lang: $t('editor.lang.fr').substring(0, 2).toUpperCase(),
                                                 num: index + 1
                                             })
                                         "

src/definitions.ts

@@ -1,5 +1,7 @@
 import JSZip from 'jszip';
 
+export type SupportedLanguages = 'en' | 'fr';
+
 export interface StoryRampConfig {
     title: string;
     lang: string;

src/lang/lang.csv

@@ -28,6 +28,7 @@ fullscreen.deactivate,Exit Fullscreen,1,Quitter le mode plein écran,1
 editor.lang.en,English,1,Anglais,1
 editor.lang.fr,French,1,Français,1
 editor.ok,Ok,1,D'accord,1
+editor.swapConfigs,Switch to other language configuration,1,Passer à une autre configuration de langue,0
 editor.feedback,Send Us Feedback,1,Envoyez-nous vos commentaires,0
 editor.feedback.subject,Storylines Editor Feedback,1,Commentaires de l'éditeur de scénarios,0
 editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
@@ -214,12 +215,12 @@ editor.slides.currentLangLabel,Slide {num} ({lang}),1,Diapositive {num} ({lang})
 editor.slides.copyFromLang,"Copy slides from the other language",1,"Copier les diapositives de l’autre langue",1
 editor.slides.deleteSlide.title,Delete slide {num}?,1,Supprimer la diapositive {num} ?,0
 editor.slides.deleteSlide.confirm,"Both English and French configurations will be deleted{title}.",1,"Les configurations anglaise et française seront supprimées{title}.",0
-editor.slides.deleteConfig.title,Slide {num} {lang} config will be cleared,1,La configuration de la diapositive {num} {lang} sera effacée,0
-editor.slides.deleteConfig.confirm,"This will replace the config '{title}' with a blank config.",1,Cela remplacera la configuration '{title}' par une configuration vide.,0
+editor.slides.deleteConfig.title,Slide {num} {lang} configuration will be cleared,1,La configuration de la diapositive {num} {lang} sera effacée,0
+editor.slides.deleteConfig.confirm,"This will replace the config '{title}' with a blank config. All existing contents will be lost.",1,Cela remplacera la configuration '{title}' par une configuration vide. Tout le contenu existant sera perdu.,0
 editor.slides.changeSlide.confirm,"Are you sure you want to change the slide {title}? All unsaved progress will be lost.",1,"Voulez-vous vraiment modifier la diapositive {titre}? Toute modification non enregistrée sera perdue.",1
 editor.slides.changePanelType.title,Panel type will be changed to {type},1,Le type de panneau sera modifié en {type},0
 editor.slides.changePanelType.message,Existing contents will be deleted.,1,Le contenu existant sera supprimé.,0
-editor.slides.changeToOnePanel.title,Current panel will become a fullscreen panel,1,Le panneau actuel deviendra un panneau plein écran,0
+editor.slides.changeToOnePanel.title,Current panel will become fullscreen,1,Le panneau actuel deviendra plein écran,0
 editor.slides.changeToOnePanel.message,The other panel(s) will be deleted.,1,Les autres panneaux seront supprimés.,0
 editor.slides.addBlankPanel.title,Which side should the new panel be added to?,1,De quel côté le nouveau panneau doit-il être ajouté?,0
 editor.slides.addBlankPanel.message,The existing panel will be on the opposite side.,1,Le panneau existant actuel sera du côté opposé.,0