From f6bfdd262daa99dcc245e8199b0e5250b9739763 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 09:15:17 +0200
Subject: [PATCH] refactor(gui-v2): show tooltip in bottomEnd when sidebar is
 open

---
 .../components/smartsheet/sidebar/toolbar/AddRow.vue      | 6 +++++-
 .../components/smartsheet/sidebar/toolbar/DeleteTable.vue | 8 +++++---
 .../components/smartsheet/sidebar/toolbar/Reload.vue      | 7 +++++--
 .../smartsheet/sidebar/toolbar/ToggleDrawer.vue           | 2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
index 9e99331042..c75481f2a8 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/AddRow.vue
+++ b/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">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index 0a4f7ba450..6f0cdd5a8b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/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">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
index 5a7942b884..fc68b3d577 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/Reload.vue
+++ b/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">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index 9854e43b83..4f0c3adf44 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/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">