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

add context menu to favorite world avatar item

Browse Source
This commit is contained in:
pa
2026-03-08 00:36:44 +09:00
parent 746d94f226
commit 6efa86f5a1
4 changed files with 480 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/components/FavoritesAvatarItem.vue
+29 -3
View File
@@ -1,8 +1,12 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<div :class="cardClasses" @click="$emit('click')">
<template v-if="localFavFakeRef">
<div class="favorites-search-card__content">
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
<div
class="favorites-search-card__avatar"
:class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
<img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
</div>
<div class="favorites-search-card__detail">
@@ -35,7 +39,9 @@
<Checkbox v-model="isSelected" />
</div>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
<div
class="favorites-search-card__action favorites-search-card__action--full"
@click.stop>
<FavoritesMoveDropdown
:favoriteGroup="favoriteAvatarGroups"
:currentFavorite="props.favorite"
@@ -90,7 +96,10 @@
><Trash2 class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
<TooltipWrapper
v-else
side="bottom"
:content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="ghost"
@@ -124,10 +133,20 @@
</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>
<script setup>
import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { computed } from 'vue';
@@ -199,6 +218,9 @@
return shiftHeld.value;
});
/**
*
*/
function handlePrimaryDeleteAction() {
if (props.isLocalFavorite) {
removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
@@ -207,6 +229,10 @@
deleteFavorite(props.favorite.id);
}
/**
*
* @param objectId
*/
function deleteFavorite(objectId) {
favoriteRequest.deleteFavorite({ objectId });
}
src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+12
View File
@@ -1,4 +1,6 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<div :class="cardClasses" @click="$emit('click')">
<div class="favorites-search-card__content">
<div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
@@ -49,9 +51,19 @@
</div>
</div>
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
:disabled="currentUser.currentAvatar === favorite.id"
@click="selectAvatarWithConfirmation(favorite.id)">
{{ t('view.favorite.select_avatar_tooltip') }}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</template>
<script setup>
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
import { Check, Star } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
src/views/Favorites/components/FavoritesWorldItem.vue
+46 -6
View File
@@ -1,4 +1,6 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<div :class="cardClasses" @click="$emit('click')">
<template v-if="favorite.ref">
<div class="favorites-search-card__content">
@@ -31,17 +33,23 @@
</div>
<span class="text-xs text-muted-foreground">
{{ props.favorite.ref.authorName }}
<template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
<template v-if="props.favorite.ref.occupants">
({{ props.favorite.ref.occupants }})
</template>
</span>
</div>
</div>
<div class="favorites-search-card__actions">
<template v-if="editMode">
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
<div
class="favorites-search-card__action favorites-search-card__action--checkbox"
@click.stop>
<Checkbox v-model="isSelected" />
</div>
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
<div
class="favorites-search-card__action favorites-search-card__action--full"
@click.stop>
<FavoritesMoveDropdown
:favoriteGroup="favoriteWorldGroups"
:currentFavorite="props.favorite"
@@ -86,7 +94,10 @@
><Trash2 class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<TooltipWrapper
v-else
side="top"
:content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="ghost"
@@ -124,17 +135,30 @@
</div>
</template>
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem @click="handleNewInstance">
<Plus class="size-4" />
{{ t('dialog.world.actions.new_instance') }}
</ContextMenuItem>
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
<Mail class="size-4" />
{{ inviteOrLaunchText }}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</template>
<script setup>
import { AlertTriangle, Lock, Mail, Star, Trash2 } from 'lucide-vue-next';
import { AlertTriangle, Lock, Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
import { favoriteRequest } from '../../../api';
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
@@ -184,6 +208,9 @@
: t('dialog.world.actions.new_instance_and_self_invite');
});
/**
*
*/
function handleDeleteFavorite() {
if (props.isLocalFavorite) {
emit('remove-local-world-favorite', props.favorite.id, props.group);
@@ -192,9 +219,22 @@
}
}
/**
*
* @param objectId
*/
function deleteFavorite(objectId) {
favoriteRequest.deleteFavorite({ objectId });
}
const { createNewInstance } = useInstanceStore();
/**
*
*/
function handleNewInstance() {
createNewInstance(props.favorite.id);
}
</script>
<style scoped></style>
src/views/Favorites/components/FavoritesWorldLocalItem.vue
+39 -4
View File
@@ -1,4 +1,6 @@
<template>
<ContextMenu>
<ContextMenuTrigger as-child>
<div :class="cardClasses" @click="$emit('click')">
<template v-if="favorite.name">
<div class="favorites-search-card__content">
@@ -23,7 +25,9 @@
<div class="favorites-search-card__actions">
<template v-if="editMode">
<div class="favorites-search-card__action-group">
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
<div
class="favorites-search-card__action favorites-search-card__action--full"
@click.stop>
<FavoritesMoveDropdown
:favoriteGroup="favoriteWorldGroups"
:currentFavorite="props.favorite"
@@ -68,7 +72,10 @@
><Trash2 class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<TooltipWrapper
v-else
side="top"
:content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="ghost"
@@ -102,16 +109,29 @@
</div>
</template>
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem @click="handleNewInstance">
<Plus class="size-4" />
{{ t('dialog.world.actions.new_instance') }}
</ContextMenuItem>
<ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
<Mail class="size-4" />
{{ inviteOrLaunchText }}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</template>
<script setup>
import { Mail, Star, Trash2 } from 'lucide-vue-next';
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
import { Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
@@ -152,6 +172,9 @@
return shiftHeld.value;
});
/**
*
*/
function handlePrimaryDeleteAction() {
if (shiftHeld.value) {
emit('remove-local-world-favorite', props.favorite.id, props.group);
@@ -160,9 +183,21 @@
showFavoriteDialog('world', props.favorite.id);
}
/**
*
*/
function handleDeleteFavorite() {
emit('remove-local-world-favorite', props.favorite.id, props.group);
}
const { createNewInstance } = useInstanceStore();
/**
*
*/
function handleNewInstance() {
createNewInstance(props.favorite.id);
}
</script>
<style scoped></style>