fix: added tooltip for note date

This commit is contained in:
Shariq Ansari 2023-08-28 00:07:10 +05:30
parent aaab61554d
commit 3c0f5289d1
2 changed files with 15 additions and 10 deletions

View File

@ -12,8 +12,8 @@
<FeatherIcon name="plus" class="w-4 h-4" /> <FeatherIcon name="plus" class="w-4 h-4" />
</Button> </Button>
</div> </div>
<div v-if="activities.length"> <div v-if="activities.length" class="overflow-y-auto">
<div v-if="title == 'Notes'" class="grid grid-cols-2 gap-4 p-5 pt-0"> <div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 p-5 pt-0">
<div <div
v-for="note in activities" 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" 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 }} {{ note.owner }}
</div> </div>
</div> </div>
<div class="text-sm text-gray-700"> <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
{{ timeAgo(note.modified) }} <div class="text-sm text-gray-700">
</div> {{ timeAgo(note.modified) }}
</div>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>

View File

@ -10,7 +10,7 @@
</template> </template>
</LayoutHeader> </LayoutHeader>
<div class="border-b"></div> <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 <div
v-for="note in notes.data" 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" 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 }} {{ note.owner }}
</div> </div>
</div> </div>
<div class="text-sm text-gray-700"> <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
{{ timeAgo(note.modified) }} <div class="text-sm text-gray-700">
</div> {{ timeAgo(note.modified) }}
</div>
</Tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -79,7 +81,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue' import NoteIcon from '@/components/Icons/NoteIcon.vue'
import NoteModal from '@/components/NoteModal.vue' import NoteModal from '@/components/NoteModal.vue'
import { timeAgo } from '@/utils' import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { import {
FeatherIcon, FeatherIcon,
Button, Button,
@ -88,6 +90,7 @@ import {
TextInput, TextInput,
call, call,
Dropdown, Dropdown,
Tooltip,
} from 'frappe-ui' } from 'frappe-ui'
import { ref } from 'vue' import { ref } from 'vue'