mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 06:43:51 +02:00
improve calendar style
This commit is contained in:
pa
Natsumi
@@ -10,7 +10,7 @@
|
||||
ondragover="event.preventDefault()"
|
||||
ondrop="event.preventDefault()">
|
||||
<RouterView></RouterView>
|
||||
<Toaster position="top" :theme="sonnerTheme" :data-theme="themeMode"></Toaster>
|
||||
<Toaster position="top-center"></Toaster>
|
||||
|
||||
<AlertDialogModal></AlertDialogModal>
|
||||
<PromptDialogModal></PromptDialogModal>
|
||||
@@ -23,7 +23,6 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeMount, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { Toaster } from './components/ui/sonner';
|
||||
import { TooltipProvider } from './components/ui/tooltip';
|
||||
@@ -45,8 +44,6 @@
|
||||
initNoty();
|
||||
|
||||
const store = createGlobalStores();
|
||||
const { isDarkMode, themeMode } = storeToRefs(store.appearanceSettings);
|
||||
const sonnerTheme = computed(() => (isDarkMode.value ? 'dark' : 'light'));
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.$pinia = store;
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
:invite-dialog="inviteDialog"
|
||||
@closeInviteDialog="closeInviteDialog" />
|
||||
<EditAndSendInviteDialog
|
||||
:edit-and-send-invite-dialog="editAndSendInviteDialog"
|
||||
v-model:edit-and-send-invite-dialog="editAndSendInviteDialog"
|
||||
:sendInviteDialog="sendInviteDialog"
|
||||
@update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
|
||||
:invite-dialog="inviteDialog"
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<slot />
|
||||
</SidebarMenuButtonChild>
|
||||
|
||||
<Tooltip v-else>
|
||||
<Tooltip v-else ignore-non-keyboard-focus>
|
||||
<TooltipTrigger as-child>
|
||||
<SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
|
||||
<slot />
|
||||
|
||||
@@ -411,7 +411,7 @@ export const useNotificationStore = defineStore('Notification', () => {
|
||||
}
|
||||
if (ref.type === 'boop') {
|
||||
ref.message = ref.title;
|
||||
if (ref.details?.emojiId.startsWith('default_')) {
|
||||
if (ref.details?.emojiId?.startsWith('default_')) {
|
||||
ref.details.imageUrl = ref.details.emojiId;
|
||||
ref.message += ` ${ref.details.emojiId.replace('default_', '')}`;
|
||||
} else {
|
||||
|
||||
@@ -1,107 +1,107 @@
|
||||
<template>
|
||||
<Card class="event-card p-0 gap-0" :class="cardClass">
|
||||
<img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
|
||||
<div class="event-content">
|
||||
<div class="event-title">
|
||||
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
||||
{{ groupName }}
|
||||
</div>
|
||||
<Popover :open="eventPopoverOpen">
|
||||
<PopoverTrigger as-child>
|
||||
<div
|
||||
class="event-title-content"
|
||||
@click="onGroupClick"
|
||||
@mouseenter="openEventPopover"
|
||||
@mouseleave="scheduleCloseEventPopover">
|
||||
<Popover :open="eventPopoverOpen">
|
||||
<PopoverTrigger as-child>
|
||||
<Card
|
||||
class="event-card p-0 gap-0"
|
||||
:class="cardClass"
|
||||
@mouseenter="openEventPopover"
|
||||
@mouseleave="scheduleCloseEventPopover">
|
||||
<img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
|
||||
<div class="event-content">
|
||||
<div class="event-title">
|
||||
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
||||
{{ groupName }}
|
||||
</div>
|
||||
<div class="event-title-content" @click="onGroupClick">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-125 p-3"
|
||||
@mouseenter="openEventPopover"
|
||||
@mouseleave="scheduleCloseEventPopover">
|
||||
<div class="flex items-baseline justify-between gap-3 text-xs">
|
||||
<div class="text-[13px] font-semibold">{{ event.title }}</div>
|
||||
<div class="whitespace-nowrap">
|
||||
{{ formatTimeRange(event.startsAt, event.endsAt) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-info">
|
||||
<div :class="timeClass">
|
||||
{{ formattedTime }}
|
||||
</div>
|
||||
<div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<Button variant="outline" size="sm" @click="openCalendarEvent(event)">
|
||||
<Calendar />
|
||||
{{ t('dialog.group_calendar.event_card.export_to_calendar') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<Button variant="outline" size="sm" @click="downloadEventIcs(event)">
|
||||
<Download />
|
||||
{{ t('dialog.group_calendar.event_card.download_ics') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.category') }}
|
||||
</div>
|
||||
<div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.interested_user') }}
|
||||
</div>
|
||||
<div class="font-medium">{{ event.interestedUserCount }}</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.close_time') }}
|
||||
</div>
|
||||
<div class="font-medium">
|
||||
{{ event.closeInstanceAfterEndMinutes + ' min' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.created') }}
|
||||
</div>
|
||||
<div class="font-medium">
|
||||
{{ formatDateFilter(event.createdAt, 'long') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.description') }}
|
||||
</div>
|
||||
<div class="whitespace-pre-wrap break-words font-normal leading-snug">
|
||||
{{ event.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ capitalizeFirst(event.accessType) }}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div class="event-info">
|
||||
<div :class="timeClass">
|
||||
{{ formattedTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ capitalizeFirst(event.accessType) }}
|
||||
<div class="badges">
|
||||
<div @click="copyEventLink(event)" class="share-badge">
|
||||
<Share2 />
|
||||
</div>
|
||||
<div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following">
|
||||
<Star />
|
||||
</div>
|
||||
<div v-else @click="toggleEventFollow(event)" class="following-badge">
|
||||
<Star />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-125 p-3"
|
||||
@mouseenter="openEventPopover"
|
||||
@mouseleave="scheduleCloseEventPopover">
|
||||
<div class="flex items-baseline justify-between gap-3 text-xs">
|
||||
<div class="text-[13px] font-semibold">{{ event.title }}</div>
|
||||
<div class="whitespace-nowrap">
|
||||
{{ formatTimeRange(event.startsAt, event.endsAt) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badges">
|
||||
<div @click="copyEventLink(event)" class="share-badge">
|
||||
<Share2 />
|
||||
<div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<Button variant="outline" size="sm" @click="openCalendarEvent(event)">
|
||||
<Calendar />
|
||||
{{ t('dialog.group_calendar.event_card.export_to_calendar') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<Button variant="outline" size="sm" @click="downloadEventIcs(event)">
|
||||
<Download />
|
||||
{{ t('dialog.group_calendar.event_card.download_ics') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.category') }}
|
||||
</div>
|
||||
<div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.interested_user') }}
|
||||
</div>
|
||||
<div class="font-medium">{{ event.interestedUserCount }}</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.close_time') }}
|
||||
</div>
|
||||
<div class="font-medium">
|
||||
{{ event.closeInstanceAfterEndMinutes + ' min' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.created') }}
|
||||
</div>
|
||||
<div class="font-medium">
|
||||
{{ formatDateFilter(event.createdAt, 'long') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 flex min-w-0 flex-col gap-1">
|
||||
<div>
|
||||
{{ t('dialog.group_calendar.event_card.description') }}
|
||||
</div>
|
||||
<div class="whitespace-pre-wrap break-words font-normal leading-snug">
|
||||
{{ event.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following">
|
||||
<Star />
|
||||
</div>
|
||||
<div v-else @click="toggleEventFollow(event)" class="following-badge">
|
||||
<Star />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -139,14 +139,10 @@
|
||||
{{ dayLabel(weekDate) }}
|
||||
<div
|
||||
v-if="eventCountFor(weekDate) > 0"
|
||||
class="calendar-event-badge text-zinc-900"
|
||||
class="calendar-event-badge bg-foreground text-accent"
|
||||
:class="hasFollowingFor(weekDate) ? 'has-following' : 'no-following'">
|
||||
{{ eventCountFor(weekDate) }}
|
||||
</div>
|
||||
<!-- <div
|
||||
v-if="eventCountFor(weekDate) > 0"
|
||||
class="calendar-event-dot"
|
||||
aria-hidden="true" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</CalendarCellTrigger>
|
||||
@@ -192,16 +188,15 @@
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 14px;
|
||||
height: 14px;
|
||||
height: 16px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
padding: 0 5px;
|
||||
line-height: 14px;
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.calendar-event-dot {
|
||||
|
||||
Reference in New Issue
Block a user