improve calendar style

This commit is contained in:
pa
2026-01-20 14:11:05 +09:00
committed by Natsumi
parent d9bc93640d
commit 56a8713374
6 changed files with 102 additions and 110 deletions
+1 -4
View File
@@ -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 />
+1 -1
View File
@@ -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,20 +1,42 @@
<template>
<Card class="event-card p-0 gap-0" :class="cardClass">
<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>
<Popover :open="eventPopoverOpen">
<PopoverTrigger as-child>
<div
class="event-title-content"
@click="onGroupClick"
@mouseenter="openEventPopover"
@mouseleave="scheduleCloseEventPopover">
<div class="event-title-content" @click="onGroupClick">
{{ event.title }}
</div>
</div>
<div class="event-info">
<div :class="timeClass">
{{ formattedTime }}
</div>
<div>
{{ capitalizeFirst(event.accessType) }}
</div>
</div>
</div>
<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"
@@ -80,28 +102,6 @@
</div>
</PopoverContent>
</Popover>
</div>
<div class="event-info">
<div :class="timeClass">
{{ formattedTime }}
</div>
<div>
{{ capitalizeFirst(event.accessType) }}
</div>
</div>
</div>
<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>
</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 {