github/VRCX
1
1
Fork 0
mirror of https://github.com/vrcx-team/VRCX.git synced 2026-04-06 00:32:02 +02:00
Code Issues 51 Packages Projects Releases Wiki Activity

refactor css

Browse Source
This commit is contained in:
pa
2026-03-08 21:32:16 +09:00
parent 2b2dbc898e
commit ddee396376
15 changed files with 335 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/app.css
View File

@@ -35,309 +35,10 @@ html.dark .x-container {
background: var(--sidebar);
}
.x-friend-list {
padding: 0 10px;
overflow: hidden auto;
}
.x-friend-group > .rotation-transition {
transition: transform 0.3s;
}
.x-dialog .x-friend-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-height: 300px;
}
.x-friend-list > .x-friend-group {
padding: 16px 0 5px;
font-size: 12px;
}
.x-friend-item {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 6px;
font-size: 13px;
cursor: pointer;
}
.x-friend-item > .avatar {
position: relative;
display: inline-block;
flex: none;
width: 36px;
height: 36px;
margin-right: 10px;
background-color: transparent;
}
.x-friend-item > img.avatar,
img.friends-list-avatar {
width: unset;
height: 22.5px;
margin-right: 0;
margin-left: 5px;
border-radius: 2px;
}
.x-friend-item > .avatar > img,
.x-friend-item > .avatar > .avatar > img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background-color: transparent;
}
.x-friend-item .active img,
.x-friend-item .offline img {
filter: grayscale(1);
}
.x-friend-item:hover .active img,
.x-friend-item:hover .offline img {
filter: none;
}
.x-friend-item .status-icon.mobile img {
mask-image: url(/images/masks/usercutoutmobile.svg);
}
.x-friend-item .status-icon.mobile::after {
position: absolute;
right: -2px;
bottom: -0.5px;
width: 14px;
height: 14px;
content: '';
border-radius: 0px;
mask-image: url(/images/masks/phone.svg) !important;
}
.x-friend-item .status-icon img {
mask-image: url(/images/masks/usercutout.svg);
}
.x-friend-item .status-icon::after {
position: absolute;
right: 0.75px;
bottom: 0.75px;
width: 9px;
height: 9px;
content: '';
background: var(--status-offline);
border-radius: 50%;
}
.x-friend-item .status-icon.active::after {
background: var(--status-active);
}
.x-friend-item .status-icon.online::after {
background: var(--status-online);
}
.x-friend-item .status-icon.joinme::after {
background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg);
}
.x-friend-item .status-icon.askme::after {
background: var(--status-askme);
mask-image: url(/images/masks/askme.svg);
}
.x-friend-item .status-icon.busy::after {
background: var(--status-busy);
mask-image: url(/images/masks/busy.svg);
}
.x-friend-item .status-icon.offline::after {
background: var(--status-offline);
}
.x-friend-item > .detail {
flex: 1;
overflow: hidden;
}
.x-friend-item > .detail > .name,
.x-friend-item > .detail > .extra {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x-friend-item > .detail > .name {
font-weight: 500;
line-height: 18px;
}
.x-friend-item > .detail > .extra {
font-size: 12px;
}
.x-friend-item > .detail > .extra > span > span:first-child {
scale: 0.9;
margin-right: 2px;
}
.x-friend-item:hover {
border-radius: 8px;
}
.x-friend-item-no-hover:hover {
background: unset !important;
}
.x-friend-item-border:hover {
border-top-left-radius: 25px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 25px;
}
.x-dialog .x-friend-item {
width: 167px;
}
i.x-user-status,
i.x-status-icon {
display: inline-block;
width: 10px;
height: 10px;
background: var(--status-offline-alt);
border-radius: 50%;
}
i.x-user-status.active {
background: var(--status-active);
}
i.x-user-status.online {
background: var(--status-online);
}
i.x-user-status.joinme {
background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg);
}
i.x-user-status.askme {
background: var(--status-askme);
mask-image: url(/images/masks/askme.svg);
}
i.x-user-status.busy {
background: var(--status-busy);
mask-image: url(/images/masks/busy.svg);
}
i.x-status-icon.green {
background: var(--status-online);
}
i.x-status-icon.blue {
background: var(--status-joinme);
}
i.x-status-icon.orange {
background: var(--status-askme);
}
i.x-status-icon.red {
background: var(--status-busy);
}
.x-tag-platform-pc {
color: var(--platform-pc);
border-color: var(--platform-pc) !important;
}
.x-tag-platform-quest {
color: var(--platform-quest);
border-color: var(--platform-quest) !important;
}
.x-tag-friend {
color: var(--color-amber-400);
border-color: var(--color-amber-400) !important;
}
.x-tag-age-verification {
color: #3b82f6;
border-color: #3b82f6 !important;
}
.x-tag-discord {
color: #7289da;
border-color: #7289da !important;
}
.x-tag-border-left {
border-left: 0.8px solid;
margin-left: 5px;
padding-left: 5px;
padding-bottom: 0.5px;
}
.options-container {
margin-top: 30px;
padding: 0 10px 10px 10px;
}
.options-container .header-bar {
display: flex;
align-items: center;
}
.options-container .header {
font-weight: bold;
font-size: 20px;
}
.options-container .sub-header {
font-weight: bold;
font-size: 15px;
}
.options-container-item {
font-size: 12px;
margin-top: 5px;
display: flex;
align-items: center;
}
.options-container-item .name {
display: inline-block;
width: 235px;
}
.x-app > .x-container {
padding-top: 15px;
}
/* Bio diff */
.x-text-removed {
text-decoration: line-through;
color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
.x-text-added {
color: rgb(35, 188, 35);
background-color: rgba(76, 255, 80, 0.2);
padding: 2px 2px;
border-radius: 4px;
}
/*FIXME: this is a nasty temporary hack*/
.force-pointer-on-hover a,
.force-pointer-on-hover button,

7
src/components/InstanceActionBar.vue
View File

@@ -80,11 +80,12 @@
<br /><br />
</template>
<span>
<span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
<span class="text-platform-pc border-platform-pc!">PC: </span
>{{ instance?.platforms?.standalonewindows }}
</span>
<br />
<span>
<span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
<span class="text-platform-quest border-platform-quest!">Android: </span
>{{ instance?.platforms?.android }}
</span>
<br />
<span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>

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

@@ -44,36 +44,36 @@
</Badge>
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<Badge
class="x-tag-platform-pc"
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><Monitor class="h-4 w-4 x-tag-platform-pc" />
><Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="avatarDialog.platformInfo.pc"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.pc.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.standalonewindows?._fileSize"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.standalonewindows._fileSize }}</span
>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<Badge
class="x-tag-platform-quest"
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><Smartphone class="h-4 w-4 x-tag-platform-quest" />
><Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="avatarDialog.platformInfo.android"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.android.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.android?._fileSize"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.android._fileSize }}</span
>
</Badge>
@@ -86,22 +86,12 @@
><Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="avatarDialog.platformInfo.ios"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.platformInfo.ios.performanceRating }}</span
>
<span
v-if="avatarDialog.fileAnalysis.ios?._fileSize"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]"
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.fileAnalysis.ios._fileSize }}</span
>
</Badge>
@@ -120,12 +110,14 @@
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>{{ t('view.favorite.avatars.styles') }}
<span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
avatarDialog.ref.styles.primary
}}</span>
<span
v-if="avatarDialog.ref.styles.primary"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.ref.styles.primary }}</span
>
<span
v-if="avatarDialog.ref.styles.secondary"
:class="['x-grey', 'x-tag-border-left']"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ avatarDialog.ref.styles.secondary }}</span
>
</Badge>
@@ -140,7 +132,9 @@
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.impostor') }}
<span v-if="avatarDialog.imposterVersion" :class="['x-grey', 'x-tag-border-left']"
<span
v-if="avatarDialog.imposterVersion"
class="x-grey border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>v{{ avatarDialog.imposterVersion }}</span
>
</Badge>

