replace inline styles with utility classes in dialogs

This commit is contained in:
pa
2026-03-09 18:17:37 +09:00
parent e5500f47be
commit feb04b036f
44 changed files with 148 additions and 301 deletions

View File

@@ -10,7 +10,7 @@
<template #content>
<span class="truncate">{{ avatarTags }}</span>
</template>
<span style="font-size: 12px" class="truncate text-muted-foreground">{{ avatarTags }}</span>
<span class="truncate text-xs text-muted-foreground">{{ avatarTags }}</span>
</TooltipWrapper>
</div>
</template>

View File

@@ -27,8 +27,7 @@
</div>
<div class="mt-1.5">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
class="cursor-pointer x-grey font-mono"
@click="showUserDialog(avatarDialog.ref.authorId)"
v-text="avatarDialog.ref.authorName"></span>
</div>
@@ -158,7 +157,7 @@
<div style="margin-top: 6px">
<span
v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
style="font-size: 12px"
class="text-xs"
v-text="avatarDialog.ref.description"></span>
</div>
</div>

View File

@@ -58,7 +58,7 @@
<br />
<div style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}</div>
<div class="text-xs">{{ t('dialog.set_world_tags.author_tags') }}</div>
<InputGroupTextareaField
:model-value="setAvatarStylesDialog.authorTags"

View File

@@ -7,7 +7,7 @@
<div>
<span>{{ t('dialog.gallery_select.gallery') }}</span>
<span class="ml-1.5 text-muted-foreground" style="font-size: 12px">{{ galleryTable.length }}/64</span>
<span class="ml-1.5 text-muted-foreground text-xs">{{ galleryTable.length }}/64</span>
<br />
<input
id="GalleryUploadButton"

View File

