MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-05 06:16:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace el-tag with Badge

Browse Source
This commit is contained in:
pa
2026-01-07 17:41:33 +09:00
committed by Natsumi
parent 02e221e307
commit f819a3f500
16 changed files with 272 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+6 -16
View File
@@ -1262,16 +1262,6 @@ i.x-status-icon.red {
background: #ff2c2c; background: #ff2c2c;
} }
.x-tag-friend {
color: var(--color-amber-400);
border-color: var(--color-amber-400) !important;
}
.x-tag-mutual-friend {
color: var(--el-color-success);
border-color: var(--el-color-success) !important;
}
.x-tag-platform-pc { .x-tag-platform-pc {
color: #0078d4; color: #0078d4;
border-color: #0078d4 !important; border-color: #0078d4 !important;
@@ -1282,14 +1272,14 @@ i.x-status-icon.red {
border-color: #3ddc84 !important; border-color: #3ddc84 !important;
} }
.x-tag-platform-ios { .x-tag-friend {
color: #c7c7ce; color: var(--color-amber-400);
border-color: #c7c7ce !important; border-color: var(--color-amber-400) !important;
} }
.x-tag-platform-other { .x-tag-mutual-friend {
color: var(--el-color-danger); color: var(--el-color-success);
border-color: var(--el-color-danger) !important; border-color: var(--el-color-success) !important;
} }
.x-tag-age-verification { .x-tag-age-verification {
src/components/dialogs/AvatarDialog/AvatarDialog.vue
+45 -69
View File
@@ -31,28 +31,19 @@
v-text="avatarDialog.ref.authorName"></span> v-text="avatarDialog.ref.authorName"></span>
</div> </div>
<div> <div>
<el-tag <Badge
v-if="avatarDialog.ref.releaseStatus === 'public'" v-if="avatarDialog.ref.releaseStatus === 'public'"
type="success" variant="outline"
effect="plain" style="margin-right: 5px; margin-top: 5px">
size="small" {{ t('dialog.avatar.tags.public') }}
style="margin-right: 5px; margin-top: 5px" </Badge>
>{{ t('dialog.avatar.tags.public') }}</el-tag <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
> {{ t('dialog.avatar.tags.private') }}
<el-tag </Badge>
v-else
type="danger"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.private') }}</el-tag
>
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC"> <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<el-tag <Badge
class="x-tag-platform-pc" class="x-tag-platform-pc"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
><i class="ri-computer-line"></i> ><i class="ri-computer-line"></i>
<span <span
@@ -65,14 +56,12 @@
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android"> <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<el-tag <Badge
class="x-tag-platform-quest" class="x-tag-platform-quest"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
><i class="ri-android-line"></i> ><i class="ri-android-line"></i>
<span <span
@@ -85,14 +74,12 @@
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['android'].fileSize }}</span >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS"> <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<el-tag <Badge
class="x-tag-platform-ios" class="x-tag-platform-ios"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
><i class="ri-apple-line"></i> ><i class="ri-apple-line"></i>
<span <span
@@ -105,24 +92,20 @@
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['ios'].fileSize }}</span >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<el-tag <Badge
v-if="avatarDialog.inCache" v-if="avatarDialog.inCache"
variant="outline"
class="x-link" class="x-link"
type="info"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(avatarDialog.cachePath)"> @click="openFolderGeneric(avatarDialog.cachePath)">
<span v-text="avatarDialog.cacheSize"></span> <span v-text="avatarDialog.cacheSize"></span>
&nbsp;{{ t('dialog.avatar.tags.cache') }} &nbsp;{{ t('dialog.avatar.tags.cache') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary" v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
>Styles >Styles
<span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{ <span v-if="avatarDialog.ref.styles.primary" :class="['x-grey', 'x-tag-border-left']">{{
@@ -133,40 +116,33 @@
:class="['x-grey', 'x-tag-border-left']" :class="['x-grey', 'x-tag-border-left']"
>{{ avatarDialog.ref.styles.secondary }}</span >{{ avatarDialog.ref.styles.secondary }}</span
> >
</el-tag> </Badge>
<el-tag <Badge
v-if="avatarDialog.isQuestFallback" v-if="avatarDialog.isQuestFallback"
type="info" variant="outline"
effect="plain" style="margin-right: 5px; margin-top: 5px">
size="small" {{ t('dialog.avatar.tags.fallback') }}
style="margin-right: 5px; margin-top: 5px" </Badge>
>{{ t('dialog.avatar.tags.fallback') }}</el-tag <Badge
>
<el-tag
v-if="avatarDialog.hasImposter" v-if="avatarDialog.hasImposter"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.impostor') }} >{{ 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', 'x-tag-border-left']"
>v{{ avatarDialog.imposterVersion }}</span >v{{ avatarDialog.imposterVersion }}</span
> >
</el-tag> </Badge>
<el-tag <Badge
v-if="avatarDialog.ref.unityPackageUrl" v-if="avatarDialog.ref.unityPackageUrl"
type="success" variant="outline"
effect="plain" style="margin-right: 5px; margin-top: 5px">
size="small" {{ t('dialog.avatar.tags.future_proofing') }}
style="margin-right: 5px; margin-top: 5px" </Badge>
>{{ t('dialog.avatar.tags.future_proofing') }}</el-tag
>
<div> <div>
<template v-for="tag in avatarDialog.ref.tags" :key="tag"> <template v-for="tag in avatarDialog.ref.tags" :key="tag">
<el-tag <Badge
v-if="tag.startsWith('content_')" v-if="tag.startsWith('content_')"
effect="plain" variant="outline"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<span v-if="tag === 'content_horror'">{{ <span v-if="tag === 'content_horror'">{{
t('dialog.avatar.tags.content_horror') t('dialog.avatar.tags.content_horror')
@@ -184,16 +160,15 @@
t('dialog.avatar.tags.content_sex') t('dialog.avatar.tags.content_sex')
}}</span> }}</span>
<span v-else>{{ tag.replace('content_', '') }}</span> <span v-else>{{ tag.replace('content_', '') }}</span>
</el-tag> </Badge>
<el-tag <Badge
v-if="tag.startsWith('author_tag_')" v-if="tag.startsWith('author_tag_')"
effect="plain" variant="outline"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<span> <span>
{{ tag.replace('author_tag_', '') }} {{ tag.replace('author_tag_', '') }}
</span> </span>
</el-tag> </Badge>
</template> </template>
</div> </div>
</div> </div>
@@ -507,8 +482,8 @@
<span class="name" <span class="name"
>{{ t('dialog.avatar.info.time_spent') >{{ t('dialog.avatar.info.time_spent')
}}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"> }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon> <el-icon style="margin-left: 3px"><Warning /></el-icon> </TooltipWrapper
</TooltipWrapper></span> ></span>
<span v-if="timeSpent === 0" class="extra">-</span> <span v-if="timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(timeSpent) }}</span> <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -612,6 +587,7 @@
import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores'; import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api'; import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
import { AppDebug } from '../../../service/appConfig.js'; import { AppDebug } from '../../../service/appConfig.js';
import { Badge } from '../../ui/badge';
import { database } from '../../../service/database'; import { database } from '../../../service/database';
import { getNextDialogIndex } from '../../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { handleImageUploadInput } from '../../../shared/utils/imageUpload'; import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
src/components/dialogs/CustomNavDialog.vue
+4 -3
View File
@@ -62,13 +62,13 @@
</div> </div>
<div class="custom-nav-entry__folder-items"> <div class="custom-nav-entry__folder-items">
<template v-if="entry.items?.length"> <template v-if="entry.items?.length">
<el-tag <Badge
v-for="key in entry.items" v-for="key in entry.items"
:key="`${entry.id}-${key}`" :key="`${entry.id}-${key}`"
size="small" variant="outline"
class="custom-nav-entry__folder-tag"> class="custom-nav-entry__folder-tag">
{{ t(definitionsMap.get(key)?.labelKey || key) }} {{ t(definitionsMap.get(key)?.labelKey || key) }}
</el-tag> </Badge>
</template> </template>
<span v-else class="custom-nav-entry__folder-empty"> <span v-else class="custom-nav-entry__folder-empty">
{{ t('nav_menu.custom_nav.folder_empty') }} {{ t('nav_menu.custom_nav.folder_empty') }}
@@ -205,6 +205,7 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { Badge } from '../ui/badge';
import { navDefinitions } from '../../shared/constants/ui.js'; import { navDefinitions } from '../../shared/constants/ui.js';
import IconPicker from '../IconPicker.vue'; import IconPicker from '../IconPicker.vue';
src/components/dialogs/GroupDialog/GroupDialog.vue
+45 -72
View File
@@ -44,111 +44,85 @@
v-text="groupDialog.ownerDisplayName"></span> v-text="groupDialog.ownerDisplayName"></span>
</div> </div>
<div class="group-tags"> <div class="group-tags">
<el-tag <Badge
v-if="groupDialog.ref.isVerified" v-if="groupDialog.ref.isVerified"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.verified') }} {{ t('dialog.group.tags.verified') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.ref.privacy === 'private'" v-if="groupDialog.ref.privacy === 'private'"
type="danger" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.private') }} {{ t('dialog.group.tags.private') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.ref.privacy === 'default'" v-if="groupDialog.ref.privacy === 'default'"
type="success" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.public') }} {{ t('dialog.group.tags.public') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.ref.joinState === 'open'" v-if="groupDialog.ref.joinState === 'open'"
type="success" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.open') }} {{ t('dialog.group.tags.open') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="groupDialog.ref.joinState === 'request'" v-else-if="groupDialog.ref.joinState === 'request'"
type="warning" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.request') }} {{ t('dialog.group.tags.request') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="groupDialog.ref.joinState === 'invite'" v-else-if="groupDialog.ref.joinState === 'invite'"
type="danger" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.invite') }} {{ t('dialog.group.tags.invite') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="groupDialog.ref.joinState === 'closed'" v-else-if="groupDialog.ref.joinState === 'closed'"
type="danger" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.closed') }} {{ t('dialog.group.tags.closed') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.inGroup" v-if="groupDialog.inGroup"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.joined') }} {{ t('dialog.group.tags.joined') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt" v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
type="danger" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.banned') }} {{ t('dialog.group.tags.banned') }}
</el-tag> </Badge>
<template v-if="groupDialog.inGroup && groupDialog.ref.myMember"> <template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
<el-tag <Badge
v-if="groupDialog.ref.myMember.visibility === 'visible'" v-if="groupDialog.ref.myMember.visibility === 'visible'"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.visible') }} {{ t('dialog.group.tags.visible') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="groupDialog.ref.myMember.visibility === 'friends'" v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.friends') }} {{ t('dialog.group.tags.friends') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="groupDialog.ref.myMember.visibility === 'hidden'" v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.hidden') }} {{ t('dialog.group.tags.hidden') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements" v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.subscribed') }} {{ t('dialog.group.tags.subscribed') }}
</el-tag> </Badge>
</template> </template>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
@@ -192,9 +166,7 @@
</TooltipWrapper> </TooltipWrapper>
</template> </template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'"> <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
<TooltipWrapper <TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
side="top"
:content="t('dialog.group.actions.cancel_join_request_tooltip')">
<span> <span>
<el-button <el-button
type="default" type="default"
@@ -649,8 +621,8 @@
:icon="CopyDocument" :icon="CopyDocument"
circle circle
style="margin-left: 5px" style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" /> @click="copyToClipboard(groupDialog.ref.$url)" /> </TooltipWrapper
</TooltipWrapper></span> ></span>
</div> </div>
</div> </div>
<div class="x-friend-item" style="width: 350px; cursor: default"> <div class="x-friend-item" style="width: 350px; cursor: default">
@@ -665,8 +637,8 @@
:icon="CopyDocument" :icon="CopyDocument"
circle circle
style="margin-left: 5px" style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" /> @click="copyToClipboard(groupDialog.id)" /> </TooltipWrapper
</TooltipWrapper></span> ></span>
</div> </div>
</div> </div>
<div <div
@@ -1205,6 +1177,7 @@
} from '../../../shared/utils'; } from '../../../shared/utils';
import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores'; import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants'; import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { Badge } from '../../ui/badge';
import { getNextDialogIndex } from '../../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { groupRequest } from '../../../api'; import { groupRequest } from '../../../api';
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+20 -7
View File
@@ -723,14 +723,11 @@
style="margin-left: 5px" style="margin-left: 5px"
@click="clearSelectedGroupMembers"></el-button> @click="clearSelectedGroupMembers"></el-button>
<br /> <br />
<el-tag <Badge
v-for="user in selectedUsersArray" v-for="user in selectedUsersArray"
:key="user.id" :key="user.id"
type="info" variant="outline"
:disable-transitions="true" style="margin-right: 5px; margin-top: 5px">
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteSelectedGroupMember(user)">
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top"> <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
<template #content> <template #content>
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span> <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
@@ -738,7 +735,22 @@
<el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon> <el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon>
</TooltipWrapper> </TooltipWrapper>
<span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span> <span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
</el-tag> <button
type="button"
style="
margin-left: 6px;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
color: inherit;
cursor: pointer;
"
@click="deleteSelectedGroupMember(user)">
<i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
</button>
</Badge>
<br /> <br />
<br /> <br />
<span class="name">{{ t('dialog.group_member_moderation.notes') }}</span> <span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
@@ -860,6 +872,7 @@
import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores'; import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants'; import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { groupRequest, userRequest } from '../../../api'; import { groupRequest, userRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue'; import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';
src/components/dialogs/UserDialog/LanguageDialog.vue
+18 -8
View File
@@ -7,19 +7,28 @@
append-to-body> append-to-body>
<div v-loading="languageDialog.loading"> <div v-loading="languageDialog.loading">
<div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0"> <div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
<el-tag <Badge variant="outline" style="margin-right: 5px">
size="small"
type="info"
effect="plain"
closable
style="margin-right: 5px"
@close="removeUserLanguage(item.key)">
<span <span
class="flags" class="flags"
:class="languageClass(item.key)" :class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span> style="display: inline-block; margin-right: 5px"></span>
{{ item.value }} ({{ item.key.toUpperCase() }}) {{ item.value }} ({{ item.key.toUpperCase() }})
</el-tag> <button
type="button"
style="
margin-left: 6px;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
color: inherit;
cursor: pointer;
"
@click="removeUserLanguage(item.key)">
<i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
</button>
</Badge>
</div> </div>
<el-select <el-select
:disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)" :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
@@ -46,6 +55,7 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Badge } from '../../ui/badge';
import { languageClass } from '../../../shared/utils'; import { languageClass } from '../../../shared/utils';
import { useUserStore } from '../../../stores'; import { useUserStore } from '../../../stores';
import { userRequest } from '../../../api'; import { userRequest } from '../../../api';
src/components/dialogs/UserDialog/UserSummaryHeader.vue
+33 -68
View File
@@ -74,24 +74,20 @@
</div> </div>
<div style="margin-top: 5px" v-show="!userDialog.loading"> <div style="margin-top: 5px" v-show="!userDialog.loading">
<TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')"> <TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
<el-tag <Badge
type="info" variant="outline"
effect="plain"
size="small"
class="name" class="name"
:class="userDialog.ref.$trustClass" :class="userDialog.ref.$trustClass"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }} <i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus" v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
side="top" side="top"
:content="t('dialog.user.tags.age_verified')"> :content="t('dialog.user.tags.age_verified')">
<el-tag <Badge
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-age-verification" class="x-tag-age-verification"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<template v-if="userDialog.ref.ageVerificationStatus === '18+'"> <template v-if="userDialog.ref.ageVerificationStatus === '18+'">
@@ -100,116 +96,84 @@
<template v-else> <template v-else>
<i class="ri-info-card-line"></i> <i class="ri-info-card-line"></i>
</template> </template>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="userDialog.isFriend && userDialog.friend" v-if="userDialog.isFriend && userDialog.friend"
side="top" side="top"
:content="t('dialog.user.tags.friend_number')"> :content="t('dialog.user.tags.friend_number')">
<el-tag <Badge variant="outline" class="x-tag-friend" style="margin-right: 5px; margin-top: 5px">
type="info"
effect="plain"
size="small"
class="x-tag-friend"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-user-add-line"></i> <i class="ri-user-add-line"></i>
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }} {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper <TooltipWrapper
v-if="userDialog.mutualFriendCount" v-if="userDialog.mutualFriendCount"
side="top" side="top"
:content="t('dialog.user.tags.mutual_friends')"> :content="t('dialog.user.tags.mutual_friends')">
<el-tag <Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
type="info"
effect="plain"
size="small"
class="x-tag-mutual-friend"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-group-line"></i> <i class="ri-group-line"></i>
{{ userDialog.mutualFriendCount }} {{ userDialog.mutualFriendCount }}
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<el-tag <Badge
v-if="userDialog.ref.$isTroll" v-if="userDialog.ref.$isTroll"
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-troll" class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
Nuisance Nuisance
</el-tag> </Badge>
<el-tag <Badge
v-if="userDialog.ref.$isProbableTroll" v-if="userDialog.ref.$isProbableTroll"
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-troll" class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
Almost Nuisance Almost Nuisance
</el-tag> </Badge>
<el-tag <Badge
v-if="userDialog.ref.$isModerator" v-if="userDialog.ref.$isModerator"
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-vip" class="x-tag-vip"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.user.tags.vrchat_team') }} {{ t('dialog.user.tags.vrchat_team') }}
</el-tag> </Badge>
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC"> <TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<el-tag <Badge variant="outline" class="x-tag-platform-pc" style="margin-right: 5px; margin-top: 5px">
type="info"
effect="plain"
size="small"
class="x-tag-platform-pc"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-computer-line"></i> <i class="ri-computer-line"></i>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android"> <TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<el-tag <Badge
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-platform-quest" class="x-tag-platform-quest"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<i class="ri-android-line"></i> <i class="ri-android-line"></i>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS"> <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<el-tag <Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px"
type="info"
effect="plain"
size="small"
class="x-tag-platform-ios"
style="margin-right: 5px; margin-top: 5px"
><i class="ri-apple-line"></i ><i class="ri-apple-line"></i
></el-tag> ></Badge>
</TooltipWrapper> </TooltipWrapper>
<el-tag <Badge
v-else-if="userDialog.ref.$platform" v-else-if="userDialog.ref.$platform"
type="info" variant="outline"
effect="plain"
size="small"
class="x-tag-platform-other" class="x-tag-platform-other"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ userDialog.ref.$platform }} {{ userDialog.ref.$platform }}
</el-tag> </Badge>
<el-tag <Badge
v-if="userDialog.ref.$customTag" v-if="userDialog.ref.$customTag"
type="info" variant="outline"
effect="plain"
size="small"
class="name" class="name"
:style="{ :style="{
color: userDialog.ref.$customTagColour, color: userDialog.ref.$customTagColour,
'border-color': userDialog.ref.$customTagColour 'border-color': userDialog.ref.$customTagColour
}" }"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
>{{ userDialog.ref.$customTag }}</el-tag >{{ userDialog.ref.$customTag }}</Badge
> >
<br /> <br />
<TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top"> <TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top">
@@ -297,6 +261,7 @@
import { formatDateFilter, languageClass, userImage, userStatusClass } from '../../../shared/utils'; import { formatDateFilter, languageClass, userImage, userStatusClass } from '../../../shared/utils';
import { useGalleryStore, useUserStore } from '../../../stores'; import { useGalleryStore, useUserStore } from '../../../stores';
import { Badge } from '../../ui/badge';
import UserActionDropdown from './UserActionDropdown.vue'; import UserActionDropdown from './UserActionDropdown.vue';
src/components/dialogs/WorldDialog/WorldDialog.vue
+33 -56
View File
@@ -40,36 +40,25 @@
v-text="worldDialog.ref.authorName" /> v-text="worldDialog.ref.authorName" />
</div> </div>
<div> <div>
<el-tag <Badge
v-if="worldDialog.ref.$isLabs" v-if="worldDialog.ref.$isLabs"
type="primary" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.labs') }} {{ t('dialog.world.tags.labs') }}
</el-tag> </Badge>
<el-tag <Badge
v-else-if="worldDialog.ref.releaseStatus === 'public'" v-else-if="worldDialog.ref.releaseStatus === 'public'"
type="success" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.public') }} {{ t('dialog.world.tags.public') }}
</el-tag> </Badge>
<el-tag <Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
v-else
type="danger"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.private') }} {{ t('dialog.world.tags.private') }}
</el-tag> </Badge>
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC"> <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<el-tag <Badge
class="x-tag-platform-pc" class="x-tag-platform-pc"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<i class="ri-computer-line"></i <i class="ri-computer-line"></i
><span ><span
@@ -77,15 +66,13 @@
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"> :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['standalonewindows'].fileSize }} {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
</span> </span>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest"> <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<el-tag <Badge
class="x-tag-platform-quest" class="x-tag-platform-quest"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<i class="ri-android-line"></i <i class="ri-android-line"></i
><span ><span
@@ -93,15 +80,13 @@
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"> :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['android'].fileSize }} {{ worldDialog.bundleSizes['android'].fileSize }}
</span> </span>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS"> <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
<el-tag <Badge
class="x-tag-platform-ios" class="x-tag-platform-ios"
type="info" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<i class="ri-apple-line"></i <i class="ri-apple-line"></i
><span ><span
@@ -109,51 +94,42 @@
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"> :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['ios'].fileSize }} {{ worldDialog.bundleSizes['ios'].fileSize }}
</span> </span>
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<el-tag <Badge
v-if="worldDialog.avatarScalingDisabled" v-if="worldDialog.avatarScalingDisabled"
type="warning" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.avatar_scaling_disabled') }} {{ t('dialog.world.tags.avatar_scaling_disabled') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="worldDialog.focusViewDisabled" v-if="worldDialog.focusViewDisabled"
type="warning" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.focus_view_disabled') }} {{ t('dialog.world.tags.focus_view_disabled') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="worldDialog.ref.unityPackageUrl" v-if="worldDialog.ref.unityPackageUrl"
type="success" variant="outline"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.future_proofing') }} {{ t('dialog.world.tags.future_proofing') }}
</el-tag> </Badge>
<el-tag <Badge
v-if="worldDialog.inCache" v-if="worldDialog.inCache"
variant="outline"
class="x-link" class="x-link"
type="info"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px" style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(worldDialog.cachePath)"> @click="openFolderGeneric(worldDialog.cachePath)">
<span v-text="worldDialog.cacheSize" /> <span v-text="worldDialog.cacheSize" />
| {{ t('dialog.world.tags.cache') }} | {{ t('dialog.world.tags.cache') }}
</el-tag> </Badge>
</div> </div>
<div> <div>
<template v-for="tag in worldDialog.ref.tags" :key="tag"> <template v-for="tag in worldDialog.ref.tags" :key="tag">
<el-tag <Badge
v-if="tag.startsWith('content_')" v-if="tag.startsWith('content_')"
effect="plain" variant="outline"
size="small"
style="margin-right: 5px; margin-top: 5px"> style="margin-right: 5px; margin-top: 5px">
<span v-if="tag === 'content_horror'"> <span v-if="tag === 'content_horror'">
{{ t('dialog.world.tags.content_horror') }} {{ t('dialog.world.tags.content_horror') }}
@@ -173,7 +149,7 @@
<span v-else> <span v-else>
{{ tag.replace('content_', '') }} {{ tag.replace('content_', '') }}
</span> </span>
</el-tag> </Badge>
</template> </template>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
@@ -804,6 +780,7 @@
useWorldStore useWorldStore
} from '../../../stores'; } from '../../../stores';
import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api'; import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import { database } from '../../../service/database.js'; import { database } from '../../../service/database.js';
import { getNextDialogIndex } from '../../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../../shared/utils/base/ui';
src/components/ui/badge/Badge.vue
+6 -1
View File
@@ -2,6 +2,7 @@
import { Primitive } from 'reka-ui'; import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core'; import { reactiveOmit } from '@vueuse/core';
import { useAttrs } from 'vue';
import { badgeVariants } from '.'; import { badgeVariants } from '.';
@@ -13,10 +14,14 @@
}); });
const delegatedProps = reactiveOmit(props, 'class'); const delegatedProps = reactiveOmit(props, 'class');
const attrs = useAttrs();
</script> </script>
<template> <template>
<Primitive data-slot="badge" :class="cn(badgeVariants({ variant }), props.class)" v-bind="delegatedProps"> <Primitive
data-slot="badge"
:class="cn(badgeVariants({ variant }), props.class)"
v-bind="{ ...delegatedProps, ...attrs }">
<slot /> <slot />
</Primitive> </Primitive>
</template> </template>
src/views/Favorites/FavoritesAvatar.vue
+3 -15
View File
@@ -90,12 +90,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span> <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div> </div>
<div class="group-item__bottom"> <div class="group-item__bottom">
<el-tag <Badge variant="outline">
size="small"
effect="plain"
:type="userFavoriteAvatarsStatusForFavTab(group.visibility)">
{{ formatVisibility(group.visibility) }} {{ formatVisibility(group.visibility) }}
</el-tag> </Badge>
<el-popover <el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)" :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible=" @update:visible="
@@ -507,6 +504,7 @@
import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores'; import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
import { avatarRequest, favoriteRequest } from '../../api'; import { avatarRequest, favoriteRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js'; import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
import AvatarExportDialog from './dialogs/AvatarExportDialog.vue'; import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
@@ -1499,16 +1497,6 @@
} }
}); });
function userFavoriteAvatarsStatusForFavTab(visibility) {
if (visibility === 'public') {
return 'primary';
}
if (visibility === 'friends') {
return 'success';
}
return 'info';
}
function formatVisibility(value) { function formatVisibility(value) {
if (!value) { if (!value) {
return ''; return '';
src/views/Favorites/FavoritesFriend.vue
+3 -15
View File
@@ -92,12 +92,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span> <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div> </div>
<div class="group-item__bottom"> <div class="group-item__bottom">
<el-tag <Badge variant="outline">
size="small"
effect="plain"
:type="userFavoriteFriendsStatusForFavTab(group.visibility)">
{{ formatVisibility(group.visibility) }} {{ formatVisibility(group.visibility) }}
</el-tag> </Badge>
<el-popover <el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)" :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible=" @update:visible="
@@ -290,6 +287,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores'; import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
import { Badge } from '../../components/ui/badge';
import { favoriteRequest } from '../../api'; import { favoriteRequest } from '../../api';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js'; import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
import { userImage } from '../../shared/utils'; import { userImage } from '../../shared/utils';
@@ -715,16 +713,6 @@
}); });
} }
function userFavoriteFriendsStatusForFavTab(visibility) {
if (visibility === 'public') {
return 'primary';
}
if (visibility === 'friends') {
return 'success';
}
return 'info';
}
function formatVisibility(value) { function formatVisibility(value) {
if (!value) { if (!value) {
return ''; return '';
src/views/Favorites/FavoritesWorld.vue
+3 -15
View File
@@ -92,12 +92,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span> <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div> </div>
<div class="group-item__bottom"> <div class="group-item__bottom">
<el-tag <Badge variant="outline">
size="small"
effect="plain"
:type="userFavoriteWorldsStatusForFavTab(group.visibility)">
{{ formatVisibility(group.visibility) }} {{ formatVisibility(group.visibility) }}
</el-tag> </Badge>
<el-popover <el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)" :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible=" @update:visible="
@@ -416,6 +413,7 @@
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores'; import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
import { favoriteRequest, worldRequest } from '../../api'; import { favoriteRequest, worldRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js'; import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
import FavoritesWorldItem from './components/FavoritesWorldItem.vue'; import FavoritesWorldItem from './components/FavoritesWorldItem.vue';
@@ -968,16 +966,6 @@
getLocalWorldFavorites(); getLocalWorldFavorites();
} }
function userFavoriteWorldsStatusForFavTab(visibility) {
if (visibility === 'public') {
return 'primary';
}
if (visibility === 'friends') {
return 'success';
}
return 'info';
}
function changeWorldGroupVisibility(name, visibility, menuKey = null) { function changeWorldGroupVisibility(name, visibility, menuKey = null) {
const params = { const params = {
type: 'world', type: 'world',
src/views/PlayerList/PlayerList.vue
+27 -57
View File
@@ -44,91 +44,60 @@
v-text="currentInstanceWorld.ref.authorName"></span> v-text="currentInstanceWorld.ref.authorName"></span>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<el-tag <Badge v-if="currentInstanceWorld.ref.$isLabs" variant="outline" style="margin-right: 5px">
v-if="currentInstanceWorld.ref.$isLabs" {{ t('dialog.world.tags.labs') }}
type="primary" </Badge>
effect="plain" <Badge
size="small"
style="margin-right: 5px"
>{{ t('dialog.world.tags.labs') }}</el-tag
>
<el-tag
v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'" v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'"
type="success" variant="outline"
effect="plain" style="margin-right: 5px">
size="small" {{ t('dialog.world.tags.public') }}
style="margin-right: 5px" </Badge>
>{{ t('dialog.world.tags.public') }}</el-tag <Badge
>
<el-tag
v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'" v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'"
type="danger" variant="outline"
effect="plain" style="margin-right: 5px">
size="small" {{ t('dialog.world.tags.private') }}
style="margin-right: 5px" </Badge>
>{{ t('dialog.world.tags.private') }}</el-tag
>
<TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC"> <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
<el-tag <Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
class="x-tag-platform-pc"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
><i class="ri-computer-line"></i> ><i class="ri-computer-line"></i>
<span <span
v-if="currentInstanceWorld.bundleSizes['standalonewindows']" v-if="currentInstanceWorld.bundleSizes['standalonewindows']"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span >{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android"> <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
<el-tag <Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
class="x-tag-platform-quest"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
><i class="ri-android-line"></i> ><i class="ri-android-line"></i>
<span <span
v-if="currentInstanceWorld.bundleSizes['android']" v-if="currentInstanceWorld.bundleSizes['android']"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span >{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS"> <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
<el-tag <Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
class="x-tag-platform-ios"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
><i class="ri-apple-line"></i> ><i class="ri-apple-line"></i>
<span <span
v-if="currentInstanceWorld.bundleSizes['ios']" v-if="currentInstanceWorld.bundleSizes['ios']"
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']" :class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span >{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
> >
</el-tag> </Badge>
</TooltipWrapper> </TooltipWrapper>
<el-tag <Badge
v-if="currentInstanceWorld.avatarScalingDisabled" v-if="currentInstanceWorld.avatarScalingDisabled"
type="warning" variant="outline"
effect="plain" style="margin-right: 5px; margin-top: 5px">
size="small" {{ t('dialog.world.tags.avatar_scaling_disabled') }}
style="margin-right: 5px; margin-top: 5px" </Badge>
>{{ t('dialog.world.tags.avatar_scaling_disabled') }}</el-tag <Badge v-if="currentInstanceWorld.inCache" variant="outline" style="margin-right: 5px">
>
<el-tag
v-if="currentInstanceWorld.inCache"
type="info"
effect="plain"
size="small"
style="margin-right: 5px">
<span>{{ currentInstanceWorld.cacheSize }} {{ t('dialog.world.tags.cache') }}</span> <span>{{ currentInstanceWorld.cacheSize }} {{ t('dialog.world.tags.cache') }}</span>
</el-tag> </Badge>
</div> </div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<LocationWorld :locationobject="currentInstanceLocation" :currentuserid="currentUser.id" /> <LocationWorld :locationobject="currentInstanceLocation" :currentuserid="currentUser.id" />
@@ -215,6 +184,7 @@
useWorldStore useWorldStore
} from '../../stores'; } from '../../stores';
import { commaNumber, formatDateFilter } from '../../shared/utils'; import { commaNumber, formatDateFilter } from '../../shared/utils';
import { Badge } from '../../components/ui/badge';
import { DataTableLayout } from '../../components/ui/data-table'; import { DataTableLayout } from '../../components/ui/data-table';
import { createColumns } from './columns.jsx'; import { createColumns } from './columns.jsx';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight'; import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
+20 -8
View File
@@ -28,16 +28,28 @@
</el-button> </el-button>
<br /> <br />
<h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2> <h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
<el-tag <Badge
v-for="user in chatboxUserBlacklist" v-for="user in chatboxUserBlacklist"
:key="user[0]" :key="user[0]"
type="info" variant="outline"
disable-transitions style="margin-right: 5px; margin-top: 5px">
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteChatboxUserBlacklist(user[0])">
<span>{{ user[1] }}</span> <span>{{ user[1] }}</span>
</el-tag> <button
type="button"
style="
margin-left: 6px;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
color: inherit;
cursor: pointer;
"
@click="deleteChatboxUserBlacklist(user[0])">
<i class="ri-close-line" style="font-size: 12px; line-height: 1"></i>
</button>
</Badge>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@@ -47,6 +59,7 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Badge } from '../../../components/ui/badge';
import { usePhotonStore } from '../../../stores'; import { usePhotonStore } from '../../../stores';
const { t } = useI18n(); const { t } = useI18n();
@@ -64,7 +77,6 @@
const emit = defineEmits(['deleteChatboxUserBlacklist']); const emit = defineEmits(['deleteChatboxUserBlacklist']);
function deleteChatboxUserBlacklist(userId) { function deleteChatboxUserBlacklist(userId) {
emit('deleteChatboxUserBlacklist', userId); emit('deleteChatboxUserBlacklist', userId);
} }
src/views/Settings/dialogs/LaunchOptionsDialog.vue
+3 -2
View File
@@ -8,9 +8,9 @@
<div style="font-size: 12px"> <div style="font-size: 12px">
{{ t('dialog.launch_options.description') }} <br /> {{ t('dialog.launch_options.description') }} <br />
{{ t('dialog.launch_options.example') }} {{ t('dialog.launch_options.example') }}
<el-tag size="small" <Badge variant="outline"
>--fps=144 --enable-debug-gui --enable-sdk-log-levels --enable-udon-debug-logging >--fps=144 --enable-debug-gui --enable-sdk-log-levels --enable-udon-debug-logging
</el-tag> </Badge>
</div> </div>
<el-input <el-input
@@ -59,6 +59,7 @@
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Badge } from '../../../components/ui/badge';
import { openExternalLink } from '../../../shared/utils'; import { openExternalLink } from '../../../shared/utils';
import { useLaunchStore } from '../../../stores'; import { useLaunchStore } from '../../../stores';
src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
+3 -2
View File
@@ -93,9 +93,9 @@
v-if="screenshotMetadataDialog.metadata.fileResolution" v-if="screenshotMetadataDialog.metadata.fileResolution"
style="margin-right: 5px" style="margin-right: 5px"
v-text="screenshotMetadataDialog.metadata.fileResolution"></span> v-text="screenshotMetadataDialog.metadata.fileResolution"></span>
<el-tag v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="small">{{ <Badge v-if="screenshotMetadataDialog.metadata.fileSize" variant="outline">{{
screenshotMetadataDialog.metadata.fileSize screenshotMetadataDialog.metadata.fileSize
}}</el-tag> }}</Badge>
<br /> <br />
<Location <Location
v-if="screenshotMetadataDialog.metadata.world" v-if="screenshotMetadataDialog.metadata.world"
@@ -163,6 +163,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores'; import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
import { Badge } from '../../../components/ui/badge';
import { formatDateFilter } from '../../../shared/utils'; import { formatDateFilter } from '../../../shared/utils';
import { vrcPlusImageRequest } from '../../../api'; import { vrcPlusImageRequest } from '../../../api';