18
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -84,7 +84,7 @@
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
side="top"
:content="t('dialog.user.tags.age_verified')">
<Badge variant="outline" class="x-tag-age-verification">
<Badge variant="outline" class="text-[#3b82f6] border-[#3b82f6]!">
<template v-if="userDialog.ref.ageVerificationStatus === '18+'">
<IdCard class="h-4 w-4" /> 18+
</template>
@@ -97,7 +97,7 @@
v-if="userDialog.isFriend && userDialog.friend"
side="top"
:content="t('dialog.user.tags.friend_number')">
<Badge variant="outline" class="x-tag-friend">
<Badge variant="outline" class="text-amber-400 border-amber-400!">
<UserPlus class="h-4 w-4" />
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</Badge>
@@ -106,7 +106,7 @@
v-if="userDialog.mutualFriendCount"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<Badge variant="outline" class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!">
<Badge variant="outline" class="border-zinc-500/50! dark:border-zinc-400!">
<Users class="h-4 w-4" />
{{ userDialog.mutualFriendCount }}
</Badge>
@@ -117,7 +117,7 @@
:content="t('dialog.user.tags.open_in_discord')">
<Badge
variant="outline"
class="x-tag-discord cursor-pointer"
class="text-[#7289da] border-[#7289da]! cursor-pointer"
@click="openDiscordProfile(userDialog.ref.discordId)">
<i class="ri-discord-line text-xs"></i>
{{ t('dialog.user.tags.discord') }}
@@ -134,13 +134,13 @@
</Badge>
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<Badge variant="outline" class="x-tag-platform-pc">
<Monitor class="m-0.5 x-tag-platform-pc" />
<Badge variant="outline" class="text-platform-pc border-platform-pc!">
<Monitor class="m-0.5 text-platform-pc" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<Badge variant="outline" class="x-tag-platform-quest">
<Smartphone class="m-0.5 x-tag-platform-quest" />
<Badge variant="outline" class="text-platform-quest border-platform-quest!">
<Smartphone class="m-0.5 text-platform-quest" />
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
@@ -148,7 +148,7 @@
<Apple class="m-0.5 text-platform-ios" />
</Badge>
</TooltipWrapper>
<Badge v-else-if="userDialog.ref.$platform" variant="outline" class="x-tag-platform-other">
<Badge v-else-if="userDialog.ref.$platform" variant="outline" class="text-muted-foreground">
{{ userDialog.ref.$platform }}
</Badge>

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

