fix style

This commit is contained in:
pa
2026-03-11 22:24:00 +09:00
parent 4b7db5f890
commit c72209f56d
5 changed files with 100 additions and 37 deletions
@@ -2,17 +2,21 @@
<template v-if="localFavFakeRef"> <template v-if="localFavFakeRef">
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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"> <ItemMedia variant="image">
<img <Avatar class="rounded-sm size-full">
<AvatarImage
v-if="smallThumbnail" v-if="smallThumbnail"
:src="smallThumbnail" :src="smallThumbnail"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
fetchpriority="low" fetchpriority="low"
class="object-cover" /> class="rounded-sm object-cover" />
<Avatar v-else> <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
</Avatar> </Avatar>
</ItemMedia> </ItemMedia>
<ItemContent class="min-w-0"> <ItemContent class="min-w-0">
@@ -79,7 +83,7 @@
</ContextMenu> </ContextMenu>
</template> </template>
<template v-else> <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" /> <ItemMedia variant="image" />
<ItemContent class="min-w-0"> <ItemContent class="min-w-0">
<ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle> <ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
@@ -95,7 +99,7 @@
<script setup> <script setup>
import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next'; 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 { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import { import {
@@ -199,3 +203,14 @@
favoriteRequest.deleteFavorite({ objectId: props.favorite.id }); favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
} }
</script> </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> <template>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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"> <ItemMedia variant="image">
<img <Avatar class="rounded-sm size-full">
<AvatarImage
v-if="smallThumbnail" v-if="smallThumbnail"
:src="smallThumbnail" :src="smallThumbnail"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
fetchpriority="low" fetchpriority="low"
class="object-cover" /> class="rounded-sm object-cover" />
<Avatar v-else> <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
</Avatar> </Avatar>
</ItemMedia> </ItemMedia>
<ItemContent class="min-w-0"> <ItemContent class="min-w-0">
@@ -62,7 +66,7 @@
<script setup> <script setup>
import { MoreHorizontal } from 'lucide-vue-next'; 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 { Button } from '@/components/ui/button';
import { import {
ContextMenu, ContextMenu,
@@ -120,3 +124,14 @@
showAvatarDialog(props.favorite.id); showAvatarDialog(props.favorite.id);
} }
</script> </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"> <template v-if="favorite.ref">
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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"> <ItemMedia variant="image">
<Avatar> <Avatar>
<AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" /> <AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
@@ -107,7 +111,7 @@
</ContextMenu> </ContextMenu>
</template> </template>
<template v-else> <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"> <ItemMedia variant="image">
<Avatar> <Avatar>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback> <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
@@ -303,3 +307,14 @@
} }
} }
</script> </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> <template>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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"> <ItemMedia variant="image">
<img <Avatar class="rounded-sm size-full">
<AvatarImage
v-if="smallThumbnail" v-if="smallThumbnail"
:src="smallThumbnail" :src="smallThumbnail"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
fetchpriority="low" fetchpriority="low"
class="object-cover" /> class="rounded-sm object-cover" />
<Avatar v-else> <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
</Avatar> </Avatar>
</ItemMedia> </ItemMedia>
<ItemContent class="min-w-0"> <ItemContent class="min-w-0">
@@ -90,7 +94,7 @@
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'; } 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 { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
import { computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -181,3 +185,14 @@
favoriteRequest.deleteFavorite({ objectId: props.favorite.id }); favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
} }
</script> </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> <template>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger as-child> <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 class="friend-card__header grid items-center mb-1.75">
<div> <div>
<Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }"> <Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }">