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

Added light friendly event details

Browse Source
This commit is contained in:
Alexis
2024-09-01 12:16:36 +02:00
parent 6782b9bd41
commit 44b0339874
7 changed files with 106 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
assets/main.css
View File

@@ -136,67 +136,125 @@
@apply text-slate-900 bg-white hover:bg-yellow-200 @apply text-slate-900 bg-white hover:bg-yellow-200
} }
.event-details-red { .dark .event-details-red {
--base-color: var(--color-red-800); --base-color: var(--color-red-800);
} }
.event-details-orange { .dark .event-details-orange {
--base-color: var(--color-orange-800); --base-color: var(--color-orange-800);
} }
.event-details-amber { .dark .event-details-amber {
--base-color: var(--color-amber-800); --base-color: var(--color-amber-800);
} }
.event-details-yellow { .dark .event-details-yellow {
--base-color: var(--color-yellow-800); --base-color: var(--color-yellow-800);
} }
.event-details-lime { .dark .event-details-lime {
--base-color: var(--color-lime-800); --base-color: var(--color-lime-800);
} }
.event-details-green { .dark .event-details-green {
--base-color: var(--color-green-800); --base-color: var(--color-green-800);
} }
.event-details-emerald { .dark .event-details-emerald {
--base-color: var(--color-emerald-800); --base-color: var(--color-emerald-800);
} }
.event-details-teal { .dark .event-details-teal {
--base-color: var(--color-teal-800); --base-color: var(--color-teal-800);
} }
.event-details-cyan { .dark .event-details-cyan {
--base-color: var(--color-cyan-800); --base-color: var(--color-cyan-800);
} }
.event-details-sky { .dark .event-details-sky {
--base-color: var(--color-sky-800); --base-color: var(--color-sky-800);
} }
.event-details-blue { .dark .event-details-blue {
--base-color: var(--color-blue-800); --base-color: var(--color-blue-800);
} }
.event-details-indigo { .dark .event-details-indigo {
--base-color: var(--color-indigo-800); --base-color: var(--color-indigo-800);
} }
.event-details-violet { .dark .event-details-violet {
--base-color: var(--color-violet-800); --base-color: var(--color-violet-800);
} }
.event-details-purple { .dark .event-details-purple {
--base-color: var(--color-purple-800); --base-color: var(--color-purple-800);
} }
.event-details-fuchsia { .dark .event-details-fuchsia {
--base-color: var(--color-fuchsia-800); --base-color: var(--color-fuchsia-800);
} }
.event-details-pink { .dark .event-details-pink {
--base-color: var(--color-pink-800); --base-color: var(--color-pink-800);
} }
.event-details-rose { .dark .event-details-rose {
--base-color: var(--color-rose-800); --base-color: var(--color-rose-800);
} }
.event-details-black { .dark .event-details-black {
--base-color: var(--color-stone-800); --base-color: var(--color-stone-800);
} }
.dark .event-details-white {
--base-color: var(--color-white);
}
.event-details-red {
--base-color: var(--color-red-300);
}
.event-details-orange {
--base-color: var(--color-orange-300);
}
.event-details-amber {
--base-color: var(--color-amber-300);
}
.event-details-yellow {
--base-color: var(--color-yellow-300);
}
.event-details-lime {
--base-color: var(--color-lime-300);
}
.event-details-green {
--base-color: var(--color-green-300);
}
.event-details-emerald {
--base-color: var(--color-emerald-300);
}
.event-details-teal {
--base-color: var(--color-teal-300);
}
.event-details-cyan {
--base-color: var(--color-cyan-300);
}
.event-details-sky {
--base-color: var(--color-sky-300);
}
.event-details-blue {
--base-color: var(--color-blue-300);
}
.event-details-indigo {
--base-color: var(--color-indigo-300);
}
.event-details-violet {
--base-color: var(--color-violet-300);
}
.event-details-purple {
--base-color: var(--color-purple-300);
}
.event-details-fuchsia {
--base-color: var(--color-fuchsia-300);
}
.event-details-pink {
--base-color: var(--color-pink-300);
}
.event-details-rose {
--base-color: var(--color-rose-300);
}
.event-details-black {
--base-color: var(--color-stone-300);
}
.event-details-white { .event-details-white {
--base-color: var(--color-white); --base-color: var(--color-white);
} }
.event-details { .event-details {
--bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%); --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%);
--border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%); --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%);
background-color: var(--bg-color); background-color: var(--bg-color);
border-color: var(--border-color); border-color: var(--border-color);
@@ -205,6 +263,11 @@
} }
} }
.dark .event-details {
--bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
--border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
}
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all .5s ease; transition: all .5s ease;