@@ -55,13 +55,13 @@
</Badge>
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<Badge
class="x-tag-platform-pc"
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Monitor class="h-4 w-4 x-tag-platform-pc" />
<Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="worldDialog.fileAnalysis.standalonewindows?._fileSize"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.standalonewindows._fileSize }}
</span>
</Badge>
@@ -69,13 +69,13 @@
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<Badge
class="x-tag-platform-quest"
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Smartphone class="h-4 w-4 x-tag-platform-quest" />
<Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="worldDialog.fileAnalysis.android?._fileSize"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.android._fileSize }}
</span>
</Badge>
@@ -89,12 +89,7 @@
<Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="worldDialog.fileAnalysis.ios?._fileSize"
:class="[
'x-grey',
'x-tag-border-left',
'text-platform-ios',
'border-platform-ios'
]">
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px">
{{ worldDialog.fileAnalysis.ios._fileSize }}
</span>
</Badge>

2
src/styles/globals.css
View File

@@ -11,6 +11,8 @@
@import './animated-emoji.css';
@import './fonts.css';
@import './noty.css';
@import './status-icon.css';
@import './options-container.css';
@custom-variant dark (&:is(.dark *));

36
src/styles/options-container.css Normal file
View File

@@ -0,0 +1,36 @@
/*
* Options container layout styles.
* Used in Settings, Tools, and Charts views.
*/
.options-container {
margin-top: 30px;
padding: 0 10px 10px 10px;
}
.options-container .header-bar {
display: flex;
align-items: center;
}
.options-container .header {
font-weight: bold;
font-size: 20px;
}
.options-container .sub-header {
font-weight: bold;
font-size: 15px;
}
.options-container-item {
font-size: 12px;
margin-top: 5px;
display: flex;
align-items: center;
}
.options-container-item .name {
display: inline-block;
width: 235px;
}