@@ -25,7 +25,7 @@
style="cursor: pointer"
v-text="groupDialog.ref.name"
@click="copyToClipboard(groupDialog.ref.name)"></span>
<span class="group-discriminator x-grey mr-1.5" style="font-family: monospace; font-size: 12px">
<span class="group-discriminator x-grey mr-1.5 font-mono text-xs">
{{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
</span>
<TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
@@ -39,8 +39,7 @@
</TooltipWrapper>
<div style="margin-top: 6px">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
class="cursor-pointer x-grey font-mono"
@click="showUserDialog(groupDialog.ref.ownerId)"
v-text="groupDialog.ownerDisplayName"></span>
</div>
@@ -129,13 +128,8 @@
<div style="margin-top: 6px">
<pre
v-show="groupDialog.ref.name !== groupDialog.ref.description"
style="
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
max-height: 40vh;
overflow-y: auto;
"
class="text-xs font-[inherit]"
style="white-space: pre-wrap; max-height: 40vh; overflow-y: auto"
v-text="groupDialog.ref.description"></pre>
</div>
</div>

View File

@@ -9,7 +9,7 @@
loading="lazy" />
</div>
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
<span v-if="groupDialog.instances.length" style="font-size: 12px; font-weight: bold; margin: 6px">
<span v-if="groupDialog.instances.length" class="text-xs font-bold" style="margin: 6px">
{{ t('dialog.group.info.instances') }}
</span>
<div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
@@ -71,15 +71,8 @@
loading="lazy" />
</div>
<pre
class="text-xs"
style="
display: inline-block;
vertical-align: top;
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
margin: 0;
"
class="text-xs font-[inherit]"
style="display: inline-block; vertical-align: top; white-space: pre-wrap; margin: 0"
>{{ groupDialog.announcement.text || '-' }}</pre
>
<br />
@@ -146,11 +139,9 @@
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.group.info.rules') }}</span>
<pre
class="text-xs"
style="font-family: inherit; font-size: 12px; white-space: pre-wrap; margin: 0 0.5em 0 0"
>{{ groupDialog.ref.rules || '-' }}</pre
>
<pre class="text-xs font-[inherit] whitespace-pre-wrap mr-2 my-0 ml-0">{{
groupDialog.ref.rules || '-'
}}</pre>
</div>
</div>
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">

View File

@@ -1,11 +1,9 @@
<template>
<template v-if="groupDialog.visible">
<span
v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')"
style="font-weight: bold; font-size: 16px"
>{{ t('dialog.group.members.all_members') }}</span
>
<span v-else style="font-weight: bold; font-size: 16px">{{ t('dialog.group.members.friends_only') }}</span>
<span v-if="hasGroupPermission(groupDialog.ref, 'group-members-viewall')" class="text-base font-bold">{{
t('dialog.group.members.all_members')
}}</span>
<span v-else class="text-base font-bold">{{ t('dialog.group.members.friends_only') }}</span>
<div style="margin-top: 8px">
<Button
class="rounded-full h-6 w-6"
@@ -24,10 +22,10 @@
@click="downloadAndSaveJson(`${groupDialog.id}_members`, groupDialog.members)">
<Download class="h-4 w-4" />
</Button>
<span v-if="groupDialog.memberSearch.length" style="font-size: 14px; margin-left: 6px; margin-right: 6px"
<span v-if="groupDialog.memberSearch.length" class="text-sm mx-1.5"
>{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
>
<span v-else style="font-size: 14px; margin-left: 6px; margin-right: 6px"
<span v-else class="text-sm mx-1.5"
>{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
>
<div

View File

@@ -17,9 +17,9 @@
v-for="(gallery, index) in groupDialog.ref.galleries"
:key="`label-${index}`"
v-slot:[`label-${index}`]>
<span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
<span class="text-base font-bold" v-text="gallery.name" />
<i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
<span class="text-muted-foreground text-xs ml-1.5">{{
groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
}}</span>
</template>

View File

@@ -32,15 +32,8 @@
loading="lazy" />
</div>
<pre
class="text-xs"
style="
display: inline-block;
vertical-align: top;
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
margin: 0;
"
class="text-xs font-[inherit]"
style="display: inline-block; vertical-align: top; white-space: pre-wrap; margin: 0"
>{{ post.text || '-' }}</pre
>
<br />

View File

@@ -53,7 +53,7 @@
<Button size="sm" variant="secondary" @click="errors = ''">
{{ t('dialog.group_member_moderation.import_bans_clear_errors') }}
</Button>
<pre class="mt-1.5" style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
<pre class="mt-1.5 text-xs" style="white-space: pre-wrap" v-text="errors"></pre>
</template>
<template v-if="resultMessage">

View File

@@ -11,25 +11,16 @@
<Spinner v-if="loading" />
<RefreshCw v-else />
</Button>
<Button
size="sm"
variant="outline"
@click="$emit('select-all', tableData.data)"
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
tableData.data.length
}}</span>
<Button size="sm" variant="outline" @click="$emit('select-all', tableData.data)">{{
t('dialog.group_member_moderation.select_all')
}}</Button>
<span class="text-sm mx-1.5">{{ tableData.data.length }}</span>
</div>
<div class="flex gap-2 items-center">
<Button
variant="outline"
size="sm"
:disabled="!tableData.data.length"
@click="$emit('export')"
>{{ t('dialog.group_member_moderation.export_bans') }}</Button
>
<Button variant="outline" size="sm" :disabled="!tableData.data.length" @click="$emit('export')">{{
t('dialog.group_member_moderation.export_bans')
}}</Button>
<Button
variant="outline"
size="sm"

View File

@@ -1,47 +1,27 @@
<template>
<div style="margin-top: 8px">
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="loading"
@click="$emit('refresh')">
<Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
<Spinner v-if="loading" />
<RefreshCw v-else />
</Button>
<br />
<TabsUnderline default-value="sent" :items="invitesTabs" :unmount-on-hide="false">
<template #label-sent>
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.sent_invites')
}}</span>
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
invitesTable.data.length
}}</span>
<span class="text-base font-bold">{{ t('dialog.group_member_moderation.sent_invites') }}</span>
<span class="text-muted-foreground text-xs ml-1.5">{{ invitesTable.data.length }}</span>
</template>
<template #label-join>
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.join_requests')
}}</span>
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
joinRequestsTable.data.length
}}</span>
<span class="font-bold text-base">{{ t('dialog.group_member_moderation.join_requests') }}</span>
<span class="text-muted-foreground text-xs ml-1.5">{{ joinRequestsTable.data.length }}</span>
</template>
<template #label-blocked>
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.blocked_requests')
}}</span>
<span class="text-muted-foreground" style="font-size: 12px; margin-left: 6px">{{
blockedTable.data.length
}}</span>
<span class="font-bold text-base">{{ t('dialog.group_member_moderation.blocked_requests') }}</span>
<span class="text-muted-foreground text-xs ml-1.5">{{ blockedTable.data.length }}</span>
</template>
<template #sent>
<Button
size="sm"
variant="outline"
@click="$emit('select-all', invitesTable.data)"
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<Button size="sm" variant="outline" @click="$emit('select-all', invitesTable.data)">{{
t('dialog.group_member_moderation.select_all')
}}</Button>
<DataTableLayout
style="margin-top: 8px"
:table="invitesTanstackTable"
@@ -49,21 +29,15 @@
:page-sizes="pageSizes"
:total-items="invitesTotalItems" />
<br />
<Button
variant="outline"
:disabled="inviteActionDisabled"
@click="$emit('delete-sent-invite')"
>{{ t('dialog.group_member_moderation.delete_sent_invite') }}</Button
>
<Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('delete-sent-invite')">{{
t('dialog.group_member_moderation.delete_sent_invite')
}}</Button>
</template>
<template #join>
<Button
size="sm"
variant="outline"
@click="$emit('select-all', joinRequestsTable.data)"
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<Button size="sm" variant="outline" @click="$emit('select-all', joinRequestsTable.data)">{{
t('dialog.group_member_moderation.select_all')
}}</Button>
<DataTableLayout
style="margin-top: 8px"
:table="joinRequestsTanstackTable"
@@ -85,21 +59,15 @@
@click="$emit('reject-invite-request')"
>{{ t('dialog.group_member_moderation.reject_join_requests') }}</Button
>
<Button
variant="outline"
:disabled="inviteActionDisabled"
@click="$emit('block-join-request')"
>{{ t('dialog.group_member_moderation.block_join_requests') }}</Button
>
<Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('block-join-request')">{{
t('dialog.group_member_moderation.block_join_requests')
}}</Button>
</template>
<template #blocked>
<Button
size="sm"
variant="outline"
@click="$emit('select-all', blockedTable.data)"
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<Button size="sm" variant="outline" @click="$emit('select-all', blockedTable.data)">{{
t('dialog.group_member_moderation.select_all')
}}</Button>
<DataTableLayout
style="margin-top: 8px"
:table="blockedTanstackTable"
@@ -107,30 +75,28 @@
:page-sizes="pageSizes"
:total-items="blockedTotalItems" />
<br />
<Button
variant="outline"
:disabled="inviteActionDisabled"
@click="$emit('delete-blocked-request')"
>{{ t('dialog.group_member_moderation.delete_blocked_requests') }}</Button
>
<Button variant="outline" :disabled="inviteActionDisabled" @click="$emit('delete-blocked-request')">{{
t('dialog.group_member_moderation.delete_blocked_requests')
}}</Button>
</template>
</TabsUnderline>
</div>
</template>
<script setup>
import { RefreshCw } from 'lucide-vue-next';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Button } from '@/components/ui/button';
import { DataTableLayout } from '@/components/ui/data-table';
import { RefreshCw } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { TabsUnderline } from '@/components/ui/tabs';
import { DataTableLayout } from '@/components/ui/data-table';
import { computed } from 'vue';
import { hasGroupPermission } from '@/shared/utils';
import { useI18n } from 'vue-i18n';
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
import { createColumns as createInvitesColumns } from './groupMemberModerationInvitesColumns.jsx';
import { createColumns as createJoinRequestsColumns } from './groupMemberModerationJoinRequestsColumns.jsx';
import { createColumns as createBlockedColumns } from './groupMemberModerationBlockedColumns.jsx';
import { useVrcxVueTable } from '@/lib/table/useVrcxVueTable';
const props = defineProps({
loading: { type: Boolean, default: false },

View File

@@ -1,30 +1,19 @@
<template>
<div style="margin-top: 8px">
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="loading"
@click="$emit('refresh')">
<Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
<Spinner v-if="loading" />
<RefreshCw v-else />
</Button>
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
tableData.data.length
}}</span>
<span class="text-sm mx-1.5">{{ tableData.data.length }}</span>
<br />
<div style="display: flex; justify-content: space-between; align-items: center">
<div>
<Select v-model="selectedAuditLogTypes" multiple>
<SelectTrigger style="margin: 8px 0; width: 250px">
<SelectValue
:placeholder="t('dialog.group_member_moderation.filter_type')" />
<SelectValue :placeholder="t('dialog.group_member_moderation.filter_type')" />
</SelectTrigger>
<SelectContent>
<SelectItem
v-for="type in auditLogTypes"
:key="type"
:value="type">
<SelectItem v-for="type in auditLogTypes" :key="type" :value="type">
{{ getAuditLogTypeName(type) }}
</SelectItem>
</SelectContent>

View File

@@ -1,28 +1,15 @@
<template>
<div class="mt-2">
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="loading"
@click="$emit('refresh')">
<Button class="rounded-full" variant="outline" size="icon-sm" :disabled="loading" @click="$emit('refresh')">
<Spinner v-if="loading" />
<RefreshCw v-else />
</Button>
<span class="ml-1.5 mr-1.5" style="font-size: 14px">
{{ tableData.data.length }}/{{ groupRef.memberCount }}
</span>
<span class="ml-1.5 mr-1.5 text-sm"> {{ tableData.data.length }}/{{ groupRef.memberCount }} </span>
<div class="mt-1.5" style="float: right">
<span class="mr-1.5">{{ t('dialog.group.members.sort_by') }}</span>
<DropdownMenu>
<DropdownMenuTrigger
as-child
:disabled="sortFilterDisabled">
<Button
size="sm"
variant="outline"
:disabled="sortFilterDisabled"
@click.stop>
<DropdownMenuTrigger as-child :disabled="sortFilterDisabled">
<Button size="sm" variant="outline" :disabled="sortFilterDisabled" @click.stop>
{{ t(memberSortOrder.name) }}
<ArrowDown class="ml-1.5" />
</Button>
@@ -38,14 +25,8 @@
</DropdownMenu>
<span class="ml-2 mr-1.5">{{ t('dialog.group.members.filter') }}</span>
<DropdownMenu>
<DropdownMenuTrigger
as-child
:disabled="sortFilterDisabled">
<Button
size="sm"
variant="outline"
:disabled="sortFilterDisabled"
@click.stop>
<DropdownMenuTrigger as-child :disabled="sortFilterDisabled">
<Button size="sm" variant="outline" :disabled="sortFilterDisabled" @click.stop>
{{ t(memberFilter.name) }}
<ArrowDown class="ml-1.5" />
</Button>
@@ -58,9 +39,7 @@
{{ t(item.name) }}
</DropdownMenuItem>
<template v-for="role in groupRef.roles" :key="role.name">
<DropdownMenuItem
v-if="!role.defaultRole"
@click="$emit('filter-change', role)">
<DropdownMenuItem v-if="!role.defaultRole" @click="$emit('filter-change', role)">
{{ t(role.name) }}
</DropdownMenuItem>
</template>
@@ -125,11 +104,7 @@
const { t } = useI18n();
const sortFilterDisabled = computed(() =>
Boolean(
props.loading ||
props.memberSearch.length ||
!hasGroupPermission(props.groupRef, 'group-bans-manage')
)
Boolean(props.loading || props.memberSearch.length || !hasGroupPermission(props.groupRef, 'group-bans-manage'))
);
const columns = computed(() => createColumns(props.columnContext));

