From 68e7994b34328d9c106754d03919005ce6005950 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 00:02:19 +0200
Subject: [PATCH] refactor(gui-v2): use dropdown for project add btn

---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../[projectType]/[projectId]/index/index.vue | 146 ++++++++++--------
 2 files changed, 81 insertions(+), 66 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 35b401d2e7..0f031d544b 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    ADropdownButton: typeof import('ant-design-vue/es')['DropdownButton']
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 6a87f73002..7639df7928 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -98,77 +98,85 @@ function openAirtableImportDialog() {
           </a-tab-pane>
 
           <template #leftExtra>
-            <a-menu v-if="isUIAllowed('addOrImport')" v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
-              <a-sub-menu key="addORImport">
-                <template #title>
-                  <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">
-                    <MdiPlusBoxOutline />
-                    Add / Import
-                  </div>
-                </template>
-
-                <a-menu-item-group v-if="isUIAllowed('addTable')">
-                  <a-menu-item key="add-new-table" @click="openTableCreateDialog">
-                    <span class="flex items-center gap-2">
-                      <MdiTable class="text-primary" />
+            <a-dropdown v-if="isUIAllowed('addOrImport')" :trigger="['click', 'hover']">
+              <div
+                class="cursor-pointer color-transition group hover:text-primary text-sm flex items-center gap-2 py-[9.5px] px-[20px]"
+              >
+                <MdiPlusBoxOutline class="group-hover:text-pink-500" />
+                Add / Import
+              </div>
+
+              <template #overlay>
+                <a-menu class="nc-add-project-menu !pt-0 ml-6">
+                  <a-menu-item v-if="isUIAllowed('addTable')" key="add-new-table" @click="openTableCreateDialog">
+                    <div class="color-transition nc-project-menu-item group">
+                      <MdiTable class="group-hover:text-pink-500" />
                       <!-- Add new table -->
                       {{ $t('tooltip.addTable') }}
-                    </span>
-                  </a-menu-item>
-                </a-menu-item-group>
-
-                <a-menu-item-group title="QUICK IMPORT FROM">
-                  <a-menu-item v-if="isUIAllowed('airtableImport')" key="quick-import-airtable" @click="openAirtableImportDialog">
-                    <span class="flex items-center gap-2">
-                      <MdiTableLarge class="text-primary" />
-                      <!-- TODO: i18n -->
-                      Airtable
-                    </span>
-                  </a-menu-item>
-
-                  <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
-                    <span class="flex items-center gap-2">
-                      <MdiFileDocumentOutline class="text-primary" />
-                      <!-- TODO: i18n -->
-                      CSV file
-                    </span>
+                    </div>
                   </a-menu-item>
 
-                  <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
-                    <span class="flex items-center gap-2">
-                      <MdiCodeJson class="text-primary" />
-                      <!-- TODO: i18n -->
-                      JSON file
-                    </span>
+                  <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
+                    <a-menu-item
+                      v-if="isUIAllowed('airtableImport')"
+                      key="quick-import-airtable"
+                      @click="openAirtableImportDialog"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiTableLarge class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Airtable
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        CSV file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiCodeJson class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        JSON file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item
+                      v-if="isUIAllowed('excelImport')"
+                      key="quick-import-excel"
+                      @click="openQuickImportDialog('excel')"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileExcel class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Microsoft Excel
+                      </div>
+                    </a-menu-item>
+                  </a-menu-item-group>
+
+                  <a-menu-divider class="my-1" />
+
+                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table">
+                    <a
+                      v-t="['e:datasource:import-request']"
+                      href="https://github.com/nocodb/nocodb/issues/2052"
+                      target="_blank"
+                      class="prose-sm pa-0 group"
+                    >
+                      <span class="flex items-center gap-2">
+                        <MdiOpenInNew class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Request a data source you need?
+                      </span>
+                    </a>
                   </a-menu-item>
-
-                  <a-menu-item v-if="isUIAllowed('excelImport')" key="quick-import-excel" @click="openQuickImportDialog('excel')">
-                    <span class="flex items-center gap-2">
-                      <MdiFileExcel class="text-primary" />
-                      <!-- TODO: i18n -->
-                      Microsoft Excel
-                    </span>
-                  </a-menu-item>
-                </a-menu-item-group>
-
-                <a-menu-divider class="ma-0 mb-2" />
-
-                <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="ma-0 mt-3">
-                  <a
-                    v-t="['e:datasource:import-request']"
-                    href="https://github.com/nocodb/nocodb/issues/2052"
-                    target="_blank"
-                    class="prose-sm pa-0"
-                  >
-                    <span class="flex items-center gap-2">
-                      <MdiOpenInNew class="text-primary" />
-                      <!-- TODO: i18n -->
-                      Request a data source you need?
-                    </span>
-                  </a>
-                </a-menu-item>
-              </a-sub-menu>
-            </a-menu>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </a-tabs>
       </div>
@@ -205,6 +213,12 @@ function openAirtableImportDialog() {
   }
 }
 
+.nc-add-project-menu {
+  :deep(.ant-dropdown-menu-item-group-list) {
+    @apply !mx-0;
+  }
+}
+
 :deep(.ant-menu-item-selected) {
   @apply text-inherit !bg-inherit;
 }