From aafa0c5432acfd5b12d55be683ebd6729b9c17f4 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 18 Nov 2023 01:30:26 +0800
Subject: [PATCH] perf: use relative position for entry editor to toggle
 fullscreen

---
 .../content_value/ContentEntryEditor.vue      |  9 ++++-
 .../content_value/ContentValueHash.vue        | 36 +++++++++---------
 .../content_value/ContentValueList.vue        | 38 +++++++++----------
 .../content_value/ContentValueSet.vue         | 38 +++++++++----------
 .../content_value/ContentValueZSet.vue        | 36 +++++++++---------
 frontend/src/styles/style.scss                |  1 +
 6 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue
index 31711a5..7f910ab 100644
--- a/frontend/src/components/content_value/ContentEntryEditor.vue
+++ b/frontend/src/components/content_value/ContentEntryEditor.vue
@@ -218,11 +218,18 @@ const onSave = () => {
 <style lang="scss" scoped>
 .entry-editor {
     padding-left: 2px;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
 
     .editor-content {
         &-item {
             &:not(:last-child) {
-                margin-bottom: 18px;
+                margin-bottom: 16px;
             }
 
             &-label {
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 98be334..7994174 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -89,9 +89,6 @@ const inEdit = computed(() => {
     return currentEditRow.no > 0
 })
 const fullEdit = ref(false)
-const inFullEdit = computed(() => {
-    return inEdit.value && fullEdit.value
-})
 
 const tableRef = ref(null)
 const fieldFilterOption = ref(null)
@@ -337,7 +334,6 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
-            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -349,7 +345,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
+        <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input-group>
                     <n-select
@@ -393,7 +389,6 @@ defineExpose({
         <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                v-show="!inFullEdit"
                 ref="tableRef"
                 :bordered="false"
                 :bottom-bordered="false"
@@ -412,19 +407,24 @@ defineExpose({
                 @update:filters="onUpdateFilter" />
 
             <!-- edit pane -->
-            <content-entry-editor
+            <div
                 v-show="inEdit"
-                v-model:fullscreen="fullEdit"
-                :decode="currentEditRow.decode"
-                :field="currentEditRow.key"
-                :field-label="$t('common.field')"
-                :format="currentEditRow.format"
-                :value="currentEditRow.value"
-                :value-label="$t('common.value')"
-                class="flex-item-expand"
-                style="width: 100%"
-                @close="resetEdit"
-                @save="saveEdit" />
+                :style="{ position: fullEdit ? 'static' : 'relative' }"
+                class="entry-editor-container flex-item-expand"
+                style="width: 100%">
+                <content-entry-editor
+                    v-model:fullscreen="fullEdit"
+                    :decode="currentEditRow.decode"
+                    :field="currentEditRow.key"
+                    :field-label="$t('common.field')"
+                    :format="currentEditRow.format"
+                    :value="currentEditRow.value"
+                    :value-label="$t('common.value')"
+                    class="flex-item-expand"
+                    style="width: 100%"
+                    @close="resetEdit"
+                    @save="saveEdit" />
+            </div>
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 1be0501..e3c23b5 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -75,9 +75,6 @@ const inEdit = computed(() => {
     return currentEditRow.no > 0
 })
 const fullEdit = ref(false)
-const inFullEdit = computed(() => {
-    return inEdit.value && fullEdit.value
-})
 
 const displayCode = computed(() => {
     return props.format === formatTypes.JSON
@@ -280,7 +277,6 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
-            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -292,7 +288,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
+        <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input
                     v-model:value="filterValue"
@@ -328,7 +324,6 @@ defineExpose({
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                v-show="!inFullEdit"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
@@ -346,20 +341,25 @@ defineExpose({
                 @update:filters="onUpdateFilter" />
 
             <!-- edit pane -->
-            <content-entry-editor
+            <div
                 v-show="inEdit"
-                v-model:fullscreen="fullEdit"
-                :decode="currentEditRow.decode"
-                :field="currentEditRow.no"
-                :field-label="$t('common.index')"
-                :field-readonly="true"
-                :format="currentEditRow.format"
-                :value="currentEditRow.value"
-                :value-label="$t('common.value')"
-                class="flex-item-expand"
-                style="width: 100%"
-                @close="resetEdit"
-                @save="saveEdit" />
+                :style="{ position: fullEdit ? 'static' : 'relative' }"
+                class="entry-editor-container flex-item-expand"
+                style="width: 100%">
+                <content-entry-editor
+                    v-model:fullscreen="fullEdit"
+                    :decode="currentEditRow.decode"
+                    :field="currentEditRow.no"
+                    :field-label="$t('common.index')"
+                    :field-readonly="true"
+                    :format="currentEditRow.format"
+                    :value="currentEditRow.value"
+                    :value-label="$t('common.value')"
+                    class="flex-item-expand"
+                    style="width: 100%"
+                    @close="resetEdit"
+                    @save="saveEdit" />
+            </div>
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 18fe4a0..629a505 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -74,9 +74,6 @@ const inEdit = computed(() => {
     return currentEditRow.no > 0
 })
 const fullEdit = ref(false)
-const inFullEdit = computed(() => {
-    return inEdit.value && fullEdit.value
-})
 
 const displayCode = computed(() => {
     return props.format === formatTypes.JSON
@@ -277,7 +274,6 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
-            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -289,7 +285,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
+        <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input
                     v-model:value="filterValue"
@@ -325,7 +321,6 @@ defineExpose({
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                v-show="!inFullEdit"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
@@ -343,20 +338,25 @@ defineExpose({
                 @update:filters="onUpdateFilter" />
 
             <!-- edit pane -->
-            <content-entry-editor
+            <div
                 v-show="inEdit"
-                v-model:fullscreen="fullEdit"
-                :decode="currentEditRow.decode"
-                :field="currentEditRow.no"
-                :field-label="$t('common.index')"
-                :field-readonly="true"
-                :format="currentEditRow.format"
-                :value="currentEditRow.value"
-                :value-label="$t('common.value')"
-                class="flex-item-expand"
-                style="width: 100%"
-                @close="resetEdit"
-                @save="saveEdit" />
+                :style="{ position: fullEdit ? 'static' : 'relative' }"
+                class="entry-editor-container flex-item-expand"
+                style="width: 100%">
+                <content-entry-editor
+                    v-model:fullscreen="fullEdit"
+                    :decode="currentEditRow.decode"
+                    :field="currentEditRow.no"
+                    :field-label="$t('common.index')"
+                    :field-readonly="true"
+                    :format="currentEditRow.format"
+                    :value="currentEditRow.value"
+                    :value-label="$t('common.value')"
+                    class="flex-item-expand"
+                    style="width: 100%"
+                    @close="resetEdit"
+                    @save="saveEdit" />
+            </div>
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 838944a..d24c606 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -88,9 +88,6 @@ const inEdit = computed(() => {
     return currentEditRow.no > 0
 })
 const fullEdit = ref(false)
-const inFullEdit = computed(() => {
-    return inEdit.value && fullEdit.value
-})
 
 const scoreFilterOption = ref(null)
 const scoreColumn = computed(() => ({
@@ -350,7 +347,6 @@ defineExpose({
 <template>
     <div class="content-wrapper flex-box-v">
         <content-toolbar
-            v-show="!inFullEdit"
             :db="props.db"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
@@ -362,7 +358,7 @@ defineExpose({
             @delete="emit('delete')"
             @reload="emit('reload')"
             @rename="emit('rename')" />
-        <div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
+        <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
                 <n-input-group>
                     <n-select
@@ -411,7 +407,6 @@ defineExpose({
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table
-                v-show="!inFullEdit"
                 :bordered="false"
                 :bottom-bordered="false"
                 :columns="columns"
@@ -428,19 +423,24 @@ defineExpose({
                 @update:filters="onUpdateFilter" />
 
             <!-- edit pane -->
-            <content-entry-editor
+            <div
                 v-show="inEdit"
-                v-model:fullscreen="fullEdit"
-                :decode="currentEditRow.decode"
-                :field="currentEditRow.score"
-                :field-label="$t('common.score')"
-                :format="currentEditRow.format"
-                :value="currentEditRow.value"
-                :value-label="$t('common.value')"
-                class="flex-item-expand"
-                style="width: 100%"
-                @close="resetEdit"
-                @save="saveEdit" />
+                :style="{ position: fullEdit ? 'static' : 'relative' }"
+                class="entry-editor-container flex-item-expand"
+                style="width: 100%">
+                <content-entry-editor
+                    v-model:fullscreen="fullEdit"
+                    :decode="currentEditRow.decode"
+                    :field="currentEditRow.score"
+                    :field-label="$t('common.score')"
+                    :format="currentEditRow.format"
+                    :value="currentEditRow.value"
+                    :value-label="$t('common.value')"
+                    class="flex-item-expand"
+                    style="width: 100%"
+                    @close="resetEdit"
+                    @save="saveEdit" />
+            </div>
         </div>
         <div class="value-footer flex-box-h">
             <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
index 01f8a34..4bb7dbc 100644
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -86,6 +86,7 @@ body {
   padding-top: 5px;
   //padding: 5px;
   box-sizing: border-box;
+  position: relative;
 
   .tb2 {
     gap: 5px;