From 9725716269c9f65d07f57d93678eca503ca25a0f Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Mon, 9 Dec 2024 14:51:12 -0500
Subject: [PATCH] Implement minor slide editor redesign, improve 'full slide'
 functionality

---
 src/components/dynamic-editor.vue             |   2 +-
 src/components/editor.vue                     |  38 +--
 src/components/helpers/action-modal.vue       |   7 +
 src/components/helpers/image-preview.vue      |  13 +-
 src/components/helpers/metadata-content.vue   |  54 ++--
 src/components/helpers/multi-option-modal.vue |  97 +++++++
 src/components/home.vue                       |   8 +-
 src/components/image-editor.vue               | 137 ++++-----
 src/components/map-editor.vue                 |  23 +-
 src/components/metadata-editor.vue            |   6 +-
 src/components/slide-editor.vue               | 268 +++++++++++-------
 src/components/slideshow-editor.vue           |  13 +-
 src/components/text-editor.vue                |   4 +-
 src/lang/lang.csv                             |  18 +-
 14 files changed, 431 insertions(+), 257 deletions(-)
 create mode 100644 src/components/helpers/multi-option-modal.vue

diff --git a/src/components/dynamic-editor.vue b/src/components/dynamic-editor.vue
index 5629a992..9516d4cf 100644
--- a/src/components/dynamic-editor.vue
+++ b/src/components/dynamic-editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="block">
+    <div class="block mt-2">
         <!-- left and right panel buttons for dynamic panels -->
         <div class="flex">
             <button
diff --git a/src/components/editor.vue b/src/components/editor.vue
index f7b0bb4a..d2ce3a1b 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -154,7 +154,7 @@
                     <!-- Save changes button -->
                     <button
                         @click="saveChanges"
