chore: rearrange code
This commit is contained in:
parent
aa7d9affdb
commit
202ba3c856
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show" class="w-[352px] border-l">
|
<div v-if="show" class="w-[352px] border-l text-base">
|
||||||
|
<!-- Event Header -->
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium"
|
class="flex items-center justify-between p-4.5 text-ink-gray-7 text-lg font-medium"
|
||||||
>
|
>
|
||||||
@ -38,8 +39,41 @@
|
|||||||
<Button icon="x" variant="ghost" @click="close" />
|
<Button icon="x" variant="ghost" @click="close" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="mode !== 'details'" class="text-base">
|
|
||||||
<div>
|
<!-- Event Details -->
|
||||||
|
<div v-if="mode == 'details'">
|
||||||
|
<div class="flex items-start gap-2 px-4.5 py-3 pb-0">
|
||||||
|
<div
|
||||||
|
class="mx-0.5 my-[5px] size-2.5 rounded-full cursor-pointer"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: event.color || '#30A66D',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-col gap-[3px]">
|
||||||
|
<div class="text-ink-gray-8 font-semibold text-xl">
|
||||||
|
{{ event.title || __('(No title)') }}
|
||||||
|
</div>
|
||||||
|
<div class="text-ink-gray-6 text-p-base">{{ formattedDateTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="event.description && event.description !== '<p></p>'"
|
||||||
|
class="mx-4.5 my-2.5 border-t border-outline-gray-1"
|
||||||
|
/>
|
||||||
|
<div v-if="event.description && event.description !== '<p></p>'">
|
||||||
|
<div class="flex gap-2 items-center text-ink-gray-7 px-4.5 py-1">
|
||||||
|
<DescriptionIcon class="size-4" />
|
||||||
|
{{ __('Description') }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4.5 py-2 text-ink-gray-7 text-p-base"
|
||||||
|
v-html="event.description"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Event create, duplicate & edit -->
|
||||||
|
<div v-else>
|
||||||
<div class="px-4.5 py-3">
|
<div class="px-4.5 py-3">
|
||||||
<TextInput
|
<TextInput
|
||||||
ref="eventTitle"
|
ref="eventTitle"
|
||||||
@ -160,37 +194,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="text-base">
|
|
||||||
<div class="flex items-start gap-2 px-4.5 py-3 pb-0">
|
|
||||||
<div
|
|
||||||
class="mx-0.5 my-[5px] size-2.5 rounded-full cursor-pointer"
|
|
||||||
:style="{
|
|
||||||
backgroundColor: event.color || '#30A66D',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<div class="flex flex-col gap-[3px]">
|
|
||||||
<div class="text-ink-gray-8 font-semibold text-xl">
|
|
||||||
{{ event.title || __('(No title)') }}
|
|
||||||
</div>
|
|
||||||
<div class="text-ink-gray-6 text-p-base">{{ formattedDateTime }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="event.description && event.description !== '<p></p>'"
|
|
||||||
class="mx-4.5 my-2.5 border-t border-outline-gray-1"
|
|
||||||
/>
|
|
||||||
<div v-if="event.description && event.description !== '<p></p>'">
|
|
||||||
<div class="flex gap-2 items-center text-ink-gray-7 px-4.5 py-1">
|
|
||||||
<DescriptionIcon class="size-4" />
|
|
||||||
{{ __('Description') }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="px-4.5 py-2 text-ink-gray-7 text-p-base"
|
|
||||||
v-html="event.description"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -222,7 +225,7 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['save', 'delete', 'details', 'close', 'edit'])
|
const emit = defineEmits(['save', 'edit', 'delete', 'details', 'close'])
|
||||||
|
|
||||||
const show = defineModel()
|
const show = defineModel()
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user