From 554b2b9f72c9ba8b3cfc307444fbe1326f378d47 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 2 Jan 2024 15:43:50 +0800
Subject: [PATCH] fix: move "import data" to dropdown of add button

---
 frontend/src/components/icons/Checkbox.vue    | 34 +++++++++
 frontend/src/components/icons/Down.vue        | 21 +++++
 .../src/components/sidebar/BrowserPane.vue    | 76 ++++++++++---------
 3 files changed, 97 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/components/icons/Checkbox.vue
 create mode 100644 frontend/src/components/icons/Down.vue

diff --git a/frontend/src/components/icons/Checkbox.vue b/frontend/src/components/icons/Checkbox.vue
new file mode 100644
index 0000000..7059b8d
--- /dev/null
+++ b/frontend/src/components/icons/Checkbox.vue
@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#icon-25e88d94353e4f38)">
+            <path
+                d="M42 20V39C42 40.6569 40.6569 42 39 42H9C7.34315 42 6 40.6569 6 39V9C6 7.34315 7.34315 6 9 6H30"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4" />
+            <path
+                d="M16 20L26 28L41 7"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="4" />
+        </g>
+        <defs>
+            <clipPath id="icon-25e88d94353e4f38">
+                <rect fill="currentColor" height="48" width="48" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/icons/Down.vue b/frontend/src/components/icons/Down.vue
new file mode 100644
index 0000000..d2020a0
--- /dev/null
+++ b/frontend/src/components/icons/Down.vue
@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M36 18L24 30L12 18"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 60bb8d6..08ebf6e 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -20,12 +20,13 @@ import RedisTypeSelector from '@/components/common/RedisTypeSelector.vue'
 import { types } from '@/consts/support_redis_type.js'
 import Plus from '@/components/icons/Plus.vue'
 import useConnectionStore from 'stores/connections.js'
-import ListCheckbox from '@/components/icons/ListCheckbox.vue'
 import Close from '@/components/icons/Close.vue'
 import More from '@/components/icons/More.vue'
 import Export from '@/components/icons/Export.vue'
 import { ConnectionType } from '@/consts/connection_type.js'
 import Import from '@/components/icons/Import.vue'
+import Down from '@/components/icons/Down.vue'
+import Checkbox from '@/components/icons/Checkbox.vue'
 
 const props = defineProps({
     server: String,
@@ -63,18 +64,20 @@ const dbSelectOptions = computed(() => {
     })
 })
 
-const moreOptions = computed(() => {
-    return [
-        { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
-        { key: 'divider', type: 'divider' },
-        { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
-        {
-            key: 'disconnect',
-            label: i18n.t('interface.disconnect'),
-            icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
-        },
-    ]
-})
+const addOptions = computed(() => [
+    { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
+])
+
+const moreOptions = computed(() => [
+    // { key: 'import', label: i18n.t('interface.import_key'), icon: render.renderIcon(Import, { strokeWidth: 3.5 }) },
+    { key: 'flush', label: i18n.t('interface.flush_db'), icon: render.renderIcon(Delete, { strokeWidth: 3.5 }) },
+    { key: 'divider', type: 'divider' },
+    {
+        key: 'disconnect',
+        label: i18n.t('interface.disconnect'),
+        icon: render.renderIcon(Unlink, { strokeWidth: 3.5 }),
+    },
+])
 
 const loadProgress = computed(() => {
     const db = browserStore.getDatabase(props.server, props.db)
@@ -258,27 +261,32 @@ onMounted(() => onReload())
                     <redis-type-selector v-model:value="filterForm.type" @update:value="onSelectFilterType" />
                 </template>
             </content-search-input>
+            <icon-button
+                :disabled="loading"
+                :icon="Refresh"
+                border
+                size="18"
+                small
+                stroke-width="4"
+                t-tooltip="interface.reload"
+                @click="onReload" />
             <n-button-group>
-                <n-tooltip :show-arrow="false">
-                    <template #trigger>
-                        <n-button :disabled="loading" :focusable="false" bordered size="small" @click="onReload">
-                            <template #icon>
-                                <n-icon :component="Refresh" size="18" />
-                            </template>
-                        </n-button>
-                    </template>
-                    {{ $t('interface.reload') }}
-                </n-tooltip>
-                <n-tooltip :show-arrow="false">
-                    <template #trigger>
-                        <n-button :disabled="loading" :focusable="false" bordered size="small" @click="onAddKey">
-                            <template #icon>
-                                <n-icon :component="Plus" size="18" />
-                            </template>
-                        </n-button>
-                    </template>
-                    {{ $t('interface.new_key') }}
-                </n-tooltip>
+                <icon-button
+                    :disabled="loading"
+                    :icon="Plus"
+                    border
+                    size="18"
+                    small
+                    stroke-width="4"
+                    t-tooltip="interface.new_key"
+                    @click="onAddKey" />
+                <n-dropdown :options="addOptions" placement="bottom-end" @select="onSelectOptions">
+                    <n-button :focusable="false" size="small" style="padding: 0 3px">
+                        <n-icon size="10">
+                            <down :stroke-width="6" />
+                        </n-icon>
+                    </n-button>
+                </n-dropdown>
             </n-button-group>
         </div>
 
@@ -343,7 +351,7 @@ onMounted(() => onReload())
                     <div class="flex-item-expand" style="min-width: 10px" />
                     <icon-button
                         :button-class="['nav-pane-func-btn']"
-                        :icon="ListCheckbox"
+                        :icon="Checkbox"
                         :stroke-width="3.5"
                         size="20"
                         t-tooltip="interface.check_mode"