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

Added private event visual feedback

Browse Source
This commit is contained in:
Alexis
2024-06-09 17:20:21 +02:00
parent 737ee6739b
commit 92850861cd
3 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/calendar/CalendarEvent.vue
View File

@@ -60,6 +60,7 @@ onMounted(() => {
class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200" class="text-xs px-2 py-1 block w-full text-left rounded-sm focus-visible:bg-red-200"
:class=" :class="
cn({ cn({
'italic': event.hidden,
'text-white bg-slate-600 hover:bg-slate-700': !event.category, 'text-white bg-slate-600 hover:bg-slate-700': !event.category,
'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance', 'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort', 'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',

16
components/calendar/CalendarEventDetails.vue
View File

@@ -9,7 +9,8 @@ import {
PhHourglassHigh, PhHourglassHigh,
PhHourglassLow, PhHourglassLow,
PhMapPinArea, PhMapPinArea,
PhDotsThreeOutlineVertical PhDotsThreeOutlineVertical,
PhEye
} from '@phosphor-icons/vue' } from '@phosphor-icons/vue'
const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar() const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
@@ -189,6 +190,19 @@ function deployDeleteModal() {
</button> </button>
</UiBadge> </UiBadge>
</nav> </nav>
<UiTooltipProvider v-if="event.hidden" :delay-duration="250">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiBadge class="absolute -top-2 right-2 flex gap-1 hover:bg-slate-300 hover:opacity-100">
<PhEye size="16" weight="fill" /> Évènement privé
</UiBadge>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Cet évènement est uniquement visible pour vous</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</UiPopoverContent> </UiPopoverContent>
</template> </template>

20
components/calendar/search/lists/EventCallout.vue
View File

@@ -3,7 +3,7 @@ import type { RPGDate } from '@/models/Date'
import type { CalendarEvent } from '@/models/CalendarEvent' import type { CalendarEvent } from '@/models/CalendarEvent'
import { useCalendar } from '@/stores/CalendarStore' import { useCalendar } from '@/stores/CalendarStore'
import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea } from '@phosphor-icons/vue' import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
const props = defineProps<{ const props = defineProps<{
event: CalendarEvent event: CalendarEvent
@@ -27,6 +27,7 @@ const dateDuration: string | null = props.event.endDate
<button <button
class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors" class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
:class="{ :class="{
'pt-4': event.hidden,
'text-white bg-slate-600 hover:bg-slate-700': !event.category, 'text-white bg-slate-600 hover:bg-slate-700': !event.category,
'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance', 'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort', 'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
@@ -49,8 +50,8 @@ const dateDuration: string | null = props.event.endDate
}" }"
@click="$emit('query:date-jump', event.startDate)" @click="$emit('query:date-jump', event.startDate)"
> >
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center mb-1">
<h2 class="font-bold"> <h2 class="font-bold text-lg">
{{ event.title }} {{ event.title }}
</h2> </h2>
<div v-if="event.wiki"> <div v-if="event.wiki">
@@ -115,5 +116,18 @@ const dateDuration: string | null = props.event.endDate
{{ event.description }} {{ event.description }}
</span> </span>
</div> </div>
<UiTooltipProvider v-if="event.hidden" :delay-duration="250">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiBadge class="absolute -top-2 left-2 flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
<PhEye size="16" weight="fill" /> Évènement privé
</UiBadge>
</UiTooltipTrigger>
<UiTooltipContent>
<p>Cet évènement est uniquement visible pour vous</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</button> </button>
</template> </template>