Merge pull request #2948 from nocodb/refactor/sidebar-tooltips

packages/nc-gui-v2/app.vue

@@ -41,9 +41,9 @@ const toggleSidebar = () => {
           <span class="prose-xl">NocoDB</span>
         </div>
 
-        <div v-show="state.isLoading.value" class="text-gray-400 ml-3">
+        <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
-          <MdiReload :class="{ 'animate-infinite animate-spin !text-success': state.isLoading.value }" />
+          <MdiReload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -2,8 +2,8 @@
 import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
-import Toolbar from './Toolbar.vue'
-import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
+import Toolbar from './toolbar/index.vue'
+import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import MdiAddIcon from '~icons/mdi/plus-outline'
+import { inject, ref } from '#imports'
+import { RightSidebarInj } from '~/context'
 
 const emits = defineEmits(['addRow'])
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.addRow') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { inject, useTable } from '#imports'
-import { MetaInj } from '~/context'
+import { inject, ref, useTable } from '#imports'
+import { MetaInj, RightSidebarInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
 const meta = inject(MetaInj)
 
 const { deleteTable } = useTable()
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/LockMenu.vue

@@ -54,6 +54,7 @@ const Icon = computed(() => {
     <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
       <Icon class="cursor-pointer group-hover:(!text-white)" />
     </div>
+
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj } from '~/context'
+import { ReloadViewDataHookInj, RightSidebarInj } from '~/context'
 import MdiReloadIcon from '~icons/mdi/reload'
+import { inject, ref } from '#imports'
 
 const reloadTri = inject(ReloadViewDataHookInj)
+
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('general.reload') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-green-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -8,7 +8,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(false))
 </script>
 
 <template>
-  <a-tooltip placement="left">
+  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
     <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -1,24 +1,32 @@
+<script lang="ts" setup>
+import AddRow from './AddRow.vue'
+import DeleteTable from './DeleteTable.vue'
+import LockMenu from './LockMenu.vue'
+import Reload from './Reload.vue'
+import ToggleDrawer from './ToggleDrawer.vue'
+</script>
+
 <template>
   <div class="flex gap-2">
     <slot name="start" />
 
-    <SmartsheetToolbarLockMenu />
+    <LockMenu />
 
     <div class="dot" />
 
-    <SmartsheetToolbarReload />
+    <Reload />
 
     <div class="dot" />
 
-    <SmartsheetToolbarAddRow />
+    <AddRow />
 
     <div class="dot" />
 
-    <SmartsheetToolbarDeleteTable />
+    <DeleteTable />
 
     <div class="dot" />
 
-    <SmartsheetToolbarToggleDrawer />
+    <ToggleDrawer />
 
     <slot name="end" />
   </div>