lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: hide context menu in tree view when press 'esc'

This commit is contained in:
Lykin 2024-01-24 11:25:59 +08:00
parent edaef2a78c
commit 124d221b9f
2 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -567,7 +567,11 @@ defineExpose({
</script> </script>
<template> <template>
<div :style="{ backgroundColor }" class="flex-box-v browser-tree-wrapper" @contextmenu="(e) => e.preventDefault()"> <div
:style="{ backgroundColor }"
class="flex-box-v browser-tree-wrapper"
@contextmenu="(e) => e.preventDefault()"
@keydown.esc="contextMenuParam.show = false">
<n-spin v-if="props.loading" class="fill-height" /> <n-spin v-if="props.loading" class="fill-height" />
<n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" /> <n-empty v-else-if="!props.loading && isEmpty(data)" class="empty-content" />
<n-tree <n-tree

121
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -479,67 +479,74 @@ const onCancelOpen = () => {
</script> </script>
<template> <template>
<n-empty <div class="connection-tree-wrapper" @keydown.esc="contextMenuParam.show = false">
v-if="isEmpty(connectionStore.connections)" <n-empty
:description="$t('interface.empty_server_list')" v-if="isEmpty(connectionStore.connections)"
class="empty-content" /> :description="$t('interface.empty_server_list')"
<n-tree class="empty-content" />
v-else <n-tree
:animated="false" v-else
:block-line="true" :animated="false"
:block-node="true" :block-line="true"
:cancelable="false" :block-node="true"
:data="connectionStore.connections" :cancelable="false"
:draggable="true" :data="connectionStore.connections"
:expanded-keys="expandedKeys" :draggable="true"
:node-props="nodeProps" :expanded-keys="expandedKeys"
:pattern="props.filterPattern" :node-props="nodeProps"
:render-label="renderLabel" :pattern="props.filterPattern"
:render-prefix="renderPrefix" :render-label="renderLabel"
:render-suffix="renderSuffix" :render-prefix="renderPrefix"
:selected-keys="selectedKeys" :render-suffix="renderSuffix"
class="fill-height" :selected-keys="selectedKeys"
virtual-scroll class="fill-height"
@drop="handleDrop" virtual-scroll
@update:selected-keys="onUpdateSelectedKeys" @drop="handleDrop"
@update:expanded-keys="onUpdateExpandedKeys" /> @update:selected-keys="onUpdateSelectedKeys"
@update:expanded-keys="onUpdateExpandedKeys" />
<!-- status display modal --> <!-- status display modal -->
<n-modal :show="connectingServer !== ''" transform-origin="center"> <n-modal :show="connectingServer !== ''" transform-origin="center">
<n-card <n-card
:bordered="false" :bordered="false"
:content-style="{ textAlign: 'center' }" :content-style="{ textAlign: 'center' }"
aria-model="true" aria-model="true"
role="dialog" role="dialog"
style="width: 400px"> style="width: 400px">
<n-spin> <n-spin>
<template #description> <template #description>
<n-space vertical> <n-space vertical>
<n-text strong>{{ $t('dialogue.opening_connection') }}</n-text> <n-text strong>{{ $t('dialogue.opening_connection') }}</n-text>
<n-button :focusable="false" secondary size="small" @click="onCancelOpen"> <n-button :focusable="false" secondary size="small" @click="onCancelOpen">
{{ $t('dialogue.interrupt_connection') }} {{ $t('dialogue.interrupt_connection') }}
</n-button> </n-button>
</n-space> </n-space>
</template> </template>
</n-spin> </n-spin>
</n-card> </n-card>
</n-modal> </n-modal>
<!-- context menu --> <!-- context menu -->
<n-dropdown <n-dropdown
:keyboard="true" :keyboard="true"
:options="contextMenuParam.options" :options="contextMenuParam.options"
:render-icon="({ icon }) => render.renderIcon(icon)" :render-icon="({ icon }) => render.renderIcon(icon)"
:render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })" :render-label="({ label }) => render.renderLabel($t(label), { class: 'context-menu-item' })"
:show="contextMenuParam.show" :show="contextMenuParam.show"
:x="contextMenuParam.x" :x="contextMenuParam.x"
:y="contextMenuParam.y" :y="contextMenuParam.y"
placement="bottom-start" placement="bottom-start"
trigger="manual" trigger="manual"
@clickoutside="contextMenuParam.show = false" @clickoutside="contextMenuParam.show = false"
@select="handleSelectContextMenu" /> @select="handleSelectContextMenu" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/styles/content'; @import '@/styles/content';
.connection-tree-wrapper {
height: 100%;
overflow: hidden;
}
</style> </style>