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">
+    <div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
-      <GeneralShareBaseButton class="py-1 px-2 text-primary font-bold cursor-pointer select-none" />
+      <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,54 +15,53 @@ const openSwaggerLink = () => {
 </script>
 
 <template>
-  <div>
+  <div
-    <div @click="showDrawer = true">
+    class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
-      <div class="flex items-center space-x-1">
+    @click="showDrawer = true"
-        <MdiCommentTextOutline class="mr-1 nc-share-base" />
+  >
-        <!-- todo: i18n -->
+    <MdiCommentTextOutline class="mr-1 nc-share-base" />
-        <div>APIs & Support</div>
+    <!-- todo: i18n -->
-      </div>
+    <div>APIs & Support</div>
-    </div>
+  </div>
 
-    <a-drawer
+  <a-drawer
-      v-model:visible="showDrawer"
+    v-model:visible="showDrawer"
-      class="h-full relative"
+    class="h-full relative"
-      placement="right"
+    placement="right"
-      size="small"
+    size="small"
-      :closable="false"
+    :closable="false"
-      :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
+    :body-style="{ padding: '12px 24px 0 24px', background: '#fafafa' }"
-    >
+  >
-      <div class="flex flex-col w-full h-full p-4 pb-0">
+    <div class="flex flex-col w-full h-full p-4 pb-0">
-        <!-- todo: i18n -->
+      <!-- todo: i18n -->
-        <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
+      <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
 
-        <GeneralSocialCard show-swagger-link class="!w-full nc-social-card">
+      <GeneralSocialCard show-swagger-link class="!w-full nc-social-card">
-          <template #before>
+        <template #before>
-            <a-list-item v-if="project">
+          <a-list-item v-if="project">
-              <nuxt-link
+            <nuxt-link
-                v-t="['e:docs']"
+              v-t="['e:docs']"
-                class="text-primary !no-underline !text-current py-4 font-weight-medium"
+              class="text-primary !no-underline !text-current py-4 font-weight-medium"
-                target="_blank"
+              target="_blank"
-                @click="openSwaggerLink"
+              @click="openSwaggerLink"
-              >
+            >
-                <div class="ml-3 flex items-center text-sm">
+              <div class="ml-3 flex items-center text-sm">
-                  <LogosSwagger />
+                <LogosSwagger />
-                  <!--            todo:  i18n -->
+                <!--            todo:  i18n -->
-                  <span class="ml-3">{{ project.title }} : Swagger Documentation</span>
+                <span class="ml-3">{{ project.title }} : Swagger Documentation</span>
-                </div>
+              </div>
-              </nuxt-link>
+            </nuxt-link>
-            </a-list-item>
+          </a-list-item>
-          </template>
+        </template>
-        </GeneralSocialCard>
+      </GeneralSocialCard>
 
-        <div class="flex-1 my-2"></div>
+      <div class="flex-1 my-2"></div>
 
-        <GeneralSponsors class="!w-full" />
+      <GeneralSponsors class="!w-full" />
 
-        <div class="min-h-10 w-full" />
+      <div class="min-h-10 w-full" />
-      </div>
+    </div>
-    </a-drawer>
+  </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">
+  <div class="flex flex-row border-1 rounded-sm">
-    <template #addonBefore>
+    <div
-      <div class="flex items-center relative" @click="isDropdownOpen = true">
+      ref="searchDropdown"
-        <MdiMagnify class="text-grey" />
+      class="flex items-center relative bg-gray-50 px-2 cursor-pointer border-r-1"
-        <MdiMenuDown class="text-grey" />
+      :class="{ '!bg-gray-100 ': isDropdownOpen }"
+      @click="isDropdownOpen = !isDropdownOpen"
+    >
+      <MdiMagnify class="text-grey" />
+      <MdiMenuDown class="text-grey" />
 
-        <a-select
+      <a-select
-          v-model:value="search.field"
+        v-model:value="search.field"
-          size="small"
+        :open="isDropdownOpen"
-          :dropdown-match-select-width="false"
+        size="small"
-          :options="columns"
+        :dropdown-match-select-width="false"
-          class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
+        :options="columns"
-        >
+        dropdown-class-name="!py-0 !rounded"
-        </a-select>
+        class="!absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
-      </div>
+      >
-    </template>
+      </a-select>
-  </a-input>
+    </div>
+    <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>