From eee954f31f5c99baf4811237cd13acca0f12ebbb Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:45:48 -0400
Subject: [PATCH] Add config option dropdown menu

Fix
---
 src/components/editor.vue                |   7 +-
 src/components/helpers/dropdown-menu.vue | 201 +++++++++++++++++++++++
 src/components/helpers/toc-options.vue   | 124 ++++++++++++++
 src/components/slide-toc.vue             | 161 ++++++++----------
 src/lang/lang.csv                        |  15 +-
 5 files changed, 403 insertions(+), 105 deletions(-)
 create mode 100644 src/components/helpers/dropdown-menu.vue
 create mode 100644 src/components/helpers/toc-options.vue

diff --git a/src/components/editor.vue b/src/components/editor.vue
index ae5b5e29..eb535481 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -471,8 +471,7 @@ export default class EditorV extends Vue {
             if (index === -1 || !this.loadSlides) {
                 this.currentSlide = '';
             } else {
-                const selectedLang =
-                    (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages);
+                const selectedLang = (lang ?? this.configLang) as keyof SlideForBothLanguages;
                 const selectedSlide = this.loadSlides[index][selectedLang];
                 this.currentSlide = selectedSlide ?? '';
             }
@@ -489,9 +488,7 @@ export default class EditorV extends Vue {
      */
     updateCustomSlide(slideConfig: Slide, save?: boolean, lang?: string): void {
         this.currentSlide = slideConfig;
-        this.slides[this.slideIndex][
-            (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages)
-        ] = slideConfig;
+        this.slides[this.slideIndex][(lang ?? this.configLang) as keyof SlideForBothLanguages] = slideConfig;
         // save changes emitted from advanced editor
         if (save) {
             this.$emit('save-changes');
diff --git a/src/components/helpers/dropdown-menu.vue b/src/components/helpers/dropdown-menu.vue
new file mode 100644
index 00000000..b41e1dc2
--- /dev/null
+++ b/src/components/helpers/dropdown-menu.vue
@@ -0,0 +1,201 @@
+<template>
+    <div ref="el">
+        <button
+            type="button"
+            class="text-gray-500 hover:text-black dropdown-button"
+            @click="toggleDropdown"
+            :content="tooltip"
+            :aria-label="ariaLabel ? String(ariaLabel) : String(tooltip)"
+            v-tippy="{
+                placement: tooltipPlacement,
+                appendTo: 'parent',
+                trigger: 'manual',
+                delay: '200',
+                touch: ['hold', 500]
+            }"
+            ref="dropdownTrigger"
+        >
+            <slot name="header"></slot>
+        </button>
+        <div
+            v-show="open"
+            @click="
+                popper.update();
+                open = false;
+            "
+            class="rv-dropdown shadow-md border border-gray:200 py-1 bg-white rounded z-10"
+            :class="{ 'text-center': centered }"
+            ref="dropdown"
+        >
+            <slot v-bind:close="() => (open = !open)"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import type { Placement, Modifier, State } from '@popperjs/core';
+import { createPopper, detectOverflow } from '@popperjs/core';
+
+const open = ref<boolean>(false);
+const popper = ref<any>(null);
+const watchers = reactive<Array<Function>>([]);
+
+const el = ref();
+const dropdown = ref<HTMLElement>();
+const dropdownTrigger = ref<Element>();
+
+const props = defineProps({
+    position: {
+        type: String,
+        default: 'top-start'
+    },
+    popperOptions: {
+        type: Object,
+        default() {
+            return {};
+        }
+    },
+    tooltip: { type: String },
+    tooltipPlacement: { type: String, default: 'bottom' },
+    tooltipPlacementAlt: { type: String, default: 'top' },
+    centered: { type: Boolean, default: true },
+    ariaLabel: { type: String }
+});
+
+watchers.push(
+    watch(open, () => {
+        popper.value.update();
+    })
+);
+
+const toggleDropdown = () => {
+    open.value = !open.value;
+    (dropdownTrigger.value as any)._tippy.hide();
+};
+
+const focusDropdownTrigger = () => {
+    (dropdownTrigger.value as any)._tippy.setProps({
+        placement: open.value ? props.tooltipPlacementAlt : props.tooltipPlacement
+    });
+    (dropdownTrigger.value as any)._tippy.show();
+};
+
+const blurDropdownTrigger = () => {
+    (dropdownTrigger.value as any)._tippy.hide();
+};
+
+onMounted(() => {
+    window.addEventListener(
+        'click',
+        (event) => {
+            if (!el.value || !el.value.contains(event.target)) {
+                open.value = false;
+            }
+        },
+        { capture: true }
+    );
+
+    window.addEventListener('blur', () => {
+        open.value = false;
+    });
+
+    window.addEventListener('focusin', (event) => {
+        if (!el.value || !el.value.contains(event.target)) {
+            open.value = false;
+        }
+    });
+
+    dropdownTrigger.value!.addEventListener('focus', focusDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('blur', blurDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('mouseover', focusDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('mouseleave', blurDropdownTrigger);
+
+    // nextTick should prevent any race conditions by letting the child elements render before trying to place them using popper
+    nextTick(() => {
+        const overflowScrollModifier: Modifier<'overflowScroll', {}> = {
+            name: 'overflowScroll',
+            enabled: true,
+            phase: 'main',
+            fn({ state }: { state: State }) {
+                const { bottom } = detectOverflow(state);
+
+                if (bottom > 0) {
+                    state.styles.popper.overflowY = bottom > 100 ? 'auto' : undefined;
+                    state.styles.popper.overflowX = 'hidden';
+                    state.styles.popper.height = `${state.rects.popper.height - bottom - 8}px`;
+                } else {
+                    state.styles.popper.height = 'auto';
+                }
+            }
+        };
+
+        if (dropdownTrigger.value && dropdown.value) {
+            popper.value = createPopper(dropdownTrigger.value as Element, dropdown.value as HTMLElement, {
+                placement: (props.position || 'bottom') as Placement,
+                modifiers: [
+                    overflowScrollModifier,
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 5]
+                        }
+                    }
+                ],
+                ...props.popperOptions
+            });
+        }
+    });
+});
+
+onBeforeUnmount(() => {
+    watchers.forEach((unwatch) => unwatch());
+
+    window.removeEventListener(
+        'click',
+        (event) => {
+            if (!el.value || !el.value.contains(event.target)) {
+                open.value = false;
+            }
+        },
+        { capture: true }
+    );
+
+    window.removeEventListener('blur', () => {
+        open.value = false;
+    });
+
+    window.removeEventListener('focusin', (event) => {
+        if (!el.value || !el.value.contains(event.target)) {
+            open.value = false;
+        }
+    });
+
+    dropdownTrigger.value!.removeEventListener('focus', focusDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('blur', blurDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('mouseover', focusDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('mouseleave', blurDropdownTrigger);
+
+    open.value = false;
+});
+</script>
+
+<style lang="scss">
+.rv-dropdown > * {
+    padding: 0.5rem 1rem;
+    display: block !important;
+    text-decoration: none !important;
+}
+.rv-dropdown > :not(.disabled) {
+    color: #2d3748 !important;
+}
+.rv-dropdown > *:hover:not(.disabled) {
+    background-color: #eee;
+}
+</style>
diff --git a/src/components/helpers/toc-options.vue b/src/components/helpers/toc-options.vue
new file mode 100644
index 00000000..f8edc398
--- /dev/null
+++ b/src/components/helpers/toc-options.vue
@@ -0,0 +1,124 @@
+<template>
+    <div @click.stop @mouseover.stop class="slide-toc-button cursor-auto">
+        <dropdown-menu
+            class="flex-shrink-0"
+            position="bottom-start"
+            :tooltip="$t('editor.slides.toc.dropdownTooltip')"
+            tooltipPlacement="top-start"
+            tooltipPlacementAlt="left"
+            ref="dropdown"
+        >
+            <template #header>
+                <div class="slide-toc-button flex justify-center items-center">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        x="0px"
+                        y="0px"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 122.88 29.956"
+                        enable-background="new 0 0 122.88 29.956"
+                        xml:space="preserve"
+                        class="mb-0 leading-none"
+                    >
+                        <g>
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M122.88,14.978c0,8.271-6.708,14.979-14.979,14.979s-14.976-6.708-14.976-14.979 C92.926,6.708,99.631,0,107.901,0S122.88,6.708,122.88,14.978L122.88,14.978z M29.954,14.978c0,8.271-6.708,14.979-14.979,14.979 S0,23.248,0,14.978C0,6.708,6.705,0,14.976,0S29.954,6.708,29.954,14.978L29.954,14.978z M76.417,14.978 c0,8.271-6.708,14.979-14.979,14.979c-8.27,0-14.978-6.708-14.978-14.979C46.46,6.708,53.168,0,61.438,0 C69.709,0,76.417,6.708,76.417,14.978L76.417,14.978z"
+                            />
+                        </g>
+                    </svg>
+                </div>
+            </template>
+            <a
+                href="javascript:;"
+                class="flex items-center space-x-2 leading-snug text-left w-auto"
+                :class="{
+                    'disabled click-events-none cursor-not-allowed opacity-60': !copyAllowed
+                }"
+                @click="copyAllowed && copySlide()"
+                role="button"
+                aria-label="copy-contents"
+            >
+                <span class="flex items-center gap-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        height="17"
+                        width="17"
+                        viewBox="0 0 24 24"
+                        class="flex-shrink-0 mx-2 my-1"
+                    >
+                        <path
+                            d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
+                        />
+                    </svg>
+                    <span>{{ $t('editor.slides.toc.dropdown.copy') }}</span>
+                </span>
+            </a>
+            <a
+                href="javascript:;"
+                class="flex leading-snug items-center text-left w-auto"
+                :class="{
+                    'disabled click-events-none cursor-not-allowed opacity-60': !deleteAllowed
+                }"
+                @click="deleteAllowed && clearSlide()"
+                role="button"
+                aria-label="DELETE"
+            >
+                <span class="flex items-center gap-1.5">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 110.61 122.88"
+                        width="15"
+                        height="15"
+                        class="mx-2 my-1"
+                    >
+                        <path
+                            d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
+                        />
+                    </svg>
+                    <span>{{ $t('editor.slides.toc.dropdown.clear') }}</span>
+                </span>
+            </a>
+        </dropdown-menu>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Prop, Vue } from 'vue-property-decorator';
+import DropdownMenu from '@/components/helpers/dropdown-menu.vue';
+
+@Options({
+    components: {
+        'dropdown-menu': DropdownMenu
+    }
+})
+export default class TocOptionsV extends Vue {
+    @Prop({ default: true }) copyAllowed!: boolean;
+    @Prop({ default: true }) deleteAllowed!: boolean;
+
+    copySlide() {
+        this.$emit('copy');
+    }
+
+    clearSlide() {
+        this.$emit('clear');
+    }
+}
+</script>
+
+<style lang="css" scoped>
+.slide-toc-button {
+    border-radius: 3px;
+    padding: 2px;
+    line-height: 1;
+}
+.slide-toc-button:hover {
+    background-color: rgb(209, 213, 219);
+}
+span {
+    font-weight: 500;
+}
+</style>
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 06b9ccdb..b816d49b 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -230,77 +230,42 @@
                                                     />
                                                 </svg>
                                             </button>
-                                            <!-- Warning indicator for isolated undefined configs: Defined configs below it WILL be moved up! -->
-                                            <button
-                                                class="slide-toc-button cursor-default"
-                                                v-if="
-                                                    slides.slice(0, index).some((slide) => slide.en) &&
-                                                    slides.slice(index + 1).some((slide) => slide.en)
-                                                "
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'top-start',
-                                                    content: $t('editor.slides.toc.isolatedUndefinedENGconfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    shape-rendering="geometricPrecision"
-                                                    text-rendering="geometricPrecision"
-                                                    image-rendering="optimizeQuality"
-                                                    fill-rule="evenodd"
-                                                    clip-rule="evenodd"
-                                                    viewBox="0 0 512 463.43"
-                                                    height="16"
-                                                    width="16"
-                                                    style="fill: rgb(248, 113, 113)"
-                                                >
-                                                    <path
-                                                        d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"
-                                                    />
-                                                </svg>
-                                            </button>
                                         </div>
                                         <div v-else class="ml-auto flex my-auto">
-                                            <!-- Allow deleting the final slide -->
-                                            <!-- TODO: Do we want a warning for deleting individual configs in a slide? -->
-                                            <button
-                                                class="slide-toc-button"
-                                                v-if="!slides.slice(index + 1).some((slide) => slide.en)"
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'top-start',
-                                                    content: $t('editor.slides.toc.deleteConfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                                @click.stop="$vfm.open(`delete-slide-${index}-en-config`)"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 110.61 122.88"
-                                                    width="14"
-                                                    height="14"
-                                                    class="mx-1 my-0.5"
-                                                >
-                                                    <path
-                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
-                                                    />
-                                                </svg>
-                                            </button>
+                                            <!-- ENG options dropdown menu -->
+                                            <toc-options
+                                                :copy-allowed="!!element.fr"
+                                                @copy="
+                                                    configEmpty(element, 'en')
+                                                        ? copyConfigFromOtherLang(element, 'en')
+                                                        : $vfm.open(`copy-other-slide-${index}-en-config`)
+                                                "
+                                                @clear="$vfm.open(`delete-slide-${index}-en-config`)"
+                                            />
                                         </div>
                                     </button>
                                     <!-- Delete ENG confirmation modal -->
-                                    <confirmation-modal
+                                    <action-modal
                                         :name="`delete-slide-${index}-en-config`"
+                                        :title="
+                                            $t('editor.slides.deleteConfig.title', {
+                                                lang: $t('editor.lang.en'),
+                                                num: index + 1
+                                            })
+                                        "
                                         :message="
                                             $t('editor.slides.deleteConfig.confirm', {
-                                                title: element['en']?.title
+                                                title: element['en']?.title || ''
                                             })
                                         "
-                                        @ok="deleteConfig(element, 'en')"
+                                        @ok="createNewConfig(element, 'en')"
+                                    />
+                                    <!-- ENG copy other slide confirmation modal -->
+                                    <action-modal
+                                        :name="`copy-other-slide-${index}-en-config`"
+                                        :title="$t('editor.slides.toc.copySlide.warning.title')"
+                                        :message="$t('editor.slides.toc.copySlide.warning.message')"
+                                        @ok="copyConfigFromOtherLang(element, 'en')"
                                     />
                                     <hr v-if="isMobileSidebar" />
                                     <!-- FR config for slide -->
@@ -466,42 +431,40 @@
                                             </button>
                                         </div>
                                         <div v-else class="ml-auto flex my-auto">
-                                            <!-- Allow deleting the final slide -->
-                                            <button
-                                                class="slide-toc-button"
-                                                v-if="!slides.slice(index + 1).some((slide) => slide.fr)"
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'bottom-start',
-                                                    content: $t('editor.slides.toc.deleteConfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                                @click.stop="$vfm.open(`delete-slide-${index}-fr-config`)"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 110.61 122.88"
-                                                    width="14"
-                                                    height="14"
-                                                    class="mx-1 my-0.5"
-                                                >
-                                                    <path
-                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
-                                                    />
-                                                </svg>
-                                            </button>
+                                            <!-- FR options dropdown menu -->
+                                            <toc-options
+                                                :copy-allowed="!!element.en"
+                                                @copy="
+                                                    configEmpty(element, 'fr')
+                                                        ? copyConfigFromOtherLang(element, 'fr')
+                                                        : $vfm.open(`copy-other-slide-${index}-fr-config`)
+                                                "
+                                                @clear="$vfm.open(`delete-slide-${index}-fr-config`)"
+                                            />
                                         </div>
                                     </button>
                                     <!-- Delete FR confirmation modal -->
-                                    <confirmation-modal
+                                    <action-modal
                                         :name="`delete-slide-${index}-fr-config`"
+                                        :title="
+                                            $t('editor.slides.deleteConfig.title', {
+                                                lang: $t('editor.lang.fr'),
+                                                num: index + 1
+                                            })
+                                        "
                                         :message="
                                             $t('editor.slides.deleteConfig.confirm', {
-                                                title: element['fr']?.title
+                                                title: element['fr']?.title || ''
                                             })
                                         "
-                                        @ok="deleteConfig(element, 'fr')"
+                                        @ok="createNewConfig(element, 'fr')"
+                                    />
+                                    <!-- FR copy other slide confirmation modal -->
+                                    <action-modal
+                                        :name="`copy-other-slide-${index}-fr-config`"
+                                        :title="$t('editor.slides.toc.copySlide.warning.title')"
+                                        :message="$t('editor.slides.toc.copySlide.warning.message')"
+                                        @ok="copyConfigFromOtherLang(element, 'fr')"
                                     />
                                 </section>
                             </div>
@@ -609,6 +572,7 @@
 
 <script lang="ts">
 import ActionModal from '@/components/helpers/action-modal.vue';
+import TocOptions from '@/components/helpers/toc-options.vue';
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import {
     BasePanel,
@@ -636,6 +600,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
 
 @Options({
     components: {
+        TocOptions,
         ActionModal,
         'slide-editor': SlideEditorV,
         'confirmation-modal': ConfirmationModalV,
@@ -653,8 +618,6 @@ export default class SlideTocV extends Vue {
     @Prop() closeSidebar!: Function;
     @Prop({ default: false }) isMobileSidebar!: boolean;
 
-    selectedForCopying = 0;
-
     defaultBlankSlide: Slide = {
         title: '',
         panel: [
@@ -671,6 +634,15 @@ export default class SlideTocV extends Vue {
         ]
     };
 
+    /**
+     * Determines if a particular config is empty.
+     * @param slide Slide object to check.
+     * @param lang Specific config in slide to check ('en' or 'fr')
+     */
+    configEmpty(slide: SlideForBothLanguages, lang: keyof SlideForBothLanguages): boolean {
+        return JSON.stringify(slide[lang]) === JSON.stringify(this.defaultBlankSlide);
+    }
+
     /**
      * Selects a config (english or french) of a particular slide, and opens its editor.
      * @param index Index of slide to select (usually slide number [in UI] - 1)
@@ -723,10 +695,8 @@ export default class SlideTocV extends Vue {
     }
 
     // Assumes that you've already checked that the other lang DOES have a config.
-    copyConfigFromOtherLang(slides: SlideForBothLanguages, currLang: string): void {
-        slides[currLang as keyof SlideForBothLanguages] = JSON.parse(
-            JSON.stringify(slides[currLang === 'en' ? 'fr' : 'en'])
-        );
+    copyConfigFromOtherLang(slides: SlideForBothLanguages, currLang: keyof SlideForBothLanguages): void {
+        slides[currLang] = JSON.parse(JSON.stringify(slides[currLang === 'en' ? 'fr' : 'en']));
         this.$emit('slides-updated', this.slides);
     }
 
@@ -847,6 +817,7 @@ export default class SlideTocV extends Vue {
 
     moveDown(index: number): void {
         this.slides.splice(index + 1, 0, this.slides.splice(index, 1)[0]);
+        this.scrollToElement(index + 1);
         this.$emit('slides-updated', this.slides);
     }
 
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 3608fac0..579b7421 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -32,7 +32,7 @@ editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
 editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Êtes-vous sûr de vouloir remplacer le produit « {uuid} » ?,0
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
-editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées,1
+editor.editMetadata,Edit Project Metadata,1,Mod. les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
 editor.uuid,UUID,1,UUID,1
@@ -132,8 +132,8 @@ editor.slides.currentLangLabel,({lang} slide),1,(Diapositive en {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,Delete {lang} config?,1,Supprimer la configuration {lang} ?,0
-editor.slides.deleteConfig.confirm,"Are you sure you want to delete this config {title}?",1,Êtes-vous sûr de vouloir supprimer cette configuration {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.centerPanel,Center panel content,1,Contenu de la diapositive centrale,0
@@ -142,10 +142,15 @@ 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.toc.dropdownTooltip,Options,1,Options,0
+editor.slides.toc.dropdown.copy,Copy from other config,1,Copier à partir d'une autre config.,0
+editor.slides.toc.dropdown.clear,Clear content,1,Contenu clair,0
+editor.slides.toc.copySlide.warning.title,Copy will delete existing contents,1,La copie supprimera le contenu existant,0
+editor.slides.toc.copySlide.warning.message,Current config contents will be replaced with the contents of the other config. Continue?,1,Le contenu de la configuration actuelle sera remplacé par le contenu de l'autre configuration. Continuer ?,0
 editor.slides.toc.copySlide,Copy Slide,1,Copier la diapositive,0
 editor.slides.toc.deleteSlide,Delete Slide,1,Supprimer la diapositive,0
-editor.slides.toc.newENGSlideText,New ENG Slide *,1,Nouvelle diapositive ANG *,0
-editor.slides.toc.newFRSlideText,New FR Slide *,1,Novelle diapositive FR *,0
+editor.slides.toc.newENGSlideText,New EN Slide*,1,Nouvelle diapositive AN*,0
+editor.slides.toc.newFRSlideText,New FR Slide*,1,Nouvelle diapositive FR*,0
 editor.slides.toc.noENGslide,(No English Config),1,(Pas de configuration Anglais),0
 editor.slide.toc.noFRSlide,(No French Config),1,(Pas de configuration française),0
 editor.slide.toc.untitledENG,(Untitled English slide),1,(Diapositive anglaise sans titre),0