57
src/styles/status-icon.css
View File

@@ -67,3 +67,60 @@
border-radius: 0;
mask-image: url(/images/masks/phone.svg) !important;
}
/* Inline status dot indicators (used in dialogs and sidebar) */
i.x-user-status,
i.x-status-icon {
display: inline-block;
width: 10px;
height: 10px;
background: var(--status-offline-alt);
border-radius: 50%;
}
/* Suppress the ::after pseudo-element on inline <i> status dots.
The ::after is for avatar containers (.status-icon divs), not for <i> dots
which display status via their own background property. */
i.x-user-status::after,
i.x-status-icon::after {
display: none;
}
i.x-user-status.active {
background: var(--status-active);
}
i.x-user-status.online {
background: var(--status-online);
}
i.x-user-status.joinme {
background: var(--status-joinme);
mask-image: url(/images/masks/joinme.svg);
}
i.x-user-status.askme {
background: var(--status-askme);
mask-image: url(/images/masks/askme.svg);
}
i.x-user-status.busy {
background: var(--status-busy);
mask-image: url(/images/masks/busy.svg);
}
i.x-status-icon.green {
background: var(--status-online);
}
i.x-status-icon.blue {
background: var(--status-joinme);
}
i.x-status-icon.orange {
background: var(--status-askme);
}
i.x-status-icon.red {
background: var(--status-busy);
}

4
src/views/Charts/components/MutualFriends.vue
View File

@@ -32,7 +32,7 @@
:close-on-select="true"
:deselect-on-reselect="true">
<template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center">
<div class="flex w-full items-center gap-2">
<template v-if="item.user">
<div :class="['avatar', userStatusClass(item.user)]">
<img :src="userImage(item.user)" loading="lazy" />
@@ -172,7 +172,7 @@
:search-placeholder="t('view.charts.mutual_friend.actions.go_to_friend')"
:multiple="true">
<template #item="{ item, selected }">
<div class="x-friend-item flex w-full items-center">
<div class="flex w-full items-center gap-2">
<template v-if="item.user">
<div :class="['avatar', userStatusClass(item.user)]">
<img :src="userImage(item.user)" loading="lazy" />

31
src/views/Login/Login.vue
View File

