MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +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

22
src/app.css
View File

@@ -1262,16 +1262,6 @@ i.x-status-icon.red {
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 {
color: #0078d4;
border-color: #0078d4 !important;
@@ -1282,14 +1272,14 @@ i.x-status-icon.red {
border-color: #3ddc84 !important;
}
.x-tag-platform-ios {
color: #c7c7ce;
border-color: #c7c7ce !important;
.x-tag-friend {
color: var(--color-amber-400);
border-color: var(--color-amber-400) !important;
}
.x-tag-platform-other {
color: var(--el-color-danger);
border-color: var(--el-color-danger) !important;
.x-tag-mutual-friend {
color: var(--el-color-success);
border-color: var(--el-color-success) !important;
}
.x-tag-age-verification {

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

@@ -31,28 +31,19 @@
v-text="avatarDialog.ref.authorName"></span>
</div>
<div>
<el-tag
<Badge
v-if="avatarDialog.ref.releaseStatus === 'public'"
type="success"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.public') }}</el-tag
>
<el-tag
v-else
type="danger"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.private') }}</el-tag
>
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.avatar.tags.public') }}
</Badge>
<Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.avatar.tags.private') }}
</Badge>
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<el-tag
<Badge
class="x-tag-platform-pc"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><i class="ri-computer-line"></i>
<span
@@ -65,14 +56,12 @@
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<el-tag
<Badge
class="x-tag-platform-quest"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><i class="ri-android-line"></i>
<span
@@ -85,14 +74,12 @@
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['android'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<el-tag
<Badge
class="x-tag-platform-ios"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><i class="ri-apple-line"></i>
<span
@@ -105,24 +92,20 @@
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
>{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<el-tag
<Badge
v-if="avatarDialog.inCache"
variant="outline"
class="x-link"
type="info"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(avatarDialog.cachePath)">
<span v-text="avatarDialog.cacheSize"></span>
&nbsp;{{ t('dialog.avatar.tags.cache') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>Styles
<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']"
>{{ avatarDialog.ref.styles.secondary }}</span
>
</el-tag>
<el-tag
</Badge>
<Badge
v-if="avatarDialog.isQuestFallback"
type="info"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.fallback') }}</el-tag
>
<el-tag
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.avatar.tags.fallback') }}
</Badge>
<Badge
v-if="avatarDialog.hasImposter"
type="info"
effect="plain"
size="small"
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']"
>v{{ avatarDialog.imposterVersion }}</span
>
</el-tag>
<el-tag
</Badge>
<Badge
v-if="avatarDialog.ref.unityPackageUrl"
type="success"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.avatar.tags.future_proofing') }}</el-tag
>
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.avatar.tags.future_proofing') }}
</Badge>
<div>
<template v-for="tag in avatarDialog.ref.tags" :key="tag">
<el-tag
<Badge
v-if="tag.startsWith('content_')"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<span v-if="tag === 'content_horror'">{{
t('dialog.avatar.tags.content_horror')
@@ -184,16 +160,15 @@
t('dialog.avatar.tags.content_sex')
}}</span>
<span v-else>{{ tag.replace('content_', '') }}</span>
</el-tag>
<el-tag
</Badge>
<Badge
v-if="tag.startsWith('author_tag_')"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<span>
{{ tag.replace('author_tag_', '') }}
</span>
</el-tag>
</Badge>
</template>
</div>
</div>
@@ -507,8 +482,8 @@
<span class="name"
>{{ t('dialog.avatar.info.time_spent')
}}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<el-icon style="margin-left: 3px"><Warning /></el-icon>
</TooltipWrapper></span>
<el-icon style="margin-left: 3px"><Warning /></el-icon> </TooltipWrapper
></span>
<span v-if="timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -612,6 +587,7 @@
import { useAvatarStore, useFavoriteStore, useGalleryStore, useGameStore, useUserStore } from '../../../stores';
import { avatarModerationRequest, avatarRequest, favoriteRequest, miscRequest } from '../../../api';
import { AppDebug } from '../../../service/appConfig.js';
import { Badge } from '../../ui/badge';
import { database } from '../../../service/database';
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';

7
src/components/dialogs/CustomNavDialog.vue
View File

@@ -62,13 +62,13 @@
</div>
<div class="custom-nav-entry__folder-items">
<template v-if="entry.items?.length">
<el-tag
<Badge
v-for="key in entry.items"
:key="`${entry.id}-${key}`"
size="small"
variant="outline"
class="custom-nav-entry__folder-tag">
{{ t(definitionsMap.get(key)?.labelKey || key) }}
</el-tag>
</Badge>
</template>
<span v-else class="custom-nav-entry__folder-empty">
{{ t('nav_menu.custom_nav.folder_empty') }}
@@ -205,6 +205,7 @@
import dayjs from 'dayjs';
import { Badge } from '../ui/badge';
import { navDefinitions } from '../../shared/constants/ui.js';
import IconPicker from '../IconPicker.vue';

117
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -44,111 +44,85 @@
v-text="groupDialog.ownerDisplayName"></span>
</div>
<div class="group-tags">
<el-tag
<Badge
v-if="groupDialog.ref.isVerified"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.verified') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'private'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.private') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'default'"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.public') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.joinState === 'open'"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.open') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'request'"
type="warning"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.request') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'invite'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.invite') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'closed'"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.closed') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.inGroup"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.joined') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
type="danger"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.banned') }}
</el-tag>
</Badge>
<template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
<el-tag
<Badge
v-if="groupDialog.ref.myMember.visibility === 'visible'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.visible') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.friends') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.hidden') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.group.tags.subscribed') }}
</el-tag>
</Badge>
</template>
</div>
<div style="margin-top: 5px">
@@ -192,9 +166,7 @@
</TooltipWrapper>
</template>
<template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
<TooltipWrapper
side="top"
:content="t('dialog.group.actions.cancel_join_request_tooltip')">
<TooltipWrapper side="top" :content="t('dialog.group.actions.cancel_join_request_tooltip')">
<span>
<el-button
type="default"
@@ -649,8 +621,8 @@
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.ref.$url)" />
</TooltipWrapper></span>
@click="copyToClipboard(groupDialog.ref.$url)" /> </TooltipWrapper
></span>
</div>
</div>
<div class="x-friend-item" style="width: 350px; cursor: default">
@@ -665,8 +637,8 @@
:icon="CopyDocument"
circle
style="margin-left: 5px"
@click="copyToClipboard(groupDialog.id)" />
</TooltipWrapper></span>
@click="copyToClipboard(groupDialog.id)" /> </TooltipWrapper
></span>
</div>
</div>
<div
@@ -1205,6 +1177,7 @@
} from '../../../shared/utils';
import { useGalleryStore, useGroupStore, useLocationStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { Badge } from '../../ui/badge';
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { groupRequest } from '../../../api';

27
src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
View File

@@ -723,14 +723,11 @@
style="margin-left: 5px"
@click="clearSelectedGroupMembers"></el-button>
<br />
<el-tag
<Badge
v-for="user in selectedUsersArray"
:key="user.id"
type="info"
:disable-transitions="true"
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteSelectedGroupMember(user)">
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
<template #content>
<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>
</TooltipWrapper>
<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 />
<span class="name">{{ t('dialog.group_member_moderation.notes') }}</span>
@@ -860,6 +872,7 @@
import { useAppearanceSettingsStore, useGalleryStore, useGroupStore, useUserStore } from '../../../stores';
import { groupDialogFilterOptions, groupDialogSortingOptions } from '../../../shared/constants';
import { groupRequest, userRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import GroupMemberModerationExportDialog from './GroupMemberModerationExportDialog.vue';

26
src/components/dialogs/UserDialog/LanguageDialog.vue
View File

@@ -7,19 +7,28 @@
append-to-body>
<div v-loading="languageDialog.loading">
<div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
<el-tag
size="small"
type="info"
effect="plain"
closable
style="margin-right: 5px"
@close="removeUserLanguage(item.key)">
<Badge variant="outline" style="margin-right: 5px">
<span
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
{{ 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>
<el-select
:disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
@@ -46,6 +55,7 @@
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Badge } from '../../ui/badge';
import { languageClass } from '../../../shared/utils';
import { useUserStore } from '../../../stores';
import { userRequest } from '../../../api';

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

@@ -74,24 +74,20 @@
</div>
<div style="margin-top: 5px" v-show="!userDialog.loading">
<TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
<el-tag
type="info"
effect="plain"
size="small"
<Badge
variant="outline"
class="name"
:class="userDialog.ref.$trustClass"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
side="top"
:content="t('dialog.user.tags.age_verified')">
<el-tag
type="info"
effect="plain"
size="small"
<Badge
variant="outline"
class="x-tag-age-verification"
style="margin-right: 5px; margin-top: 5px">
<template v-if="userDialog.ref.ageVerificationStatus === '18+'">
@@ -100,116 +96,84 @@
<template v-else>
<i class="ri-info-card-line"></i>
</template>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.isFriend && userDialog.friend"
side="top"
:content="t('dialog.user.tags.friend_number')">
<el-tag
type="info"
effect="plain"
size="small"
class="x-tag-friend"
style="margin-right: 5px; margin-top: 5px">
<Badge variant="outline" class="x-tag-friend" style="margin-right: 5px; margin-top: 5px">
<i class="ri-user-add-line"></i>
{{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper
v-if="userDialog.mutualFriendCount"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<el-tag
type="info"
effect="plain"
size="small"
class="x-tag-mutual-friend"
style="margin-right: 5px; margin-top: 5px">
<Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
<i class="ri-group-line"></i>
{{ userDialog.mutualFriendCount }}
</el-tag>
</Badge>
</TooltipWrapper>
<el-tag
<Badge
v-if="userDialog.ref.$isTroll"
type="info"
effect="plain"
size="small"
variant="outline"
class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px">
Nuisance
</el-tag>
<el-tag
</Badge>
<Badge
v-if="userDialog.ref.$isProbableTroll"
type="info"
effect="plain"
size="small"
variant="outline"
class="x-tag-troll"
style="margin-right: 5px; margin-top: 5px">
Almost Nuisance
</el-tag>
<el-tag
</Badge>
<Badge
v-if="userDialog.ref.$isModerator"
type="info"
effect="plain"
size="small"
variant="outline"
class="x-tag-vip"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.user.tags.vrchat_team') }}
</el-tag>
</Badge>
<TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
<el-tag
type="info"
effect="plain"
size="small"
class="x-tag-platform-pc"
style="margin-right: 5px; margin-top: 5px">
<Badge variant="outline" class="x-tag-platform-pc" style="margin-right: 5px; margin-top: 5px">
<i class="ri-computer-line"></i>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
<el-tag
type="info"
effect="plain"
size="small"
<Badge
variant="outline"
class="x-tag-platform-quest"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-android-line"></i>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
<el-tag
type="info"
effect="plain"
size="small"
class="x-tag-platform-ios"
style="margin-right: 5px; margin-top: 5px"
<Badge variant="outline" class="x-tag-platform-ios" style="margin-right: 5px; margin-top: 5px"
><i class="ri-apple-line"></i
></el-tag>
></Badge>
</TooltipWrapper>
<el-tag
<Badge
v-else-if="userDialog.ref.$platform"
type="info"
effect="plain"
size="small"
variant="outline"
class="x-tag-platform-other"
style="margin-right: 5px; margin-top: 5px">
{{ userDialog.ref.$platform }}
</el-tag>
</Badge>
<el-tag
<Badge
v-if="userDialog.ref.$customTag"
type="info"
effect="plain"
size="small"
variant="outline"
class="name"
:style="{
color: userDialog.ref.$customTagColour,
'border-color': userDialog.ref.$customTagColour
}"
style="margin-right: 5px; margin-top: 5px"
>{{ userDialog.ref.$customTag }}</el-tag
>{{ userDialog.ref.$customTag }}</Badge
>
<br />
<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 { useGalleryStore, useUserStore } from '../../../stores';
import { Badge } from '../../ui/badge';
import UserActionDropdown from './UserActionDropdown.vue';

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

@@ -40,36 +40,25 @@
v-text="worldDialog.ref.authorName" />
</div>
<div>
<el-tag
<Badge
v-if="worldDialog.ref.$isLabs"
type="primary"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.labs') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-else-if="worldDialog.ref.releaseStatus === 'public'"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.public') }}
</el-tag>
<el-tag
v-else
type="danger"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px">
</Badge>
<Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.private') }}
</el-tag>
</Badge>
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<el-tag
<Badge
class="x-tag-platform-pc"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-computer-line"></i
><span
@@ -77,15 +66,13 @@
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
</span>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<el-tag
<Badge
class="x-tag-platform-quest"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-android-line"></i
><span
@@ -93,15 +80,13 @@
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['android'].fileSize }}
</span>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
<el-tag
<Badge
class="x-tag-platform-ios"
type="info"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<i class="ri-apple-line"></i
><span
@@ -109,51 +94,42 @@
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']">
{{ worldDialog.bundleSizes['ios'].fileSize }}
</span>
</el-tag>
</Badge>
</TooltipWrapper>
<el-tag
<Badge
v-if="worldDialog.avatarScalingDisabled"
type="warning"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.avatar_scaling_disabled') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="worldDialog.focusViewDisabled"
type="warning"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.focus_view_disabled') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="worldDialog.ref.unityPackageUrl"
type="success"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.future_proofing') }}
</el-tag>
<el-tag
</Badge>
<Badge
v-if="worldDialog.inCache"
variant="outline"
class="x-link"
type="info"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(worldDialog.cachePath)">
<span v-text="worldDialog.cacheSize" />
| {{ t('dialog.world.tags.cache') }}
</el-tag>
</Badge>
</div>
<div>
<template v-for="tag in worldDialog.ref.tags" :key="tag">
<el-tag
<Badge
v-if="tag.startsWith('content_')"
effect="plain"
size="small"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<span v-if="tag === 'content_horror'">
{{ t('dialog.world.tags.content_horror') }}
@@ -173,7 +149,7 @@
<span v-else>
{{ tag.replace('content_', '') }}
</span>
</el-tag>
</Badge>
</template>
</div>
<div style="margin-top: 5px">
@@ -804,6 +780,7 @@
useWorldStore
} from '../../../stores';
import { favoriteRequest, miscRequest, userRequest, worldRequest } from '../../../api';
import { Badge } from '../../ui/badge';
import { database } from '../../../service/database.js';
import { getNextDialogIndex } from '../../../shared/utils/base/ui';

7
src/components/ui/badge/Badge.vue
View File

@@ -2,6 +2,7 @@
import { Primitive } from 'reka-ui';
import { cn } from '@/lib/utils';
import { reactiveOmit } from '@vueuse/core';
import { useAttrs } from 'vue';
import { badgeVariants } from '.';
@@ -13,10 +14,14 @@
});
const delegatedProps = reactiveOmit(props, 'class');
const attrs = useAttrs();
</script>
<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 />
</Primitive>
</template>

18
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -90,12 +90,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div>
<div class="group-item__bottom">
<el-tag
size="small"
effect="plain"
:type="userFavoriteAvatarsStatusForFavTab(group.visibility)">
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</el-tag>
</Badge>
<el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible="
@@ -507,6 +504,7 @@
import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
import { avatarRequest, favoriteRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
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) {
if (!value) {
return '';

18
src/views/Favorites/FavoritesFriend.vue
View File

@@ -92,12 +92,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div>
<div class="group-item__bottom">
<el-tag
size="small"
effect="plain"
:type="userFavoriteFriendsStatusForFavTab(group.visibility)">
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</el-tag>
</Badge>
<el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible="
@@ -290,6 +287,7 @@
import { useI18n } from 'vue-i18n';
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
import { Badge } from '../../components/ui/badge';
import { favoriteRequest } from '../../api';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
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) {
if (!value) {
return '';

18
src/views/Favorites/FavoritesWorld.vue
View File

@@ -92,12 +92,9 @@
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
</div>
<div class="group-item__bottom">
<el-tag
size="small"
effect="plain"
:type="userFavoriteWorldsStatusForFavTab(group.visibility)">
<Badge variant="outline">
{{ formatVisibility(group.visibility) }}
</el-tag>
</Badge>
<el-popover
:visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:visible="
@@ -416,6 +413,7 @@
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
import { favoriteRequest, worldRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
import FavoritesWorldItem from './components/FavoritesWorldItem.vue';
@@ -968,16 +966,6 @@
getLocalWorldFavorites();
}
function userFavoriteWorldsStatusForFavTab(visibility) {
if (visibility === 'public') {
return 'primary';
}
if (visibility === 'friends') {
return 'success';
}
return 'info';
}
function changeWorldGroupVisibility(name, visibility, menuKey = null) {
const params = {
type: 'world',

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

@@ -44,91 +44,60 @@
v-text="currentInstanceWorld.ref.authorName"></span>
</div>
<div style="margin-top: 5px">
<el-tag
v-if="currentInstanceWorld.ref.$isLabs"
type="primary"
effect="plain"
size="small"
style="margin-right: 5px"
>{{ t('dialog.world.tags.labs') }}</el-tag
>
<el-tag
<Badge v-if="currentInstanceWorld.ref.$isLabs" variant="outline" style="margin-right: 5px">
{{ t('dialog.world.tags.labs') }}
</Badge>
<Badge
v-else-if="currentInstanceWorld.ref.releaseStatus === 'public'"
type="success"
effect="plain"
size="small"
style="margin-right: 5px"
>{{ t('dialog.world.tags.public') }}</el-tag
>
<el-tag
variant="outline"
style="margin-right: 5px">
{{ t('dialog.world.tags.public') }}
</Badge>
<Badge
v-else-if="currentInstanceWorld.ref.releaseStatus === 'private'"
type="danger"
effect="plain"
size="small"
style="margin-right: 5px"
>{{ t('dialog.world.tags.private') }}</el-tag
>
variant="outline"
style="margin-right: 5px">
{{ t('dialog.world.tags.private') }}
</Badge>
<TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
<el-tag
class="x-tag-platform-pc"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
<Badge class="x-tag-platform-pc" variant="outline" style="margin-right: 5px"
><i class="ri-computer-line"></i>
<span
v-if="currentInstanceWorld.bundleSizes['standalonewindows']"
:class="['x-grey', 'x-tag-platform-pc', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
<el-tag
class="x-tag-platform-quest"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
<Badge class="x-tag-platform-quest" variant="outline" style="margin-right: 5px"
><i class="ri-android-line"></i>
<span
v-if="currentInstanceWorld.bundleSizes['android']"
:class="['x-grey', 'x-tag-platform-quest', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
<el-tag
class="x-tag-platform-ios"
type="info"
effect="plain"
size="small"
style="margin-right: 5px"
<Badge class="x-tag-platform-ios" variant="outline" style="margin-right: 5px"
><i class="ri-apple-line"></i>
<span
v-if="currentInstanceWorld.bundleSizes['ios']"
:class="['x-grey', 'x-tag-platform-ios', 'x-tag-border-left']"
>{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
>
</el-tag>
</Badge>
</TooltipWrapper>
<el-tag
<Badge
v-if="currentInstanceWorld.avatarScalingDisabled"
type="warning"
effect="plain"
size="small"
style="margin-right: 5px; margin-top: 5px"
>{{ t('dialog.world.tags.avatar_scaling_disabled') }}</el-tag
>
<el-tag
v-if="currentInstanceWorld.inCache"
type="info"
effect="plain"
size="small"
style="margin-right: 5px">
variant="outline"
style="margin-right: 5px; margin-top: 5px">
{{ t('dialog.world.tags.avatar_scaling_disabled') }}
</Badge>
<Badge v-if="currentInstanceWorld.inCache" variant="outline" style="margin-right: 5px">
<span>{{ currentInstanceWorld.cacheSize }} {{ t('dialog.world.tags.cache') }}</span>
</el-tag>
</Badge>
</div>
<div style="margin-top: 5px">
<LocationWorld :locationobject="currentInstanceLocation" :currentuserid="currentUser.id" />
@@ -215,6 +184,7 @@
useWorldStore
} from '../../stores';
import { commaNumber, formatDateFilter } from '../../shared/utils';
import { Badge } from '../../components/ui/badge';
import { DataTableLayout } from '../../components/ui/data-table';
import { createColumns } from './columns.jsx';
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';

28
src/views/PlayerList/dialogs/ChatboxBlacklistDialog.vue
View File

@@ -28,16 +28,28 @@
</el-button>
<br />
<h2>{{ t('dialog.chatbox_blacklist.user_blacklist') }}</h2>
<el-tag
<Badge
v-for="user in chatboxUserBlacklist"
:key="user[0]"
type="info"
disable-transitions
style="margin-right: 5px; margin-top: 5px"
closable
@close="deleteChatboxUserBlacklist(user[0])">
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<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>
</el-dialog>
</template>
@@ -47,6 +59,7 @@
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Badge } from '../../../components/ui/badge';
import { usePhotonStore } from '../../../stores';
const { t } = useI18n();
@@ -64,7 +77,6 @@
const emit = defineEmits(['deleteChatboxUserBlacklist']);
function deleteChatboxUserBlacklist(userId) {
emit('deleteChatboxUserBlacklist', userId);
}

5
src/views/Settings/dialogs/LaunchOptionsDialog.vue
View File

@@ -8,9 +8,9 @@
<div style="font-size: 12px">
{{ t('dialog.launch_options.description') }} <br />
{{ 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
</el-tag>
</Badge>
</div>
<el-input
@@ -59,6 +59,7 @@
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { Badge } from '../../../components/ui/badge';
import { openExternalLink } from '../../../shared/utils';
import { useLaunchStore } from '../../../stores';

5
src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
View File

@@ -93,9 +93,9 @@
v-if="screenshotMetadataDialog.metadata.fileResolution"
style="margin-right: 5px"
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
}}</el-tag>
}}</Badge>
<br />
<Location
v-if="screenshotMetadataDialog.metadata.world"
@@ -163,6 +163,7 @@
import { useI18n } from 'vue-i18n';
import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
import { Badge } from '../../../components/ui/badge';
import { formatDateFilter } from '../../../shared/utils';
import { vrcPlusImageRequest } from '../../../api';