feat(gui-v2): add tooltips to right sidebar icons

packages/nc-gui-v2/assets/style-v2.scss

@@ -76,3 +76,20 @@ html {
 .nc-menu-item {
   @apply cursor-pointer text-xs flex align-center gap-2 p-4 relative after:(content-[''] absolute top-0 left-0  w-full h-full right 0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 }
+
+.nc-sidebar-right-item {
+  @apply relative flex items-center;
+
+  &::after {
+    @apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out;
+    content: '';
+  }
+
+  &:hover::after {
+    @apply ring shadow-2xl transform scale-110;
+  }
+
+  svg {
+    @apply z-1 text-xl p-1 text-gray-500;
+  }
+}

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

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import MdiAddIcon from '~icons/mdi/plus-outline'
-const emit = defineEmits(['add-row'])
+
+const emits = defineEmits(['addRow'])
 </script>
 
 <template>
-  <MdiAddIcon class="text-grey" @click="emit('add-row')" />
+  <a-tooltip placement="left">
-</template>
+    <template #title> {{ $t('activity.addRow') }} </template>
 
-<style scoped></style>
+    <div class="nc-sidebar-right-item hover:after:bg-primary/75 group">
+      <MdiAddIcon class="group-hover:(!text-white)" @click="emits('addRow')" />
+    </div>
+  </a-tooltip>
+</template>

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

@@ -3,7 +3,11 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
 </script>
 
 <template>
-  <MdiDeleteIcon class="text-grey" />
+  <a-tooltip placement="left">
-</template>
+    <template #title> {{ $t('activity.deleteTable') }} </template>
 
-<style scoped></style>
+    <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
+      <MdiDeleteIcon class="group-hover:(!text-white)" />
+    </div>
+  </a-tooltip>
+</template>

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

@@ -51,15 +51,11 @@ const Icon = computed(() => {
 })
 </script>
 
-<script lang="ts">
-export default {
-  name: 'LockMenu',
-}
-</script>
-
 <template>
   <a-dropdown max-width="350" :trigger="['click']">
-    <Icon class="mx-1 nc-view-lock-menu text-grey"> mdi-lock-outline </Icon>
+    <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-toolbar/Reload.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import { ReloadViewDataHookInj } from '~/context'
 import MdiReloadIcon from '~icons/mdi/reload'
+
 const reloadTri = inject(ReloadViewDataHookInj)
 </script>
 
 <template>
-  <MdiReloadIcon class="text-grey" @click="reloadTri.trigger()" />
+  <a-tooltip placement="left">
+    <template #title> {{ $t('general.reload') }} </template>
+
+    <div class="nc-sidebar-right-item hover:after:bg-green-500 group">
+      <MdiReloadIcon class="group-hover:(!text-white)" @click="reloadTri.trigger()" />
+    </div>
+  </a-tooltip>
 </template>
 
 <style scoped></style>

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

@@ -1,18 +1,13 @@
 <script lang="ts" setup>
 import MdiOpenInNew from '~icons/mdi/open-in-new'
+import { useUIPermission } from '#imports'
+
 const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
-  <div>
+  <div v-t="['c:view:share']" class="nc-sidebar-right-item hover:after:bg-secondary/75 group">
-    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small">
+    <MdiOpenInNew class="group-hover:(!text-white)" />
-      <div class="flex align-center gap-1">
+    {{ $t('activity.shareView') }}
-        <MdiOpenInNew class="text-grey" />
-        <!-- Share View -->
-        {{ $t('activity.shareView') }}
-      </div>
-    </a-button>
   </div>
 </template>
-
-<style scoped />

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

@@ -7,9 +7,8 @@ const drawerOpen = inject('navDrawerOpen', ref(false))
 <template>
   <a-tooltip placement="left">
     <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
-    <MdiMenuClose
+    <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
-      class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)"
+      <MdiMenuClose class="group-hover:(!text-white)" @click="drawerOpen = !drawerOpen" />
-      @click="drawerOpen = !drawerOpen"
+    </div>
-    />
   </a-tooltip>
 </template>

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

@@ -94,7 +94,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
-    <div class="flex-auto justify-end flex flex-col gap-4 lg:gap-8 mt-4">
+    <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
         @click="onApiSnippet"

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

@@ -72,11 +72,23 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
-        <MdiHook class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" />
+        <a-tooltip placement="left">
+          <template #title> {{ $t('objects.webhooks') }} </template>
+
+          <div class="nc-sidebar-right-item hover:after:bg-gray-300">
+            <MdiHook />
+          </div>
+        </a-tooltip>
 
         <div class="dot" />
 
-        <MdiXml class="rounded text-xl p-1 text-gray-500 hover:(text-white bg-pink-500 shadow)" />
+        <a-tooltip placement="left">
+          <template #title> Get API Snippet </template>
+
+          <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
+            <MdiXml class="group-hover:!text-white" />
+          </div>
+        </a-tooltip>
 
         <div class="dot" />
       </template>