From 4eb762ef40503f34584ca4b078f202e293108f9f Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 19:03:24 +0530
Subject: [PATCH] refactor(gui-v2): search field style improvement

---
 .../components/smartsheet-toolbar/SearchData.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 565b1fea62..c7613419ed 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables/useSmartsheetStore'
-import { MetaInj, ReloadViewDataHookInj, SearchFieldAndQueryCbkInj } from '~/context'
+import { MetaInj, ReloadViewDataHookInj } from '~/context'
+import MdiSearchIcon from '~icons/mdi/magnify'
+import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const reloadData = inject(ReloadViewDataHookInj)
 const { search, meta } = useSmartsheetStoreOrThrow()
@@ -11,18 +13,24 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
+
 </script>
 
 <template>
   <a-input
     v-model:value="search.value"
     size="small"
-    class="max-w-[250px]"
+    class="max-w-[200px]"
     placeholder="Filter query"
     @press-enter="reloadData.trigger()"
   >
-    <template #addonBefore>
-      <a-select v-model:value="search.field" :options="columns" style="width: 80px" class="!text-xs" size="small" />
+    <template #addonBefore @click="isDropdownOpen = true">
+      <div class="flex align-center relative">
+      <MdiSearchIcon class="text-grey"/>
+      <MdiMenuDownIcon class="text-grey"/>
+      <a-select size="small" :dropdownMatchSelectWidth="false" v-model:value="search.field" :options="columns"  class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0">
+      </a-select>
+      </div>
     </template>
   </a-input>
 </template>