@@ -103,13 +103,18 @@
<div
v-for="user in savedCredentials"
:key="user.user.id"
class="x-friend-item hover:bg-muted rounded-xs"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer hover:bg-muted rounded-xs"
@click="clickSavedLogin(user)">
<div class="avatar">
<img :src="userImage(user.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.user)"
loading="lazy" />
</div>
<div class="detail">
<span class="name" v-text="user.user.displayName"></span>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
v-text="user.user.displayName"></span>
<span class="block truncate text-xs" v-text="user.user.username"></span>
<span class="block truncate text-xs" v-text="user.loginParams.endpoint"></span>
</div>
@@ -210,11 +215,19 @@
}
});
/**
*
* @param userId
*/
async function clickDeleteSavedLogin(userId) {
await deleteSavedLogin(userId);
await updateSavedCredentials();
}
/**
*
* @param user
*/
async function clickSavedLogin(user) {
await relogin(user);
await updateSavedCredentials();
@@ -227,6 +240,9 @@
await updateSavedCredentials();
});
/**
*
*/
async function updateSavedCredentials() {
if (watchState.isLoggedIn) {
return;
@@ -234,6 +250,9 @@
savedCredentials.value = await getAllSavedCredentials();
}
/**
*
*/
function postLoginRedirect() {
const redirect = route.query.redirect;
if (typeof redirect === 'string' && redirect.startsWith('/') && redirect !== '/login') {
@@ -340,7 +359,7 @@
display: grid;
}
.x-saved-account-list > .x-friend-item {
.x-saved-account-list > div {
width: 100%;
}

7
src/views/MyAvatars/components/MyAvatarCard.vue
View File

@@ -166,10 +166,13 @@
<span class="text-muted-foreground">{{ t('dialog.avatar.info.platform') }}</span>
<div class="flex items-center gap-1">
<Badge v-if="platformInfo.isPC" class="x-tag-platform-pc" variant="outline">
<Badge v-if="platformInfo.isPC" class="text-platform-pc border-platform-pc!" variant="outline">
<Monitor class="h-3 w-3" />
</Badge>
<Badge v-if="platformInfo.isQuest" class="x-tag-platform-quest" variant="outline">
<Badge
v-if="platformInfo.isQuest"
class="text-platform-quest border-platform-quest!"
variant="outline">
<Smartphone class="h-3 w-3" />
</Badge>
<Badge

40
src/views/PlayerList/PlayerList.vue
View File

@@ -58,21 +58,27 @@
{{ t('dialog.world.tags.private') }}
</Badge>
<TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
<Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
<Badge
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px"
><Monitor class="h-4 w-4" />
<span
v-if="currentInstanceWorld.fileAnalysis.standalonewindows?._fileSize"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
class="x-grey text-platform-pc border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ currentInstanceWorld.fileAnalysis.standalonewindows._fileSize }}</span
>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
<Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
<Badge
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px"
><Smartphone class="h-4 w-4" />
<span
v-if="currentInstanceWorld.fileAnalysis.android?._fileSize"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
class="x-grey text-platform-quest border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ currentInstanceWorld.fileAnalysis.android._fileSize }}</span
>
</Badge>
@@ -85,7 +91,7 @@
><Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="currentInstanceWorld.fileAnalysis.ios?._fileSize"
:class="['x-grey', 'x-tag-border-left', 'text-platform-ios', 'border-platform-ios']"
class="x-grey text-platform-ios border-platform-ios border-l-[0.8px] border-solid ml-1.5 pl-1.5 pb-px"
>{{ currentInstanceWorld.fileAnalysis.ios._fileSize }}</span
>
</Badge>
@@ -118,9 +124,11 @@
</div>
</div>
<div style="display: flex; flex-direction: column; margin-left: 20px">
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.world.info.capacity') }}</span>
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.world.info.capacity')
}}</span>
<span class="block truncate text-xs"
>{{ commaNumber(currentInstanceWorld.ref.recommendedCapacity) }} ({{
commaNumber(currentInstanceWorld.ref.capacity)
@@ -128,9 +136,11 @@
>
</div>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.world.info.last_updated') }}</span>
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.world.info.last_updated')
}}</span>
<span class="block truncate text-xs">{{
formatDateFilter(
currentInstanceWorld.fileAnalysis.standalonewindows?.created_at,
@@ -139,9 +149,11 @@
}}</span>
</div>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.world.info.created_at') }}</span>
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('dialog.world.info.created_at')
}}</span>
<span class="block truncate text-xs">{{
formatDateFilter(currentInstanceWorld.ref.created_at, 'long')
}}</span>

10
src/views/Settings/components/Tabs/AdvancedTab.vue
View File

@@ -76,10 +76,12 @@
</div>
<div class="options-container">
<span class="header">{{ t('view.profile.game_info.header') }}</span>
<div class="x-friend-list" style="margin-top: 10px">
<div class="x-friend-item">
<div class="detail" @click="getVisits">
<span class="name">{{ t('view.profile.game_info.online_users') }}</span>
<div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-pointer">
<div class="flex-1 overflow-hidden" @click="getVisits">
<span class="block truncate font-medium leading-[18px]">{{
t('view.profile.game_info.online_users')
}}</span>
<span v-if="visits" class="block truncate text-xs">{{
t('view.profile.game_info.user_online', { count: visits })
}}</span>

38
src/views/Settings/components/Tabs/GeneralTab.vue
View File

@@ -2,31 +2,43 @@
<div>
<div class="options-container" style="margin-top: 0">
<span class="header">{{ t('view.settings.general.general.header') }}</span>
<div class="x-friend-list" style="margin-top: 10px">
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('view.settings.general.general.version') }}</span>
<div class="px-2.5 overflow-y-auto overflow-x-hidden" style="margin-top: 10px">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('view.settings.general.general.version')
}}</span>
<span class="block truncate text-xs" v-text="appVersion"></span>
</div>
</div>
<div class="x-friend-item" @click="checkForVRCXUpdate">
<div class="detail">
<span class="name">{{ t('view.settings.general.general.latest_app_version') }}</span>
<div class="box-border flex items-center p-1.5 text-[13px] cursor-pointer" @click="checkForVRCXUpdate">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('view.settings.general.general.latest_app_version')
}}</span>
<span v-if="latestAppVersion" class="block truncate text-xs" v-text="latestAppVersion"></span>
<span v-else class="block truncate text-xs">{{
t('view.settings.general.general.latest_app_version_refresh')
}}</span>
</div>
</div>
<div class="x-friend-item" @click="openExternalLink(links.github)">
<div class="detail">
<span class="name">{{ t('view.settings.general.general.repository_url') }}</span>
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
@click="openExternalLink(links.github)">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('view.settings.general.general.repository_url')
}}</span>
<span v-once class="block truncate text-xs">{{ links.github }}</span>
</div>
</div>
<div class="x-friend-item" @click="openExternalLink(links.discord)">
<div class="detail">
<span class="name">{{ t('view.settings.general.general.support') }}</span>
<div
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer"
@click="openExternalLink(links.discord)">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
t('view.settings.general.general.support')
}}</span>
<span v-once class="block truncate text-xs">{{ links.discord }}</span>
</div>
</div>

