MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-24 09:13:50 +02:00
Code Issues 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

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({