mirror of
https://github.com/vrcx-team/VRCX.git
synced 2026-04-06 00:32:02 +02:00
fix style
This commit is contained in:
@@ -2,17 +2,21 @@
|
||||
<template v-if="localFavFakeRef">
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||
<Item
|
||||
variant="outline"
|
||||
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
|
||||
:style="itemStyle"
|
||||
@click="handleViewDetails">
|
||||
<ItemMedia variant="image">
|
||||
<img
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="object-cover" />
|
||||
<Avatar v-else>
|
||||
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||
<Avatar class="rounded-sm size-full">
|
||||
<AvatarImage
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="rounded-sm object-cover" />
|
||||
<AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent class="min-w-0">
|
||||
@@ -79,7 +83,7 @@
|
||||
</ContextMenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Item variant="outline" :style="itemStyle">
|
||||
<Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
|
||||
<ItemMedia variant="image" />
|
||||
<ItemContent class="min-w-0">
|
||||
<ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
|
||||
@@ -95,7 +99,7 @@
|
||||
|
||||
<script setup>
|
||||
import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
@@ -199,3 +203,14 @@
|
||||
favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.favorites-item :deep(img) {
|
||||
filter: saturate(0.8) contrast(0.8);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.favorites-item:hover :deep(img) {
|
||||
filter: saturate(1) contrast(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||
<Item
|
||||
variant="outline"
|
||||
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
|
||||
:style="itemStyle"
|
||||
@click="handleViewDetails">
|
||||
<ItemMedia variant="image">
|
||||
<img
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="object-cover" />
|
||||
<Avatar v-else>
|
||||
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||
<Avatar class="rounded-sm size-full">
|
||||
<AvatarImage
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="rounded-sm object-cover" />
|
||||
<AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent class="min-w-0">
|
||||
@@ -62,7 +66,7 @@
|
||||
|
||||
<script setup>
|
||||
import { MoreHorizontal } from 'lucide-vue-next';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
ContextMenu,
|
||||
@@ -120,3 +124,14 @@
|
||||
showAvatarDialog(props.favorite.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.favorites-item :deep(img) {
|
||||
filter: saturate(0.8) contrast(0.8);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.favorites-item:hover :deep(img) {
|
||||
filter: saturate(1) contrast(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<template v-if="favorite.ref">
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleOpenProfile">
|
||||
<Item
|
||||
variant="outline"
|
||||
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
|
||||
:style="itemStyle"
|
||||
@click="handleOpenProfile">
|
||||
<ItemMedia variant="image">
|
||||
<Avatar>
|
||||
<AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
|
||||
@@ -107,7 +111,7 @@
|
||||
</ContextMenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Item variant="outline" :style="itemStyle">
|
||||
<Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
|
||||
<ItemMedia variant="image">
|
||||
<Avatar>
|
||||
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||
@@ -303,3 +307,14 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.favorites-item :deep(img) {
|
||||
filter: saturate(0.8) contrast(0.8);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.favorites-item:hover :deep(img) {
|
||||
filter: saturate(1) contrast(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||
<Item
|
||||
variant="outline"
|
||||
class="favorites-item cursor-pointer hover:bg-muted x-hover-list"
|
||||
:style="itemStyle"
|
||||
@click="handleViewDetails">
|
||||
<ItemMedia variant="image">
|
||||
<img
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="object-cover" />
|
||||
<Avatar v-else>
|
||||
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||
<Avatar class="rounded-sm size-full">
|
||||
<AvatarImage
|
||||
v-if="smallThumbnail"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
class="rounded-sm object-cover" />
|
||||
<AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent class="min-w-0">
|
||||
@@ -90,7 +94,7 @@
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -181,3 +185,14 @@
|
||||
favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.favorites-item :deep(img) {
|
||||
filter: saturate(0.8) contrast(0.8);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.favorites-item:hover :deep(img) {
|
||||
filter: saturate(1) contrast(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger as-child>
|
||||
<Card class="friend-card x-hover-card relative" :style="cardStyle" @click="showUserDialog(friend.id)">
|
||||
<Card
|
||||
class="friend-card x-hover-card hover:bg-muted relative"
|
||||
:style="cardStyle"
|
||||
@click="showUserDialog(friend.id)">
|
||||
<div class="friend-card__header grid items-center mb-1.75">
|
||||
<div>
|
||||
<Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }">
|
||||
|
||||
Reference in New Issue
Block a user