mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-17 22:03:50 +02:00
improve favorite edit mode performance
This commit is contained in:
pa
Natsumi
@@ -9,7 +9,7 @@
|
||||
<span class="name" v-text="localFavFakeRef.name"></span>
|
||||
<span class="extra" v-text="localFavFakeRef.authorName"></span>
|
||||
</div>
|
||||
<template v-if="editFavoritesMode">
|
||||
<div class="editing">
|
||||
<el-dropdown trigger="click" size="small" style="margin-left: 5px">
|
||||
<div>
|
||||
<el-tooltip placement="top" :content="tooltipContent">
|
||||
@@ -33,40 +33,73 @@
|
||||
<el-button v-if="!isLocalFavorite" type="text" size="small" style="margin-left: 5px" @click.stop>
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else-if="!isLocalFavorite">
|
||||
</div>
|
||||
<div class="default">
|
||||
<template v-if="!isLocalFavorite">
|
||||
<el-tooltip
|
||||
v-if="favorite.deleted"
|
||||
placement="left"
|
||||
:content="t('view.favorite.unavailable_tooltip')">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="favorite.ref.releaseStatus === 'private'"
|
||||
placement="left"
|
||||
:content="t('view.favorite.private')">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
|
||||
placement="left"
|
||||
:content="t('view.favorite.select_avatar_tooltip')">
|
||||
<el-button
|
||||
:disabled="currentUser.currentAvatar === favorite.id"
|
||||
size="small"
|
||||
:icon="Check"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
size="small"
|
||||
:icon="Close"
|
||||
circle
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
@click.stop="deleteFavorite(favorite.id)"></el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="default"
|
||||
:icon="Star"
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
|
||||
<el-button
|
||||
:disabled="currentUser.currentAvatar === favorite.id"
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
:icon="Check"
|
||||
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-tooltip
|
||||
v-if="favorite.deleted"
|
||||
placement="left"
|
||||
:content="t('view.favorite.unavailable_tooltip')">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="favorite.ref.releaseStatus === 'private'"
|
||||
placement="left"
|
||||
:content="t('view.favorite.private')">
|
||||
<el-icon><Warning /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
|
||||
placement="left"
|
||||
:content="t('view.favorite.select_avatar_tooltip')">
|
||||
<el-button
|
||||
:disabled="currentUser.currentAvatar === favorite.id"
|
||||
size="small"
|
||||
:icon="Check"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
|
||||
v-if="isLocalFavorite"
|
||||
placement="right"
|
||||
:content="t('view.favorite.unfavorite_tooltip')">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
size="small"
|
||||
:icon="Close"
|
||||
circle
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
@click.stop="deleteFavorite(favorite.id)"></el-button>
|
||||
@click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
|
||||
<el-button
|
||||
v-else
|
||||
type="default"
|
||||
@@ -74,37 +107,9 @@
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
|
||||
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
|
||||
<el-button
|
||||
:disabled="currentUser.currentAvatar === favorite.id"
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
:icon="Check"
|
||||
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
size="small"
|
||||
:icon="Close"
|
||||
circle
|
||||
style="color: #f56c6c; margin-left: 5px"
|
||||
@click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
|
||||
<el-button
|
||||
v-else
|
||||
type="default"
|
||||
:icon="Star"
|
||||
size="small"
|
||||
circle
|
||||
style="margin-left: 5px"
|
||||
@click.stop="showFavoriteDialog('avatar', favorite.id)"
|
||||
/></el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="avatar"></div>
|
||||
@@ -142,7 +147,6 @@
|
||||
const props = defineProps({
|
||||
favorite: Object,
|
||||
group: [Object, String],
|
||||
editFavoritesMode: Boolean,
|
||||
isLocalFavorite: Boolean
|
||||
});
|
||||
const emit = defineEmits(['click', 'handle-select']);
|
||||
|
||||
@@ -82,13 +82,16 @@
|
||||
@click.stop="clearFavoriteGroup(group)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
|
||||
<div
|
||||
v-if="group.count"
|
||||
class="x-friend-list"
|
||||
:class="{ 'is-editing': editFavoritesMode }"
|
||||
style="margin-top: 10px">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="group"
|
||||
:edit-favorites-mode="editFavoritesMode"
|
||||
style="display: inline-block; width: 300px; margin-right: 15px"
|
||||
@handle-select="favorite.$selected = $event"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
@@ -181,7 +184,11 @@
|
||||
@click.stop="promptLocalAvatarFavoriteGroupDelete(group)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div v-if="localAvatarFavorites[group].length" class="x-friend-list" :style="{ marginTop: '10px' }">
|
||||
<div
|
||||
v-if="localAvatarFavorites[group].length"
|
||||
class="x-friend-list"
|
||||
:class="{ 'is-editing': editFavoritesMode }"
|
||||
:style="{ marginTop: '10px' }">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in localAvatarFavorites[group]"
|
||||
:key="favorite.id"
|
||||
@@ -189,7 +196,6 @@
|
||||
:style="{ display: 'inline-block', width: '300px', marginRight: '15px' }"
|
||||
:favorite="favorite"
|
||||
:group="group"
|
||||
:edit-favorites-mode="editFavoritesMode"
|
||||
@handle-select="favorite.$selected = $event"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
@@ -246,8 +252,7 @@
|
||||
getLocalAvatarFavoriteGroupLength,
|
||||
deleteLocalAvatarFavoriteGroup,
|
||||
renameLocalAvatarFavoriteGroup,
|
||||
newLocalAvatarFavoriteGroup,
|
||||
saveSortFavoritesOption
|
||||
newLocalAvatarFavoriteGroup
|
||||
} = useFavoriteStore();
|
||||
const { avatarHistoryArray } = storeToRefs(useAvatarStore());
|
||||
const { promptClearAvatarHistory, showAvatarDialog } = useAvatarStore();
|
||||
@@ -419,3 +424,15 @@
|
||||
.catch(() => {});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-friend-list :deep(.editing) {
|
||||
display: none;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.editing) {
|
||||
display: block;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.default) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
:link="false" />
|
||||
<span v-else v-text="favorite.ref.statusDescription"></span>
|
||||
</div>
|
||||
<template v-if="editFavoritesMode">
|
||||
<div class="editing">
|
||||
<el-dropdown trigger="click" size="small" style="margin-left: 5px">
|
||||
<div>
|
||||
<el-tooltip placement="left" :content="t('view.favorite.move_tooltip')">
|
||||
@@ -42,8 +42,8 @@
|
||||
<el-button type="text" size="small" style="margin-left: 5px" @click.stop>
|
||||
<el-checkbox v-model="favorite.$selected"></el-checkbox>
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
</div>
|
||||
<div class="default">
|
||||
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
@@ -61,7 +61,7 @@
|
||||
style="margin-left: 5px"
|
||||
@click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="avatar"></div>
|
||||
@@ -89,8 +89,7 @@
|
||||
|
||||
defineProps({
|
||||
favorite: { type: Object, required: true },
|
||||
group: { type: Object, required: true },
|
||||
editFavoritesMode: Boolean
|
||||
group: { type: Object, required: true }
|
||||
});
|
||||
|
||||
defineEmits(['click']);
|
||||
|
||||
@@ -46,13 +46,16 @@
|
||||
@click.stop="clearFavoriteGroup(group)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
|
||||
<div
|
||||
v-if="group.count"
|
||||
class="x-friend-list"
|
||||
:class="{ 'is-editing': editFavoritesMode }"
|
||||
style="margin-top: 10px">
|
||||
<FavoritesFriendItem
|
||||
v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
|
||||
:key="favorite.id"
|
||||
style="display: inline-block; width: 300px; margin-right: 15px"
|
||||
:favorite="favorite"
|
||||
:edit-favorites-mode="editFavoritesMode"
|
||||
:group="group"
|
||||
@click="showUserDialog(favorite.id)" />
|
||||
</div>
|
||||
@@ -99,7 +102,7 @@
|
||||
const { setSortFavorites } = useAppearanceSettingsStore();
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { favoriteFriendGroups, groupedByGroupKeyFavoriteFriends } = storeToRefs(useFavoriteStore());
|
||||
const { showFriendImportDialog, saveSortFavoritesOption } = useFavoriteStore();
|
||||
const { showFriendImportDialog } = useFavoriteStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const friendExportDialogVisible = ref(false);
|
||||
@@ -138,3 +141,15 @@
|
||||
emit('change-favorite-group-name', group);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.x-friend-list :deep(.editing) {
|
||||
display: none;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.editing) {
|
||||
display: block;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.default) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</span>
|
||||
<span v-else class="extra">{{ localFavFakeRef.authorName }}</span>
|
||||
</div>
|
||||
<template v-if="editFavoritesMode">
|
||||
<div class="editing">
|
||||
<el-dropdown trigger="click" size="small" style="margin-left: 5px">
|
||||
<div>
|
||||
<el-tooltip
|
||||
@@ -40,8 +40,8 @@
|
||||
<el-button v-if="!isLocalFavorite" type="text" size="small" @click.stop style="margin-left: 5px">
|
||||
<el-checkbox v-model="isSelected"></el-checkbox>
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
</div>
|
||||
<div class="default">
|
||||
<el-tooltip
|
||||
v-if="!isLocalFavorite && favorite.deleted"
|
||||
placement="left"
|
||||
@@ -89,7 +89,7 @@
|
||||
type="default"
|
||||
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</div>
|
||||
<el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
|
||||
<el-button
|
||||
v-if="shiftHeld"
|
||||
@@ -142,7 +142,6 @@
|
||||
const props = defineProps({
|
||||
group: [Object, String],
|
||||
favorite: Object,
|
||||
editFavoritesMode: Boolean,
|
||||
isLocalFavorite: { type: Boolean, default: false }
|
||||
});
|
||||
|
||||
|
||||
@@ -108,13 +108,16 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
|
||||
<div
|
||||
v-if="group.count"
|
||||
class="x-friend-list"
|
||||
:class="{ 'is-editing': editFavoritesMode }"
|
||||
style="margin-top: 10px">
|
||||
<FavoritesWorldItem
|
||||
v-for="favorite in groupedByGroupKeyFavoriteWorlds[group.key]"
|
||||
:key="favorite.id"
|
||||
:group="group"
|
||||
:favorite="favorite"
|
||||
:edit-favorites-mode="editFavoritesMode"
|
||||
@click="showWorldDialog(favorite.id)"
|
||||
@handle-select="favorite.$selected = $event" />
|
||||
</div>
|
||||
@@ -172,14 +175,17 @@
|
||||
@click.stop="promptLocalWorldFavoriteGroupDelete(group)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div v-if="localWorldFavorites[group].length" class="x-friend-list" style="margin-top: 10px">
|
||||
<div
|
||||
v-if="localWorldFavorites[group].length"
|
||||
class="x-friend-list"
|
||||
:class="{ 'is-editing': editFavoritesMode }"
|
||||
style="margin-top: 10px">
|
||||
<FavoritesWorldItem
|
||||
v-for="favorite in localWorldFavorites[group]"
|
||||
:key="favorite.id"
|
||||
is-local-favorite
|
||||
:group="group"
|
||||
:favorite="favorite"
|
||||
:edit-favorites-mode="editFavoritesMode"
|
||||
@click="showWorldDialog(favorite.id)"
|
||||
@remove-local-world-favorite="removeLocalWorldFavorite" />
|
||||
</div>
|
||||
@@ -440,10 +446,16 @@
|
||||
function refreshLocalWorldFavorite() {
|
||||
emit('refresh-local-world-favorite');
|
||||
}
|
||||
|
||||
function saveSortFavoritesOption() {
|
||||
emit('save-sort-favorites-option');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.x-friend-list :deep(.editing) {
|
||||
display: none;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.editing) {
|
||||
display: block;
|
||||
}
|
||||
.x-friend-list.is-editing :deep(.default) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user