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

refactor css

Browse Source
This commit is contained in:
pa
2026-03-08 21:01:57 +09:00
parent c55d5f0ec7
commit 2b2dbc898e
5 changed files with 733 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,21 +46,30 @@
:location="userDialog.ref.location"
:traveling="userDialog.ref.travelingToLocation" />
</div>
<div class="x-friend-list" style="flex: 1; margin-top: 10px; max-height: 150px">
<div
class="flex flex-wrap items-start"
style="flex: 1; margin-top: 10px; max-height: 150px; overflow: auto">
<div
v-if="userDialog.$location.userId"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(userDialog.$location.userId)">
<template v-if="userDialog.$location.user">
<div class="avatar" :class="userStatusClass(userDialog.$location.user)">
<img :src="userImage(userDialog.$location.user, true)" loading="lazy" />
<div
class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(userDialog.$location.user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(userDialog.$location.user, true)"
loading="lazy" />
</div>
<div class="detail">
<div class="flex-1 overflow-hidden">
<span
class="name"
class="block truncate font-medium leading-[18px]"
:style="{ color: userDialog.$location.user.$userColour }"
v-text="userDialog.$location.user.displayName"></span>
<span class="extra">{{ t('dialog.user.info.instance_creator') }}</span>
<span class="block truncate text-xs">{{
t('dialog.user.info.instance_creator')
}}</span>
</div>
</template>
<span v-else v-text="userDialog.$location.userId"></span>
@@ -68,21 +77,26 @@
<div
v-for="user in userDialog.users"
:key="user.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(user.id)">
<div class="avatar" :class="userStatusClass(user)">
<img :src="userImage(user, true)" loading="lazy" />
<div
class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(user, true)"
loading="lazy" />
</div>
<div class="detail">
<div class="flex-1 overflow-hidden">
<span
class="name"
class="block truncate font-medium leading-[18px]"
:style="{ color: user.$userColour }"
v-text="user.displayName"></span>
<span v-if="user.location === 'traveling'" class="extra">
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
<Spinner class="inline-block mr-1" />
<Timer :epoch="user.$travelingToTime" />
</span>
<span v-else class="extra">
<span v-else class="block truncate text-xs">
<Timer :epoch="user.$location_at" />
</span>
</div>
@@ -91,15 +105,16 @@
</div>
</template>
<div class="x-friend-list" style="max-height: none">
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
<div
v-if="userDialog.note && !hideUserNotes"
class="x-friend-item"
style="width: 100%; cursor: pointer">
<div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
<span class="name">{{ t('dialog.user.info.note') }}</span>
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.note')
}}</span>
<pre
class="extra"
class="text-xs"
style="
font-family: inherit;
font-size: 12px;
@@ -114,12 +129,13 @@
</div>
<div
v-if="userDialog.memo && !hideUserMemos"
class="x-friend-item"
style="width: 100%; cursor: pointer">
<div class="detail" @click="isEditNoteAndMemoDialogVisible = true">
<span class="name">{{ t('dialog.user.info.memo') }}</span>
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.memo')
}}</span>
<pre
class="extra"
class="text-xs"
style="
font-family: inherit;
font-size: 12px;
@@ -132,9 +148,9 @@
>
</div>
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span class="name">
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">
{{
userDialog.id !== currentUser.id &&
userDialog.ref.profilePicOverride &&
@@ -149,7 +165,7 @@
<Info class="inline-block" />
</TooltipWrapper>
</span>
<div class="extra">
<div class="text-xs">
<AvatarInfo
:key="userDialog.id"
:imageurl="userDialog.ref.currentAvatarImageUrl"
@@ -159,9 +175,9 @@
</div>
</div>
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span class="name" style="margin-bottom: 5px">{{
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" style="margin-bottom: 5px">{{
t('dialog.user.info.represented_group')
}}</span>
<div
@@ -169,7 +185,7 @@
userDialog.isRepresentedGroupLoading ||
(userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
"
class="extra">
class="text-xs">
<div style="display: inline-block; flex: none; margin-right: 5px">
<Avatar
class="cursor-pointer size-15! rounded-lg!"
@@ -197,14 +213,16 @@
<span>({{ userDialog.representedGroup.memberCount }})</span>
</span>
</div>
<div v-else class="extra">-</div>
<div v-else class="text-xs">-</div>
</div>
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.user.info.bio') }}</span>
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.bio')
}}</span>
<pre
class="extra truncate"
class="text-xs truncate"
style="
font-family: inherit;
font-size: 12px;
@@ -257,19 +275,23 @@
</div>
</div>
<template v-if="currentUser.id !== userDialog.id">
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.last_seen') }}
</span>
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
<span class="block truncate text-xs">{{
formatDateFilter(userDialog.lastSeen, 'long')
}}</span>
</div>
</div>
<div class="x-friend-item" @click="showPreviousInstancesListDialog(userDialog.ref)">
<div class="detail">
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="showPreviousInstancesListDialog(userDialog.ref)">
<div class="flex-1 overflow-hidden">
<div
class="name"
class="block truncate font-medium leading-[18px]"
style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('dialog.user.info.join_count') }}
@@ -279,18 +301,20 @@
<MoreHorizontal style="margin-right: 16px" />
</TooltipWrapper>
</div>
<span v-if="userDialog.joinCount === 0" class="extra">-</span>
<span v-else class="extra" v-text="userDialog.joinCount"></span>
<span v-if="userDialog.joinCount === 0" class="block truncate text-xs">-</span>
<span v-else class="block truncate text-xs" v-text="userDialog.joinCount"></span>
</div>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.time_together') }}
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
<span v-else class="block truncate text-xs">{{
timeToText(userDialog.timeSpent)
}}</span>
</div>
</div>
</template>
@@ -299,36 +323,40 @@
:disabled="currentUser.id !== userDialog.id"
side="top"
:content="t('dialog.user.info.open_previous_instance')">
<div class="x-friend-item" @click="showPreviousInstancesListDialog(userDialog.ref)">
<div class="detail">
<span class="name">
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="showPreviousInstancesListDialog(userDialog.ref)">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.play_time') }}
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
<span v-else class="block truncate text-xs">{{
timeToText(userDialog.timeSpent)
}}</span>
</div>
</div>
</TooltipWrapper>
</template>
<div class="x-friend-item" style="cursor: default">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<template #content>
<span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
</template>
<div class="detail">
<div class="flex-1 overflow-hidden">
<span
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
class="name">
class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.online_for') }}
</span>
<span v-else class="name">
<span v-else class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.offline_for') }}
</span>
<span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
<span class="block truncate text-xs">{{ userOnlineFor(userDialog.ref) }}</span>
</div>
</TooltipWrapper>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
<template #content>
<span
@@ -341,22 +369,28 @@
{{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
>
</template>
<div class="detail">
<span class="name">{{ t('dialog.user.info.last_activity') }}</span>
<span v-if="userDialog.ref.last_activity" class="extra">{{
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.last_activity')
}}</span>
<span v-if="userDialog.ref.last_activity" class="block truncate text-xs">{{
timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
}}</span>
<span v-else class="extra">-</span>
<span v-else class="block truncate text-xs">-</span>
</div>
</TooltipWrapper>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.user.info.date_joined') }}</span>
<span class="extra" v-text="userDialog.ref.date_joined"></span>
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.date_joined')
}}</span>
<span class="block truncate text-xs" v-text="userDialog.ref.date_joined"></span>
</div>
</div>
<div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
<div
v-if="currentUser.id !== userDialog.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<TooltipWrapper side="top" :disabled="userDialog.dateFriendedInfo.length < 2">
<template #content>
<template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
@@ -364,80 +398,118 @@
><br />
</template>
</template>
<div class="detail">
<span v-if="userDialog.unFriended" class="name">
<div class="flex-1 overflow-hidden">
<span v-if="userDialog.unFriended" class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.unfriended') }}
</span>
<span v-else class="name">
<span v-else class="block truncate font-medium leading-[18px]">
{{ t('dialog.user.info.friended') }}
</span>
<span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
<span class="block truncate text-xs">{{
formatDateFilter(userDialog.dateFriended, 'long')
}}</span>
</div>
</TooltipWrapper>
</div>
<template v-if="currentUser.id === userDialog.id">
<div class="x-friend-item" @click="toggleAvatarCopying">
<div class="detail">
<span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
<span v-if="currentUser.allowAvatarCopying" class="extra">{{
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="toggleAvatarCopying">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.avatar_cloning')
}}</span>
<span v-if="currentUser.allowAvatarCopying" class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
<span v-else class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
</div>
<div class="x-friend-item" @click="toggleAllowBooping">
<div class="detail">
<span class="name">{{ t('dialog.user.info.booping') }}</span>
<span v-if="currentUser.isBoopingEnabled" class="extra">{{
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="toggleAllowBooping">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.booping')
}}</span>
<span v-if="currentUser.isBoopingEnabled" class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
<span v-else class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
</div>
<div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
<div class="detail">
<span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
<span v-if="!currentUser.hasSharedConnectionsOptOut" class="extra">{{
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="toggleSharedConnectionsOptOut">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.show_mutual_friends')
}}</span>
<span v-if="!currentUser.hasSharedConnectionsOptOut" class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
<span v-else class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
</div>
<div class="x-friend-item" @click="toggleDiscordFriendsOptOut">
<div class="detail">
<span class="name">{{ t('dialog.user.info.show_discord_connections') }}</span>
<span v-if="!currentUser.hasDiscordFriendsOptOut" class="extra">{{
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="toggleDiscordFriendsOptOut">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.show_discord_connections')
}}</span>
<span v-if="!currentUser.hasDiscordFriendsOptOut" class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
<span v-else class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
</div>
</template>
<template v-else>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
<span v-if="userDialog.ref.allowAvatarCopying" class="extra">{{
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.avatar_cloning')
}}</span>
<span v-if="userDialog.ref.allowAvatarCopying" class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{ t('dialog.user.info.avatar_cloning_deny') }}</span>
<span v-else class="block truncate text-xs">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
</div>
</template>
<div v-if="userDialog.ref.id === currentUser.id" class="x-friend-item" @click="getVRChatCredits()">
<div class="detail">
<span class="name">{{ t('view.profile.profile.vrchat_credits') }}</span>
<span class="extra">{{ vrchatCredit ?? t('view.profile.profile.refresh') }}</span>
<div
v-if="userDialog.ref.id === currentUser.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
@click="getVRChatCredits()">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('view.profile.profile.vrchat_credits')
}}</span>
<span class="block truncate text-xs">{{
vrchatCredit ?? t('view.profile.profile.refresh')
}}</span>
</div>
</div>
<div
v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
class="x-friend-item"
style="width: 100%"
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer"
@click="showWorldDialog(currentUser.homeLocation)">
<div class="detail">
<span class="name">{{ t('dialog.user.info.home_location') }}</span>
<span class="extra">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.home_location')
}}</span>
<span class="block truncate text-xs">
<span v-text="userDialog.$homeLocationName"></span>
<Button
class="rounded-full ml-1 text-xs"
@@ -449,10 +521,12 @@
</span>
</div>
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.user.info.id') }}</span>
<span class="extra">
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.user.info.id')
}}</span>
<span class="block truncate text-xs">
{{ userDialog.id }}
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
<DropdownMenu>
@@ -520,17 +594,22 @@
</Select>
</div>
</div>
<ul class="x-friend-list" style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
<ul
class="flex flex-wrap items-start"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
<li
v-for="user in userDialog.mutualFriends"
:key="user.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(user.id)">
<div class="avatar">
<img :src="userImage(user)" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img class="size-full rounded-full object-cover" :src="userImage(user)" loading="lazy" />
</div>
<div class="detail">
<span class="name" :style="{ color: user.$userColour }" v-text="user.displayName"></span>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
:style="{ color: user.$userColour }"
v-text="user.displayName"></span>
</div>
</li>
</ul>
@@ -605,7 +684,9 @@
</div>
<div style="margin-top: 10px">
<template v-if="userDialogGroupEditMode">
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
<!-- Bulk actions dropdown (shown only in edit mode) -->
<Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
<SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
@@ -643,8 +724,7 @@
<div
v-for="group in userDialogGroupEditGroups"
:key="group.id"
class="x-friend-item x-friend-item-border"
style="width: 100%"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-full hover:rounded-[25px_5px_5px_25px]"
@click="showGroupDialog(group.id)">
<!-- Manual checkbox -->
<div
@@ -698,12 +778,15 @@
<ArrowDown />
</Button>
</div>
<div class="avatar">
<img :src="group.iconUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="group.iconUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" v-text="group.name"></span>
<span class="block truncate text-xs">
<TooltipWrapper
v-if="group.isRepresenting"
side="top"
@@ -799,18 +882,25 @@
cachedConfig?.constants?.GROUPS?.MAX_OWNED
}}</span
>
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.ownGroups"
:key="group.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showGroupDialog(group.id)">
<div class="avatar">
<img :src="group.iconUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="group.iconUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra inline-flex! items-center">
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="group.name"></span>
<span class="block truncate text-xs inline-flex! items-center">
<TooltipWrapper
v-if="group.isRepresenting"
side="top"
@@ -839,18 +929,25 @@
<span style="font-size: 12px; margin-left: 5px">{{
userDialog.userGroups.mutualGroups.length
}}</span>
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.mutualGroups"
:key="group.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showGroupDialog(group.id)">
<div class="avatar">
<img :src="group.iconUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="group.iconUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="group.name"></span>
<span class="extra inline-flex! items-center">
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="group.name"></span>
<span class="block truncate text-xs inline-flex! items-center">
<TooltipWrapper
v-if="group.isRepresenting"
side="top"
@@ -886,18 +983,25 @@
</template>
</template>
</span>
<div class="x-friend-list" style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.remainingGroups"
:key="group.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showGroupDialog(group.id)">
<div class="avatar">
<img :src="group.iconUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="group.iconUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="group.name"></span>
<div class="extra inline-flex! items-center">
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="group.name"></span>
<div class="block truncate text-xs inline-flex! items-center">
<TooltipWrapper
v-if="group.isRepresenting"
side="top"
@@ -976,19 +1080,24 @@
</Select>
</div>
</div>
<div class="x-friend-list" style="margin-top: 10px; min-height: 60px">
<div class="flex flex-wrap items-start" style="margin-top: 10px; min-height: 60px">
<template v-if="userDialog.worlds.length">
<div
v-for="world in userDialog.worlds"
:key="world.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showWorldDialog(world.id)">
<div class="avatar">
<img :src="world.thumbnailImageUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="world.thumbnailImageUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="world.name"></span>
<span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" v-text="world.name"></span>
<span v-if="world.occupants" class="block truncate text-xs"
>({{ world.occupants }})</span
>
</div>
</div>
</template>
@@ -1049,19 +1158,26 @@
:key="`favorite-worlds-content-${index}`"
v-slot:[String(index)]>
<div
class="x-friend-list"
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none">
<div
v-for="world in list[2]"
:key="world.favoriteId"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showWorldDialog(world.id)">
<div class="avatar">
<img :src="world.thumbnailImageUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
class="size-full rounded-full object-cover"
:src="world.thumbnailImageUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="world.name"></span>
<span v-if="world.occupants" class="extra">({{ world.occupants }})</span>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="world.name"></span>
<span v-if="world.occupants" class="block truncate text-xs"
>({{ world.occupants }})</span
>
</div>
</div>
</div>
@@ -1149,29 +1265,35 @@
</template>
</div>
</div>
<div class="x-friend-list" style="margin-top: 10px; min-height: 60px; max-height: 50vh">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; min-height: 60px; max-height: 50vh; overflow: auto">
<template v-if="filteredUserDialogAvatars.length">
<div
v-for="avatar in filteredUserDialogAvatars"
:key="avatar.id"
class="x-friend-item x-friend-item-border"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showAvatarDialog(avatar.id)">
<div class="avatar">
<img v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" loading="lazy" />
<div class="relative inline-block flex-none size-9 mr-2.5">
<img
v-if="avatar.thumbnailImageUrl"
class="size-full rounded-full object-cover"
:src="avatar.thumbnailImageUrl"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="avatar.name"></span>
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]" v-text="avatar.name"></span>
<span
v-if="avatar.releaseStatus === 'public'"
class="extra"
class="block truncate text-xs"
v-text="avatar.releaseStatus">
</span>
<span
v-else-if="avatar.releaseStatus === 'private'"
class="extra"
class="block truncate text-xs"
v-text="avatar.releaseStatus">
</span>
<span v-else class="extra" v-text="avatar.releaseStatus"></span>
<span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
</div>
</div>
</template>
@@ -1318,11 +1440,11 @@
userRequest,
worldRequest
} from '../../../api';
import { processBulk } from '../../../service/request';
import { userDialogGroupSortingOptions, userDialogMutualFriendSortingOptions } from '../../../shared/constants';
import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
import { database } from '../../../service/database';
import { formatJsonVars } from '../../../shared/utils/base/ui';
import { processBulk } from '../../../service/request';
import InstanceActionBar from '../../InstanceActionBar.vue';
import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';