perf: use relative position for entry editor to toggle fullscreen
This commit is contained in:
parent
2a57248228
commit
aafa0c5432
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -86,6 +86,7 @@ body {
|
|||
padding-top: 5px;
|
||||
//padding: 5px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.tb2 {
|
||||
gap: 5px;
|
||||
|
|
Loading…
Reference in New Issue