mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 06:46:04 +02:00
refactor: favorites tab
This commit is contained in:
pa
Natsumi
@@ -1,68 +1,99 @@
|
||||
<template>
|
||||
<div class="fav-world-item" @click="$emit('click')">
|
||||
<div class="x-friend-item">
|
||||
<template v-if="favorite.ref">
|
||||
<div class="avatar" v-once>
|
||||
<img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
|
||||
<div :class="cardClasses" @click="$emit('click')">
|
||||
<template v-if="favorite.ref">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
|
||||
v-once>
|
||||
<img
|
||||
v-if="favorite.ref.thumbnailImageUrl"
|
||||
:src="smallThumbnail"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low" />
|
||||
</div>
|
||||
<div class="detail" v-once>
|
||||
<span class="name">{{ props.favorite.ref.name }}</span>
|
||||
<span v-if="props.favorite.ref.occupants" class="extra">
|
||||
{{ props.favorite.ref.authorName }} ({{ props.favorite.ref.occupants }})
|
||||
<div class="favorites-search-card__detail" v-once>
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ props.favorite.ref.name }}</span>
|
||||
<span
|
||||
v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
|
||||
class="favorites-search-card__badges">
|
||||
<i
|
||||
v-if="favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="ri-error-warning-line"></i>
|
||||
<i
|
||||
v-if="favorite.ref.releaseStatus === 'private'"
|
||||
:title="t('view.favorite.private')"
|
||||
class="ri-lock-line"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span class="extra">
|
||||
{{ props.favorite.ref.authorName }}
|
||||
<template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
|
||||
</span>
|
||||
<span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
|
||||
</div>
|
||||
<div v-if="editFavoritesMode">
|
||||
<FavoritesMoveDropdown
|
||||
:favoriteGroup="favoriteWorldGroups"
|
||||
:currentFavorite="props.favorite"
|
||||
:currentGroup="group"
|
||||
type="world" />
|
||||
<el-button type="text" size="small" @click.stop style="margin-left: 5px">
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<template v-if="editMode">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
</div>
|
||||
<div class="favorites-search-card__action-group">
|
||||
<div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
|
||||
<FavoritesMoveDropdown
|
||||
:favoriteGroup="favoriteWorldGroups"
|
||||
:currentFavorite="props.favorite"
|
||||
:currentGroup="group"
|
||||
class="favorites-search-card__dropdown"
|
||||
type="world" />
|
||||
</div>
|
||||
<div class="favorites-search-card__action">
|
||||
<el-button
|
||||
size="small"
|
||||
circle
|
||||
class="favorites-search-card__action-btn"
|
||||
type="default"
|
||||
@click.stop="handleDeleteFavorite">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-search-card__action">
|
||||
<el-tooltip placement="top" :content="inviteOrLaunchText">
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Message"
|
||||
class="favorites-search-card__action-btn"
|
||||
@click.stop="newInstanceSelfInvite(favorite.id)"
|
||||
circle />
|
||||
</el-tooltip>
|
||||
</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" v-once>
|
||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
||||
<i
|
||||
v-if="favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="ri-error-warning-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="favorites-search-card__actions">
|
||||
<div class="favorites-search-card__action">
|
||||
<el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
|
||||
<i class="ri-delete-bin-line"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<i
|
||||
v-if="favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="ri-error-warning-line"></i>
|
||||
<i
|
||||
v-if="favorite.ref.releaseStatus === 'private'"
|
||||
:title="t('view.favorite.private')"
|
||||
class="ri-lock-line"></i>
|
||||
<el-tooltip placement="left" :content="inviteOrLaunchText" :teleported="false">
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Message"
|
||||
style="margin-left: 5px"
|
||||
@click.stop="newInstanceSelfInvite(favorite.id)"
|
||||
circle></el-button>
|
||||
</el-tooltip>
|
||||
<el-button
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
type="default"
|
||||
@click.stop="showFavoriteDialog('world', favorite.id)"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></el-button>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="avatar"></div>
|
||||
<div class="detail" v-once>
|
||||
<span>{{ favorite.name || favorite.id }}</span>
|
||||
<i
|
||||
v-if="favorite.deleted"
|
||||
:title="t('view.favorite.unavailable_tooltip')"
|
||||
class="ri-error-warning-line"></i>
|
||||
<el-button type="text" size="small" style="margin-left: 5px" @click.stop="handleDeleteFavorite"
|
||||
><i class="ri-delete-bin-line"></i
|
||||
></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -80,21 +111,31 @@
|
||||
const props = defineProps({
|
||||
group: [Object, String],
|
||||
favorite: Object,
|
||||
isLocalFavorite: { type: Boolean, default: false }
|
||||
isLocalFavorite: { type: Boolean, default: false },
|
||||
editMode: { type: Boolean, default: false },
|
||||
selected: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
|
||||
const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
|
||||
const { showFavoriteDialog } = useFavoriteStore();
|
||||
const emit = defineEmits(['toggle-select', 'remove-local-world-favorite', 'click']);
|
||||
const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
|
||||
const { newInstanceSelfInvite } = useInviteStore();
|
||||
const { t } = useI18n();
|
||||
const { canOpenInstanceInGame } = useInviteStore();
|
||||
|
||||
const isSelected = computed({
|
||||
get: () => props.favorite.$selected,
|
||||
set: (value) => emit('handle-select', value)
|
||||
get: () => props.selected,
|
||||
set: (value) => emit('toggle-select', value)
|
||||
});
|
||||
|
||||
const cardClasses = computed(() => [
|
||||
'favorites-search-card',
|
||||
'favorites-search-card--world',
|
||||
{
|
||||
'is-selected': props.selected,
|
||||
'is-edit-mode': props.editMode
|
||||
}
|
||||
]);
|
||||
|
||||
const smallThumbnail = computed(() => {
|
||||
const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
|
||||
return url || props.favorite.ref.thumbnailImageUrl;
|
||||
@@ -119,11 +160,4 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fav-world-item {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
margin-right: 15px;
|
||||
height: 53px;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user