MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 22:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve calendar style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -4
View File
@@ -10,7 +10,7 @@
ondragover="event.preventDefault()" ondragover="event.preventDefault()"
ondrop="event.preventDefault()"> ondrop="event.preventDefault()">
<RouterView></RouterView> <RouterView></RouterView>
<Toaster position="top" :theme="sonnerTheme" :data-theme="themeMode"></Toaster> <Toaster position="top-center"></Toaster>
<AlertDialogModal></AlertDialogModal> <AlertDialogModal></AlertDialogModal>
<PromptDialogModal></PromptDialogModal> <PromptDialogModal></PromptDialogModal>
@@ -23,7 +23,6 @@
<script setup> <script setup>
import { computed, onBeforeMount, onMounted } from 'vue'; import { computed, onBeforeMount, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { Toaster } from './components/ui/sonner'; import { Toaster } from './components/ui/sonner';
import { TooltipProvider } from './components/ui/tooltip'; import { TooltipProvider } from './components/ui/tooltip';
@@ -45,8 +44,6 @@
initNoty(); initNoty();
const store = createGlobalStores(); const store = createGlobalStores();
const { isDarkMode, themeMode } = storeToRefs(store.appearanceSettings);
const sonnerTheme = computed(() => (isDarkMode.value ? 'dark' : 'light'));
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.$pinia = store; window.$pinia = store;
src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+1 -1
View File
@@ -39,7 +39,7 @@
:invite-dialog="inviteDialog" :invite-dialog="inviteDialog"
@closeInviteDialog="closeInviteDialog" /> @closeInviteDialog="closeInviteDialog" />
<EditAndSendInviteDialog <EditAndSendInviteDialog
:edit-and-send-invite-dialog="editAndSendInviteDialog" v-model:edit-and-send-invite-dialog="editAndSendInviteDialog"
:sendInviteDialog="sendInviteDialog" :sendInviteDialog="sendInviteDialog"
@update:sendInviteDialog="emit('update:sendInviteDialog', $event)" @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
:invite-dialog="inviteDialog" :invite-dialog="inviteDialog"
src/components/ui/sidebar/SidebarMenuButton.vue
+1 -1
View File
@@ -51,7 +51,7 @@
<slot /> <slot />
</SidebarMenuButtonChild> </SidebarMenuButtonChild>
<Tooltip v-else> <Tooltip v-else ignore-non-keyboard-focus>
<TooltipTrigger as-child> <TooltipTrigger as-child>
<SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }"> <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
<slot /> <slot />
src/stores/notification.js
+1 -1
View File
@@ -411,7 +411,7 @@ export const useNotificationStore = defineStore('Notification', () => {
} }
if (ref.type === 'boop') { if (ref.type === 'boop') {
ref.message = ref.title; ref.message = ref.title;
if (ref.details?.emojiId.startsWith('default_')) { if (ref.details?.emojiId?.startsWith('default_')) {
ref.details.imageUrl = ref.details.emojiId; ref.details.imageUrl = ref.details.emojiId;
ref.message += ` ${ref.details.emojiId.replace('default_', '')}`; ref.message += ` ${ref.details.emojiId.replace('default_', '')}`;
} else { } else {
src/views/Tools/components/GroupCalendarEventCard.vue
+95 -95
View File
@@ -1,107 +1,107 @@
<template> <template>
<Card class="event-card p-0 gap-0" :class="cardClass"> <Popover :open="eventPopoverOpen">
<img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" /> <PopoverTrigger as-child>
<div class="event-content"> <Card
<div class="event-title"> class="event-card p-0 gap-0"
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick"> :class="cardClass"
{{ groupName }} @mouseenter="openEventPopover"
</div> @mouseleave="scheduleCloseEventPopover">
<Popover :open="eventPopoverOpen"> <img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
<PopoverTrigger as-child> <div class="event-content">
<div <div class="event-title">
class="event-title-content" <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
@click="onGroupClick" {{ groupName }}
@mouseenter="openEventPopover" </div>
@mouseleave="scheduleCloseEventPopover"> <div class="event-title-content" @click="onGroupClick">
{{ event.title }} {{ event.title }}
</div> </div>
</PopoverTrigger> </div>
<PopoverContent <div class="event-info">
side="right" <div :class="timeClass">
align="start" {{ formattedTime }}
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="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs"> <div>
<div class="flex min-w-0 flex-col gap-1"> {{ capitalizeFirst(event.accessType) }}
<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>
</PopoverContent> </div>
</Popover>
</div>
<div class="event-info">
<div :class="timeClass">
{{ formattedTime }}
</div> </div>
<div> <div class="badges">
{{ capitalizeFirst(event.accessType) }} <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>
</div> <div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
<div class="badges"> <div class="flex min-w-0 flex-col gap-1">
<div @click="copyEventLink(event)" class="share-badge"> <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
<Share2 /> <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>
<div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following"> </PopoverContent>
<Star /> </Popover>
</div>
<div v-else @click="toggleEventFollow(event)" class="following-badge">
<Star />
</div>
</div>
</Card>
</template> </template>
<script setup> <script setup>
src/views/Tools/components/GroupCalendarMonth.vue
+3 -8
View File
@@ -139,14 +139,10 @@
{{ dayLabel(weekDate) }} {{ dayLabel(weekDate) }}
<div <div
v-if="eventCountFor(weekDate) > 0" 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'"> :class="hasFollowingFor(weekDate) ? 'has-following' : 'no-following'">
{{ eventCountFor(weekDate) }} {{ eventCountFor(weekDate) }}
</div> </div>
<!-- <div
v-if="eventCountFor(weekDate) > 0"
class="calendar-event-dot"
aria-hidden="true" /> -->
</div> </div>
</div> </div>
</CalendarCellTrigger> </CalendarCellTrigger>
@@ -192,16 +188,15 @@
top: -4px; top: -4px;
right: -4px; right: -4px;
min-width: 14px; min-width: 14px;
height: 14px; height: 16px;
border-radius: 9px; border-radius: 9px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 10px; font-size: 12px;
z-index: 10; z-index: 10;
padding: 0 5px; padding: 0 5px;
line-height: 14px; line-height: 14px;
background-color: var(--color-accent);
} }
.calendar-event-dot { .calendar-event-dot {