From 3c0f5289d1835beacb5499b7ab7550784dde77b5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 28 Aug 2023 00:07:10 +0530
Subject: [PATCH] fix: added tooltip for note date

---
 frontend/src/components/Activities.vue | 12 +++++++-----
 frontend/src/pages/Notes.vue           | 13 ++++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index cb7cc0b8..4846d4cc 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -12,8 +12,8 @@
       <FeatherIcon name="plus" class="w-4 h-4" />
     </Button>
   </div>
-  <div v-if="activities.length">
-    <div v-if="title == 'Notes'" class="grid grid-cols-2 gap-4 p-5 pt-0">
+  <div v-if="activities.length" class="overflow-y-auto">
+    <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0">
       <div
         v-for="note in activities"
         class="group flex flex-col justify-between gap-2 px-4 py-3 border rounded-lg h-48 shadow-sm hover:bg-gray-50 cursor-pointer"
@@ -55,9 +55,11 @@
               {{ note.owner }}
             </div>
           </div>
-          <div class="text-sm text-gray-700">
-            {{ timeAgo(note.modified) }}
-          </div>
+          <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
+            <div class="text-sm text-gray-700">
+              {{ timeAgo(note.modified) }}
+            </div>
+          </Tooltip>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 1b9c0cec..a94403ed 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -10,7 +10,7 @@
     </template>
   </LayoutHeader>
   <div class="border-b"></div>
-  <div v-if="notes.data?.length" class="grid grid-cols-3 gap-4 p-5">
+  <div v-if="notes.data?.length" class="grid grid-cols-4 gap-4 p-5 overflow-y-auto">
     <div
       v-for="note in notes.data"
       class="group flex flex-col justify-between gap-2 px-5 py-4 border rounded-lg h-56 shadow-sm hover:bg-gray-50 cursor-pointer"
@@ -51,9 +51,11 @@
             {{ note.owner }}
           </div>
         </div>
-        <div class="text-sm text-gray-700">
-          {{ timeAgo(note.modified) }}
-        </div>
+        <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
+          <div class="text-sm text-gray-700">
+            {{ timeAgo(note.modified) }}
+          </div>
+        </Tooltip>
       </div>
     </div>
   </div>
@@ -79,7 +81,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import NoteModal from '@/components/NoteModal.vue'
-import { timeAgo } from '@/utils'
+import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import {
   FeatherIcon,
   Button,
@@ -88,6 +90,7 @@ import {
   TextInput,
   call,
   Dropdown,
+Tooltip,
 } from 'frappe-ui'
 import { ref } from 'vue'