Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added tooltips to facilitate navigation

Browse Source
This commit is contained in:
Alexis
2024-04-03 17:42:46 +02:00
parent 015509abf8
commit d62cd1dea1
9 changed files with 182 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/calendar/CalendarEvent.vue
View File

@@ -1,26 +1,20 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { Popover, PopoverTrigger } from '@/components/ui/popover'
import type { CalendarEvent } from '@/stores/events'
import CalendarEventDetails from './CalendarEventDetails.vue'
const props = defineProps<{
defineProps<{
event: CalendarEvent
}>()
const eventTitleExcerpt = computed(() => {
if (props.event.title.length > 20) return props.event.title.substring(0, 20) + '…'
return props.event.title
})
</script>
<template>
<Popover>
<PopoverTrigger as-child>
<button
class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800"
class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800 whitespace-nowrap overflow-hidden text-ellipsis"
>
{{ eventTitleExcerpt }}
{{ event.title }}
</button>
</PopoverTrigger>

89
src/components/calendar/CalendarMenu.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { computed } from 'vue'
import {
Select,
SelectContent,
@@ -7,17 +8,22 @@ import {
SelectTrigger,
SelectValue
} from '@/components/ui/select'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { useCalendar } from '@/stores/calendar'
import Button from '../ui/button/Button.vue'
const {
currentConfig,
currentDate,
defaultDate,
viewTypeOptions,
decrementMonth,
incrementMonth,
jumpToDefaultDate
jumpToDefaultDate,
getFormattedDateTitle
} = useCalendar()
const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, true))
</script>
<template>
@@ -28,39 +34,66 @@ const {
<div class="flex items-center gap-6">
<menu class="flex items-center gap-2">
<li>
<Button @click="jumpToDefaultDate" size="sm"> Today </Button>
<TooltipProvider :delayDuration="250">
<Tooltip>
<TooltipTrigger>
<Button @click="jumpToDefaultDate" size="sm"> Aujourd'hui </Button>
</TooltipTrigger>
<TooltipContent>
<p>{{ defaultDateFormatted }}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</li>
<li>
<!-- Implement decrementDate to account for other mods -->
<Button variant="outline" size="icon" @click="decrementMonth">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="#FFF"
viewBox="0 0 256 256"
>
<path
d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
/>
</svg>
</Button>
<TooltipProvider :delayDuration="250">
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="decrementMonth">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="#FFF"
viewBox="0 0 256 256"
>
<path
d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
/>
</svg>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Mois précédent</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</li>
<li>
<!-- Implement decrementDate to account for other mods -->
<Button variant="outline" size="icon" @click="incrementMonth">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="#FFF"
viewBox="0 0 256 256"
>
<path
d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
/>
</svg>
</Button>
<TooltipProvider :delayDuration="250">
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="incrementMonth">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="#FFF"
viewBox="0 0 256 256"
>
<path
d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
/>
</svg>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Mois suivant</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</li>
</menu>
<h1 class="text-2xl font-bold">

7
src/components/calendar/CalendarTile.vue
View File

@@ -40,8 +40,11 @@ const isDefaultDate = computed(() => {
>{{ date.day }}</span
>
</div>
<ul v-if="eventsForTheDay.length > 0" class="absolute top-12 bottom-0 inset-x-2 grid gap-1">
<li v-for="event in eventsForTheDay" :key="event.title">
<ul
v-if="eventsForTheDay.length > 0"
class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1"
>
<li v-for="event in eventsForTheDay" :key="event.title" class="grid">
<CalendarEvent :event />
</li>
</ul>

22
src/components/calendar/state/Monthly.vue
View File

@@ -3,8 +3,9 @@ import type { LeimDate } from '@/models/Date'
import { useCalendar } from '@/stores/calendar'
import { computed } from 'vue'
import CalendarTile from '../CalendarTile.vue'
import { useThrottleFn } from '@vueuse/core'
const { staticConfig, currentDate } = useCalendar()
const { staticConfig, currentDate, decrementMonth, incrementMonth } = useCalendar()
const daysPerMonth = computed(() => staticConfig.daysPerMonth)
@@ -32,10 +33,27 @@ function getNextMonthDate(day: number): LeimDate {
period: nextPeriod
}
}
function handleWheel(e: WheelEvent) {
const isMovingUp = e.deltaY < 0
if (isMovingUp) {
moveCalendarLeft()
} else {
moveCalendarRight()
}
}
const moveCalendarLeft = useThrottleFn(() => {
decrementMonth()
}, 100)
const moveCalendarRight = useThrottleFn(() => {
incrementMonth()
}, 100)
</script>
<template>
<div class="grid" :class="`grid-cols-10`">
<div class="grid" :class="`grid-cols-10`" @wheel="handleWheel">
<CalendarTile
v-for="day in daysPerMonth"
:key="day"