-                        class="editor-button m-0 bg-black text-white hover:bg-gray-900"
+                        class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
                         :disabled="saving"
                     >
                         <span class="inline-block">{{
@@ -287,10 +287,10 @@
                 ></slide-toc>
             </div>
             <!-- Right side -->
-            <div class="editor-area flex flex-col space-between w-full overflow-y-auto">
+            <div class="w-full">
                 <!-- Slide editor -->
                 <slide-editor
-                    class="flex-1 w-full overflow-y-auto"
+                    class="editor-area w-full"
                     ref="slide"
                     :configFileStructure="configFileStructure"
                     :currentSlide="currentSlide"
@@ -612,10 +612,8 @@ window.addEventListener('resize', () => {
 }
 
 .editor-label {
-    width: 10vw;
-    text-align: right;
-    margin-right: 15px;
-    display: inline-block;
+    font-weight: 600;
+    text-align: left;
 }
 
 .editor-h3 {
@@ -623,11 +621,13 @@ window.addEventListener('resize', () => {
 }
 
 .editor-input {
-    padding: 10px 10px;
-    margin-top: 5px;
-    border: 1px solid black;
-    display: inline;
+    padding: 7px 10px;
+    margin-top: 3px;
+    border: 1px solid #a1a1a1;
+    //display: inline;
     border-radius: 5px;
+    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .editor-container .input-error {
@@ -636,14 +636,15 @@ window.addEventListener('resize', () => {
 }
 
 .editor-button {
+    border-radius: 3px;
     padding: 5px 12px;
-    margin: 0px 10px;
+    //margin: 0px 10px;
     font-weight: 600;
     transition-duration: 0.2s;
 }
 
 .editor-forms-button {
-    padding: 11px 15px;
+    padding: 8px 15px;
     border-radius: 5px;
 }
 
@@ -652,8 +653,12 @@ window.addEventListener('resize', () => {
     color: black;
 }
 
-.editor-button:focus {
+button:focus,
+.editor-button:focus,
+input:focus,
+select:focus {
     outline: 2px solid royalblue;
+    z-index: 2;
     outline-offset: 2px;
     transition-duration: 0.075s;
 }
@@ -710,8 +715,8 @@ window.addEventListener('resize', () => {
 @media only screen and (min-width: 768px) {
     .editor-area {
         overflow-y: auto;
-        height: calc(100vh - 63px);
-        height: calc(calc(var(--vh, 1vh) * 100) - 63px);
+        //height: calc(100vh - 80px);
+        height: calc(calc(var(--vh, 1vh) * 100) - 100px);
     }
 }
 
@@ -730,6 +735,7 @@ window.addEventListener('resize', () => {
     font-weight: 600;
     border: 1px solid black;
     transition: background-color 0.2s;
+    border-radius: 3px;
 }
 
 /* Main dropdown icon - required for positioning */
diff --git a/src/components/helpers/action-modal.vue b/src/components/helpers/action-modal.vue
index 42be8f55..12096734 100644
--- a/src/components/helpers/action-modal.vue
+++ b/src/components/helpers/action-modal.vue
@@ -1,6 +1,7 @@
 <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"
     >
@@ -65,6 +66,12 @@ button {
     color: black;
 }
 
+.vfm__content button:focus {
+    outline: 2px solid royalblue;
+    outline-offset: 2px;
+    transition-duration: 0.075s;
+}
+
 .vfm__content button:disabled {
     border: 1px solid gray;
     color: gray;
diff --git a/src/components/helpers/image-preview.vue b/src/components/helpers/image-preview.vue
index 5af6c819..bd25eaf6 100644
--- a/src/components/helpers/image-preview.vue
+++ b/src/components/helpers/image-preview.vue
@@ -39,7 +39,6 @@ export default class ImagePreviewV extends Vue {
 <style lang="scss" scoped>
 .image-item {
     width: 30%;
-
     cursor: move; // fallback
     cursor: grab;
     cursor: -moz-grab;
@@ -61,4 +60,16 @@ export default class ImagePreviewV extends Vue {
         padding: 0 !important;
     }
 }
+
+@media only screen and (max-width: 1500px) {
+    .image-item {
+        width: 41%;
+    }
+}
+
+@media only screen and (max-width: 900px) {
+    .image-item {
+        width: 90%;
+    }
+}
 </style>
diff --git a/src/components/helpers/metadata-content.vue b/src/components/helpers/metadata-content.vue
index 7381ca9c..b73aeaff 100644
--- a/src/components/helpers/metadata-content.vue
+++ b/src/components/helpers/metadata-content.vue
@@ -12,7 +12,7 @@
                     id="metaTitle"
                     :value="metadata.title"
                     @change="metadataChanged"
-                    class="metadata-input"
+                    class="metadata-input editor-input"
                 />
                 <p class="metadata-subcaption">
                     {{ $t('editor.metadataForm.caption.title') }}
@@ -79,7 +79,7 @@
                         :value="metadata.introTitle"
                         @change="metadataChanged"
                         id="introTitle"
-                        class="metadata-input"
+                        class="metadata-input editor-input"
                     />
                     <p class="metadata-subcaption">
                         {{ $t('editor.metadataForm.caption.introTitle') }}
@@ -97,7 +97,7 @@
                         id="introSubtitle"
                         :value="metadata.introSubtitle"
                         @change="metadataChanged"
-                        class="metadata-input"
+                        class="metadata-input editor-input"
                     />
                     <p class="metadata-subcaption">
                         {{ $t('editor.metadataForm.caption.introSubtitle') }}
@@ -117,12 +117,12 @@
                         id="metaLogo"
                         @change="$emit('logo-source-changed', $event)"
                         :value="metadata.logoName"
-                        class="metadata-input w-full lg:w-1/2"
+                        class="metadata-input editor-input w-full lg:w-1/2"
                     />
                     <!-- Upload button -->
                     <button
                         @click.stop="openFileSelector"
-                        class="metadata-button mb-0.5 bg-black border border-black text-white hover:bg-gray-800"
+                        class="editor-button py-1.5 bg-black border border-black text-white hover:bg-gray-800"
                     >
                         {{ $t('editor.browse') }}
                     </button>
@@ -130,7 +130,7 @@
                     <button
                         v-if="metadata.logoName || metadata.logoPreview"
                         @click.stop="removeLogo"
-                        class="metadata-button border mb-0.5 border-black"
+                        class="editor-button py-1.5 border border-black"
                     >
                         {{ $t('editor.remove') }}
                     </button>
@@ -169,7 +169,7 @@
                         id="logoAltText"
                         :value="metadata.logoAltText"
                         @change="metadataChanged"
-                        class="metadata-input"
+                        class="metadata-input editor-input"
                     />
                     <p class="metadata-subcaption">
                         {{ $t('editor.metadataForm.caption.logoAltText') }}
@@ -193,7 +193,7 @@
                     id="contextLink"
                     :value="metadata.contextLink"
                     @change="metadataChanged"
-                    class="metadata-input"
+                    class="metadata-input editor-input"
                 />
                 <p class="metadata-subcaption">
                     {{ $t('editor.metadataForm.caption.contextLink') }}
@@ -211,7 +211,7 @@
                     id="contextLabel"
                     :value="metadata.contextLabel"
                     @change="metadataChanged"
-                    class="metadata-input"
+                    class="metadata-input editor-input"
                 />
                 <p class="metadata-subcaption">
                     {{ $t('editor.metadataForm.caption.contextLabel') }}
@@ -224,7 +224,7 @@
             <label class="metadata-label" for="dateModified">{{ $t('editor.dateModified') }}</label>
             <div v-show="editing">
                 <input
-                    class="metadata-input w-full md:w-1/3"
+                    class="metadata-input editor-input w-full md:w-1/3"
                     type="date"
                     name="dateModified"
                     id="dateModified"
@@ -279,8 +279,8 @@ h2 {
 }
 
 .metadata-input {
-    padding: 8px 10px;
-    border: 1px solid lightgray;
+    //padding: 8px 10px;
+    border: 1px solid lightgray !important;
     // outline: 1px solid lightgray;
     display: block;
     border-radius: 5px;
@@ -288,6 +288,8 @@ h2 {
     margin-bottom: 0.25rem;
     max-width: 100%;
     width: 1200px;
+    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
 .metadata-subcaption {
@@ -298,36 +300,14 @@ h2 {
 .metadata-select {
     padding: 8px 10px;
     border: 1px solid lightgray;
+    background-color: white;
     display: block;
     border-radius: 5px;
     margin-top: 0.15rem;
     margin-bottom: 0.25rem;
     max-width: 100%;
     width: 300px;
-}
-
-.metadata-button {
-    padding: 8px 15px;
-    margin: 0;
-    border-radius: 5px;
-    font-weight: 600;
-    transition-duration: 0.2s;
-}
-
-.metadata-button:hover:enabled {
-    background-color: #dbdbdb;
-    color: black;
-}
-
-.metadata-button:focus {
-    outline: 2px solid royalblue;
-    outline-offset: 2px;
-    transition-duration: 0.075s;
-}
-
-.metadata-button:disabled {
-    border: 1px solid gray;
-    color: gray;
-    cursor: not-allowed;
+    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 </style>
diff --git a/src/components/helpers/multi-option-modal.vue b/src/components/helpers/multi-option-modal.vue
new file mode 100644
index 00000000..0deab97a
--- /dev/null
+++ b/src/components/helpers/multi-option-modal.vue
@@ -0,0 +1,97 @@
+<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);
+                        }
+                    "
+                >
+                    {{ option.label }}
+                </button>
+                <button v-if="cancelAllowed" class="editor-button hover:bg-gray-800" @click="onCancel">
+                    {{ $t('editor.cancel') }}
+                </button>
+                <!--                <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>-->
+            </div>
+        </div>
+    </vue-final-modal>
+</template>
+
+<script lang="ts">
+import { Options, Prop, Vue } from 'vue-property-decorator';
+import { VueFinalModal } from 'vue-final-modal';
+// import { Options } from 'vue-property-decorator';
+
+interface modalOption {
+    label: string;
+    action: () => void;
+}
+
+@Options({
+    components: {
+        'vue-final-modal': VueFinalModal
+    }
+})
+export default class MetadataEditorV extends Vue {
+    @Prop() name!: string;
+    @Prop() title!: string;
+    @Prop() message!: string | undefined;
+    @Prop() options!: modalOption[];
+    @Prop({ default: false }) cancelAllowed!: boolean;
+
+    onCancel(): void {
+        this.$emit('Cancel');
+        this.$vfm.close(this.name);
+    }
+}
+</script>
+
+<style scoped lang="css">
+h2 {
+    line-height: 1.3;
+    border-bottom: 0px;
+}
+
+button {
+    border-radius: 3px;
+    padding: 5px 12px;
+    margin: 0px 10px;
+    font-weight: 600;
+    transition-duration: 0.2s;
+}
+
+.vfm__content button:hover:enabled {
+    background-color: #dbdbdb;
+    color: black;
+}
+
+.vfm__content button:focus {
+    outline: 2px solid royalblue;
+    outline-offset: 2px;
+    transition-duration: 0.075s;
+}
+
+.vfm__content button:disabled {
+    border: 1px solid gray;
+    color: gray;
+    cursor: not-allowed;
+}
+</style>
diff --git a/src/components/home.vue b/src/components/home.vue
index 4087849e..a5551352 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -18,7 +18,7 @@
             <div class="flex justify-center">
                 <div class="home-btn-container border border-gray-400 border-solid mr-5 flex-1 home-buttons">
                     <router-link :to="{ name: 'metadataNew' }" class="flex justify-center h-full" target>
-                        <button class="flex items-center text-xl font-bold px-2" tabindex="-1">
+                        <button class="dashboard-option-button flex items-center text-xl font-bold px-2" tabindex="-1">
                             <svg
                                 height="50"
                                 width="50"
@@ -37,7 +37,7 @@
                 </div>
                 <div class="home-btn-container border border-gray-400 border-solid flex-1 home-buttons">
                     <router-link :to="{ name: 'metadataExisting' }" class="flex justify-center h-full" target>
-                        <button class="flex items-center text-xl font-bold" tabindex="-1">
+                        <button class="dashboard-option-button flex items-center text-xl font-bold" tabindex="-1">
                             <span class="pr-3">
                                 <svg
                                     width="55"
@@ -227,6 +227,10 @@ export default class HomeV extends Vue {
 </script>
 
 <style lang="scss">
+.dashboard-option-button {
+    outline: none !important;
+}
+
 .home-btn-container {
     height: 12vh;
     width: 45vh;
diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
index 294f2a0a..8ec7bfac 100644
--- a/src/components/image-editor.vue
+++ b/src/components/image-editor.vue
@@ -43,87 +43,92 @@
         <draggable
             v-model="imagePreviews"
             v-show="!imagePreviewsLoading && imagePreviews.length"
-            class="flex flex-wrap list-none border my-4"
+            class="flex flex-wrap list-none border my-4 rounded-md"
             @update="onImagesEdited"
             item-key="id"
         >
             <template #item="{ element, index }">
-                <ImagePreview :key="`${element.id}-${index}`" :imageFile="element" @delete="deleteImage">
-                    <div class="flex mt-4 items-center w-full text-left">
-                        <label class="editor-label text-label" :for="'altTag' + index"
-                            >{{ $t('editor.image.altTag') }}:</label
-                        >
-                        <input
-                            :id="'altTag' + index"
-                            class="editor-input w-4/5"
-                            type="text"
-                            v-model="element.altText"
-                            @change="onImagesEdited"
-                        />
-                    </div>
-
-                    <div class="flex mt-4 items-center w-full text-left">
-                        <label class="editor-label text-label" :for="'imgCaption' + index"
-                            >{{ $t('editor.image.label.caption') }}:</label
-                        >
-                        <input
-                            :id="'imgCaption' + index"
-                            class="editor-input w-4/5"
-                            type="text"
-                            v-model="element.caption"
-                            @change="onImagesEdited"
-                        />
-                    </div>
-
-                    <div class="lg:flex gap-2">
-                        <div class="mt-4 w-full">
-                            <label class="text-left" :for="'imgHeight' + index"
-                                >{{ $t('editor.image.label.height') }}:</label
-                            >
+                <ImagePreview
+                    :key="`${element.id}-${index}`"
+                    :imageFile="element"
+                    @delete="deleteImage"
+                    class="border border-gray-200 rounded-md p-3"
+                >
+                    <div class="px-2 pb-2">
+                        <div class="flex flex-col mt-4 w-full text-left self-center">
+                            <label class="editor-label" :for="'altTag' + index">{{ $t('editor.image.altTag') }}</label>
                             <input
-                                :id="'imgHeight' + index"
-                                class="editor-input w-full"
+                                :id="'altTag' + index"
+                                class="editor-input"
                                 type="text"
-                                v-model="element.height"
+                                v-model="element.altText"
                                 @change="onImagesEdited"
                             />
                         </div>
 
-                        <div class="mt-4 w-full">
-                            <div class="flex flex-row gap-1 justify-start items-center">
-                                <label class="text-left" :for="'imgWidth' + index"
-                                    >{{ $t('editor.image.label.width') }}:</label
-                                >
-                                <span
-                                    :content="$t('editor.image.label.widthWarning')"
-                                    v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
-                                    tabindex="0"
-                                >
-                                    <svg
-                                        class="fill-current"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 416.979 416.979"
-                                        xml:space="preserve"
-                                    >
-                                        <g>
-                                            <path
-                                                d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85   c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786   c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576   c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765   c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"
-                                            />
-                                        </g>
-                                    </svg>
-                                </span>
-                            </div>
+                        <div class="flex flex-col mt-4 w-full text-left self-center">
+                            <label class="editor-label" :for="'imgCaption' + index">{{
+                                $t('editor.image.label.caption')
+                            }}</label>
                             <input
-                                :id="'imgWidth' + index"
-                                class="editor-input w-full"
+                                :id="'imgCaption' + index"
+                                class="editor-input"
                                 type="text"
-                                v-model="element.width"
+                                v-model="element.caption"
                                 @change="onImagesEdited"
                             />
                         </div>
+
+                        <div class="lg:flex gap-2 mt-4">
+                            <div class="flex flex-col text-left self-center">
+                                <label class="editor-label" :for="'imgHeight' + index">{{
+                                    $t('editor.image.label.height')
+                                }}</label>
+                                <input
+                                    :id="'imgHeight' + index"
+                                    class="editor-input w-full"
+                                    type="text"
+                                    v-model="element.height"
+                                    @change="onImagesEdited"
+                                />
+                            </div>
+
+                            <div class="flex flex-col mt-4 lg:mt-0 text-left self-center">
+                                <div class="flex flex-row gap-1.5 justify-start items-center">
+                                    <label class="editor-label" :for="'imgWidth' + index">{{
+                                        $t('editor.image.label.width')
+                                    }}</label>
+                                    <span
+                                        :content="$t('editor.image.label.widthWarning')"
+                                        v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
+                                        tabindex="0"
+                                    >
+                                        <svg
+                                            class="fill-current"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                                            width="16"
+                                            height="16"
+                                            viewBox="0 0 416.979 416.979"
+                                            xml:space="preserve"
+                                        >
+                                            <g>
+                                                <path
+                                                    d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85   c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786   c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576   c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765   c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"
+                                                />
+                                            </g>
+                                        </svg>
+                                    </span>
+                                </div>
+                                <input
+                                    :id="'imgWidth' + index"
+                                    class="editor-input w-full"
+                                    type="text"
+                                    v-model="element.width"
+                                    @change="onImagesEdited"
+                                />
+                            </div>
+                        </div>
                     </div>
                 </ImagePreview>
             </template>
diff --git a/src/components/map-editor.vue b/src/components/map-editor.vue
index 8b73826c..d8bf9eeb 100644
--- a/src/components/map-editor.vue
+++ b/src/components/map-editor.vue
@@ -1,17 +1,20 @@
 <template>
-    <div class="flex flex-col">
-        <label class="editor-label text-left" for="mapTitle">{{ $t('editor.map.title') }}:</label>
+    <div class="flex flex-col mt-4">
+        <label class="editor-label text-left" for="mapTitle">{{ $t('editor.map.title') }}</label>
         <input class="editor-input" type="text" id="mapTitle" v-model="panel.title" />
 
         <div>
-            <label class="editor-label mt-6" for="timeSliderToggle">{{ $t('editor.map.timeslider.enable') }}</label>
-            <input
-                class="editor-input"
-                type="checkbox"
-                id="timeSliderToggle"
-                @change="saveTimeSlider"
-                v-model="usingTimeSlider"
-            />
+            <div class="flex items-center gap-2 mt-2">
+                <input
+                    class="rounded-none cursor-pointer w-4 h-4"
+                    type="checkbox"
+                    id="timeSliderToggle"
+                    @change="saveTimeSlider"
+                    v-model="usingTimeSlider"
+                />
+                <label class="editor-label" for="timeSliderToggle">{{ $t('editor.map.timeslider.enable') }}</label>
+            </div>
+
             <span class="mx-4"></span>
             <button
                 v-if="usingTimeSlider"
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index a77822f5..c3d1998c 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -100,7 +100,7 @@
                                 />
                                 <button
                                     @click="renameProduct"
-                                    class="editor-button editor-forms-button bg-black text-white mr-0"
+                                    class="editor-button editor-forms-button bg-black text-white ml-3 mr-0"
                                     :class="{ 'input-error': error }"
                                     :disabled="changeUuid.length === 0 || checkingUuid || warning === 'rename'"
                                 >
@@ -185,7 +185,7 @@
                                                 generateRemoteConfig().then(fetchHistory);
                                             }
                                         "
-                                        class="editor-button editor-forms-button bg-black text-white mr-0"
+                                        class="editor-button editor-forms-button bg-black text-white ml-3 mr-0"
                                         :class="{ 'input-error': error }"
                                         :disabled="loadStatus === 'loading'"
                                         v-if="editExisting"
@@ -441,7 +441,7 @@
                                         @logo-source-changed="onLogoSourceInput"
                                     ></metadata-content>
                                     <!-- Save/discard changes buttons (existing only) -->
-                                    <div v-if="editingMetadata && editExisting" class="flex gap-1 mt-2">
+                                    <div v-if="editingMetadata && editExisting" class="flex gap-3 mt-2">
                                         <!-- Save changes -->
                                         <!-- Saves to remote copy on server -->
                                         <!-- NOTE: Changes are saved to local copy automatically as you fill the form. To delete these changes, press the discard button -->
diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 2356e222..053016dd 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -1,89 +1,113 @@
 <template>
-    <div class="overflow-y-auto top-20 h-auto self-start flex-grow p-5">
+    <div class="p-5">
         <div v-if="!!currentSlide">
             <div class="flex">
                 <div class="flex flex-col w-full">
-                    <h2 class="font-bold mb-3">{{ $t('editor.slides.currentLangLabel', { lang: langTranslate }) }}</h2>
-                    <label class="editor-label" for="slideTitle">{{ $t('editor.slides.slideTitle') }}:</label>
+                    <div class="flex justify-between flex-wrap gap-3 gap-y-1 items-center">
+                        <h2 class="text-2xl font-bold">
+                            {{ $t('editor.slides.currentLangLabel', { lang: langTranslate, num: slideIndex + 1 }) }}
+                        </h2>
+                        <div class="space-x-2">
+                            <button
+                                @click.stop="selectSlide(slideIndex - 1)"
+                                :disabled="slideIndex === 0"
+                                class="editor-button border border-black"
+                            >
+                                {{ $t('editor.slides.previousSlide') }}
+                            </button>
+                            <button
+                                @click.stop="selectSlide(slideIndex + 1)"
+                                :disabled="isLast"
+                                class="editor-button border border-black"
+                            >
+                                {{ $t('editor.slides.nextSlide') }}
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Slide title -->
+                    <label style="margin-left: 0" class="editor-label mt-4" for="slideTitle">{{
+                        $t('editor.slides.slideTitle')
+                    }}</label>
                     <div class="flex">
                         <input
                             type="text"
                             id="slideTitle"
                             v-model="currentSlide.title"
                             :placeholder="$t('editor.slides.addSlideTitle')"
-                            class="editor-input w-2/3"
+                            class="editor-input w-full lg:w-2/3"
                         />
                         <span class="ml-auto"></span>
-                        <button
-                            @click.stop="selectSlide(slideIndex - 1)"
-                            :disabled="slideIndex === 0"
-                            class="editor-button border border-black"
-                        >
-                            {{ $t('editor.slides.previousSlide') }}
-                        </button>
-                        <button
-                            @click.stop="selectSlide(slideIndex + 1)"
-                            :disabled="isLast"
-                            class="editor-button border border-black"
-                        >
-                            {{ $t('editor.slides.nextSlide') }}
-                        </button>
                     </div>
-                    <div class="flex mt-3">
-                        <label class="ml-0" for="fullSlide">
-                            <span class="mr-2 font-bold">{{ $t('editor.slides.makeFull') }}</span>
-                        </label>
-                        <input
-                            type="checkbox"
-                            id="fullSlide"
-                            class="editor-input rounded-none cursor-pointer w-4 h-4"
-                            v-model="rightOnly"
-                            :disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
-                            @change.stop="
-                                if (currentSlide.panel.length > 1 && panelModified(currentSlide.panel[0])) {
-                                    $vfm.open(`right-only-${slideIndex}`);
-                                } else {
-                                    toggleRightOnly();
-                                }
-                            "
-                        />
-                        <label class="ml-0" for="centerSlide">
-                            <span class="mr-2 font-bold">{{ $t('editor.slides.centerSlide') }}</span>
-                        </label>
-                        <input
-                            type="checkbox"
-                            id="centerSlide"
-                            class="editor-input rounded-none cursor-pointer w-4 h-4"
-                            v-model="centerSlide"
-                            :disabled="centerPanel"
-                            @change.stop="toggleCenterSlide()"
-                        />
-                        <label class="ml-0" for="centerPanel">
-                            <span class="mr-2 font-bold">{{ $t('editor.slides.centerPanel') }}</span>
-                        </label>
-                        <input
-                            type="checkbox"
-                            id="centerPanel"
-                            class="editor-input rounded-none cursor-pointer w-4 h-4"
-                            v-model="centerPanel"
-                            :disabled="centerSlide"
-                            @change.stop="toggleCenterPanel()"
-                        />
-                        <label class="ml-0" for="inToc">
-                            <span class="mx-2 font-bold"> {{ $t('editor.slides.includeInToc') }}</span>
-                        </label>
-                        <input
-                            type="checkbox"
-                            id="inToc"
-                            class="editor-input rounded-none cursor-pointer w-4 h-4"
-                            v-model="includeInToc"
-                            @change.stop="toggleIncludeInToc()"
-                        />
+                    <!-- Slide options -->
+                    <div class="flex flex-col lg:flex-row mt-3 gap-y-3 gap-x-7 flex-wrap">
+                        <!-- Make the current panel the full slide -->
+                        <div class="flex flex-row items-center">
+                            <input
+                                type="checkbox"
+                                id="fullSlide"
+                                class="rounded-none cursor-pointer w-4 h-4"
+                                v-model="onePanelOnly"
+                                :disabled="determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
+                                @change.stop="
+                                    if (currentSlide.panel.length > 1 && panelModified(currentSlide.panel[0])) {
+                                        $vfm.open(`one-panel-only-${slideIndex}`);
+                                    } else {
+                                        $vfm.open(`one-to-two-panels-${slideIndex}`);
+                                    }
+                                "
+                            />
+                            <label class="ml-0" for="fullSlide">
+                                <span class="font-bold ml-0">{{ $t('editor.slides.makeFull') }}</span>
+                            </label>
+                        </div>
+                        <!-- Center slide content -->
+                        <div class="flex flex-row items-center">
+                            <input
+                                type="checkbox"
+                                id="centerSlide"
+                                class="rounded-none cursor-pointer w-4 h-4"
+                                v-model="centerSlide"
+                                :disabled="centerPanel"
+                                @change.stop="toggleCenterSlide()"
+                            />
+                            <label class="ml-0" for="centerSlide">
+                                <span class="font-bold">{{ $t('editor.slides.centerSlide') }}</span>
+                            </label>
+                        </div>
+                        <!-- Center panel content -->
+                        <div class="flex flex-row items-center">
+                            <input
+                                type="checkbox"
+                                id="centerPanel"
+                                class="rounded-none cursor-pointer w-4 h-4"
+                                v-model="centerPanel"
+                                :disabled="centerSlide"
+                                @change.stop="toggleCenterPanel()"
+                            />
+                            <label class="ml-0" for="centerPanel">
+                                <span class="font-bold">{{ $t('editor.slides.centerPanel') }}</span>
+                            </label>
+                        </div>
+                        <!-- Include slide in ToC -->
+                        <div class="flex flex-row items-center">
+                            <input
+                                type="checkbox"
+                                id="inToc"
+                                class="rounded-none cursor-pointer w-4 h-4"
+                                v-model="includeInToc"
+                                @change.stop="toggleIncludeInToc()"
+                            />
+                            <label class="ml-0" for="inToc">
+                                <span class="font-bold"> {{ $t('editor.slides.includeInToc') }}</span>
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>
             <br />
-            <div class="flex border-b border-black" v-if="currentSlide.panel.length === 2">
+            <!-- Panel select -->
+            <div class="flex gap-3 border-b border-black pl-2" v-if="currentSlide.panel.length === 2">
+                <!-- Left panel -->
                 <button
                     @click="
                         () => {
@@ -92,7 +116,7 @@
                             saveChanges();
                         }
                     "
-                    class="editor-button border-t border-l border-r"
+                    class="editor-button panel-select-button"
                     :class="panelIndex == 0 && !advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block">
@@ -131,6 +155,7 @@
                     </span>
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.leftPanel') }}</span>
                 </button>
+                <!-- Right panel -->
                 <button
                     @click="
                         () => {
@@ -139,7 +164,7 @@
                             saveChanges();
                         }
                     "
-                    class="editor-button border-t border-l border-r"
+                    class="editor-button panel-select-button"
                     :class="panelIndex == 1 && !advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block">
@@ -179,6 +204,7 @@
 
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.rightPanel') }}</span>
                 </button>
+                <!-- Advanced editor -->
                 <button
                     @click="
                         () => {
@@ -187,13 +213,14 @@
                             saveChanges();
                         }
                     "
-                    class="editor-button border-t border-l border-r"
+                    class="editor-button panel-select-button"
                     :class="advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.advanced') }}</span>
                 </button>
             </div>
-            <div v-else class="border-b border-black">
+            <div v-else class="border-b border-black space-x-3 pl-2">
+                <!-- Fullscreen (Loner panel) -->
                 <button
                     @click="
                         () => {
@@ -201,7 +228,7 @@
                             saveChanges();
                         }
                     "
-                    class="editor-button border-t border-l border-r"
+                    class="editor-button panel-select-button"
                     :class="!advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block">
@@ -241,6 +268,7 @@
 
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.fullscreenPanel') }}</span>
                 </button>
+                <!-- Advanced editor -->
                 <button
                     @click="
                         () => {
@@ -248,22 +276,25 @@
                             saveChanges();
                         }
                     "
-                    class="editor-button border-t border-l border-r"
+                    class="editor-button panel-select-button"
                     :class="advancedEditorView ? 'border-black' : 'border-white'"
                 >
                     <span class="align-middle inline-block pl-1">{{ $t('editor.slides.advanced') }}</span>
                 </button>
             </div>
             <div>
-                <div class="flex mt-4">
-                    <span class="font-bold text-xl">{{ $t('editor.slides.content') }}:</span>
-                    <span class="ml-auto flex-grow"></span>
-                    <div v-if="!advancedEditorView" class="flex flex-col mr-8">
-                        <label class="editor-label text-left text-lg" for="contentTypeSelect"
-                            >{{ $t('editor.slides.contentType') }}:</label
+                <div class="flex items-center justify-between mt-4 flex-wrap">
+                    <span class="font-bold text-2xl">{{ $t('editor.slides.content') }}</span>
+                    <div v-if="!advancedEditorView" class="flex flex-col mr-3">
+                        <label
+                            style="margin-left: 0"
+                            class="editor-label text-left text-md font-semibold"
+                            for="contentTypeSelect"
+                            >{{ $t('editor.slides.contentType') }}</label
                         >
                         <select
                             id="contentTypeSelect"
+                            class="rounded shadow w-48"
                             ref="typeSelector"
                             @input="
                                 newType = ($event.target as HTMLInputElement).value;
@@ -322,16 +353,13 @@
                 ></component>
             </div>
         </div>
-        <div v-else class="flex h-full mt-4 justify-center text-gray-600 text-xl">
+        <div v-else class="flex h-fit mt-4 justify-center text-gray-600 text-xl">
             <span>{{ $t('editor.slides.select') }}</span>
         </div>
-        <confirmation-modal
+        <action-modal
             :name="`change-slide-${slideIndex}`"
-            :message="
-                $t('editor.slides.changeSlide.confirm', {
-                    title: currentSlide.title
-                })
-            "
+            :title="$t('editor.slides.changePanelType.title', { type: newType })"
+            :message="$t('editor.slides.changePanelType.message')"
             @ok="
                 changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType);
                 toggleCenterPanel();
@@ -339,20 +367,30 @@
             "
             @Cancel="cancelTypeChange"
         />
-        <confirmation-modal
-            :name="`right-only-${slideIndex}`"
-            :message="
-                $t('editor.slides.changeSlide.confirm', {
-                    title: currentSlide.title
-                })
-            "
-            @ok="toggleRightOnly()"
-            @Cancel="rightOnly = !rightOnly"
+        <action-modal
+            :name="`one-panel-only-${slideIndex}`"
+            :title="$t('editor.slides.changeToOnePanel.title')"
+            :message="$t('editor.slides.changeToOnePanel.message')"
+            @ok="toggleOnePanelOnly()"
+            @Cancel="onePanelOnly = !onePanelOnly"
+        />
+        <multi-option-modal
+            :name="`one-to-two-panels-${slideIndex}`"
+            :title="$t('editor.slides.addBlankPanel.title')"
+            :message="$t('editor.slides.addBlankPanel.message')"
+            :options="[
+                { label: $t('editor.slides.addBlankPanel.left'), action: () => toggleOnePanelOnly('left') },
+                { label: $t('editor.slides.addBlankPanel.right'), action: () => toggleOnePanelOnly('right') }
+            ]"
+            @cancel="onePanelOnly = !onePanelOnly"
+            :cancelAllowed="true"
         />
     </div>
 </template>
 
 <script lang="ts">
+import ActionModal from '@/components/helpers/action-modal.vue';
+import MultiOptionModal from '@/components/helpers/multi-option-modal.vue';
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
 import {
     BasePanel,
@@ -387,6 +425,8 @@ import { toRaw } from 'vue';
 
 @Options({
     components: {
+        MultiOptionModal,
+        ActionModal,
         'chart-editor': ChartEditorV,
         'custom-editor': CustomEditorV,
         'image-editor': ImageEditorV,
@@ -412,7 +452,7 @@ export default class SlideEditorV extends Vue {
     panelIndex = 0;
     advancedEditorView = false;
     newType = '';
-    rightOnly = false;
+    onePanelOnly = false;
     centerSlide = false;
     centerPanel = false;
     includeInToc = true;
@@ -438,11 +478,13 @@ export default class SlideEditorV extends Vue {
     @Watch('currentSlide', { deep: true })
     onSlideChange(): void {
         this.langTranslate = this.$t(`editor.lang.${this.lang}`);
-        this.currentSlide ? (this.rightOnly = this.currentSlide.panel.length === 1) : false;
+        this.currentSlide ? (this.onePanelOnly = this.currentSlide.panel.length === 1) : false;
         this.centerPanel = this.currentSlide.centerPanel ?? false;
         this.centerSlide = this.currentSlide.centerSlide ?? false;
         this.includeInToc = this.currentSlide.includeInToc ?? true;
-        this.rightOnly = this.currentSlide.rightOnly ?? false;
+        this.onePanelOnly =
+            this.currentSlide.rightOnly ??
+            this.determineEditorType(this.currentSlide.panel[this.panelIndex]) === 'dynamic';
     }
 
     /**
@@ -634,14 +676,15 @@ export default class SlideEditorV extends Vue {
         return PanelType.Slideshow;
     }
 
-    toggleRightOnly(): void {
-        this.currentSlide.rightOnly = this.rightOnly;
+    toggleOnePanelOnly(addToWhichSide?: 'left' | 'right'): void {
+        this.currentSlide.rightOnly = this.onePanelOnly;
         this.saveChanges();
-        if (this.rightOnly) {
+        if (this.onePanelOnly) {
+            this.currentSlide['panel'] = [this.currentSlide.panel[this.panelIndex]];
             this.panelIndex = 0;
-            this.currentSlide['panel'] = [this.currentSlide.panel[1]];
         } else {
             this.currentSlide['panel'] = [
+                ...(addToWhichSide === 'right' ? [Object.assign({}, this.currentSlide.panel[0])] : []),
                 Object.assign(
                     {},
                     {
@@ -650,8 +693,9 @@ export default class SlideEditorV extends Vue {
                         content: ''
                     }
                 ),
-                Object.assign({}, this.currentSlide.panel[0])
+                ...(addToWhichSide === 'left' ? [Object.assign({}, this.currentSlide.panel[0])] : [])
             ];
+            this.panelIndex = addToWhichSide === 'left' ? 0 : 1;
         }
     }
 
@@ -666,7 +710,7 @@ export default class SlideEditorV extends Vue {
                     ''
                 );
             }
-        } else if (this.rightOnly) {
+        } else if (this.onePanelOnly) {
             if (this.centerSlide) {
                 this.currentSlide.panel[0].customStyles = 'text-align: center;';
             } else {
@@ -731,6 +775,16 @@ export default class SlideEditorV extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.panel-select-button {
+    border-top-width: 1px;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-left-radius: 0.25rem; /* 4px */
+    border-top-right-radius: 0.25rem; /* 4px */
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
 label {
     text-align: left !important;
     margin-left: 0.5rem;
@@ -742,7 +796,7 @@ input[type='checkbox']:checked {
 }
 
 select {
-    border: 1px black solid;
+    border: 1px solid #a1a1a1;
     background: white;
     padding: 0.25rem 0.5rem;
 }
diff --git a/src/components/slideshow-editor.vue b/src/components/slideshow-editor.vue
index 4f70ab32..8ba6bdc1 100644
--- a/src/components/slideshow-editor.vue
+++ b/src/components/slideshow-editor.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="block">
+    <div class="block mt-3">
         <!-- Menu with option to add a new chart -->
         <div class="flex items-center">
-            <span class="font-bold px-4">{{
+            <span class="font-bold pr-4">{{
                 $t('editor.slideshow.label.info', {
                     num: panel.items.length
                 })
@@ -40,12 +40,11 @@
         </div>
         <hr class="border-solid border-t-2 border-gray-300 my-2" />
         <!-- Metadata Editor -->
-        <div class="flex items-center w-full text-left">
-            <label class="editor-label text-label" for="slideshowCaption"
-                >{{ $t('editor.image.slideshowCaption') }}:</label
-            >
-            <input id="slideshowCaption" class="editor-input w-1/3" type="text" v-model="panel.caption" /><br />
+        <div class="mt-5 mb-8">
+            <label class="editor-label" for="slideshowCaption">{{ $t('editor.image.slideshowCaption') }}</label>
+            <input id="slideshowCaption" class="editor-input block w-1/3" type="text" v-model="panel.caption" />
         </div>
+
         <table class="w-2/3 mt-5">
             <thead>
                 <tr class="table-header">
diff --git a/src/components/text-editor.vue b/src/components/text-editor.vue
index 5f03aaa4..baef198c 100644
--- a/src/components/text-editor.vue
+++ b/src/components/text-editor.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex flex-col mt-4">
-        <label class="editor-label text-left" for="panelTitle">{{ $t('editor.slides.panel.title') }}:</label>
+        <label class="editor-label" for="panelTitle">{{ $t('editor.slides.panel.title') }}</label>
         <input class="editor-input" type="text" id="panelTitle" v-model="panel.title" />
-        <div class="editor-label text-left mt-2">{{ $t('editor.slides.panel.body') }}:</div>
+        <div class="editor-label text-left mt-4 mb-1">{{ $t('editor.slides.panel.body') }}</div>
         <v-md-editor
             v-model="panel.content"
             height="400px"
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 401020ed..c97c59e7 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -144,7 +144,7 @@ editor.image.label.drag,Drag your images here,1,Faites glisser vos images ici,1
 editor.image.label.caption,Caption,1,Légende,1
 editor.image.reorder,Click and drag to reorder images,1,Cliquez sur les images et faites-les glisser pour changer l’ordre.,1
 editor.image.altTag,Alt tag,1,Texte de remplacement,1
-editor.image.slideshowCaption,Slideshow Caption,1,Légende du diaporama,1
+editor.image.slideshowCaption,Slideshow caption,1,Légende du diaporama,1
 editor.image.loadingError,An error occurred when trying to load image,1,Une erreur est survenue lors du chargement de l’image.,1
 editor.video.title,Video Title,1,Titre de la vidéo,1
 editor.video.label.drag,Drag your video file here,1,Glissez votre fichier vidéo ici,1
@@ -172,7 +172,7 @@ editor.map.label.name,Map config name,1,Nom de la configuration de la carte,1
 editor.map.label.create,Create New Configuration File,1,Créer un nouveau fichier de configuration,1
 editor.map.label.edit,Edit Map Configuration,1,Modifier la configuration de la carte,1
 editor.map.scrollguard.enable,Enable scrollguard,1,Activer le contrôle du défilement,1
-editor.map.timeslider.enable,Enable Time Slider:,1,Activer le curseur temporel:,1
+editor.map.timeslider.enable,Enable time slider,1,Activer le curseur temporel,1
 editor.map.timeslider.edit,Edit Time Slider Config,1,Modifier la configuration du curseur temporel,1
 editor.map.timeslider.range,Range:,1,Tranche:,1
 editor.map.timeslider.start,Start:,1,Début:,1
@@ -192,14 +192,22 @@ editor.slideshow.label.slideNumber,Slide Number,1,Numéro de diapositive,0
 editor.slides.continue,Continue,1,Continuer,0
 editor.slides.title,Intro title,1,Titre de l’introduction,1
 editor.slides.addSlide,"New blank slide",1,Nouvelle diapositive,0
-editor.slides.currentLangLabel,({lang} slide),1,(Diapositive en {lang}),0
+editor.slides.currentLangLabel,Slide {num} ({lang}),1,Diapositive {num} ({lang}),0
 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.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.makeFull,Make the right panel the full slide,1,Mettre la diapositive complète dans le panneau de droite,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.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 current existing panel will be on the opposite side.,1,Le panneau existant actuel sera du côté opposé.,0
+editor.slides.addBlankPanel.left,Left,1,Gauche,0
+editor.slides.addBlankPanel.right,Right,1,Droit,0
+editor.slides.makeFull,Make this panel the full slide,1,Faites de ce panneau la diapositive complète,0
 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
@@ -234,7 +242,7 @@ editor.slides.nextSlide,Next slide,1,Diapositive suivante,1
 editor.slides.leftPanel,Left panel,1,Panneau de gauche,1
 editor.slides.rightPanel,Right panel,1,Panneau de droite,1
 editor.slides.fullscreenPanel,Fullscreen panel,1,Panneau plein écran,1
-editor.slides.slideTitle,Slide Title,1,Titre de la diapositive,0
+editor.slides.slideTitle,Slide title,1,Titre de la diapositive,0
 editor.slides.addSlideTitle,Add a title,1,Ajoutez un titre,0
 editor.slides.advanced,Advanced,1,Avancé,0
 editor.slides.advanced.good,Configuration adheres to Storylines schema.,1,La configuration adhère au schéma Storylines.,0