From 6c6cc9f31225030ba717bbcef6d02dc2e317e213 Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:32:28 -0500
Subject: [PATCH] Refactor editor layout to use grid

---
 src/components/editor.vue          | 101 ++++++++---------------------
 src/components/metadata-editor.vue |   5 --
 src/components/slide-toc.vue       |  94 ++++++++++++++++++++++-----
 3 files changed, 103 insertions(+), 97 deletions(-)

diff --git a/src/components/editor.vue b/src/components/editor.vue
index 9aea6e08a..3e883825d 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="editor-container">
+    <div class="main-editor-container">
         <!-- Background overlay for when the mobile sidebar drawer is open -->
         <!-- Should prevent stuff in the background from being scrolled or interacted with. Click it to close the sidebar -->
         <div id="overlay" class="overlay" @click="closeSidebar"></div>
@@ -225,42 +225,23 @@
             </div>
         </div>
         <!-- Body content -->
-        <div class="flex">
+        <div class="editor-body flex">
             <!-- Left side -->
 
             <!-- Sidebar, desktop version -->
-            <div id="sidebar-desktop" class="w-80 flex-shrink-0 border-r border-black editor-toc hidden md:block">
-                <div class="flex items-center justify-center border-b p-2">
-                    <!-- Edit metadata button -->
-                    <!-- Opens the edit metadata modal -->
-                    <button class="toc-popup-button border-gray-400" @click.stop="$vfm.open('metadata-edit-modal')">
-                        <span class="align-middle inline-block pr-1"
-                            ><svg
-                                clip-rule="evenodd"
-                                fill-rule="evenodd"
-                                width="16"
-                                height="16"
-                                stroke-linejoin="round"
-                                stroke-miterlimit="2"
-                                viewBox="0 0 24 24"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="m4.481 15.659c-1.334 3.916-1.48 4.232-1.48 4.587 0 .528.46.749.749.749.352 0 .668-.137 4.574-1.492zm1.06-1.061 3.846 3.846 11.321-11.311c.195-.195.293-.45.293-.707 0-.255-.098-.51-.293-.706-.692-.691-1.742-1.74-2.435-2.432-.195-.195-.451-.293-.707-.293-.254 0-.51.098-.706.293z"
-                                    fill-rule="nonzero"
-                                />
-                            </svg>
-                        </span>
-                        <span class="align-middle inline-block">{{ $t('editor.editMetadata') }}</span>
-                    </button>
-                </div>
+            <div
+                id="sidebar-desktop flex flex-col"
+                class="w-80 flex-shrink-0 border-r border-black editor-toc hidden md:block"
+            >
                 <!-- ToC -->
                 <slide-toc
+                    class="flex-1"
                     :slides="slides"
                     :currentSlide="currentSlide"
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @open-metadata-modal="$vfm.open('metadata-edit-modal')"
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -268,53 +249,6 @@
             </div>
             <!-- Sidebar, mobile version -->
             <div id="sidebar-mobile" class="w-0 flex-shrink-0 border-r border-black editor-toc md:hidden">
-                <div class="flex items-center justify-between border-b p-2">
-                    <!-- Edit metadata button -->
-                    <!-- Opens the edit metadata modal -->
-                    <button class="toc-popup-button" @click.stop="$vfm.open('metadata-edit-modal')">
-                        <span class="align-middle inline-block pr-1"
-                            ><svg
-                                clip-rule="evenodd"
-                                fill-rule="evenodd"
-                                width="16"
-                                height="16"
-                                stroke-linejoin="round"
-                                stroke-miterlimit="2"
-                                viewBox="0 0 24 24"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    d="m4.481 15.659c-1.334 3.916-1.48 4.232-1.48 4.587 0 .528.46.749.749.749.352 0 .668-.137 4.574-1.492zm1.06-1.061 3.846 3.846 11.321-11.311c.195-.195.293-.45.293-.707 0-.255-.098-.51-.293-.706-.692-.691-1.742-1.74-2.435-2.432-.195-.195-.451-.293-.707-.293-.254 0-.51.098-.706.293z"
-                                    fill-rule="nonzero"
-                                />
-                            </svg>
-                        </span>
-                        <span class="align-middle inline-block">{{ $t('editor.editMetadata') }}</span>
-                    </button>
-                    <!-- Close ToC sidebar button -->
-                    <button class="editor-button toc-popup-button p-3 bg-transparent" @click="closeSidebar">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                            x="0px"
-                            y="0px"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 122.88 122.88"
-                            style="enable-background: new 0 0 122.88 122.88"
-                            xml:space="preserve"
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
-                        >
-                            <g>
-                                <path
-                                    class="st0"
-                                    d="M1.63,97.99l36.55-36.55L1.63,24.89c-2.17-2.17-2.17-5.73,0-7.9L16.99,1.63c2.17-2.17,5.73-2.17,7.9,0 l36.55,36.55L97.99,1.63c2.17-2.17,5.73-2.17,7.9,0l15.36,15.36c2.17,2.17,2.17,5.73,0,7.9L84.7,61.44l36.55,36.55 c2.17,2.17,2.17,5.73,0,7.9l-15.36,15.36c-2.17,2.17-5.73,2.17-7.9,0L61.44,84.7l-36.55,36.55c-2.17,2.17-5.73,2.17-7.9,0 L1.63,105.89C-0.54,103.72-0.54,100.16,1.63,97.99L1.63,97.99z"
-                                />
-                            </g>
-                        </svg>
-                    </button>
-                </div>
                 <!-- Mobile ToC -->
                 <!-- Bigger buttons, more visual dividers, more colors -->
                 <slide-toc
