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
}
.event-details-red {
.dark .event-details-red {
--base-color: var(--color-red-800);
}
.event-details-orange {
.dark .event-details-orange {
--base-color: var(--color-orange-800);
}
.event-details-amber {
.dark .event-details-amber {
--base-color: var(--color-amber-800);
}
.event-details-yellow {
.dark .event-details-yellow {
--base-color: var(--color-yellow-800);
}
.event-details-lime {
.dark .event-details-lime {
--base-color: var(--color-lime-800);
}
.event-details-green {
.dark .event-details-green {
--base-color: var(--color-green-800);
}
.event-details-emerald {
.dark .event-details-emerald {
--base-color: var(--color-emerald-800);
}
.event-details-teal {
.dark .event-details-teal {
--base-color: var(--color-teal-800);
}
.event-details-cyan {
.dark .event-details-cyan {
--base-color: var(--color-cyan-800);
}
.event-details-sky {
.dark .event-details-sky {
--base-color: var(--color-sky-800);
}
.event-details-blue {
.dark .event-details-blue {
--base-color: var(--color-blue-800);
}
.event-details-indigo {
.dark .event-details-indigo {
--base-color: var(--color-indigo-800);
}
.event-details-violet {
.dark .event-details-violet {
--base-color: var(--color-violet-800);
}
.event-details-purple {
.dark .event-details-purple {
--base-color: var(--color-purple-800);
}
.event-details-fuchsia {
.dark .event-details-fuchsia {
--base-color: var(--color-fuchsia-800);
}
.event-details-pink {
.dark .event-details-pink {
--base-color: var(--color-pink-800);
}
.event-details-rose {
.dark .event-details-rose {
--base-color: var(--color-rose-800);
}
.event-details-black {
.dark .event-details-black {
--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 {
--base-color: var(--color-white);
}
.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%);
--bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%);
--border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%);
background-color: var(--bg-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-leave-active {
transition: all .5s ease;

20
components/calendar/CalendarEventDetails.vue
View File

@@ -62,7 +62,7 @@ function deployDeleteModal() {
<template>
<UiPopoverContent
class=" w-96 bg-slate-900 border-slate-800"
class=" w-96 "
:align="'center'"
:align-offset="50"
:side="'left'"
@@ -96,15 +96,15 @@ function deployDeleteModal() {
<div class="mb-1 space-y-1">
<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 }}
</p>
</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 }}
</p>
<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 }}
</p>
</template>
@@ -113,13 +113,13 @@ function deployDeleteModal() {
<template v-if="event.category || event.secondaryCategories">
<ul class="flex gap-1">
<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 }}
</UiBadge>
</li>
<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 }}
</UiBadge>
</li>
@@ -129,7 +129,7 @@ function deployDeleteModal() {
<template v-if="event.description">
<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 }}
</div>
</template>
@@ -138,7 +138,7 @@ function deployDeleteModal() {
<menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
<UiPopover v-model:open="commandMenuOpened">
<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" />
</UiButton>
</UiPopoverTrigger>
@@ -156,7 +156,7 @@ function deployDeleteModal() {
</menu>
<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
class="flex gap-1"
title="Naviguer au début"
@@ -165,7 +165,7 @@ function deployDeleteModal() {
<PhHourglassHigh size="16" weight="fill" /> Début
</button>
</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
class="flex gap-1"
title="Naviguer à la fin"

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

@@ -88,7 +88,7 @@ function handleCancel() {
:collision-padding="60"
:disable-outside-pointer-events="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"
@focus-outside="handleClosing"
@interact-outside="handleClosing"

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

@@ -63,7 +63,7 @@ function handleCancel(): void {
<UiAlertDialogContent
:disable-outside-pointer-events="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"
@focus-outside="handleClosing"
@interact-outside="handleClosing"
@@ -85,7 +85,7 @@ function handleCancel(): void {
</div>
<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
</UiButton>

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

@@ -1,6 +1,5 @@
<script lang="ts" setup>
import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
import { VisuallyHidden } from "radix-vue"
const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
@@ -64,19 +63,19 @@ function handleCancel() {
<UiDialogContent
:disable-outside-pointer-events="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"
@focus-outside="handleClosing"
@interact-outside="handleClosing"
@pointer-down-outside="(e) => e.preventDefault()"
>
<VisuallyHidden>
<header class="pl-8 grid gap-y-2">
<UiDialogTitle> Modifier l'évènement</UiDialogTitle>
<UiDialogDescription>
Mettre à jour les données de l'évènement
</UiDialogDescription>
</VisuallyHidden>
</header>
<form @submit.prevent="handleAction">
<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"
align="start"
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">
<UiSelect @update:model-value="handleMonthChange">
@@ -151,8 +151,11 @@ function handleValueReset() {
<button
v-for="day in monthData.days"
:key="`popover-day-grid-${id}-${day}`"
class="aspect-square rounded-full text-[.8em] transition-colors hover:bg-slate-700"
:class="{'bg-blue-500 hover:bg-blue-700': day === model.day}"
class="aspect-square rounded-full text-[.8em] transition-colors"
: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)"
>
{{ 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="{
'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 }}