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

Added light friendly calendar

Browse Source
This commit is contained in:
Alexis
2024-09-01 11:23:06 +02:00
parent e71a810acd
commit 6782b9bd41
9 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/calendar/CalendarMenu.vue
View File

@@ -7,7 +7,7 @@ const { revealAdvancedSearch } = useCalendar()
</script>
<template>
<header class="pt-4 border-slate-700 border-b-[1px]">
<header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
<div class="px-6 flex justify-between">
<menu class="flex items-center gap-2">
<li class="flex items-center">

14
components/calendar/CalendarMenuSubnav.vue
View File

@@ -62,7 +62,7 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
<template>
<div class="flex gap-2">
<div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm">
<div class="grid items-end w-40 px-4 py-2 border-slate-200 bg-white dark:bg-black dark:border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
<ClientOnly>
<span>{{ currentDate.currentDateTitle }}</span>
@@ -73,14 +73,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
</template>
</ClientOnly>
</div>
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<div>
<UiTooltipProvider :delay-duration="250">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton
variant="ghost"
variant="outline"
size="icon"
class="rounded-t-sm rounded-b-none"
class="rounded-t-sm rounded-b-none border-b-0"
@click="handleGotoPreviousEventPage('prev')"
>
<PhArrowLineLeft size="22" />
@@ -92,14 +92,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
</UiTooltip>
</UiTooltipProvider>
</div>
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<div>
<UiTooltipProvider :delay-duration="250">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton
variant="ghost"
variant="outline"
size="icon"
class="rounded-t-sm rounded-b-none"
class="rounded-t-sm rounded-b-none border-b-0"
@click="handleGotoPreviousEventPage('next')"
>
<PhArrowLineRight size="22" />

30
components/calendar/dialog/Delete.vue
View File

@@ -47,7 +47,7 @@ function handleClosing() {
<UiAlertDialogContent
:disable-outside-pointer-events="true"
:trap-focus="true"
class="min-w-96 bg-slate-900 border-slate-800"
class="min-w-96"
@escape-key-down="handleClosing"
@focus-outside="handleClosing"
@interact-outside="handleClosing"
@@ -68,26 +68,24 @@ function handleClosing() {
</div>
</div>
<footer class="flex gap-2 justify-between">
<UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
<footer class="flex gap-2 justify-end">
<UiButton type="button" size="sm" variant="outline" @click="handleClosing">
Retour
</UiButton>
<div class="flex gap-2 justify-end">
<Transition name="fade-delay">
<UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
Annuler
</UiButton>
<Transition name="fade-delay">
<UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
Annuler
</UiButton>
</Transition>
<UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
<Transition name="fade">
<PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
</Transition>
<UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
<Transition name="fade">
<PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
</Transition>
Supprimer "{{ calendar?.name }}"
</UiButton>
</div>
Supprimer "{{ calendar?.name }}"
</UiButton>
</footer>
</form>
</UiAlertDialogContent>

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

@@ -73,10 +73,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<template>
<div
ref="calendarTile"
class="tile relative text-xs p-2 border-slate-700"
class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
:class="{
'text-slate-500': props.faded,
'text-slate-300': !props.faded
'text-slate-300 dark:text-slate-500': props.faded,
'text-slate-500 dark:text-slate-300': !props.faded
}"
>
<button
@@ -85,10 +85,10 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
>
<ClientOnly>
<span
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-slate-800"
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="{
'bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-blue-500': isSelectedDate
'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate
}"
>
{{ date.day }}

21
components/global/sidebar/Sidebar.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
import type { SidebarMenuActionType } from "./SidebarProps";
const { revealAdvancedSearch } = useCalendar()
@@ -23,24 +23,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</UiButton>
</li>
<li v-if="!user">
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/">
<PhHouse size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Accueil</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
<li v-else>
<li v-if="user">
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>

2
components/ui/button/index.ts
View File

@@ -9,7 +9,7 @@ export const buttonVariants = cva(
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"

4
pages/my/index.vue
View File

@@ -144,8 +144,8 @@ main {
display: block;
content: '';
position: absolute;
right: -2.4rem;
bottom: -10%;
right: 2.4rem;
bottom: -5%;
height: 75%;
width: 100%;
background-image: url('/images/galaxy.svg');

28
pages/my/worlds/[id].vue
View File

@@ -159,7 +159,7 @@ function hideDeleteModal() {
<UiCardContent>
<p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
<UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:bg-slate-600" @click="deployDeleteModal(calendar)">
<UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="deployDeleteModal(calendar)">
<PhTrash size="16" />
</UiButton>
</UiCardContent>
@@ -179,3 +179,29 @@ function hideDeleteModal() {
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
</main>
</template>
<style lang="scss" scoped>
main {
position: relative;
isolation: isolate;
overflow: clip;
&::after {
display: block;
content: '';
position: absolute;
right: 2.4rem;
bottom: -5%;
height: 75%;
width: 100%;
background-image: url('/images/planet.svg');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: right;
z-index: -1;
mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
opacity: .3;
}
}
</style>

1
public/images/planet.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><path fill="#6366f1" d="M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 817 B