@@ -323,6 +257,8 @@
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
+                    @open-metadata-modal="$vfm.open('metadata-edit-modal')"
+                    @close-sidebar="closeSidebar"
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -662,8 +598,17 @@ window.addEventListener('resize', () => {
 </script>
 
 <style lang="scss">
-.editor-container {
+.main-editor-container {
     margin: 0 auto;
+
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        'header'
+        'main';
 }
 
 .editor-label {
@@ -732,10 +677,16 @@ select:focus {
 }
 
 .editor-header {
+    grid-area: header;
     top: -1px;
     padding-top: 9px;
 }
 
+.editor-body {
+    grid-area: main;
+    overflow: hidden;
+}
+
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.2s;
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 445b412e1..524db50a8 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -1850,11 +1850,6 @@ export default class MetadataEditorV extends Vue {
             return;
         }
         this.loadConfig(this.configs[this.configLang]);
-
-        if (this.loadEditor) {
-            (this.$refs.mainEditor as EditorV).updateSlides(this.slides);
-            (this.$refs.mainEditor as EditorV).selectSlide(-1);
-        }
     }
 
     checkUuid = throttle(300, (rename?: boolean): void => {
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 7d4ef5f11..4d04d1678 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -1,5 +1,57 @@
 <template>
-    <div>
+    <div class="toc-container">
+        <div class="flex items-center border-b p-2" :class="[isMobileSidebar ? 'justify-between' : 'justify-center']">
+            <!-- Edit metadata button -->
+            <!-- Opens the edit metadata modal -->
+            <button class="toc-popup-button" @click.stop="$emit('open-metadata-modal')">
+                <span class="align-middle inline-block pr-1"
+                    ><svg
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                        width="16"
+                        height="16"
+                        stroke-linejoin="round"
+                        stroke-miterlimit="2"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="m4.481 15.659c-1.334 3.916-1.48 4.232-1.48 4.587 0 .528.46.749.749.749.352 0 .668-.137 4.574-1.492zm1.06-1.061 3.846 3.846 11.321-11.311c.195-.195.293-.45.293-.707 0-.255-.098-.51-.293-.706-.692-.691-1.742-1.74-2.435-2.432-.195-.195-.451-.293-.707-.293-.254 0-.51.098-.706.293z"
+                            fill-rule="nonzero"
+                        />
+                    </svg>
+                </span>
+                <span class="align-middle inline-block">{{ $t('editor.editMetadata') }}</span>
+            </button>
+            <!-- Close ToC sidebar button -->
+            <button
+                v-if="isMobileSidebar"
+                class="editor-button toc-popup-button p-3 bg-transparent"
+                @click="$emit('close-sidebar')"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                    x="0px"
+                    y="0px"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 122.88 122.88"
+                    style="enable-background: new 0 0 122.88 122.88"
+                    xml:space="preserve"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                >
+                    <g>
+                        <path
+                            class="st0"
+                            d="M1.63,97.99l36.55-36.55L1.63,24.89c-2.17-2.17-2.17-5.73,0-7.9L16.99,1.63c2.17-2.17,5.73-2.17,7.9,0 l36.55,36.55L97.99,1.63c2.17-2.17,5.73-2.17,7.9,0l15.36,15.36c2.17,2.17,2.17,5.73,0,7.9L84.7,61.44l36.55,36.55 c2.17,2.17,2.17,5.73,0,7.9l-15.36,15.36c-2.17,2.17-5.73,2.17-7.9,0L61.44,84.7l-36.55,36.55c-2.17,2.17-5.73,2.17-7.9,0 L1.63,105.89C-0.54,103.72-0.54,100.16,1.63,97.99L1.63,97.99z"
+                        />
+                    </g>
+                </svg>
+            </button>
+        </div>
+
         <!-- Sidebar header -->
         <div class="flex toc-header px-3 pt-2 mt-5 pb-2 border-b align-bottom items-end">
             <!-- Header title ("SLIDES" or equivalent) -->
@@ -20,7 +72,7 @@
         </div>
 
         <!-- Slide list -->
-        <ul :class="[isMobileSidebar ? 'toc-list-mobile' : 'toc-list']">
+        <ul class="toc-slide-list">
             <!-- Slide -->
             <!-- Dragging is turned off on mobile version as you can't scroll otherwise (component would think a scroll === a drag) -->
             <draggable
@@ -422,7 +474,7 @@ export default class SlideTocV extends Vue {
         setTimeout(() => {
             document
                 .getElementById((this.isMobileSidebar ? 'mobile' : '') + 'slide' + index)
-                ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }, 10);
     }
 
@@ -574,6 +626,23 @@ window.addEventListener('resize', () => {
 </script>
 
 <style lang="scss" scoped>
+.toc-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.toc-header {
+    grid-area: header;
+}
+
+.toc-slide-list {
+    grid-area: slide-list;
+    flex: 1 1 0%;
+    overflow: auto;
+}
+
 .toc-slide-button {
     border: none !important;
     background: none !important;
@@ -597,21 +666,12 @@ window.addEventListener('resize', () => {
     margin: 10px 0px 0px 0px !important;
 }
 
-/* Hard coded height :(
-   TODO: Change positioning of app components so we don't need to hardcode
-   TODO: Change height here when any new changes cause overshoot
- */
-.toc-list {
-    height: calc(100vh - 177px);
-    height: calc(calc(var(--vh, 1vh) * 100) - 177px);
-    overflow-y: auto;
+.slide-toc-button {
+    border-radius: 3px;
+    padding: 2px;
 }
-
-/* TODO: Change height here when any new changes cause overshoot */
-.toc-list-mobile {
-    height: calc(100vh - 123px);
-    height: calc(calc(var(--vh, 1vh) * 100) - 123px);
-    overflow-y: auto;
+.slide-toc-button:hover {
+    background-color: rgb(209, 213, 219);
 }
 
 .selected-toc-config-item {