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

Added categories list

Browse Source
This commit is contained in:
Alexis
2024-04-08 19:17:32 +02:00
parent e4587e9304
commit cffdc7653d
8 changed files with 118 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,17 +16,17 @@ defineProps<{
class="text-xs px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
:class="{
'text-white bg-slate-600 hover:bg-slate-700': !event.category,
'text-white bg-lime-600 hover:bg-lime-700': event.category === 'birth',
'text-white bg-stone-600 hover:bg-stone-700': event.category === 'death',
'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
'text-white bg-pink-600 hover:bg-pink-700': event.category === 'natural-disaster',
'text-white bg-sky-600 hover:bg-sky-700': event.category === 'legal',
'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religious',
'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'player',
'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe-naturel',
'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': event.category === 'boon'
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': event.category === 'bénédiction'
}"
>
{{ event.title }}

25
src/components/calendar/CalendarEventDetails.vue
View File

@@ -3,6 +3,7 @@ import type { CalendarEvent } from '@/models/Events'
import { useCalendar } from '@/stores/CalendarStore'
import { PopoverContent } from '@/components/ui/popover'
import { Badge } from '@/components/ui/badge'
const { getFormattedDateTitle } = useCalendar()
@@ -11,13 +12,33 @@ defineProps<{ event: CalendarEvent }>()
<template>
<PopoverContent class="w-96" align="start">
<div class="space-y-1">
<div class="grid gap-1">
<div class="text-lg font-semibold">
{{ event.title }}
</div>
<div class="">
<div>
{{ getFormattedDateTitle(event.date, true) }}
</div>
<div v-if="event.category || event.secondaryCategories">
<ul class="flex gap-1">
<li v-if="event.category">
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
{{ event.category }}
</Badge>
</li>
<li v-for="cat in event.secondaryCategories" :key="cat">
<Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
{{ cat }}
</Badge>
</li>
</ul>
</div>
<hr class="my-2" />
<div class="italic text-slate-500">
{{ event.description }}
</div>

6
src/components/calendar/search/CalendarSearch.vue
View File

@@ -165,7 +165,7 @@ whenever(keys.control_period, () => {
</VisuallyHidden>
<!-- Dialog header -->
<div class="grid gap-2">
<div class="grid gap-3">
<div class="relative w-full h-fit">
<Input
id="search"
@@ -233,10 +233,10 @@ whenever(keys.control_period, () => {
</TooltipProvider>
</div>
</div>
<hr />
</div>
<hr />
<div v-if="searchResults.length > 0" class="grow overflow-y-auto">
<SearchList
:results="searchResults"

33
src/components/calendar/search/lists/SearchList.vue
View File

@@ -7,6 +7,7 @@ import { computed } from 'vue'
import type { SearchMode } from '../../Search'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
const props = defineProps<{
results: (Character | CalendarEvent)[]
@@ -66,17 +67,17 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
class="block w-full text-left p-2 rounded-sm"
:class="{
'text-white bg-slate-600 hover:bg-slate-700': !r.category,
'text-white bg-lime-600 hover:bg-lime-700': r.category === 'birth',
'text-white bg-stone-600 hover:bg-stone-700': r.category === 'death',
'text-white bg-lime-600 hover:bg-lime-700': r.category === 'naissance',
'text-white bg-stone-500 hover:bg-stone-700': r.category === 'mort',
'text-white bg-orange-600 hover:bg-orange-700': r.category === 'catastrophe',
'text-white bg-pink-600 hover:bg-pink-700': r.category === 'natural-disaster',
'text-white bg-sky-600 hover:bg-sky-700': r.category === 'legal',
'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religious',
'text-white bg-emerald-600 hover:bg-emerald-700': r.category === 'player',
'text-white bg-pink-600 hover:bg-pink-700': r.category === 'catastrophe-naturel',
'text-white bg-sky-600 hover:bg-sky-700': r.category === 'législation',
'text-white bg-purple-600 hover:bg-purple-700': r.category === 'religion',
'text-white bg-emerald-600 hover:bg-emerald-700': r.category === 'joueurs',
'text-slate-900 bg-amber-300 hover:bg-amber-400': r.category === 'inauguration',
'text-slate-900 bg-emerald-200 hover:bg-emerald-300': r.category === 'invention',
'text-slate-900 bg-cyan-300 hover:bg-cyan-400': r.category === 'science',
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': r.category === 'boon'
'text-slate-900 bg-yellow-100 hover:bg-yellow-200': r.category === 'bénédiction'
}"
@click="handleJumpToDate(r.date)"
>
@@ -88,8 +89,24 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
<span class="opacity-75 italic">{{ getFormattedDateTitle(r.date, true) }}</span>
</div>
<div v-if="r.category || r.secondaryCategories">
<ul class="flex gap-1">
<li v-if="r.category">
<Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
{{ r.category }}
</Badge>
</li>
<li v-for="cat in r.secondaryCategories" :key="cat">
<Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
{{ cat }}
</Badge>
</li>
</ul>
</div>
<div v-if="r.description" class="text-sm">
<hr class="my-2 border-white opacity-25" />
<hr class="my-2 border-white opacity-50" />
<span class="opacity-75">
{{ r.description }}
</span>