perf: use relative position for entry editor to toggle fullscreen

This commit is contained in:
Lykin 2023-11-18 01:30:26 +08:00
parent 2a57248228
commit aafa0c5432
6 changed files with 83 additions and 75 deletions

View File

@ -218,11 +218,18 @@ const onSave = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.entry-editor { .entry-editor {
padding-left: 2px; padding-left: 2px;
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
.editor-content { .editor-content {
&-item { &-item {
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 18px; margin-bottom: 16px;
} }
&-label { &-label {

View File

@ -89,9 +89,6 @@ const inEdit = computed(() => {
return currentEditRow.no > 0 return currentEditRow.no > 0
}) })
const fullEdit = ref(false) const fullEdit = ref(false)
const inFullEdit = computed(() => {
return inEdit.value && fullEdit.value
})
const tableRef = ref(null) const tableRef = ref(null)
const fieldFilterOption = ref(null) const fieldFilterOption = ref(null)
@ -337,7 +334,6 @@ defineExpose({
<template> <template>
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<content-toolbar <content-toolbar
v-show="!inFullEdit"
:db="props.db" :db="props.db"
:key-code="props.keyCode" :key-code="props.keyCode"
:key-path="props.keyPath" :key-path="props.keyPath"
@ -349,7 +345,7 @@ defineExpose({
@delete="emit('delete')" @delete="emit('delete')"
@reload="emit('reload')" @reload="emit('reload')"
@rename="emit('rename')" /> @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"> <div class="flex-box-h">
<n-input-group> <n-input-group>
<n-select <n-select
@ -393,7 +389,6 @@ defineExpose({
<div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table
v-show="!inFullEdit"
ref="tableRef" ref="tableRef"
:bordered="false" :bordered="false"
:bottom-bordered="false" :bottom-bordered="false"
@ -412,19 +407,24 @@ defineExpose({
@update:filters="onUpdateFilter" /> @update:filters="onUpdateFilter" />
<!-- edit pane --> <!-- edit pane -->
<content-entry-editor <div
v-show="inEdit" v-show="inEdit"
v-model:fullscreen="fullEdit" :style="{ position: fullEdit ? 'static' : 'relative' }"
:decode="currentEditRow.decode" class="entry-editor-container flex-item-expand"
:field="currentEditRow.key" style="width: 100%">
:field-label="$t('common.field')" <content-entry-editor
:format="currentEditRow.format" v-model:fullscreen="fullEdit"
:value="currentEditRow.value" :decode="currentEditRow.decode"
:value-label="$t('common.value')" :field="currentEditRow.key"
class="flex-item-expand" :field-label="$t('common.field')"
style="width: 100%" :format="currentEditRow.format"
@close="resetEdit" :value="currentEditRow.value"
@save="saveEdit" /> :value-label="$t('common.value')"
class="flex-item-expand"
style="width: 100%"
@close="resetEdit"
@save="saveEdit" />
</div>
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>

View File

@ -75,9 +75,6 @@ const inEdit = computed(() => {
return currentEditRow.no > 0 return currentEditRow.no > 0
}) })
const fullEdit = ref(false) const fullEdit = ref(false)
const inFullEdit = computed(() => {
return inEdit.value && fullEdit.value
})
const displayCode = computed(() => { const displayCode = computed(() => {
return props.format === formatTypes.JSON return props.format === formatTypes.JSON
@ -280,7 +277,6 @@ defineExpose({
<template> <template>
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<content-toolbar <content-toolbar
v-show="!inFullEdit"
:db="props.db" :db="props.db"
:key-code="props.keyCode" :key-code="props.keyCode"
:key-path="props.keyPath" :key-path="props.keyPath"
@ -292,7 +288,7 @@ defineExpose({
@delete="emit('delete')" @delete="emit('delete')"
@reload="emit('reload')" @reload="emit('reload')"
@rename="emit('rename')" /> @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"> <div class="flex-box-h">
<n-input <n-input
v-model:value="filterValue" v-model:value="filterValue"
@ -328,7 +324,6 @@ defineExpose({
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table
v-show="!inFullEdit"
:bordered="false" :bordered="false"
:bottom-bordered="false" :bottom-bordered="false"
:columns="columns" :columns="columns"
@ -346,20 +341,25 @@ defineExpose({
@update:filters="onUpdateFilter" /> @update:filters="onUpdateFilter" />
<!-- edit pane --> <!-- edit pane -->
<content-entry-editor <div
v-show="inEdit" v-show="inEdit"
v-model:fullscreen="fullEdit" :style="{ position: fullEdit ? 'static' : 'relative' }"
:decode="currentEditRow.decode" class="entry-editor-container flex-item-expand"
:field="currentEditRow.no" style="width: 100%">
:field-label="$t('common.index')" <content-entry-editor
:field-readonly="true" v-model:fullscreen="fullEdit"
:format="currentEditRow.format" :decode="currentEditRow.decode"
:value="currentEditRow.value" :field="currentEditRow.no"
:value-label="$t('common.value')" :field-label="$t('common.index')"
class="flex-item-expand" :field-readonly="true"
style="width: 100%" :format="currentEditRow.format"
@close="resetEdit" :value="currentEditRow.value"
@save="saveEdit" /> :value-label="$t('common.value')"
class="flex-item-expand"
style="width: 100%"
@close="resetEdit"
@save="saveEdit" />
</div>
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>

View File

@ -74,9 +74,6 @@ const inEdit = computed(() => {
return currentEditRow.no > 0 return currentEditRow.no > 0
}) })
const fullEdit = ref(false) const fullEdit = ref(false)
const inFullEdit = computed(() => {
return inEdit.value && fullEdit.value
})
const displayCode = computed(() => { const displayCode = computed(() => {
return props.format === formatTypes.JSON return props.format === formatTypes.JSON
@ -277,7 +274,6 @@ defineExpose({
<template> <template>
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<content-toolbar <content-toolbar
v-show="!inFullEdit"
:db="props.db" :db="props.db"
:key-code="props.keyCode" :key-code="props.keyCode"
:key-path="props.keyPath" :key-path="props.keyPath"
@ -289,7 +285,7 @@ defineExpose({
@delete="emit('delete')" @delete="emit('delete')"
@reload="emit('reload')" @reload="emit('reload')"
@rename="emit('rename')" /> @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"> <div class="flex-box-h">
<n-input <n-input
v-model:value="filterValue" v-model:value="filterValue"
@ -325,7 +321,6 @@ defineExpose({
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table
v-show="!inFullEdit"
:bordered="false" :bordered="false"
:bottom-bordered="false" :bottom-bordered="false"
:columns="columns" :columns="columns"
@ -343,20 +338,25 @@ defineExpose({
@update:filters="onUpdateFilter" /> @update:filters="onUpdateFilter" />
<!-- edit pane --> <!-- edit pane -->
<content-entry-editor <div
v-show="inEdit" v-show="inEdit"
v-model:fullscreen="fullEdit" :style="{ position: fullEdit ? 'static' : 'relative' }"
:decode="currentEditRow.decode" class="entry-editor-container flex-item-expand"
:field="currentEditRow.no" style="width: 100%">
:field-label="$t('common.index')" <content-entry-editor
:field-readonly="true" v-model:fullscreen="fullEdit"
:format="currentEditRow.format" :decode="currentEditRow.decode"
:value="currentEditRow.value" :field="currentEditRow.no"
:value-label="$t('common.value')" :field-label="$t('common.index')"
class="flex-item-expand" :field-readonly="true"
style="width: 100%" :format="currentEditRow.format"
@close="resetEdit" :value="currentEditRow.value"
@save="saveEdit" /> :value-label="$t('common.value')"
class="flex-item-expand"
style="width: 100%"
@close="resetEdit"
@save="saveEdit" />
</div>
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>

View File

@ -88,9 +88,6 @@ const inEdit = computed(() => {
return currentEditRow.no > 0 return currentEditRow.no > 0
}) })
const fullEdit = ref(false) const fullEdit = ref(false)
const inFullEdit = computed(() => {
return inEdit.value && fullEdit.value
})
const scoreFilterOption = ref(null) const scoreFilterOption = ref(null)
const scoreColumn = computed(() => ({ const scoreColumn = computed(() => ({
@ -350,7 +347,6 @@ defineExpose({
<template> <template>
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<content-toolbar <content-toolbar
v-show="!inFullEdit"
:db="props.db" :db="props.db"
:key-code="props.keyCode" :key-code="props.keyCode"
:key-path="props.keyPath" :key-path="props.keyPath"
@ -362,7 +358,7 @@ defineExpose({
@delete="emit('delete')" @delete="emit('delete')"
@reload="emit('reload')" @reload="emit('reload')"
@rename="emit('rename')" /> @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"> <div class="flex-box-h">
<n-input-group> <n-input-group>
<n-select <n-select
@ -411,7 +407,6 @@ defineExpose({
<div class="value-wrapper value-item-part flex-box-h flex-item-expand"> <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
<!-- table --> <!-- table -->
<n-data-table <n-data-table
v-show="!inFullEdit"
:bordered="false" :bordered="false"
:bottom-bordered="false" :bottom-bordered="false"
:columns="columns" :columns="columns"
@ -428,19 +423,24 @@ defineExpose({
@update:filters="onUpdateFilter" /> @update:filters="onUpdateFilter" />
<!-- edit pane --> <!-- edit pane -->
<content-entry-editor <div
v-show="inEdit" v-show="inEdit"
v-model:fullscreen="fullEdit" :style="{ position: fullEdit ? 'static' : 'relative' }"
:decode="currentEditRow.decode" class="entry-editor-container flex-item-expand"
:field="currentEditRow.score" style="width: 100%">
:field-label="$t('common.score')" <content-entry-editor
:format="currentEditRow.format" v-model:fullscreen="fullEdit"
:value="currentEditRow.value" :decode="currentEditRow.decode"
:value-label="$t('common.value')" :field="currentEditRow.score"
class="flex-item-expand" :field-label="$t('common.score')"
style="width: 100%" :format="currentEditRow.format"
@close="resetEdit" :value="currentEditRow.value"
@save="saveEdit" /> :value-label="$t('common.value')"
class="flex-item-expand"
style="width: 100%"
@close="resetEdit"
@save="saveEdit" />
</div>
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>

View File

@ -86,6 +86,7 @@ body {
padding-top: 5px; padding-top: 5px;
//padding: 5px; //padding: 5px;
box-sizing: border-box; box-sizing: border-box;
position: relative;
.tb2 { .tb2 {
gap: 5px; gap: 5px;