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

replace el-popover el-card

Browse Source
This commit is contained in:
pa
2026-01-13 14:28:25 +09:00
committed by Natsumi
parent 911969289e
commit 77a838e22d
19 changed files with 254 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Charts/components/InstanceActivity.vue
+16 -14
View File
@@ -3,21 +3,22 @@
<div class="options-container instance-activity" style="margin-top: 0">
<div>
<span>{{ t('view.charts.instance_activity.header') }}</span>
<el-popover placement="bottom-start" trigger="hover" :width="300">
<div class="tips-popover">
<div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
<div>
<el-icon><WarningFilled /></el-icon
><i>{{ t('view.charts.instance_activity.tips.accuracy_notice') }}</i>
</div>
</div>
<template #reference>
<HoverCard>
<HoverCardTrigger as-child>
<el-icon style="margin-left: 5px; font-size: 12px; opacity: 0.7"><InfoFilled /></el-icon>
</template>
</el-popover>
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" class="w-[300px]">
<div class="tips-popover">
<div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
<div>
<el-icon><WarningFilled /></el-icon
><i>{{ t('view.charts.instance_activity.tips.accuracy_notice') }}</i>
</div>
</div>
</HoverCardContent>
</HoverCard>
</div>
<div>
@@ -145,6 +146,7 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { ArrowLeft, ArrowRight, InfoFilled, WarningFilled } from '@element-plus/icons-vue';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
import { RefreshCcw, Settings } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
src/views/FriendsLocations/components/FriendsLocationsCard.vue
+5 -8
View File
@@ -1,10 +1,5 @@
<template>
<el-card
class="friend-card"
shadow="never"
:body-style="{ padding: `${16 * cardScale * cardSpacing}px` }"
:style="cardStyle"
@click="showUserDialog(friend.id)">
<Card class="friend-card p-0 gap-0" :style="cardStyle" @click="showUserDialog(friend.id)">
<div class="friend-card__header">
<div class="friend-card__avatar-wrapper">
<el-avatar :size="avatarSize" :src="userImage(props.friend.ref, true)" class="friend-card__avatar">
@@ -27,11 +22,12 @@
link />
</div>
</div>
</el-card>
</Card>
</template>
<script setup>
import { computed } from 'vue';
import { Card } from '@/components/ui/card';
import { userImage, userStatusClass } from '../../../shared/utils';
import { useUserStore } from '../../../stores';
@@ -62,7 +58,8 @@
const cardStyle = computed(() => ({
'--card-scale': props.cardScale,
'--card-spacing': props.cardSpacing,
cursor: 'pointer'
cursor: 'pointer',
padding: `${16 * props.cardScale * props.cardSpacing}px`
}));
const avatarFallback = computed(() => props.friend.name.charAt(0) ?? '?');
src/views/Tools/Tools.vue
+22 -30
View File
@@ -12,7 +12,7 @@
<span class="category-title">{{ t('view.tools.group.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['group']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showGroupCalendarDialog">
<div class="tool-icon">
<i class="ri-calendar-event-line"></i>
@@ -22,7 +22,7 @@
<div class="tool-description">{{ t('view.tools.group.calendar_description') }}</div>
</div>
</div>
</el-card>
</Card>
</div>
</div>
@@ -34,7 +34,7 @@
<span class="category-title">{{ t('view.tools.pictures.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['image']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showScreenshotMetadataPage">
<div class="tool-icon">
<i class="ri-screenshot-2-line"></i>
@@ -46,8 +46,8 @@
</div>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showGalleryPage">
<div class="tool-icon">
<i class="ri-multi-image-line"></i>
@@ -59,8 +59,8 @@
</div>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="openVrcPhotosFolder">
<div class="tool-icon">
<i class="ri-folder-image-line"></i>
@@ -72,8 +72,8 @@
</div>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="openVrcScreenshotsFolder">
<div class="tool-icon">
<i class="ri-folder-image-line"></i>
@@ -87,7 +87,7 @@
</div>
</div>
</div>
</el-card>
</Card>
</div>
</div>
@@ -100,7 +100,7 @@
</div>
<div class="tools-grid" v-show="!categoryCollapsed['user']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportDiscordNamesDialog">
<div class="tool-icon">
<i class="ri-discord-line"></i>
@@ -112,8 +112,8 @@
</div>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showNoteExportDialog">
<div class="tool-icon">
<i class="ri-user-shared-line"></i>
@@ -125,9 +125,9 @@
</div>
</div>
</div>
</el-card>
</Card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportFriendsListDialog">
<div class="tool-icon">
<i class="ri-user-shared-line"></i>
@@ -139,8 +139,8 @@
</div>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportAvatarsListDialog">
<div class="tool-icon">
<i class="ri-user-shared-line"></i>
@@ -152,7 +152,7 @@
</div>
</div>
</div>
</el-card>
</Card>
</div>
</div>
@@ -164,7 +164,7 @@
<span class="category-title">{{ t('view.tools.other.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['other']">
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showEditInviteMessageDialog">
<div class="tool-icon">
<i class="ri-edit-box-line"></i>
@@ -176,7 +176,7 @@
</div>
</div>
</div>
</el-card>
</Card>
</div>
</div>
</div>
@@ -206,6 +206,7 @@
import { computed, defineAsyncComponent, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';
import { Card } from '@/components/ui/card';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -347,16 +348,13 @@
overflow: visible;
border-radius: 8px;
cursor: pointer;
width: 100%;
&:hover {
transform: translateY(-2px);
box-shadow: var(--el-box-shadow-light);
}
:deep(.el-card__body) {
overflow: visible;
}
.tool-content {
display: flex;
align-items: center;
@@ -398,12 +396,6 @@
}
}
:deep(.el-card) {
border-radius: 8px;
width: 100%;
overflow: visible;
}
.is-rotated {
transform: rotate(90deg);
}
src/views/Tools/components/GroupCalendarEventCard.vue
+4 -11
View File
@@ -1,5 +1,5 @@
<template>
<el-card :body-style="{ padding: '0px' }" class="event-card" :class="cardClass">
<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">
@@ -69,12 +69,13 @@
<el-icon><StarFilled /></el-icon>
</div>
</div>
</el-card>
</Card>
</template>
<script setup>
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { computed } from 'vue';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -205,6 +206,7 @@
position: relative;
overflow: visible;
border-radius: 8px;
width: 100%;
}
.event-card:hover {
@@ -226,10 +228,6 @@
max-width: 320px;
}
.event-card :deep(.el-card__body) {
overflow: visible;
}
.event-card .banner {
cursor: pointer;
width: 100%;
@@ -351,9 +349,4 @@
color: var(--el-color-primary);
}
:deep(.el-card) {
border-radius: 8px;
width: 100%;
overflow: visible;
}
</style>