From b72855b707b02ea635a6be33d716ed5760838faa Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:09:02 +0800
Subject: [PATCH] perf: add shortcut `esc` for close modal dialog (#235)
---
frontend/src/components/content_value/ContentSlog.vue | 2 +-
frontend/src/components/dialogs/AddFieldsDialog.vue | 3 ++-
frontend/src/components/dialogs/ConnectionDialog.vue | 5 +++--
frontend/src/components/dialogs/DecoderDialog.vue | 3 ++-
frontend/src/components/dialogs/DeleteKeyDialog.vue | 5 +++--
frontend/src/components/dialogs/ExportKeyDialog.vue | 5 +++--
frontend/src/components/dialogs/FlushDbDialog.vue | 5 +++--
frontend/src/components/dialogs/GroupDialog.vue | 3 ++-
frontend/src/components/dialogs/ImportKeyDialog.vue | 5 +++--
frontend/src/components/dialogs/KeyFilterDialog.vue | 3 ++-
frontend/src/components/dialogs/NewKeyDialog.vue | 5 +++--
frontend/src/components/dialogs/PreferencesDialog.vue | 5 +++--
frontend/src/components/dialogs/RenameKeyDialog.vue | 3 ++-
frontend/src/components/dialogs/SetTtlDialog.vue | 5 +++--
frontend/src/components/sidebar/Ribbon.vue | 6 +-----
15 files changed, 36 insertions(+), 27 deletions(-)
diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index b513a2c..ae49a95 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -178,8 +178,8 @@ const onListLimitChanged = (limit) => {
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index a76d31e..75b2c6a 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -197,7 +197,6 @@ const onClose = () => {
{
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="title ? $t(title) : ''"
+ close-on-esc
preset="dialog"
style="width: 600px"
transform-origin="center"
+ @esc="onClose"
@positive-click="onAdd"
@negative-click="onClose">
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 3767b15..f04cedd 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -329,14 +329,15 @@ const pasteFromClipboard = async () => {
+ transform-origin="center"
+ @esc="onClose">
{}
{}
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="editName ? $t('dialogue.decoder.edit_name') : $t('dialogue.decoder.name')"
+ close-on-esc
preset="dialog"
transform-origin="center"
+ @esc="onClose"
@positive-click="onAddOrUpdate"
@negative-click="onClose">
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index b5e2c0a..8723e1a 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -93,12 +93,13 @@ const onClose = () => {
+ transform-origin="center"
+ @esc="onClose">
diff --git a/frontend/src/components/dialogs/ExportKeyDialog.vue b/frontend/src/components/dialogs/ExportKeyDialog.vue
index e653ffa..b702e10 100644
--- a/frontend/src/components/dialogs/ExportKeyDialog.vue
+++ b/frontend/src/components/dialogs/ExportKeyDialog.vue
@@ -64,12 +64,13 @@ const onClose = () => {
+ transform-origin="center"
+ @esc="onClose">
diff --git a/frontend/src/components/dialogs/FlushDbDialog.vue b/frontend/src/components/dialogs/FlushDbDialog.vue
index 33e2927..f1ce1a2 100644
--- a/frontend/src/components/dialogs/FlushDbDialog.vue
+++ b/frontend/src/components/dialogs/FlushDbDialog.vue
@@ -54,12 +54,13 @@ const onClose = () => {
+ transform-origin="center"
+ @esc="onClose">
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index eb6f0dc..a85a3c3 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -89,7 +89,6 @@ const onClose = () => {
{
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="isRenameMode ? $t('dialogue.group.rename') : $t('dialogue.group.new')"
+ close-on-esc
preset="dialog"
transform-origin="center"
+ @esc="onClose"
@positive-click="onConfirm"
@negative-click="onClose">
{
+ transform-origin="center"
+ @esc="onClose">
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 42b27c2..e3e6097 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -47,7 +47,6 @@ const onClose = () => {
{
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="$t('dialogue.filter.set_key_filter')"
+ close-on-esc
preset="dialog"
style="width: 450px"
transform-origin="center"
+ @esc="onClose"
@positive-click="onConfirm"
@negative-click="onClose">
{
+ transform-origin="center"
+ @esc="onClose">
{
v-model:show="dialogStore.preferencesDialogVisible"
:auto-focus="false"
:closable="false"
- :close-on-esc="false"
:mask-closable="false"
:show-icon="false"
:title="$t('preferences.name')"
+ close-on-esc
preset="dialog"
style="width: 640px"
- transform-origin="center">
+ transform-origin="center"
+ @esc="onClose">
{
{
:positive-text="$t('common.confirm')"
:show-icon="false"
:title="$t('interface.rename_key')"
+ close-on-esc
preset="dialog"
transform-origin="center"
+ @esc="onClose"
@positive-click="onRename"
@negative-click="onClose">
{
{
:positive-text="$t('common.save')"
:show-icon="false"
:title="title"
+ close-on-esc
preset="dialog"
- transform-origin="center">
+ transform-origin="center"
+ @esc="onClose">
diff --git a/frontend/src/components/sidebar/Ribbon.vue b/frontend/src/components/sidebar/Ribbon.vue
index bbbd64e..e78f196 100644
--- a/frontend/src/components/sidebar/Ribbon.vue
+++ b/frontend/src/components/sidebar/Ribbon.vue
@@ -204,11 +204,7 @@ const exThemeVars = computed(() => {
-
+