From f10b97154dc3d79ad96b2974abb1d3acb449b5fb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:13 +0000
Subject: [PATCH] fix(nc-gui): tooltips

---
 .../nc-gui/components/nc/DateWeekSelector.vue | 23 ++++++++++++++-----
 .../components/nc/MonthYearSelector.vue       | 22 +++++++++++++-----
 packages/nc-gui/lang/en.json                  |  4 ++++
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index 12188cac56..4810e284c9 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -140,13 +140,24 @@ const paginate = (action: 'next' | 'prev') => {
       }"
       class="flex items-center"
     >
-      <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
-        <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('prev')">
+          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.previousMonth') }}</span>
+        </template>
+      </NcTooltip>
+
       <span class="font-bold text-gray-700">{{ currentMonth }}</span>
-      <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
-        <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton v-if="!disablePagination" size="small" type="secondary" @click="paginate('next')">
+          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.nextMonth') }}</span>
+        </template>
+      </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
       <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
index cd680402be..3e8dfd7905 100644
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -91,13 +91,23 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
 <template>
   <div class="p-4 flex flex-col gap-4">
     <div class="flex justify-between items-center">
-      <NcButton size="small" type="secondary" @click="paginate('prev')">
-        <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton size="small" type="secondary" @click="paginate('prev')">
+          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.previousYear') }}</span>
+        </template>
+      </NcTooltip>
       <span class="font-bold text-gray-700">{{ yearPicker ? 'Select Year' : currentYear }}</span>
-      <NcButton size="small" type="secondary" @click="paginate('next')">
-        <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-      </NcButton>
+      <NcTooltip>
+        <NcButton size="small" type="secondary" @click="paginate('next')">
+          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+        </NcButton>
+        <template #title>
+          <span>{{ $t('labels.nextYear') }}</span>
+        </template>
+      </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[350px]">
       <div class="grid grid-cols-4 gap-2 p-2">
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 77e01b836e..b237c11f57 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -437,6 +437,10 @@
     "ssoSettings": "SSO Settings",
     "organizeRecordsBy": "Organize records by",
     "organizeBy": "Organize by",
+    "previousYear": "Previous Year",
+    "previousMonth": "Previous Month",
+    "nextMonth": "Next Month",
+    "nextYear": "Next Year",
     "organiseBy": "Organise by",
     "heading1": "Heading 1",
     "heading2": "Heading 2",