MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 22:03:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Consistent dialog tabs

Browse Source
This commit is contained in:
Natsumi
2025-08-29 16:42:03 +12:00
parent edd722a852
commit 8a903e7d31
5 changed files with 105 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -373,8 +373,8 @@
</div>
</div>
</div>
<el-tabs>
<el-tab-pane :label="t('dialog.avatar.info.header')">
<el-tabs ref="avatarDialogTabsRef" @tab-click="avatarDialogTabClick">
<el-tab-pane name="Info" :label="t('dialog.avatar.info.header')">
<div class="x-friend-list" style="max-height: unset">
<div
v-if="avatarDialog.galleryImages.length || avatarDialog.ref.authorId === currentUser.id"
@@ -556,7 +556,7 @@
</div>
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.avatar.json.header')">
<el-tab-pane name="JSON" :label="t('dialog.avatar.json.header')" style="max-height: 50vh" lazy>
<el-button
type="default"
size="mini"
@@ -658,6 +658,8 @@
defineEmits(['openPreviousImagesDialog']);
const avatarDialogRef = ref(null);
const avatarDialogTabsRef = ref(null);
const avatarDialogLastActiveTab = ref('Info');
const changeAvatarImageDialogVisible = ref(false);
const previousImagesFileId = ref('');
@@ -720,19 +722,44 @@
watch(
() => avatarDialog.value.loading,
(newVal) => {
if (newVal) {
() => {
if (avatarDialog.value.visible) {
nextTick(() => {
const D = avatarDialog.value;
if (D.visible) {
if (avatarDialogRef.value?.$el) {
adjustDialogZ(avatarDialogRef.value.$el);
}
});
handleDialogOpen();
!avatarDialog.value.loading && toggleLastActiveTab();
}
}
);
function handleAvatarDialogTab(name) {
if (name === 'JSON') {
refreshAvatarDialogTreeData();
}
}
function toggleLastActiveTab() {
let tabName = avatarDialogTabsRef.value.currentName;
console.log(tabName);
if (tabName === '0') {
tabName = avatarDialogLastActiveTab.value;
avatarDialogTabsRef.value.setCurrentName(tabName);
}
handleAvatarDialogTab(tabName);
avatarDialogLastActiveTab.value = tabName;
}
function avatarDialogTabClick(obj) {
if (avatarDialogLastActiveTab.value === obj.name) {
return;
}
handleAvatarDialogTab(obj.name);
avatarDialogLastActiveTab.value = obj.name;
}
function getImageUrlFromImageId(imageId) {
return `https://api.vrchat.cloud/api/1/file/${imageId}/1/`;
}

110
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -553,7 +553,7 @@
</div>
<el-tabs ref="userDialogTabsRef" @tab-click="userDialogTabClick">
<el-tab-pane :label="t('dialog.user.info.header')">
<el-tab-pane name="Info" :label="t('dialog.user.info.header')">
<template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
<div
v-if="userDialog.ref.location"
@@ -1085,7 +1085,7 @@
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.user.groups.header')" lazy>
<el-tab-pane name="Groups" :label="t('dialog.user.groups.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<el-button
@@ -1488,7 +1488,7 @@
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.user.worlds.header')" lazy>
<el-tab-pane name="Worlds" :label="t('dialog.user.worlds.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<el-button
@@ -1570,7 +1570,7 @@
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.user.favorite_worlds.header')" lazy>
<el-tab-pane name="Favorite Worlds" :label="t('dialog.user.favorite_worlds.header')" lazy>
<el-button
v-if="userFavoriteWorlds && userFavoriteWorlds.length > 0"
type="default"
@@ -1628,7 +1628,7 @@
</el-tabs>
</el-tab-pane>
<el-tab-pane :label="t('dialog.user.avatars.header')" lazy>
<el-tab-pane name="Avatars" :label="t('dialog.user.avatars.header')" lazy>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<el-button
@@ -1736,7 +1736,7 @@
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.user.json.header')" lazy style="height: 50vh">
<el-tab-pane name="JSON" :label="t('dialog.user.json.header')" lazy style="height: 50vh">
<el-button
type="default"
size="mini"
@@ -1900,7 +1900,11 @@
() => userDialog.value.loading,
() => {
if (userDialog.value.visible) {
nextTick(() => adjustDialogZ(userDialogRef.value.$el));
nextTick(() => {
if (userDialogTabsRef.value?.$el) {
adjustDialogZ(userDialogTabsRef.value.$el);
}
});
!userDialog.value.loading && toggleLastActiveTab(userDialog.value.id);
}
}
@@ -1914,7 +1918,7 @@
const userDialogGroupAllSelected = ref(false);
const userDialogGroupEditSelectedGroupIds = ref([]); // selected groups in edit mode
const userDialogLastActiveTab = ref('');
const userDialogLastActiveTab = ref('Info');
const userDialogLastGroup = ref('');
const userDialogLastAvatar = ref('');
const userDialogLastWorld = ref('');
@@ -1996,42 +2000,57 @@
userDialog.value.note = note.replace(/[\r\n]/g, '');
}
function toggleLastActiveTab(userId) {
if (userDialogTabsRef.value.currentName === '0') {
userDialogLastActiveTab.value = t('dialog.user.info.header');
} else if (userDialogTabsRef.value.currentName === '1') {
userDialogLastActiveTab.value = t('dialog.user.groups.header');
function handleUserDialogTab(name, userId) {
if (name === 'Groups') {
if (userDialogLastGroup.value !== userId) {
userDialogLastGroup.value = userId;
getUserGroups(userId);
}
} else if (userDialogTabsRef.value.currentName === '2') {
userDialogLastActiveTab.value = t('dialog.user.worlds.header');
} else if (name === 'Avatars') {
setUserDialogAvatars(userId);
if (userDialogLastAvatar.value !== userId) {
userDialogLastAvatar.value = userId;
if (userId === currentUser.value.id) {
refreshUserDialogAvatars();
} else {
setUserDialogAvatarsRemote(userId);
}
}
} else if (name === 'Worlds') {
setUserDialogWorlds(userId);
if (userDialogLastWorld.value !== userId) {
userDialogLastWorld.value = userId;
refreshUserDialogWorlds();
}
} else if (userDialogTabsRef.value.currentName === '3') {
userDialogLastActiveTab.value = t('dialog.user.favorite_worlds.header');
} else if (name === 'Favorite Worlds') {
if (userDialogLastFavoriteWorld.value !== userId) {
userDialogLastFavoriteWorld.value = userId;
getUserFavoriteWorlds(userId);
}
} else if (userDialogTabsRef.value.currentName === '4') {
userDialogLastActiveTab.value = t('dialog.user.avatars.header');
setUserDialogAvatars(userId);
userDialogLastAvatar.value = userId;
if (userId === currentUser.value.id) {
refreshUserDialogAvatars();
}
setUserDialogAvatarsRemote(userId);
} else if (userDialogTabsRef.value.currentName === '5') {
userDialogLastActiveTab.value = t('dialog.user.json.header');
} else if (name === 'JSON') {
refreshUserDialogTreeData();
}
}
function toggleLastActiveTab(userId) {
let tabName = userDialogTabsRef.value.currentName;
if (tabName === '0') {
tabName = userDialogLastActiveTab.value;
userDialogTabsRef.value.setCurrentName(tabName);
}
handleUserDialogTab(tabName, userId);
userDialogLastActiveTab.value = tabName;
}
function userDialogTabClick(obj) {
const userId = userDialog.value.id;
if (userDialogLastActiveTab.value === obj.name) {
return;
}
handleUserDialogTab(obj.name, userId);
userDialogLastActiveTab.value = obj.label;
}
function showPronounsDialog() {
const D = pronounsDialog.value;
D.pronouns = currentUser.value.pronouns;
@@ -2743,43 +2762,6 @@
userDialog.value.isFavoriteWorldsLoading = false;
}
function userDialogTabClick(obj) {
const userId = userDialog.value.id;
if (userDialogLastActiveTab.value === obj.label) {
return;
}
if (obj.label === t('dialog.user.groups.header')) {
if (userDialogLastGroup.value !== userId) {
userDialogLastGroup.value = userId;
getUserGroups(userId);
}
} else if (obj.label === t('dialog.user.avatars.header')) {
setUserDialogAvatars(userId);
if (userDialogLastAvatar.value !== userId) {
userDialogLastAvatar.value = userId;
if (userId === currentUser.value.id) {
refreshUserDialogAvatars();
} else {
setUserDialogAvatarsRemote(userId);
}
}
} else if (obj.label === t('dialog.user.worlds.header')) {
setUserDialogWorlds(userId);
if (userDialogLastWorld.value !== userId) {
userDialogLastWorld.value = userId;
refreshUserDialogWorlds();
}
} else if (obj.label === t('dialog.user.favorite_worlds.header')) {
if (userDialogLastFavoriteWorld.value !== userId) {
userDialogLastFavoriteWorld.value = userId;
getUserFavoriteWorlds(userId);
}
} else if (obj.label === t('dialog.user.json.header')) {
refreshUserDialogTreeData();
}
userDialogLastActiveTab.value = obj.label;
}
function checkNote(ref, note) {
if (ref.note !== note) {
addNote(ref.id, note);

37
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -325,7 +325,7 @@
</div>
</div>
<el-tabs ref="worldDialogTabsRef" @tab-click="worldDialogTabClick">
<el-tab-pane :label="t('dialog.world.instances.header')">
<el-tab-pane name="Instances" :label="t('dialog.world.instances.header')">
<div class="">
<i class="el-icon-user" />
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
@@ -436,7 +436,7 @@
</template>
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.world.info.header')" lazy>
<el-tab-pane name="Info" :label="t('dialog.world.info.header')" lazy>
<div class="x-friend-list" style="max-height: none">
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
@@ -719,13 +719,13 @@
</div>
</div>
</el-tab-pane>
<el-tab-pane :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy>
<el-tab-pane name="JSON" :label="t('dialog.world.json.header')" style="max-height: 50vh" lazy>
<el-button
type="default"
size="mini"
icon="el-icon-refresh"
circle
@click="refreshWorldDialogTreeData()"></el-button>
@click="refreshWorldDialogTreeData"></el-button>
<el-button
type="default"
size="mini"
@@ -928,7 +928,7 @@
const worldDialogRef = ref(null);
const worldDialogTabsRef = ref(null);
const worldDialogLastActiveTab = ref('');
const worldDialogLastActiveTab = ref('Instances');
watch(
() => worldDialog.value.loading,
@@ -944,25 +944,28 @@
}
);
function toggleLastActiveTab() {
if (worldDialogTabsRef.value.currentName === '0') {
worldDialogLastActiveTab.value = t('dialog.world.instances.header');
} else if (worldDialogTabsRef.value.currentName === '1') {
worldDialogLastActiveTab.value = t('dialog.world.info.header');
} else if (worldDialogTabsRef.value.currentName === '2') {
worldDialogLastActiveTab.value = t('dialog.world.json.header');
function handleWorldDialogTab(tabName) {
if (tabName === 'JSON') {
refreshWorldDialogTreeData();
}
}
function toggleLastActiveTab() {
let tabName = worldDialogTabsRef.value.currentName;
if (tabName === '0') {
tabName = worldDialogLastActiveTab.value;
worldDialogTabsRef.value.setCurrentName(tabName);
}
handleWorldDialogTab(tabName);
worldDialogLastActiveTab.value = tabName;
}
function worldDialogTabClick(obj) {
if (worldDialogLastActiveTab.value === obj.label) {
if (worldDialogLastActiveTab.value === obj.name) {
return;
}
if (obj.label === t('dialog.world.json.header')) {
refreshWorldDialogTreeData();
}
worldDialogLastActiveTab.value = obj.label;
handleWorldDialogTab(obj.name);
worldDialogLastActiveTab.value = obj.name;
}
function displayPreviousImages(command) {

2
src/localization/en/en.json
View File

@@ -130,7 +130,7 @@
"copy": "Copy",
"clear": "Clear",
"bulk_unfavorite": "Bulk Unfavorite",
"refresh_tooltip": "Refresh all favorites",
"refresh_favorites_tooltip": "Refresh VRChat favorites",
"export": "Export",
"import": "Import",
"move_tooltip": "Move",

5
src/views/Favorites/Favorites.vue
View File

@@ -14,7 +14,10 @@
<span class="name">{{ t('view.favorite.edit_mode') }}</span>
<el-switch v-model="editFavoritesMode" style="margin-left: 5px"></el-switch>
</div>
<el-tooltip placement="bottom" :content="t('view.favorite.refresh_tooltip')" :disabled="hideTooltips">
<el-tooltip
placement="bottom"
:content="t('view.favorite.refresh_favorites_tooltip')"
:disabled="hideTooltips">
<el-button
type="default"
:loading="isFavoriteLoading"