From cbbb7020294b88fca6c5d6aa4b34948405dc6c80 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:15:57 +0000
Subject: [PATCH] feat(nc-gui): add tooltip

---
 .../components/smartsheet/calendar/index.vue  | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index d9e0def1a9..305bf4f142 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -143,13 +143,19 @@ const headerText = computed(() => {
     <div class="flex flex-col w-full">
       <div class="flex justify-between p-3 items-center border-b-1 border-gray-200">
         <div class="flex justify-start gap-3 items-center">
-          <NcButton size="small" type="secondary" @click="paginateCalendarView('prev')">
-            <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-          </NcButton>
+          <NcTooltip>
+            <template #title> Previous </template>
+            <NcButton size="small" type="secondary" @click="paginateCalendarView('prev')">
+              <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+            </NcButton>
+          </NcTooltip>
+
           <NcDropdown :auto-close="false">
             <NcButton size="small" type="secondary">
-              <span class="font-bold text-center text-brand-500">{{ headerText }}</span>
-              <component :is="iconMap.downArrow" class="h-4 w-4" />
+              <div class="flex gap-2 items-center">
+                <span class="font-bold text-center text-brand-500">{{ headerText }}</span>
+                <component :is="iconMap.arrowDown" class="h-4 w-4 text-gray-700" />
+              </div>
             </NcButton>
 
             <template #overlay>
@@ -181,9 +187,12 @@ const headerText = computed(() => {
               </div>
             </template>
           </NcDropdown>
-          <NcButton size="small" type="secondary" @click="paginateCalendarView('next')">
-            <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-          </NcButton>
+          <NcTooltip>
+            <template #title> Next </template>
+            <NcButton size="small" type="secondary" @click="paginateCalendarView('next')">
+              <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+            </NcButton>
+          </NcTooltip>
           <NcButton
             v-if="!isMobileMode"
             size="small"
@@ -202,9 +211,12 @@ const headerText = computed(() => {
             Go to Today
           </NcButton>
         </div>
-        <NcButton v-if="!isMobileMode" size="small" type="secondary" @click="showSideMenu = !showSideMenu">
-          <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-700 transition-all" />
-        </NcButton>
+        <NcTooltip>
+          <template #title> Toggle Sidebar </template>
+          <NcButton v-if="!isMobileMode" size="small" type="secondary" @click="showSideMenu = !showSideMenu">
+            <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-700 transition-all" />
+          </NcButton>
+        </NcTooltip>
       </div>
       <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" class="flex-grow-1" />
       <template v-if="!isCalendarDataLoading">