134
src/views/Tools/Gallery.vue
View File

@@ -85,10 +85,9 @@
</ButtonGroup>
<br />
<div
class="x-friend-item"
class="inline-block mt-2.5 w-auto cursor-default"
v-for="image in galleryTable"
:key="image.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
:key="image.id">
<template v-if="image.versions && image.versions.length > 0">
<div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
@@ -158,10 +157,9 @@
</ButtonGroup>
<br />
<div
class="x-friend-item"
class="inline-block mt-2.5 w-auto cursor-default"
v-for="image in VRCPlusIconsTable"
:key="image.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
:key="image.id">
<template v-if="image.versions && image.versions.length > 0"
><div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden"
@@ -295,11 +293,7 @@
</template>
</div>
<br />
<div
class="x-friend-item"
v-for="image in emojiTable"
:key="image.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
<div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in emojiTable" :key="image.id">
<template v-if="image.versions && image.versions.length > 0">
<div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@@ -377,10 +371,9 @@
</ButtonGroup>
<br />
<div
class="x-friend-item"
class="inline-block mt-2.5 w-auto cursor-default"
v-for="image in stickerTable"
:key="image.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
:key="image.id">
<template v-if="image.versions && image.versions.length > 0">
<div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@@ -452,11 +445,7 @@
</label>
</div>
<br />
<div
class="x-friend-item"
v-for="image in printTable"
:key="image.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
<div class="inline-block mt-2.5 w-auto cursor-default" v-for="image in printTable" :key="image.id">
<div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
@@ -523,10 +512,9 @@
</div>
<br />
<div
class="x-friend-item"
class="inline-block mt-2.5 w-auto cursor-default"
v-for="item in inventoryTable"
:key="item.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
:key="item.id">
<div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
<img
class="h-full w-full rounded-[15px] object-cover"
@@ -687,19 +675,35 @@
galleryDialogVisible.value = false;
});
/**
*
*/
function startUpload() {
pendingUploads.value += 1;
}
/**
*
*/
function finishUpload() {
pendingUploads.value = Math.max(0, pendingUploads.value - 1);
}
/**
*
*/
function goBack() {
galleryDialogVisible.value = false;
router.push({ name: 'tools' });
}
/**
*
* @param file
* @param title
* @param aspectRatio
* @param handler
*/
function openCropDialog(file, title, aspectRatio, handler) {
cropDialogTitle.value = title;
cropDialogAspectRatio.value = aspectRatio;
@@ -708,6 +712,10 @@
cropDialogOpen.value = true;
}
/**
*
* @param blob
*/
async function onCropConfirm(blob) {
if (!cropDialogUploadHandler.value) {
return;
@@ -722,6 +730,10 @@
}
}
/**
*
* @param e
*/
function onFileChangeGallery(e) {
const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#GalleryUploadButton',
@@ -752,10 +764,17 @@
});
}
/**
*
*/
function displayGalleryUpload() {
document.getElementById('GalleryUploadButton').click();
}
/**
*
* @param fileId
*/
function setProfilePicOverride(fileId) {
if (!isLocalUserVrcPlusSupporter.value) {
toast.error(t('message.vrcplus.required'));
@@ -778,6 +797,10 @@
});
}
/**
*
* @param fileId
*/
function compareCurrentProfilePic(fileId) {
const currentProfilePicOverride = extractFileId(currentUser.value.profilePicOverride);
if (fileId === currentProfilePicOverride) {
@@ -786,6 +809,10 @@
return false;
}
/**
*
* @param fileId
*/
function deleteGalleryImage(fileId) {
miscRequest.deleteFile(fileId).then((args) => {
const array = galleryTable.value;
@@ -801,6 +828,10 @@
});
}
/**
*
* @param e
*/
function onFileChangeVRCPlusIcon(e) {
const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#VRCPlusIconUploadButton',
@@ -833,10 +864,17 @@
});
}
/**
*
*/
function displayVRCPlusIconUpload() {
document.getElementById('VRCPlusIconUploadButton').click();
}
/**
*
* @param fileId
*/
function setVRCPlusIcon(fileId) {
if (!isLocalUserVrcPlusSupporter.value) {
toast.error(t('message.vrcplus.required'));
@@ -859,6 +897,10 @@
});
}
/**
*
* @param userIcon
*/
function compareCurrentVRCPlusIcon(userIcon) {
const currentUserIcon = extractFileId(currentUser.value.userIcon);
if (userIcon === currentUserIcon) {
@@ -867,6 +909,10 @@
return false;
}
/**
*
* @param fileId
*/
function deleteVRCPlusIcon(fileId) {
miscRequest.deleteFile(fileId).then((args) => {
const array = VRCPlusIconsTable.value;
@@ -881,6 +927,10 @@
});
}
/**
*
* @param fileName
*/
function parseEmojiFileName(fileName) {
// remove file extension
fileName = fileName.replace(/\.[^/.]+$/, '');
@@ -904,6 +954,10 @@
}
}
/**
*
* @param e
*/
function onFileChangeEmoji(e) {
const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#EmojiUploadButton',
@@ -950,10 +1004,17 @@
});
}
/**
*
*/
function displayEmojiUpload() {
document.getElementById('EmojiUploadButton').click();
}
/**
*
* @param fileId
*/
function deleteEmoji(fileId) {
miscRequest.deleteFile(fileId).then((args) => {
const array = emojiTable.value;
@@ -968,6 +1029,10 @@
});
}
/**
*
* @param e
*/
function onFileChangeSticker(e) {
const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#StickerUploadButton',
@@ -1002,10 +1067,17 @@
});
}
/**
*
*/
function displayStickerUpload() {
document.getElementById('StickerUploadButton').click();
}
/**
*
* @param fileId
*/
function deleteSticker(fileId) {
miscRequest.deleteFile(fileId).then((args) => {
const array = stickerTable.value;
@@ -1021,6 +1093,10 @@
});
}
/**
*
* @param e
*/
function onFileChangePrint(e) {
const { file, clearInput } = handleImageUploadInput(e, {
inputSelector: '#PrintUploadButton',
@@ -1063,10 +1139,17 @@
});
}
/**
*
*/
function displayPrintUpload() {
document.getElementById('PrintUploadButton').click();
}
/**
*
* @param printId
*/
function deletePrint(printId) {
vrcPlusImageRequest.deletePrint(printId).then((args) => {
const array = printTable.value;
@@ -1080,6 +1163,10 @@
});
}
/**
*
* @param inventoryId
*/
async function consumeInventoryBundle(inventoryId) {
try {
await inventoryRequest.consumeInventoryBundle({
@@ -1104,6 +1191,9 @@
// inventoryItemsCreated: 0
}
/**
*
*/
async function redeemReward() {
modalStore
.prompt({