Merge pull request #87 from JSON-ms/dev

Adjust editor height when hovering in desktop mode

Author: dannycoulombe

package.json

@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",

src/components/SitePreview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useGlobalStore} from '@/stores/global';
-import {defineExpose, nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
+import {computed, defineExpose, nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
 import type {IStructure, IStructureData} from '@/interfaces';
 import {useLayout} from '@/composables/layout';
 import StructureEditor from '@/components/StructureEditor.vue';
@@ -24,11 +24,21 @@ const loaded = ref(false);
 const loading = ref(false);
 const killIframe = ref(false);
 const siteNotCompatibleSnack = ref(false);
+const hoveringEditor = ref(false);
 const { layoutSize, windowHeight, layoutPx } = useLayout();
 const { reloading, siteCompatible, sendMessageToIframe, getPathsFromSectionKey, listenIframeMessage, sendUserDataToIframe } = useIframe();
 const { userDataLoading } = useUserData();
 const iframeErrorMsg = ref('This site is not JSONms compatible');
 
+const editorHeight = computed((): number => {
+  const padding = (globalStore.userSettings.data.layoutSitePreviewPadding ? 96 : 63);
+  const result = windowHeight.value - padding;
+  if (hoveringEditor.value) {
+    return result + 32;
+  }
+  return result - layoutSize.value.preview.height;
+})
+
 const refresh = () => {
   if (siteCompatible.value) {
     reloading.value = true;
@@ -212,7 +222,15 @@ defineExpose({
     <template #append>
       <v-expand-transition>
         <div v-show="globalStore.admin.previewMode === 'desktop' && globalStore.admin.structure">
-          <v-card :height="windowHeight - layoutSize.preview.height - (globalStore.userSettings.data.layoutSitePreviewPadding ? 96 : 63)" tile flat theme="dark">
+          <v-card
+            :height="editorHeight"
+            tile
+            flat
+            class="editor-card"
+            theme="dark"
+            @mouseover="hoveringEditor = true"
+            @mouseleave="hoveringEditor = false"
+          >
             <StructureEditor
               ref="structureEditor"
               v-model="structure"
@@ -238,4 +256,7 @@ defineExpose({
     transition: all 200ms ease;
   }
 }
+.editor-card {
+  transition: height 300ms ease;
+}
 </style>

src/components/StructureEditor.vue

@@ -161,9 +161,9 @@ const scrollToSection = (section: string) => {
     const annotations = [];
     const line = findNeedleInString(structure.value.content, '  ' + section + ':');
     if (line) {
-      instance.renderer.scrollToLine(line, false, true);
+      instance.renderer.scrollToLine(line - 1, false, true);
       annotations.push({
-        row: line,
+        row: line - 1,
         column: 0,
         text: "Current section",
         type: "info"