20
components/calendar/CalendarEventDetails.vue
View File

@@ -62,7 +62,7 @@ function deployDeleteModal() {
<template> <template>
<UiPopoverContent <UiPopoverContent
class=" w-96 bg-slate-900 border-slate-800" class=" w-96 "
:align="'center'" :align="'center'"
:align-offset="50" :align-offset="50"
:side="'left'" :side="'left'"
@@ -96,15 +96,15 @@ function deployDeleteModal() {
<div class="mb-1 space-y-1"> <div class="mb-1 space-y-1">
<template v-if="event.location"> <template v-if="event.location">
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhMapPinArea size="16" weight="fill" /> {{ event.location }} <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
</p> </p>
</template> </template>
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhAlarm size="16" weight="fill" /> {{ dateDifference }} <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
</p> </p>
<template v-if="dateDuration"> <template v-if="dateDuration">
<p class="text-sm italic opacity-75 flex items-center gap-1"> <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }} <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
</p> </p>
</template> </template>
@@ -113,13 +113,13 @@ function deployDeleteModal() {
<template v-if="event.category || event.secondaryCategories"> <template v-if="event.category || event.secondaryCategories">
<ul class="flex gap-1"> <ul class="flex gap-1">
<li v-if="event.category"> <li v-if="event.category">
<UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ event.category?.name }} {{ event.category?.name }}
</UiBadge> </UiBadge>
</li> </li>
<li v-for="cat in event.secondaryCategories" :key="cat.id"> <li v-for="cat in event.secondaryCategories" :key="cat.id">
<UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary"> <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
{{ cat.name }} {{ cat.name }}
</UiBadge> </UiBadge>
</li> </li>
@@ -129,7 +129,7 @@ function deployDeleteModal() {
<template v-if="event.description"> <template v-if="event.description">
<hr class="border-slate-500 mt-2" > <hr class="border-slate-500 mt-2" >
<div class="mt-2 text-sm text-slate-300"> <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
{{ event.description }} {{ event.description }}
</div> </div>
</template> </template>
@@ -138,7 +138,7 @@ function deployDeleteModal() {
<menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })"> <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
<UiPopover v-model:open="commandMenuOpened"> <UiPopover v-model:open="commandMenuOpened">
<UiPopoverTrigger as-child> <UiPopoverTrigger as-child>
<UiButton size="icon" variant="ghost"> <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
<PhDotsThreeOutlineVertical size="20" weight="fill" /> <PhDotsThreeOutlineVertical size="20" weight="fill" />
</UiButton> </UiButton>
</UiPopoverTrigger> </UiPopoverTrigger>
@@ -156,7 +156,7 @@ function deployDeleteModal() {
</menu> </menu>
<nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2"> <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
<UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child> <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
<button <button
class="flex gap-1" class="flex gap-1"
title="Naviguer au début" title="Naviguer au début"
@@ -165,7 +165,7 @@ function deployDeleteModal() {
<PhHourglassHigh size="16" weight="fill" /> Début <PhHourglassHigh size="16" weight="fill" /> Début
</button> </button>
</UiBadge> </UiBadge>
<UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin"> <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
<button <button
class="flex gap-1" class="flex gap-1"
title="Naviguer à la fin" title="Naviguer à la fin"

2
components/calendar/form/CreateEvent.vue
View File

@@ -88,7 +88,7 @@ function handleCancel() {
:collision-padding="60" :collision-padding="60"
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="pl-3 min-w-96 bg-slate-900 border-slate-800" class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"

4
components/calendar/form/DeleteEvent.vue
View File

@@ -63,7 +63,7 @@ function handleCancel(): void {
<UiAlertDialogContent <UiAlertDialogContent
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="min-w-96 bg-slate-900 border-slate-800" class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@@ -85,7 +85,7 @@ function handleCancel(): void {
</div> </div>
<footer class="flex gap-2 justify-between"> <footer class="flex gap-2 justify-between">
<UiButton type="button" size="sm" variant="ghost" @click="() => isDeleteEventModalOpen = false"> <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
Retour Retour
</UiButton> </UiButton>

7
components/calendar/form/UpdateEvent.vue
View File

@@ -1,6 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue" import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
import { VisuallyHidden } from "radix-vue"
const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar() const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar()) const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
@@ -64,19 +63,19 @@ function handleCancel() {
<UiDialogContent <UiDialogContent
:disable-outside-pointer-events="true" :disable-outside-pointer-events="true"
:trap-focus="true" :trap-focus="true"
class="pl-3 min-w-96 bg-slate-900 border-slate-800" class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
@escape-key-down="handleClosing" @escape-key-down="handleClosing"
@focus-outside="handleClosing" @focus-outside="handleClosing"
@interact-outside="handleClosing" @interact-outside="handleClosing"
@pointer-down-outside="(e) => e.preventDefault()" @pointer-down-outside="(e) => e.preventDefault()"
> >
<VisuallyHidden> <header class="pl-8 grid gap-y-2">
<UiDialogTitle> Modifier l'évènement</UiDialogTitle> <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
<UiDialogDescription> <UiDialogDescription>
Mettre à jour les données de l'évènement Mettre à jour les données de l'évènement
</UiDialogDescription> </UiDialogDescription>
</VisuallyHidden> </header>
<form @submit.prevent="handleAction"> <form @submit.prevent="handleAction">
<div class="grid grid-cols-2 gap-y-3"> <div class="grid grid-cols-2 gap-y-3">

9
components/calendar/input/RPGDate.vue
View File

@@ -117,7 +117,7 @@ function handleValueReset() {
v-if="model" v-if="model"
align="start" align="start"
side="bottom" side="bottom"
class="bg-slate-900 border-slate-800" class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
> >
<div class="grid grid-cols-2 items-center gap-x-2 gap-y-3"> <div class="grid grid-cols-2 items-center gap-x-2 gap-y-3">
<UiSelect @update:model-value="handleMonthChange"> <UiSelect @update:model-value="handleMonthChange">
@@ -151,8 +151,11 @@ function handleValueReset() {
<button <button
v-for="day in monthData.days" v-for="day in monthData.days"
:key="`popover-day-grid-${id}-${day}`" :key="`popover-day-grid-${id}-${day}`"
class="aspect-square rounded-full text-[.8em] transition-colors hover:bg-slate-700" class="aspect-square rounded-full text-[.8em] transition-colors"
:class="{'bg-blue-500 hover:bg-blue-700': day === model.day}" :class="{
'hover:bg-indigo-200 dark:hover:bg-indigo-700': day !== model.day,
'bg-indigo-500 hover:bg-indigo-700 text-white': day === model.day
}"
@click="setModelDay(day)" @click="setModelDay(day)"
> >
{{ day }} {{ day }}

2
components/calendar/state/monthly/DayTile.vue
View File

@@ -88,7 +88,7 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700" class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
:class="{ :class="{
'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate, 'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate 'text-white bg-indigo-500': isSelectedDate
}" }"
> >
{{ date.day }} {{ date.day }}