fix: Added tooltip to pagination button for shortcuts and updated in shortcuts info modal

packages/nc-gui/components/dlg/KeyboardShortcuts.vue

@@ -52,6 +52,22 @@ const shortcutList = [
   {
     title: 'Grid View',
     shortcuts: [
+      {
+        keys: [renderAltOrOptlKey(), '←'],
+        behaviour: 'Navigate to previous page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '→'],
+        behaviour: 'Navigate to next page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '↑'],
+        behaviour: 'Navigate to last page',
+      },
+      {
+        keys: [renderAltOrOptlKey(), '↓'],
+        behaviour: 'Navigate to first page',
+      },
       {
         keys: [renderCmdOrCtrlKey(), '←'],
         behaviour: 'Jump to leftmost column in this row',

packages/nc-gui/components/nc/Pagination.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import NcTooltip from '~/components/nc/Tooltip.vue'
+
 const props = defineProps<{
   current: number
   total: number
   pageSize: number
   entityName?: string
   mode?: 'simple' | 'full'
+  prevPageTooltip?: string
+  nextPageTooltip?: string
+  firstPageTooltip?: string
+  lastPageTooltip?: string
 }>()
 
 const emits = defineEmits(['update:current', 'update:pageSize'])
@@ -51,28 +57,38 @@ const pagesList = computed(() => {
 
 <template>
   <div class="nc-pagination flex flex-row items-center gap-x-2">
-    <NcButton
-      v-if="mode === 'full'"
-      v-e="[`a:pagination:${entityName}:first-page`]"
-      class="first-page"
-      type="secondary"
-      size="small"
-      :disabled="current === 1"
-      @click="goToFirstPage"
-    >
-      <GeneralIcon icon="doubleLeftArrow" />
-    </NcButton>
-
-    <NcButton
-      v-e="[`a:pagination:${entityName}:prev-page`]"
-      class="prev-page"
-      type="secondary"
-      size="small"
-      :disabled="current === 1"
-      @click="changePage({ increase: false })"
-    >
-      <GeneralIcon icon="arrowLeft" />
-    </NcButton>
+    <component :is="props.firstPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
+      <template v-if="props.firstPageTooltip" #title>
+        {{ props.firstPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:first-page`]"
+        class="first-page"
+        type="secondary"
+        size="small"
+        :disabled="current === 1"
+        @click="goToFirstPage"
+      >
+        <GeneralIcon icon="doubleLeftArrow" />
+      </NcButton>
+    </component>
+
+    <component :is="props.prevPageTooltip && mode === 'full' ? NcTooltip : 'div'">
+      <template v-if="props.prevPageTooltip" #title>
+        {{ props.prevPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:prev-page`]"
+        class="prev-page"
+        type="secondary"
+        size="small"
+        :disabled="current === 1"
+        @click="changePage({ increase: false })"
+      >
+        <GeneralIcon icon="arrowLeft" />
+      </NcButton>
+    </component>
+
     <div v-if="!isMobileMode" class="text-gray-600">
       <a-select v-model:value="current" class="!mr-[2px]" :options="pagesList">
         <template #suffixIcon>
@@ -85,28 +101,37 @@ const pagesList = computed(() => {
       </span>
     </div>
 
-    <NcButton
-      v-e="[`a:pagination:${entityName}:next-page`]"
-      class="next-page"
-      type="secondary"
-      size="small"
-      :disabled="current === totalPages"
-      @click="changePage({ increase: true })"
-    >
-      <GeneralIcon icon="arrowRight" />
-    </NcButton>
-
-    <NcButton
-      v-if="mode === 'full'"
-      v-e="[`a:pagination:${entityName}:last-page`]"
-      class="last-page"
-      type="secondary"
-      size="small"
-      :disabled="current === totalPages"
-      @click="goToLastPage"
-    >
-      <GeneralIcon icon="doubleRightArrow" />
-    </NcButton>
+    <component :is="props.nextPageTooltip && mode === 'full' ? NcTooltip : 'div'">
+      <template v-if="props.nextPageTooltip" #title>
+        {{ props.nextPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:next-page`]"
+        class="next-page"
+        type="secondary"
+        size="small"
+        :disabled="current === totalPages"
+        @click="changePage({ increase: true })"
+      >
+        <GeneralIcon icon="arrowRight" />
+      </NcButton>
+    </component>
+
+    <component :is="props.lastPageTooltip && mode === 'full' ? NcTooltip : 'div'" v-if="mode === 'full'">
+      <template v-if="props.lastPageTooltip" #title>
+        {{ props.lastPageTooltip }}
+      </template>
+      <NcButton
+        v-e="[`a:pagination:${entityName}:last-page`]"
+        class="last-page"
+        type="secondary"
+        size="small"
+        :disabled="current === totalPages"
+        @click="goToLastPage"
+      >
+        <GeneralIcon icon="doubleRightArrow" />
+      </NcButton>
+    </component>
   </div>
 </template>
 

packages/nc-gui/components/smartsheet/Pagination.vue

@@ -62,6 +62,10 @@ const page = computed({
 })
 
 const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Language))
+
+const renderAltOrOptlKey = () => {
+  return isMac() ? '⌥' : 'ALT'
+}
 </script>
 
 <template>
@@ -107,6 +111,10 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
         :class="{ 'rtl-pagination': isRTLLanguage }"
         :total="+count"
         entity-name="grid"
+        :prev-page-tooltip="`${renderAltOrOptlKey()}+←`"
+        :next-page-tooltip="`${renderAltOrOptlKey()}+→`"
+        :first-page-tooltip="`${renderAltOrOptlKey()}+↓`"
+        :last-page-tooltip="`${renderAltOrOptlKey()}+↑`"
       />
       <div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
         <span class="text-xs" style="white-space: nowrap"> Change page:</span>