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>
|
<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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue