replace el-tag with Badge

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

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 '';

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 '';

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',

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';

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);
}

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';

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';