mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 14:26:06 +02:00
refactor: use item component for favorites avatar item
This commit is contained in:
pa
@@ -352,8 +352,7 @@
|
|||||||
:group="activeRemoteGroup"
|
:group="activeRemoteGroup"
|
||||||
:selected="selectedFavoriteAvatars.includes(favorite.id)"
|
:selected="selectedFavoriteAvatars.includes(favorite.id)"
|
||||||
:edit-mode="avatarEditMode"
|
:edit-mode="avatarEditMode"
|
||||||
@toggle-select="toggleAvatarSelection(favorite.id, $event)"
|
@toggle-select="toggleAvatarSelection(favorite.id, $event)" />
|
||||||
@click="showAvatarDialog(favorite.id)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
||||||
@@ -385,8 +384,7 @@
|
|||||||
:favorite="favorite"
|
:favorite="favorite"
|
||||||
:group="activeLocalGroupName"
|
:group="activeLocalGroupName"
|
||||||
is-local-favorite
|
is-local-favorite
|
||||||
:edit-mode="avatarEditMode"
|
:edit-mode="avatarEditMode" />
|
||||||
@click="showAvatarDialog(favorite.id)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
||||||
@@ -403,8 +401,7 @@
|
|||||||
<FavoritesAvatarLocalHistoryItem
|
<FavoritesAvatarLocalHistoryItem
|
||||||
v-for="favorite in avatarHistory"
|
v-for="favorite in avatarHistory"
|
||||||
:key="favorite.id"
|
:key="favorite.id"
|
||||||
:favorite="favorite"
|
:favorite="favorite" />
|
||||||
@click="showAvatarDialog(favorite.id)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
<div v-else class="flex items-center justify-center text-[13px] h-full">
|
||||||
|
|||||||
@@ -1,161 +1,126 @@
|
|||||||
<template>
|
<template>
|
||||||
<ContextMenu>
|
<template v-if="localFavFakeRef">
|
||||||
<ContextMenuTrigger as-child>
|
<ContextMenu>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<ContextMenuTrigger as-child>
|
||||||
<template v-if="localFavFakeRef">
|
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||||
<div class="favorites-search-card__content">
|
<ItemMedia variant="image">
|
||||||
<div
|
<img
|
||||||
class="favorites-search-card__avatar"
|
v-if="smallThumbnail"
|
||||||
:class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
|
:src="smallThumbnail"
|
||||||
<img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
loading="lazy"
|
||||||
</div>
|
decoding="async"
|
||||||
<div class="favorites-search-card__detail">
|
fetchpriority="low"
|
||||||
<div class="flex items-center gap-2">
|
class="object-cover" />
|
||||||
<span class="name text-sm">{{ localFavFakeRef.name }}</span>
|
<Avatar v-else>
|
||||||
<span class="inline-flex items-center gap-1 text-sm">
|
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||||
<TooltipWrapper
|
</Avatar>
|
||||||
v-if="favorite.deleted"
|
</ItemMedia>
|
||||||
side="top"
|
<ItemContent class="min-w-0">
|
||||||
:content="t('view.favorite.unavailable_tooltip')">
|
<ItemTitle class="truncate max-w-full">
|
||||||
<AlertTriangle class="h-4 w-4" />
|
{{ localFavFakeRef.name }}
|
||||||
</TooltipWrapper>
|
<AlertTriangle
|
||||||
<TooltipWrapper
|
v-if="showUnavailable"
|
||||||
v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
|
:title="t('view.favorite.unavailable_tooltip')"
|
||||||
side="top"
|
class="h-4 w-4" />
|
||||||
:content="t('view.favorite.private')">
|
<Lock v-if="isPrivateAvatar" :title="t('view.favorite.private')" class="h-4 w-4" />
|
||||||
<Lock class="h-4 w-4" />
|
</ItemTitle>
|
||||||
</TooltipWrapper>
|
<ItemDescription class="truncate line-clamp-1 text-xs">
|
||||||
</span>
|
{{ localFavFakeRef.authorName }}
|
||||||
</div>
|
</ItemDescription>
|
||||||
<span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
|
</ItemContent>
|
||||||
</div>
|
<ItemActions v-if="editMode && !isLocalFavorite" @click.stop>
|
||||||
</div>
|
<Checkbox v-model="isSelected" />
|
||||||
<div class="favorites-search-card__actions">
|
</ItemActions>
|
||||||
<template v-if="editMode">
|
<ItemActions v-else-if="!editMode">
|
||||||
<div
|
<DropdownMenu>
|
||||||
v-if="!isLocalFavorite"
|
<DropdownMenuTrigger as-child>
|
||||||
class="flex justify-end w-full favorites-search-card__action--checkbox"
|
<Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
|
||||||
@click.stop>
|
<MoreHorizontal class="h-4 w-4" />
|
||||||
<Checkbox v-model="isSelected" />
|
</Button>
|
||||||
</div>
|
</DropdownMenuTrigger>
|
||||||
<div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
|
<DropdownMenuContent align="end">
|
||||||
<div class="flex justify-end w-full flex-1" @click.stop>
|
<DropdownMenuItem @click="handleViewDetails">
|
||||||
<FavoritesMoveDropdown
|
{{ t('common.actions.view_details') }}
|
||||||
:favoriteGroup="favoriteAvatarGroups"
|
</DropdownMenuItem>
|
||||||
:currentFavorite="props.favorite"
|
<DropdownMenuItem
|
||||||
:currentGroup="group"
|
v-if="canSelectAvatar"
|
||||||
class="w-full"
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
:is-local-favorite="isLocalFavorite"
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
type="avatar" />
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
</div>
|
</DropdownMenuItem>
|
||||||
<div class="flex justify-end w-full">
|
<DropdownMenuSeparator v-if="canSelectAvatar" />
|
||||||
<TooltipWrapper
|
<DropdownMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
|
||||||
side="left"
|
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||||
:content="
|
</DropdownMenuItem>
|
||||||
isLocalFavorite
|
<DropdownMenuItem variant="destructive" @click="handleDeleteFavorite">
|
||||||
? t('view.favorite.delete_tooltip')
|
{{ deleteMenuLabel }}
|
||||||
: t('view.favorite.unfavorite_tooltip')
|
</DropdownMenuItem>
|
||||||
">
|
</DropdownMenuContent>
|
||||||
<Button
|
</DropdownMenu>
|
||||||
size="icon-sm"
|
</ItemActions>
|
||||||
variant="outline"
|
</Item>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</ContextMenuTrigger>
|
||||||
@click.stop="handlePrimaryDeleteAction">
|
<ContextMenuContent>
|
||||||
<Trash2 class="h-4 w-4" />
|
<ContextMenuItem @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
|
||||||
</Button>
|
<ContextMenuItem
|
||||||
</TooltipWrapper>
|
v-if="canSelectAvatar"
|
||||||
</div>
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
</div>
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
</template>
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
<template v-else>
|
</ContextMenuItem>
|
||||||
<div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
|
<ContextMenuSeparator v-if="canSelectAvatar" />
|
||||||
<div class="flex justify-end w-full" v-if="canSelectAvatar">
|
<ContextMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
|
||||||
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||||
<Button
|
</ContextMenuItem>
|
||||||
size="icon-sm"
|
<ContextMenuItem variant="destructive" @click="handleDeleteFavorite">
|
||||||
variant="ghost"
|
{{ deleteMenuLabel }}
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
</ContextMenuItem>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</ContextMenuContent>
|
||||||
@click.stop="selectAvatarWithConfirmation(favorite.id)"
|
</ContextMenu>
|
||||||
><Check class="h-4 w-4"
|
</template>
|
||||||
/></Button>
|
<template v-else>
|
||||||
</TooltipWrapper>
|
<Item variant="outline" :style="itemStyle">
|
||||||
</div>
|
<ItemMedia variant="image" />
|
||||||
<div class="flex justify-end w-full">
|
<ItemContent class="min-w-0">
|
||||||
<TooltipWrapper
|
<ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
|
||||||
v-if="showDangerUnfavorite"
|
</ItemContent>
|
||||||
side="bottom"
|
<ItemActions>
|
||||||
:content="t('view.favorite.unfavorite_tooltip')">
|
<Button class="rounded-full h-6 w-6" size="icon-sm" variant="ghost" @click.stop="handleDeleteFavorite">
|
||||||
<Button
|
<Trash2 class="h-4 w-4" />
|
||||||
size="icon-sm"
|
</Button>
|
||||||
variant="destructive"
|
</ItemActions>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</Item>
|
||||||
@click.stop="handlePrimaryDeleteAction"
|
</template>
|
||||||
><Trash2 class="h-4 w-4"
|
|
||||||
/></Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
<TooltipWrapper
|
|
||||||
v-else
|
|
||||||
side="bottom"
|
|
||||||
:content="t('view.favorite.edit_favorite_tooltip')">
|
|
||||||
<Button
|
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
@click.stop="showFavoriteDialog('avatar', favorite.id)"
|
|
||||||
><Star class="h-4 w-4"
|
|
||||||
/></Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<div class="favorites-search-card__content">
|
|
||||||
<div class="favorites-search-card__avatar is-empty"></div>
|
|
||||||
<div class="favorites-search-card__detail">
|
|
||||||
<span>{{ favorite.name || favorite.id }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="favorites-search-card__actions">
|
|
||||||
<div class="flex justify-end w-full">
|
|
||||||
<Button
|
|
||||||
class="rounded-full text-xs h-6 w-6"
|
|
||||||
size="icon-sm"
|
|
||||||
variant="ghost"
|
|
||||||
@click.stop="handlePrimaryDeleteAction">
|
|
||||||
<Trash2 class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</ContextMenuTrigger>
|
|
||||||
<ContextMenuContent>
|
|
||||||
<ContextMenuItem
|
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
|
||||||
@click="selectAvatarWithConfirmation(favorite.id)">
|
|
||||||
{{ t('view.favorite.select_avatar_tooltip') }}
|
|
||||||
</ContextMenuItem>
|
|
||||||
</ContextMenuContent>
|
|
||||||
</ContextMenu>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
|
import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
|
||||||
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
import { Avatar, AvatarFallback } 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 {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuTrigger
|
||||||
|
} from '@/components/ui/context-menu';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import { useAvatarStore, useFavoriteStore, useUiStore, useUserStore } from '../../../stores';
|
|
||||||
import { removeLocalAvatarFavorite } from '../../../coordinators/favoriteCoordinator';
|
|
||||||
import { favoriteRequest } from '../../../api';
|
import { favoriteRequest } from '../../../api';
|
||||||
|
import { selectAvatarWithConfirmation, showAvatarDialog } from '../../../coordinators/avatarCoordinator';
|
||||||
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
|
import { removeLocalAvatarFavorite } from '../../../coordinators/favoriteCoordinator';
|
||||||
|
import { useFavoriteStore, useUserStore } from '../../../stores';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
favorite: Object,
|
favorite: Object,
|
||||||
@@ -164,30 +129,39 @@
|
|||||||
editMode: { type: Boolean, default: false },
|
editMode: { type: Boolean, default: false },
|
||||||
selected: { type: Boolean, default: false }
|
selected: { type: Boolean, default: false }
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['click', 'toggle-select']);
|
const emit = defineEmits(['toggle-select']);
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const { favoriteAvatarGroups } = storeToRefs(useFavoriteStore());
|
|
||||||
const { showFavoriteDialog } = useFavoriteStore();
|
const { showFavoriteDialog } = useFavoriteStore();
|
||||||
import { selectAvatarWithConfirmation } from '../../../coordinators/avatarCoordinator';
|
|
||||||
const { shiftHeld } = storeToRefs(useUiStore());
|
|
||||||
const { currentUser } = storeToRefs(useUserStore());
|
const { currentUser } = storeToRefs(useUserStore());
|
||||||
|
|
||||||
const isSelected = computed({
|
const isSelected = computed({
|
||||||
get: () => props.selected,
|
get: () => props.selected,
|
||||||
set: (value) => emit('toggle-select', value)
|
set: (value) => emit('toggle-select', value)
|
||||||
});
|
});
|
||||||
|
|
||||||
const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
|
const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
|
||||||
|
|
||||||
const cardClasses = computed(() => [
|
const displayName = computed(() => localFavFakeRef.value?.name || props.favorite?.name || props.favorite?.id);
|
||||||
'favorites-search-card',
|
|
||||||
'favorites-search-card--avatar',
|
const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
|
||||||
{
|
|
||||||
'is-selected': props.selected,
|
const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
|
||||||
'is-edit-mode': props.editMode
|
|
||||||
}
|
const isPrivateAvatar = computed(() => !props.isLocalFavorite && props.favorite?.ref?.releaseStatus === 'private');
|
||||||
]);
|
|
||||||
|
const deleteMenuLabel = computed(() =>
|
||||||
|
props.isLocalFavorite ? t('view.favorite.delete_tooltip') : t('view.favorite.unfavorite_tooltip')
|
||||||
|
);
|
||||||
|
|
||||||
|
const itemStyle = computed(() => ({
|
||||||
|
padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
|
||||||
|
gap: 'var(--favorites-card-content-gap, 10px)',
|
||||||
|
minWidth: 'var(--favorites-card-min-width, 220px)',
|
||||||
|
maxWidth: 'var(--favorites-card-target-width, 220px)',
|
||||||
|
width: '100%',
|
||||||
|
fontSize: 'calc(0.875rem * var(--favorites-card-scale, 1))'
|
||||||
|
}));
|
||||||
|
|
||||||
const smallThumbnail = computed(() => {
|
const smallThumbnail = computed(() => {
|
||||||
if (!localFavFakeRef.value?.thumbnailImageUrl) {
|
if (!localFavFakeRef.value?.thumbnailImageUrl) {
|
||||||
@@ -200,7 +174,7 @@
|
|||||||
if (typeof props.group === 'string') {
|
if (typeof props.group === 'string') {
|
||||||
return props.group;
|
return props.group;
|
||||||
}
|
}
|
||||||
return props.group?.name;
|
return props.group?.name ?? props.group?.key;
|
||||||
});
|
});
|
||||||
|
|
||||||
const canSelectAvatar = computed(() => {
|
const canSelectAvatar = computed(() => {
|
||||||
@@ -213,30 +187,15 @@
|
|||||||
return props.favorite?.ref?.releaseStatus !== 'private';
|
return props.favorite?.ref?.releaseStatus !== 'private';
|
||||||
});
|
});
|
||||||
|
|
||||||
const showDangerUnfavorite = computed(() => {
|
function handleViewDetails() {
|
||||||
return shiftHeld.value;
|
showAvatarDialog(props.favorite.id);
|
||||||
});
|
}
|
||||||
|
|
||||||
/**
|
function handleDeleteFavorite() {
|
||||||
*
|
|
||||||
*/
|
|
||||||
function handlePrimaryDeleteAction() {
|
|
||||||
if (props.isLocalFavorite) {
|
if (props.isLocalFavorite) {
|
||||||
removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
|
removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
deleteFavorite(props.favorite.id);
|
favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param objectId
|
|
||||||
*/
|
|
||||||
function deleteFavorite(objectId) {
|
|
||||||
favoriteRequest.deleteFavorite({ objectId });
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
@import './favorites-card.css';
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,81 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<ContextMenu>
|
<ContextMenu>
|
||||||
<ContextMenuTrigger as-child>
|
<ContextMenuTrigger as-child>
|
||||||
<div :class="cardClasses" @click="$emit('click')">
|
<Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
|
||||||
<div class="favorites-search-card__content">
|
<ItemMedia variant="image">
|
||||||
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
<img
|
||||||
<img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
|
v-if="smallThumbnail"
|
||||||
</div>
|
:src="smallThumbnail"
|
||||||
<div class="favorites-search-card__detail">
|
loading="lazy"
|
||||||
<div class="flex items-center gap-2">
|
decoding="async"
|
||||||
<span class="name text-sm">{{ favorite.name }}</span>
|
fetchpriority="low"
|
||||||
</div>
|
class="object-cover" />
|
||||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
<Avatar v-else>
|
||||||
</div>
|
<AvatarFallback>{{ avatarFallback }}</AvatarFallback>
|
||||||
</div>
|
</Avatar>
|
||||||
<div class="favorites-search-card__actions">
|
</ItemMedia>
|
||||||
<div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
|
<ItemContent class="min-w-0">
|
||||||
<div class="flex justify-end w-full">
|
<ItemTitle class="truncate max-w-full">{{ favorite.name }}</ItemTitle>
|
||||||
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
|
<ItemDescription class="truncate line-clamp-1 text-xs">
|
||||||
<Button
|
{{ favorite.authorName }}
|
||||||
size="icon-sm"
|
</ItemDescription>
|
||||||
variant="ghost"
|
</ItemContent>
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
<ItemActions>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
<DropdownMenu>
|
||||||
@click.stop="selectAvatarWithConfirmation(favorite.id)">
|
<DropdownMenuTrigger as-child>
|
||||||
<Check class="h-4 w-4" />
|
<Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
|
||||||
></Button
|
<MoreHorizontal class="h-4 w-4" />
|
||||||
>
|
</Button>
|
||||||
</TooltipWrapper>
|
</DropdownMenuTrigger>
|
||||||
</div>
|
<DropdownMenuContent align="end">
|
||||||
<div class="flex justify-end w-full">
|
<DropdownMenuItem @click="handleViewDetails">
|
||||||
<TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
|
{{ t('common.actions.view_details') }}
|
||||||
<Button
|
</DropdownMenuItem>
|
||||||
v-if="favoriteExists"
|
<DropdownMenuItem
|
||||||
size="icon-sm"
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
variant="ghost"
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
class="rounded-full text-xs h-6 w-6"
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
</DropdownMenuItem>
|
||||||
<Star class="h-4 w-4" />
|
<DropdownMenuSeparator />
|
||||||
</Button>
|
<DropdownMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
|
||||||
<Button
|
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||||
v-else
|
</DropdownMenuItem>
|
||||||
size="icon-sm"
|
</DropdownMenuContent>
|
||||||
variant="ghost"
|
</DropdownMenu>
|
||||||
class="rounded-full text-xs h-6 w-6"
|
</ItemActions>
|
||||||
@click.stop="showFavoriteDialog('avatar', favorite.id)">
|
</Item>
|
||||||
<Star class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</TooltipWrapper>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ContextMenuTrigger>
|
</ContextMenuTrigger>
|
||||||
<ContextMenuContent>
|
<ContextMenuContent>
|
||||||
|
<ContextMenuItem @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
|
||||||
<ContextMenuItem
|
<ContextMenuItem
|
||||||
:disabled="currentUser.currentAvatar === favorite.id"
|
:disabled="currentUser.currentAvatar === favorite.id"
|
||||||
@click="selectAvatarWithConfirmation(favorite.id)">
|
@click="selectAvatarWithConfirmation(favorite.id)">
|
||||||
{{ t('view.favorite.select_avatar_tooltip') }}
|
{{ t('view.favorite.select_avatar_tooltip') }}
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
|
<ContextMenuSeparator />
|
||||||
|
<ContextMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
|
||||||
|
{{ t('view.favorite.edit_favorite_tooltip') }}
|
||||||
|
</ContextMenuItem>
|
||||||
</ContextMenuContent>
|
</ContextMenuContent>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
|
import { MoreHorizontal } from 'lucide-vue-next';
|
||||||
import { Check, Star } from 'lucide-vue-next';
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuContent,
|
||||||
|
ContextMenuItem,
|
||||||
|
ContextMenuSeparator,
|
||||||
|
ContextMenuTrigger
|
||||||
|
} from '@/components/ui/context-menu';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import { useAvatarStore, useFavoriteStore, useUserStore } from '../../../stores';
|
import { useFavoriteStore, useUserStore } from '../../../stores';
|
||||||
|
import { selectAvatarWithConfirmation, showAvatarDialog } from '../../../coordinators/avatarCoordinator';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const { showFavoriteDialog, getCachedFavoritesByObjectId } = useFavoriteStore();
|
const { showFavoriteDialog } = useFavoriteStore();
|
||||||
import { selectAvatarWithConfirmation } from '../../../coordinators/avatarCoordinator';
|
|
||||||
const { currentUser } = storeToRefs(useUserStore());
|
const { currentUser } = storeToRefs(useUserStore());
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@@ -85,11 +98,16 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
defineEmits(['click']);
|
const avatarFallback = computed(() => props.favorite.name?.charAt(0)?.toUpperCase() || '?');
|
||||||
|
|
||||||
const favoriteExists = computed(() => Boolean(getCachedFavoritesByObjectId(props.favorite.id)));
|
const itemStyle = computed(() => ({
|
||||||
|
padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
|
||||||
const cardClasses = computed(() => ['favorites-search-card', 'favorites-search-card--avatar']);
|
gap: 'var(--favorites-card-content-gap, 10px)',
|
||||||
|
minWidth: 'var(--favorites-card-min-width, 220px)',
|
||||||
|
maxWidth: 'var(--favorites-card-target-width, 220px)',
|
||||||
|
width: '100%',
|
||||||
|
fontSize: 'calc(0.875rem * var(--favorites-card-scale, 1))'
|
||||||
|
}));
|
||||||
|
|
||||||
const smallThumbnail = computed(() => {
|
const smallThumbnail = computed(() => {
|
||||||
if (!props.favorite.thumbnailImageUrl) {
|
if (!props.favorite.thumbnailImageUrl) {
|
||||||
@@ -97,8 +115,8 @@
|
|||||||
}
|
}
|
||||||
return props.favorite.thumbnailImageUrl.replace('256', '128');
|
return props.favorite.thumbnailImageUrl.replace('256', '128');
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
function handleViewDetails() {
|
||||||
@import './favorites-card.css';
|
showAvatarDialog(props.favorite.id);
|
||||||
</style>
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user