From 2858720637bf4e68ae52e91954be2433de4c7a67 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 26 Jul 2022 22:56:32 +0530
Subject: [PATCH] refactor(gui-v2): add dot between icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/MoreActions.vue          | 17 ++++++++++++++---
 .../smartsheet-toolbar/SearchData.vue           |  4 ++--
 .../smartsheet-toolbar/ToggleDrawer.vue         |  2 +-
 .../nc-gui-v2/components/smartsheet/Toolbar.vue |  9 ++++++++-
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 873b3a1348..e43d6e0e2f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import MdiFlashIcon from '~icons/mdi/flash-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import MdiDownloadIcon from '~icons/mdi/download-outline'
 </script>
 
 <template>
-  <v-dropdown>
+  <a-dropdown>
     <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-1 align-center">
         <MdiFlashIcon class="text-grey" />
@@ -14,9 +15,19 @@ import MdiMenuDownIcon from '~icons/mdi/menu-down'
       </div>
     </a-button>
     <template #overlay>
-      <div></div>
+      <div class="p-2 bg-white">
+        <a-menu>
+          <a-menu-item>
+            <div class="text-xs flex align-center gap-2">
+              <MdiDownloadIcon />
+              <!-- Download as CSV -->
+              {{ $t('activity.downloadCSV') }}
+            </div>
+          </a-menu-item>
+        </a-menu>
+      </div>
     </template>
-  </v-dropdown>
+  </a-dropdown>
   <!--  <div>
     <v-menu open-on-hover bottom offset-y transition="slide-y-transition">
       <template #activator="{ on }">
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 00c10e60d8..01986f736f 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -27,9 +27,9 @@ const columns = computed(() =>
 </script>
 
 <template>
-  <a-input-search size="small" v-model:value="localValue" class="max-w-[250px]">
+  <a-input-search v-model:value="localValue" size="small" class="max-w-[250px]">
     <template #addonBefore>
-      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs " size="small" />
+      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" size="small" />
     </template>
   </a-input-search>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
index ce0cd887da..65b01ba736 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
@@ -4,7 +4,7 @@ import MdiDoorOpenIcon from '~icons/mdi/door-open'
 import MdiDoorClosedIcon from '~icons/mdi/door-closed'
 const navDrawerOpened = ref(false)
 
-const Icon = computed(()=> navDrawerOpened.value ? MdiDoorOpenIcon : MdiDoorClosedIcon)
+const Icon = computed(() => (navDrawerOpened.value ? MdiDoorOpenIcon : MdiDoorClosedIcon))
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 4030228f76..1661bffa08 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -10,10 +10,14 @@
     <SmartsheetToolbarMoreActions />
     <div class="flex-1" />
     <SmartsheetToolbarLockMenu />
+    <div class="dot" />
     <SmartsheetToolbarReload />
+    <div class="dot" />
     <SmartsheetToolbarAddRow />
+    <div class="dot" />
     <SmartsheetToolbarDeleteTable />
-    <SmartsheetToolbarToggleDrawer />
+    <div class="dot" />
+    <SmartsheetToolbarToggleDrawer class="mr-2" />
   </div>
 </template>
 
@@ -21,4 +25,7 @@
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
 }
+.dot {
+  @apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
+}
 </style>