View File

@@ -11,7 +11,7 @@
<DialogTitle>{{ t('dialog.edit_send_invite_message.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
<span>{{ t('dialog.edit_send_invite_message.description') }}</span>
</div>

View File

@@ -11,7 +11,7 @@
<DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
<span>{{ t('dialog.invite_message.confirmation') }}</span>
</div>

View File

@@ -16,7 +16,7 @@
:on-sort-change="handleSortChange">
<template #toolbar>
<div style="display: flex; align-items: center; justify-content: space-between">
<Location :location="location.tag" style="font-size: 14px" />
<Location :location="location.tag" class="text-sm" />
<InputGroupField
v-model="search"
:placeholder="t('dialog.previous_instances.search_placeholder')"

View File

@@ -16,7 +16,7 @@
:on-sort-change="handleSortChange">
<template #toolbar>
<div style="display: flex; align-items: center; justify-content: space-between">
<span style="font-size: 14px" v-text="headerText"></span>
<span class="text-sm" v-text="headerText"></span>
<InputGroupField
v-model="search"
:placeholder="t('dialog.previous_instances.search_placeholder')"

View File

@@ -26,7 +26,7 @@
v-slot:[`label-${index}`]>
<span>
<i class="x-status-icon" style="margin-right: 8px" :class="userFavoriteWorldsStatus(list[1])"> </i>
<span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
<span class="font-bold text-sm" v-text="list[0]"></span>
<span style="font-size: 10px; margin-left: 6px"
>{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
>

View File

@@ -14,14 +14,7 @@
t('dialog.user.groups.total_count', { count: userDialog.userGroups.groups.length })
}}</span>
<template v-if="userDialogGroupEditMode">
<span
style="
margin-left: 8px;
font-size: 10px;
"
>{{ t('dialog.user.groups.hold_shift') }}</span
>
<span class="text-[10px]" style="margin-left: 8px">{{ t('dialog.user.groups.hold_shift') }}</span>
</template>
</div>
<div style="display: flex; align-items: center">
@@ -240,8 +233,8 @@
</template>
<template v-else>
<template v-if="userDialog.userGroups.ownGroups.length > 0">
<span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.own_groups') }}</span>
<span style="font-size: 12px; margin-left: 6px"
<span class="text-base font-bold">{{ t('dialog.user.groups.own_groups') }}</span>
<span class="text-xs ml-1.5"
>{{ userDialog.userGroups.ownGroups.length }}/{{
// @ts-ignore
cachedConfig?.constants?.GROUPS?.MAX_OWNED
@@ -281,8 +274,8 @@
</div>
</template>
<template v-if="userDialog.userGroups.mutualGroups.length > 0">
<span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.mutual_groups') }}</span>
<span style="font-size: 12px; margin-left: 6px">{{ userDialog.userGroups.mutualGroups.length }}</span>
<span class="text-base font-bold">{{ t('dialog.user.groups.mutual_groups') }}</span>
<span class="text-xs ml-1.5">{{ userDialog.userGroups.mutualGroups.length }}</span>
<div class="flex flex-wrap items-start" style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.mutualGroups"
@@ -317,8 +310,8 @@
</div>
</template>
<template v-if="userDialog.userGroups.remainingGroups.length > 0">
<span style="font-weight: bold; font-size: 16px">{{ t('dialog.user.groups.groups') }}</span>
<span style="font-size: 12px; margin-left: 6px">
<span class="text-base font-bold">{{ t('dialog.user.groups.groups') }}</span>
<span class="text-xs ml-1.5">
{{ userDialog.userGroups.remainingGroups.length }}
<template v-if="currentUser.id === userDialog.id">
/

View File

@@ -78,15 +78,8 @@
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.note') }}</span>
<pre
class="text-xs"
style="
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
margin: 0 0.5em 0 0;
max-height: 210px;
overflow-y: auto;
"
class="text-xs font-[inherit]"
style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
>{{ userDialog.note }}</pre
>
</div>
@@ -97,15 +90,8 @@
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.memo') }}</span>
<pre
class="text-xs"
style="
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
margin: 0 0.5em 0 0;
max-height: 210px;
overflow-y: auto;
"
class="text-xs font-[inherit]"
style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
>{{ userDialog.memo }}</pre
>
</div>
@@ -180,15 +166,8 @@
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{ t('dialog.user.info.bio') }}</span>
<pre
class="text-xs truncate"
style="
font-family: inherit;
font-size: 12px;
white-space: pre-wrap;
margin: 0 0.5em 0 0;
max-height: 210px;
overflow-y: auto;
"
class="text-xs truncate font-[inherit]"
style="white-space: pre-wrap; margin: 0 0.5em 0 0; max-height: 210px; overflow-y: auto"
>{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
>
<div style="float: right">

View File

@@ -52,8 +52,8 @@
@click="copyUserDisplayName(userDialog.ref.displayName)"></span>
<TooltipWrapper v-if="userDialog.ref.pronouns" side="top" :content="t('dialog.user.pronouns')">
<span
class="x-grey"
style="margin-right: 6px; font-family: monospace; font-size: 12px"
class="x-grey font-mono text-xs"
style="margin-right: 6px"
v-text="userDialog.ref.pronouns"></span>
</TooltipWrapper>
<TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
@@ -68,8 +68,8 @@
<template v-if="userDialog.ref.id === currentUser.id">
<br />
<span
class="x-grey"
style="margin-right: 8px; font-family: monospace; font-size: 12px; cursor: pointer"
class="x-grey font-mono text-xs"
style="margin-right: 8px; cursor: pointer"
v-text="currentUser.username"
@click="copyUserDisplayName(currentUser.username)"></span>
</template>
@@ -197,12 +197,9 @@
<div style="display: block; width: 275px; word-break: normal">
<span>{{ badge.badgeName }}</span>
<br />
<span class="x-grey" style="font-size: 12px">{{ badge.badgeDescription }}</span>
<span class="x-grey text-xs">{{ badge.badgeDescription }}</span>
<br />
<span
v-if="badge.assignedAt"
class="x-grey"
style="font-family: monospace; font-size: 12px">
<span v-if="badge.assignedAt" class="x-grey font-mono text-xs">
{{ t('dialog.user.badges.assigned') }}:
{{ formatDateFilter(badge.assignedAt, 'long') }}
</span>
@@ -229,7 +226,7 @@
</TooltipWrapper>
</div>
<div>
<span style="font-size: 12px" v-text="userDialog.ref.statusDescription"></span>
<span class="text-xs" v-text="userDialog.ref.statusDescription"></span>
</div>
</div>

View File

@@ -19,14 +19,13 @@
<Checkbox v-model="setWorldTagsDialog.debugAllowed" />
<span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
</label>
<div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
<div class="mt-2 text-xs">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
<InputGroupTextareaField
v-model="setWorldTagsDialog.authorTags"
:rows="2"
placeholder=""
input-class="resize-none mt-2" />
<div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
<div class="mt-2 text-xs">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.contentHorror" />
<span>{{ t('dialog.set_world_tags.content_horror') }}</span>
@@ -51,9 +50,7 @@
<Checkbox v-model="setWorldTagsDialog.contentSex" />
<span>{{ t('dialog.set_world_tags.content_sex') }}</span>
</label>
<div class="mt-2" style="font-size: 12px">
{{ t('dialog.set_world_tags.default_content_settings') }}<br />
</div>
<div class="mt-2 text-xs">{{ t('dialog.set_world_tags.default_content_settings') }}<br /></div>
<label class="inline-flex items-center gap-2">
<Checkbox v-model="setWorldTagsDialog.emoji" />
<span>{{ t('dialog.new_instance.content_emoji') }}</span>
@@ -178,6 +175,9 @@
}
);
/**
*
*/
function showSetWorldTagsDialog() {
const D = setWorldTagsDialog.value;
@@ -249,6 +249,9 @@
D.contentTags = contentTags.toString();
}
/**
*
*/
function saveSetWorldTagsDialog() {
const D = setWorldTagsDialog.value;
const authorTags = D.authorTags.trim().split(',');

View File

@@ -32,8 +32,7 @@
</div>
<div class="mt-1.5">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
class="cursor-pointer x-grey font-mono"
@click="showUserDialog(worldDialog.ref.authorId)"
v-text="worldDialog.ref.authorName" />
</div>
@@ -130,7 +129,8 @@
<div style="margin-top: 6px; display: flex; align-items: center">
<span
v-show="worldDialog.ref.name !== worldDialog.ref.description"
style="font-size: 12px; flex: 1; margin-right: 0.5em"
class="text-xs"
style="flex: 1; margin-right: 0.5em"
>{{ translatedDescription || worldDialog.ref.description }}</span
>
<Button

View File

@@ -7,7 +7,7 @@
<span class="shrink-0">{{ t('view.charts.instance_activity.header') }}</span>
<HoverCard>
<HoverCardTrigger as-child>
<Info class="ml-1" style="font-size: 12px; opacity: 0.7" />
<Info class="ml-1 text-xs opacity-70" />
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" class="w-75">
<div>

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.avatar_import.header') }}</DialogTitle>
</DialogHeader>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="font-size: 12px">{{ t('dialog.avatar_import.description') }}</div>
<div class="text-xs">{{ t('dialog.avatar_import.description') }}</div>
<div style="display: flex; align-items: center">
<div v-if="avatarImportDialog.progress">
{{ t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} /
@@ -97,7 +97,7 @@
<h2 class="my-1.5 mx-0" style="font-weight: bold">
{{ t('dialog.avatar_import.errors') }}
</h2>
<pre style="white-space: pre-wrap; font-size: 12px" v-text="avatarImportDialog.errors"></pre>
<pre class="whitespace-pre-wrap text-xs" v-text="avatarImportDialog.errors"></pre>
</template>
<DataTableLayout
class="min-w-0 w-full"

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.friend_import.header') }}</DialogTitle>
</DialogHeader>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="font-size: 12px">{{ t('dialog.friend_import.description') }}</div>
<div class="text-xs">{{ t('dialog.friend_import.description') }}</div>
<div style="display: flex; align-items: center">
<div v-if="friendImportDialog.progress">
{{ t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} /
@@ -20,11 +20,7 @@
</Button>
</div>
</div>
<InputGroupTextareaField
v-model="friendImportDialog.input"
:rows="10"
input-class="resize-none mt-2" />
<InputGroupTextareaField v-model="friendImportDialog.input" :rows="10" input-class="resize-none mt-2" />
<div>
<div class="mb-2">
<div class="flex items-center gap-2">
@@ -47,10 +43,10 @@
</SelectContent>
</Select>
<Select class="ml-2"
<Select
class="ml-2"
:model-value="friendImportLocalFavoriteGroupSelection"
@update:modelValue="handleFriendImportLocalGroupSelect"
>
@update:modelValue="handleFriendImportLocalGroupSelect">
<SelectTrigger size="sm">
<SelectValue :placeholder="t('dialog.world_import.select_local_group_placeholder')" />
</SelectTrigger>
@@ -104,7 +100,7 @@
{{ t('dialog.friend_import.clear_errors') }}
</Button>
<h2 class="my-1.5 mx-0" style="font-weight: bold">{{ t('dialog.friend_import.errors') }}</h2>
<pre style="white-space: pre-wrap; font-size: 12px" v-text="friendImportDialog.errors"></pre>
<pre class="whitespace-pre-wrap text-xs" v-text="friendImportDialog.errors"></pre>
</template>
<DataTableLayout
class="min-w-0 w-full"

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.world_import.header') }}</DialogTitle>
</DialogHeader>
<div style="display: flex; align-items: center; justify-content: space-between">
<div style="font-size: 12px">{{ t('dialog.world_import.description') }}</div>
<div class="text-xs">{{ t('dialog.world_import.description') }}</div>
<div style="display: flex; align-items: center">
<div v-if="worldImportDialog.progress">
{{ t('dialog.world_import.process_progress') }}
@@ -101,7 +101,7 @@
<h2 class="my-1.5 mx-0" style="font-weight: bold">
{{ t('dialog.world_import.errors') }}
</h2>
<pre style="white-space: pre-wrap; font-size: 12px" v-text="worldImportDialog.errors"></pre>
<pre class="whitespace-pre-wrap text-xs" v-text="worldImportDialog.errors"></pre>
</template>
<DataTableLayout
class="min-w-0 w-full"

View File

@@ -132,7 +132,7 @@
</div>
<div class="x-legal-notice-container">
<div style="text-align: center; font-size: 12px">
<div class="text-center text-xs">
<p>
<a class="cursor-pointer" @click="openExternalLink('https://vrchat.com/home/password')">{{
t('view.login.forgotPassword')

View File

@@ -6,7 +6,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.edit_send_invite_response_message.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
<span>{{ t('dialog.edit_send_invite_response_message.description') }}</span>
</div>
<InputGroupTextareaField

View File

@@ -6,7 +6,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.invite_response_message.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
<span>{{ t('dialog.invite_response_message.confirmation') }}</span>
</div>

View File

@@ -36,8 +36,7 @@
</div>
<div>
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
class="cursor-pointer x-grey font-mono"
@click="showUserDialog(currentInstanceWorld.ref.authorId)"
v-text="currentInstanceWorld.ref.authorName"></span>
</div>

View File

@@ -29,7 +29,7 @@
t('view.player_list.photon.chatbox_blacklist')
}}</Button>
<TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
<div style="display: inline-flex; align-items: center; font-size: 14px">
<div class="inline-flex items-center text-sm">
<span v-if="ipcEnabled && !photonEventIcon">🟢</span>
<span v-else-if="ipcEnabled"></span>
<span v-else>🔴</span>
@@ -45,8 +45,7 @@
:table-style="tableStyle"
:page-sizes="pageSizes"
:total-items="currentTotal"
:on-page-size-change="handleCurrentPageSizeChange"
/>
:on-page-size-change="handleCurrentPageSizeChange" />
</template>
<template #previous>
<DataTableLayout

View File

@@ -180,7 +180,7 @@
<RefreshCw v-else />
</Button>
</TooltipWrapper>
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
<span class="text-sm mx-1.5">{{
t('view.search.avatar.result_count', {
count: searchAvatarResults.length
})
@@ -334,13 +334,8 @@
<span v-text="group.name"></span>
<span style="margin-left: 6px; font-weight: normal">({{ group.memberCount }})</span>
<span
class="text-muted-foreground"
style="
margin-left: 6px;
font-weight: normal;
font-family: monospace;
font-size: 12px;
"
class="text-muted-foreground font-mono text-xs"
style="margin-left: 6px; font-weight: normal"
>{{ group.shortCode }}.{{ group.discriminator }}</span
>
</span>

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.launch_options.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
{{ t('dialog.launch_options.description') }} <br />
{{ t('dialog.launch_options.example') }}
<div>--fps=144</div>

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.notification_position.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
{{ t('dialog.notification_position.description') }}
</div>
<div class="relative mx-auto mt-4 size-75">

View File

@@ -11,7 +11,7 @@
<div class="mt-4" v-for="lib in openSourceSoftwareLicenses" :key="lib.name">
<p style="font-weight: bold">{{ lib.name }}</p>
<pre style="font-size: 12px; white-space: pre-line">{{ lib.licenseText }}</pre>
<pre class="text-xs whitespace-pre-line">{{ lib.licenseText }}</pre>
</div>
</div>
</DialogContent>

View File

@@ -5,7 +5,7 @@
<DialogTitle>{{ t('dialog.config_json.header') }}</DialogTitle>
</DialogHeader>
<div>
<div style="font-size: 12px; word-break: keep-all">
<div class="text-xs break-keep">
{{ t('dialog.config_json.description1') }} <br />
{{ t('dialog.config_json.description2') }}
</div>

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.youtube_api.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">{{ t('dialog.youtube_api.description') }} <br /></div>
<div class="text-xs">{{ t('dialog.youtube_api.description') }} <br /></div>
<InputGroupTextareaField
v-model="youTubeApiKey"
@@ -15,9 +15,7 @@
show-count />
<DialogFooter>
<Button
variant="outline"
@click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
<Button variant="outline" @click="openExternalLink('https://smashballoon.com/doc/youtube-api-key/')">
{{ t('dialog.youtube_api.guide') }}
</Button>
<Button @click="testYouTubeApiKey">

View File

@@ -69,7 +69,7 @@
</Select>
</div>
<template v-if="screenshotMetadataDialog.searchIndex !== null">
<span class="ml-2" style="white-space: pre-wrap; font-size: 12px">{{
<span class="ml-2 whitespace-pre-wrap text-xs">{{
screenshotMetadataDialog.searchIndex + 1 + '/' + screenshotMetadataDialog.searchResults.length
}}</span>
</template>
@@ -133,9 +133,7 @@
</Carousel>
</div>
<template v-if="screenshotMetadataDialog.metadata.error">
<pre
style="white-space: pre-wrap; font-size: 12px"
v-text="screenshotMetadataDialog.metadata.error"></pre>
<pre class="whitespace-pre-wrap text-xs" v-text="screenshotMetadataDialog.metadata.error"></pre>
<br />
</template>
<span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 6px">

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.edit_invite_message.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
<span>{{ t('dialog.edit_invite_message.description') }}</span>
<InputGroupTextareaField
v-model="message"

View File

@@ -4,14 +4,10 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.discord_names.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
{{ t('dialog.discord_names.description') }}
</div>
<InputGroupTextareaField
v-model="discordNamesContent"
:rows="15"
readonly
input-class="resize-none mt-4" />
<InputGroupTextareaField v-model="discordNamesContent" :rows="15" readonly input-class="resize-none mt-4" />
</DialogContent>
</Dialog>
</template>

View File

@@ -4,7 +4,7 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.note_export.header') }}</DialogTitle>
</DialogHeader>
<div style="font-size: 12px">
<div class="text-xs">
{{ t('dialog.note_export.description1') }} <br />
{{ t('dialog.note_export.description2') }} <br />
{{ t('dialog.note_export.description3') }} <br />
@@ -36,7 +36,7 @@
<h2 class="m-0" style="font-weight: bold">
{{ t('dialog.note_export.errors') }}
</h2>
<pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
<pre class="whitespace-pre-wrap text-xs" v-text="errors"></pre>
</template>
<DataTableLayout

View File

@@ -5,13 +5,11 @@
<DialogTitle>{{ t('dialog.registry_backup.header') }}</DialogTitle>
</DialogHeader>
<div class="mt-2">
<div style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
<div class="flex items-center justify-between text-xs">
<span class="name mr-6">{{ t('dialog.registry_backup.auto_backup') }}</span>
<Switch :model-value="vrcRegistryAutoBackup" @update:modelValue="setVrcRegistryAutoBackup" />
</div>
<div
class="mt-1.5"
style="display: flex; align-items: center; justify-content: space-between; font-size: 12px">
<div class="mt-1.5 flex items-center justify-between text-xs">
<span class="name mr-6">{{ t('dialog.registry_backup.ask_to_restore') }}</span>
<Switch :model-value="vrcRegistryAskRestore" @update:modelValue="setVrcRegistryAskRestore" />
</div>