mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 06:13:52 +02:00
replace some el-popover
This commit is contained in:
pa
Natsumi
@@ -137,38 +137,41 @@
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
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>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</DropdownMenuTrigger>
|
||||
<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
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
|
||||
@@ -137,38 +137,41 @@
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right"
|
||||
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>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</DropdownMenuTrigger>
|
||||
<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
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
|
||||
@@ -137,38 +137,41 @@
|
||||
@click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</button>
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
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>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<button
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--submenu">
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
<span class="favorites-group-menu__arrow">›</span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</DropdownMenuTrigger>
|
||||
<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
|
||||
type="button"
|
||||
class="favorites-group-menu__item favorites-group-menu__item--danger"
|
||||
|
||||
@@ -6,48 +6,71 @@
|
||||
<div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
|
||||
{{ groupName }}
|
||||
</div>
|
||||
<el-popover placement="right" :width="500" trigger="hover">
|
||||
<el-descriptions :title="event.title" size="small" :column="2" class="event-title-popover">
|
||||
<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>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<div class="event-title-content" @click="onGroupClick">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</PopoverTrigger>
|
||||
<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 class="event-info">
|
||||
<div :class="timeClass">
|
||||
@@ -74,6 +97,7 @@
|
||||
|
||||
<script setup>
|
||||
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 { Card } from '@/components/ui/card';
|
||||
import { computed } from 'vue';
|
||||
@@ -348,5 +372,4 @@
|
||||
font-weight: 500;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user