Merge pull request #3288 from nocodb/fix/gui-v2-fixed-search-styling-and-tree-view-bottom-buttom-styling

vue3: Fixed styling of search and bottom buttons of tree view

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -401,10 +401,10 @@ function openTableCreateDialog() {
 
     <a-divider class="!my-0" />
 
-    <div class="flex items-start flex-col justify-start px-4 py-3 gap-2">
-      <GeneralShareBaseButton class="py-1 px-2 text-primary font-bold cursor-pointer select-none" />
+    <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
+      <GeneralShareBaseButton class="py-1.5 px-2 text-primary font-bold cursor-pointer select-none" />
 
-      <GeneralHelpAndSupport class="py-1 px-2 text-gray-500 cursor-pointer select-none" />
+      <GeneralHelpAndSupport class="px-2 text-gray-500 cursor-pointer select-none" />
 
       <DashboardGithubStarButton class="ml-2 py-1" />
     </div>

packages/nc-gui-v2/components/general/HelpAndSupport.vue

@@ -15,14 +15,14 @@ const openSwaggerLink = () => {
 </script>
 
 <template>
-  <div>
-    <div @click="showDrawer = true">
-      <div class="flex items-center space-x-1">
+  <div
+    class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
+    @click="showDrawer = true"
+  >
     <MdiCommentTextOutline class="mr-1 nc-share-base" />
     <!-- todo: i18n -->
     <div>APIs & Support</div>
   </div>
-    </div>
 
   <a-drawer
     v-model:visible="showDrawer"
@@ -62,7 +62,6 @@ const openSwaggerLink = () => {
       <div class="min-h-10 w-full" />
     </div>
   </a-drawer>
-  </div>
 </template>
 
 <style scoped lang="scss">

packages/nc-gui-v2/components/general/ShareBaseButton.vue

@@ -9,7 +9,7 @@ const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)">
     <div
       v-if="
         isUIAllowed('newUser') &&

packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@@ -8,6 +8,8 @@ const { search, meta } = useSmartsheetStoreOrThrow()
 
 // todo: where is this value supposed to come from? it's not in the store
 const isDropdownOpen = ref(false)
+const searchDropdown = ref(null)
+onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
 
 const columns = computed(() =>
   meta.value?.columns?.map((c) => ({
@@ -22,21 +24,36 @@ function onPressEnter() {
 </script>
 
 <template>
-  <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
-    <template #addonBefore>
-      <div class="flex items-center relative" @click="isDropdownOpen = true">
+  <div class="flex flex-row border-1 rounded-sm">
+    <div
+      ref="searchDropdown"
+      class="flex items-center relative bg-gray-50 px-2 cursor-pointer border-r-1"
+      :class="{ '!bg-gray-100 ': isDropdownOpen }"
+      @click="isDropdownOpen = !isDropdownOpen"
+    >
       <MdiMagnify class="text-grey" />
       <MdiMenuDown class="text-grey" />
 
       <a-select
         v-model:value="search.field"
+        :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
         :options="columns"
+        dropdown-class-name="!py-0 !rounded"
         class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
       >
       </a-select>
     </div>
-    </template>
+    <a-input
+      v-model:value="search.query"
+      size="small"
+      class="max-w-[200px]"
+      placeholder="Filter query"
+      :bordered="false"
+      @press-enter="onPressEnter"
+    >
+      <template #addonBefore> </template>
     </a-input>
+  </div>
 </template>