mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 22:36:05 +02:00
replace some el-popover
This commit is contained in:
pa
Natsumi
@@ -137,38 +137,41 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<el-popover
|
<DropdownMenu>
|
||||||
placement="right"
|
<DropdownMenuTrigger as-child>
|
||||||
trigger="hover"
|
|
||||||
:width="180"
|
|
||||||
popper-style="padding: 4px; border-radius: 8px;">
|
|
||||||
<div class="group-visibility-menu">
|
|
||||||
<button
|
|
||||||
v-for="visibility in avatarGroupVisibilityOptions"
|
|
||||||
:key="visibility"
|
|
||||||
type="button"
|
|
||||||
:class="[
|
|
||||||
'group-visibility-menu__item',
|
|
||||||
{ 'is-active': group.visibility === visibility }
|
|
||||||
]"
|
|
||||||
@click="handleVisibilitySelection(group, visibility)">
|
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
|
||||||
<span
|
|
||||||
v-if="group.visibility === visibility"
|
|
||||||
class="group-visibility-menu__check">
|
|
||||||
<i class="ri-check-line"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<template #reference>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<span class="favorites-group-menu__arrow">›</span>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</DropdownMenuTrigger>
|
||||||
</el-popover>
|
<DropdownMenuContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
class="w-[180px] p-1 rounded-lg">
|
||||||
|
<div class="group-visibility-menu">
|
||||||
|
<button
|
||||||
|
v-for="visibility in avatarGroupVisibilityOptions"
|
||||||
|
:key="visibility"
|
||||||
|
type="button"
|
||||||
|
:class="[
|
||||||
|
'group-visibility-menu__item',
|
||||||
|
{ 'is-active': group.visibility === visibility }
|
||||||
|
]"
|
||||||
|
@click="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
|
<span
|
||||||
|
v-if="group.visibility === visibility"
|
||||||
|
class="group-visibility-menu__check">
|
||||||
|
<i class="ri-check-line"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
|
|||||||
@@ -137,38 +137,41 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<el-popover
|
<DropdownMenu>
|
||||||
placement="right"
|
<DropdownMenuTrigger as-child>
|
||||||
trigger="hover"
|
|
||||||
:width="180"
|
|
||||||
popper-style="padding: 4px; border-radius: 8px;">
|
|
||||||
<div class="group-visibility-menu">
|
|
||||||
<button
|
|
||||||
v-for="visibility in friendGroupVisibilityOptions"
|
|
||||||
:key="visibility"
|
|
||||||
type="button"
|
|
||||||
:class="[
|
|
||||||
'group-visibility-menu__item',
|
|
||||||
{ 'is-active': group.visibility === visibility }
|
|
||||||
]"
|
|
||||||
@click="handleVisibilitySelection(group, visibility)">
|
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
|
||||||
<span
|
|
||||||
v-if="group.visibility === visibility"
|
|
||||||
class="group-visibility-menu__check">
|
|
||||||
<i class="ri-check-line"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<template #reference>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<span class="favorites-group-menu__arrow">›</span>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</DropdownMenuTrigger>
|
||||||
</el-popover>
|
<DropdownMenuContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
class="w-[180px] p-1 rounded-lg">
|
||||||
|
<div class="group-visibility-menu">
|
||||||
|
<button
|
||||||
|
v-for="visibility in friendGroupVisibilityOptions"
|
||||||
|
:key="visibility"
|
||||||
|
type="button"
|
||||||
|
:class="[
|
||||||
|
'group-visibility-menu__item',
|
||||||
|
{ 'is-active': group.visibility === visibility }
|
||||||
|
]"
|
||||||
|
@click="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
|
<span
|
||||||
|
v-if="group.visibility === visibility"
|
||||||
|
class="group-visibility-menu__check">
|
||||||
|
<i class="ri-check-line"></i>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
|
|||||||
@@ -137,38 +137,41 @@
|
|||||||
@click="handleRemoteRename(group)">
|
@click="handleRemoteRename(group)">
|
||||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<el-popover
|
<DropdownMenu>
|
||||||
placement="right-start"
|
<DropdownMenuTrigger as-child>
|
||||||
trigger="hover"
|
|
||||||
:width="200"
|
|
||||||
popper-style="padding: 4px; border-radius: 8px;">
|
|
||||||
<div class="group-visibility-menu">
|
|
||||||
<button
|
|
||||||
v-for="visibility in worldGroupVisibilityOptions"
|
|
||||||
:key="visibility"
|
|
||||||
type="button"
|
|
||||||
class="group-visibility-menu__item"
|
|
||||||
:class="{
|
|
||||||
'is-active': group.visibility === visibility
|
|
||||||
}"
|
|
||||||
@click="handleVisibilitySelection(group, visibility)">
|
|
||||||
<span>{{ formatVisibility(visibility) }}</span>
|
|
||||||
<span
|
|
||||||
v-if="group.visibility === visibility"
|
|
||||||
class="group-visibility-menu__check"
|
|
||||||
>✔</span
|
|
||||||
>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<template #reference>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
<span class="favorites-group-menu__arrow">›</span>
|
<span class="favorites-group-menu__arrow">›</span>
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</DropdownMenuTrigger>
|
||||||
</el-popover>
|
<DropdownMenuContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
class="w-[200px] p-1 rounded-lg">
|
||||||
|
<div class="group-visibility-menu">
|
||||||
|
<button
|
||||||
|
v-for="visibility in worldGroupVisibilityOptions"
|
||||||
|
:key="visibility"
|
||||||
|
type="button"
|
||||||
|
class="group-visibility-menu__item"
|
||||||
|
:class="{
|
||||||
|
'is-active': group.visibility === visibility
|
||||||
|
}"
|
||||||
|
@click="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
|
<span>{{ formatVisibility(visibility) }}</span>
|
||||||
|
<span
|
||||||
|
v-if="group.visibility === visibility"
|
||||||
|
class="group-visibility-menu__check"
|
||||||
|
>✔</span
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||||
|
|||||||
@@ -6,48 +6,71 @@
|
|||||||
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
||||||
{{ groupName }}
|
{{ groupName }}
|
||||||
</div>
|
</div>
|
||||||
<el-popover placement="right" :width="500" trigger="hover">
|
<Popover>
|
||||||
<el-descriptions :title="event.title" size="small" :column="2" class="event-title-popover">
|
<PopoverTrigger as-child>
|
||||||
<template #extra>
|
|
||||||
<div>
|
|
||||||
{{ formatTimeRange(event.startsAt, event.endsAt) }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-descriptions-item>
|
|
||||||
<Button variant="outline" size="sm" @click="openCalendarEvent(event)">
|
|
||||||
<Calendar />
|
|
||||||
{{ t('dialog.group_calendar.event_card.export_to_calendar') }}
|
|
||||||
</Button>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<Button variant="outline" size="sm" @click="downloadEventIcs(event)">
|
|
||||||
<Download />
|
|
||||||
{{ t('dialog.group_calendar.event_card.download_ics') }}
|
|
||||||
</Button>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
|
|
||||||
{{ capitalizeFirst(event.category) }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.interested_user')">
|
|
||||||
{{ event.interestedUserCount }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.close_time')">
|
|
||||||
{{ event.closeInstanceAfterEndMinutes + ' min' }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.created')">
|
|
||||||
{{ formatDateFilter(event.createdAt, 'long') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.description')">
|
|
||||||
{{ event.description }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<template #reference>
|
|
||||||
<div class="event-title-content" @click="onGroupClick">
|
<div class="event-title-content" @click="onGroupClick">
|
||||||
{{ event.title }}
|
{{ event.title }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</PopoverTrigger>
|
||||||
</el-popover>
|
<PopoverContent side="right" align="start" class="w-[500px] p-3">
|
||||||
|
<div class="flex items-baseline justify-between gap-3 text-xs">
|
||||||
|
<div class="text-[13px] font-semibold">{{ event.title }}</div>
|
||||||
|
<div class="whitespace-nowrap text-[var(--el-text-color-regular)]">
|
||||||
|
{{ formatTimeRange(event.startsAt, event.endsAt) }}
|
||||||
|
</div>
|
||||||
|
</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 class="text-[var(--el-text-color-regular)]">
|
||||||
|
{{ 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 class="text-[var(--el-text-color-regular)]">
|
||||||
|
{{ 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 class="text-[var(--el-text-color-regular)]">
|
||||||
|
{{ 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 class="text-[var(--el-text-color-regular)]">
|
||||||
|
{{ 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 class="text-[var(--el-text-color-regular)]">
|
||||||
|
{{ t('dialog.group_calendar.event_card.description') }}
|
||||||
|
</div>
|
||||||
|
<div class="whitespace-pre-wrap break-words font-normal leading-snug">
|
||||||
|
{{ event.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
<div class="event-info">
|
<div class="event-info">
|
||||||
<div :class="timeClass">
|
<div :class="timeClass">
|
||||||
@@ -74,6 +97,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
|
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
@@ -348,5 +372,4 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user