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

use tailwind class

Browse Source
This commit is contained in:
pa
2026-03-08 22:46:26 +09:00
parent be2f07f24e
commit 9b564303a4
85 changed files with 1167 additions and 642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/InstanceActionBar.vue
View File

@@ -53,10 +53,9 @@
</TooltipWrapper>
<TooltipWrapper v-if="showHistoryButton" side="top" :content="historyTooltip">
<Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground ml-1.5"
size="icon-sm"
variant="outline"
style="margin-left: 5px"
@click="handleHistory">
<History class="h-4 w-4" />
</Button>
@@ -101,7 +100,7 @@
</span>
<span v-if="instance?.users?.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
<template v-for="user in instance?.users || []" :key="user.id">
<span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">
<span style="cursor: pointer; margin-right: 6px" @click="showUserDialog(user.id)">
{{ user.displayName }}
</span>
</template>
@@ -268,7 +267,7 @@
const showLaunchButton = computed(() => props.showLaunch && checkCanInviteSelf(resolvedLaunchLocation.value));
const showInviteYourself = computed(() => props.showInvite && checkCanInviteSelf(resolvedInviteLocation.value));
const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 5px' : ''));
const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 6px' : ''));
const showRefreshButton = computed(() => props.showRefresh && typeof props.onRefresh === 'function');
const showHistoryButton = computed(() => props.showHistory && typeof props.onHistory === 'function');

15
src/components/LocationWorld.vue
View File

@@ -9,7 +9,7 @@
<TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<AlertTriangle :class="['inline-block', 'ml-1']" style="color: lightcoral" />
</TooltipWrapper>
<Lock v-if="strict" style="display: inline-block; margin-left: 5px" />
<Lock class="ml-1.5" v-if="strict" style="display: inline-block" />
</span>
</template>
@@ -50,6 +50,9 @@
const groupName = ref('');
const isClosed = ref(false);
/**
*
*/
function parse() {
const locObj = props.locationobject;
location.value = locObj.tag;
@@ -94,6 +97,10 @@
}
}
/**
*
* @param accessTypeNameRaw
*/
function translateAccessType(accessTypeNameRaw) {
const key = accessTypeLocaleKeyMap[accessTypeNameRaw];
if (!key) {
@@ -118,10 +125,16 @@
{ immediate: true }
);
/**
*
*/
function showLaunchDialog() {
launchStore.showLaunchDialog(location.value, shortName.value);
}
/**
*
*/
function showGroupDialog() {
if (!location.value) return;
const L = parseLocation(location.value);

4
src/components/StatusBar.vue
View File

@@ -539,7 +539,7 @@
align-items: center;
width: 100%;
height: 100%;
padding: 0 6px;
padding: 0 8px;
}
.status-bar-left {
@@ -561,7 +561,7 @@
display: flex;
align-items: center;
gap: 4px;
padding: 0 6px;
padding: 0 8px;
height: 22px;
white-space: nowrap;
border-right: 1px solid var(--border);

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

@@ -16,16 +16,16 @@
style="width: 160px; height: 120px; border-radius: var(--radius-xl); object-fit: cover"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
<div style="flex: 1">
<div>
<span
class="font-bold"
style="margin-right: 5px; cursor: pointer"
class="font-bold mr-1.5"
style="cursor: pointer"
v-text="avatarDialog.ref.name"
@click="copyToClipboard(avatarDialog.ref.name)"></span>
</div>
<div style="margin-top: 5px">
<div class="mt-1.5">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
@@ -34,19 +34,16 @@
</div>
<div>
<Badge
class="mr-1.5 mt-1.5"
v-if="avatarDialog.ref.releaseStatus === 'public'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
variant="outline">
{{ t('dialog.avatar.tags.public') }}
</Badge>
<Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-else variant="outline">
{{ t('dialog.avatar.tags.private') }}
</Badge>
<TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
<Badge
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
<Badge class="text-platform-pc border-platform-pc! mr-1.5 mt-1.5" variant="outline"
><Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="avatarDialog.platformInfo.pc"
@@ -62,9 +59,8 @@
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
<Badge
class="text-platform-quest border-platform-quest!"
class="text-platform-quest border-platform-quest! mr-1.5 mt-1.5"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
><Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="avatarDialog.platformInfo.android"
@@ -79,10 +75,7 @@
</Badge>
</TooltipWrapper>
<TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
<Badge
class="text-platform-ios border-platform-ios"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
<Badge class="text-platform-ios border-platform-ios mr-1.5 mt-1.5" variant="outline"
><Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="avatarDialog.platformInfo.ios"
@@ -99,16 +92,15 @@
<Badge
v-if="avatarDialog.inCache"
variant="outline"
class="cursor-pointer"
style="margin-right: 5px; margin-top: 5px"
class="cursor-pointer mr-1.5 mt-1.5"
@click="openFolderGeneric(avatarDialog.cachePath)">
<span v-text="avatarDialog.cacheSize"></span>
&nbsp;{{ t('dialog.avatar.tags.cache') }}
</Badge>
<Badge
class="mr-1.5 mt-1.5"
v-if="avatarDialog.ref.styles?.primary || avatarDialog.ref.styles?.secondary"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
>{{ t('view.favorite.avatars.styles') }}
<span
v-if="avatarDialog.ref.styles.primary"
@@ -121,16 +113,10 @@
>{{ avatarDialog.ref.styles.secondary }}</span
>
</Badge>
<Badge
v-if="avatarDialog.isQuestFallback"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.isQuestFallback" variant="outline">
{{ t('dialog.avatar.tags.fallback') }}
</Badge>
<Badge
v-if="avatarDialog.hasImposter"
variant="outline"
style="margin-right: 5px; margin-top: 5px"
<Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.hasImposter" variant="outline"
>{{ t('dialog.avatar.tags.impostor') }}
<span
v-if="avatarDialog.imposterVersion"
@@ -138,18 +124,12 @@
>v{{ avatarDialog.imposterVersion }}</span
>
</Badge>
<Badge
v-if="avatarDialog.ref.unityPackageUrl"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="avatarDialog.ref.unityPackageUrl" variant="outline">
{{ t('dialog.avatar.tags.future_proofing') }}
</Badge>
<div>
<template v-for="tag in avatarDialog.ref.tags" :key="tag">
<Badge
v-if="tag.startsWith('content_')"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('content_')" variant="outline">
<span v-if="tag === 'content_horror'">{{
t('dialog.avatar.tags.content_horror')
}}</span>
@@ -167,10 +147,7 @@
}}</span>
<span v-else>{{ tag.replace('content_', '') }}</span>
</Badge>
<Badge
v-if="tag.startsWith('author_tag_')"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('author_tag_')" variant="outline">
<span>
{{ tag.replace('author_tag_', '') }}
</span>
@@ -178,7 +155,7 @@
</template>
</div>
</div>
<div style="margin-top: 5px">
<div style="margin-top: 6px">
<span
v-show="avatarDialog.ref.name !== avatarDialog.ref.description"
style="font-size: 12px"
@@ -412,7 +389,7 @@
</div>
<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]" style="margin-bottom: 5px">{{
<span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
t('dialog.avatar.info.memo')
}}</span>
<InputGroupTextareaField
@@ -473,7 +450,7 @@
<TooltipWrapper
v-if="Object.keys(avatarDialog.fileAnalysis).length"
side="top"
style="margin-left: 5px">
style="margin-left: 6px">
<template #content>
<template
v-for="(created_at, platform) in avatarDialogPlatformCreatedAt"

18
src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue
View File

@@ -65,8 +65,7 @@
:autosize="{ minRows: 2, maxRows: 5 }"
:rows="2"
placeholder=""
style="margin-top: 10px"
input-class="resize-none"
input-class="resize-none mt-2"
@update:modelValue="(v) => updateDialog({ authorTags: v })" />
</template>
@@ -83,8 +82,8 @@
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -118,6 +117,10 @@
}
);
/**
*
* @param patch
*/
function updateDialog(patch) {
emit('update:setAvatarStylesDialog', {
...props.setAvatarStylesDialog,
@@ -125,6 +128,9 @@
});
}
/**
*
*/
async function getAvatarStyles() {
try {
const ref = await avatarRequest.getAvailableAvatarStyles();
@@ -144,10 +150,16 @@
}
}
/**
*
*/
function closeSetAvatarStylesDialog() {
updateDialog({ visible: false });
}
/**
*
*/
function saveSetAvatarStylesDialog() {
const primaryStyleId =
props.setAvatarStylesDialog.availableAvatarStylesMap.get(props.setAvatarStylesDialog.primaryStyle) || '';

8
src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
View File

@@ -43,7 +43,7 @@
v-model="setAvatarTagsDialog.selectedTagsCsv"
:rows="2"
:placeholder="t('dialog.set_avatar_tags.custom_tags_placeholder')"
style="margin-top: 10px"
class="mt-2"
input-class="resize-none"
@input="updateInputAvatarTags" />
<br />
@@ -59,7 +59,7 @@
t('dialog.set_avatar_tags.select_all')
}}</Button>
</template>
<span style="margin-left: 5px"
<span style="margin-left: 6px"
>{{ props.setAvatarTagsDialog.selectedAvatarIds.length }} /
{{ setAvatarTagsDialog.ownAvatars.length }}</span
>
@@ -67,7 +67,7 @@
<br />
<div
class="flex flex-wrap items-start max-h-[300px] overflow-hidden auto"
style="margin-top: 10px; min-height: 60px">
style="margin-top: 8px; min-height: 60px">
<div
v-for="avatar in setAvatarTagsDialog.ownAvatars"
:key="avatar.id"
@@ -96,7 +96,7 @@
<span v-else class="block truncate text-xs" v-text="avatar.releaseStatus"></span>
<span class="block truncate text-xs" v-text="avatarTagStrings.get(avatar.id)"></span>
</div>
<Button size="sm" variant="ghost" style="margin-left: 5px" @click.stop>
<Button size="sm" variant="ghost" style="margin-left: 6px" @click.stop>
<Checkbox
:model-value="props.setAvatarTagsDialog.selectedAvatarIds.includes(avatar.id)"
@update:modelValue="(val) => toggleAvatarSelection(avatar.id, val)" />

14
src/components/dialogs/GroupDialog/GallerySelectDialog.vue
View File

@@ -7,7 +7,7 @@
<div>
<span>{{ t('dialog.gallery_select.gallery') }}</span>
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
<span class="ml-1.5" style="color: #909399; font-size: 12px">{{ galleryTable.length }}/64</span>
<br />
<input
id="GalleryUploadButton"
@@ -82,6 +82,11 @@
}
});
/**
*
* @param imageUrl
* @param fileId
*/
function selectImageGallerySelect(imageUrl, fileId) {
const D = props.gallerySelectDialog;
D.selectedFileId = fileId;
@@ -89,10 +94,17 @@
D.visible = false;
}
/**
*
*/
function displayGalleryUpload() {
document.getElementById('GalleryUploadButton').click();
}
/**
*
* @param e
*/
function onFileChangeGallery(e) {
const clearFile = function () {
const fileInput = /** @type{HTMLInputElement} */ (document.querySelector('#GalleryUploadButton'));

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

@@ -17,17 +17,15 @@
@click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
<div class="group-header" style="flex: 1">
<span v-if="groupDialog.ref.ownerId === currentUser.id" style="margin-right: 5px">👑</span>
<span class="mr-1.5" v-if="groupDialog.ref.ownerId === currentUser.id">👑</span>
<span
class="font-bold"
style="margin-right: 5px; cursor: pointer"
class="font-bold mr-1.5"
style="cursor: pointer"
v-text="groupDialog.ref.name"
@click="copyToClipboard(groupDialog.ref.name)"></span>
<span
class="group-discriminator x-grey"
style="font-family: monospace; font-size: 12px; margin-right: 5px">
<span class="group-discriminator x-grey mr-1.5" style="font-family: monospace; font-size: 12px">
{{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
</span>
<TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
@@ -37,9 +35,9 @@
<span
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
style="display: inline-block; margin-right: 6px"></span>
</TooltipWrapper>
<div style="margin-top: 5px">
<div style="margin-top: 6px">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
@@ -50,85 +48,85 @@
<Badge
v-if="groupDialog.ref.isVerified"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.verified') }}
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'private'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.private') }}
</Badge>
<Badge
v-if="groupDialog.ref.privacy === 'default'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.public') }}
</Badge>
<Badge
v-if="groupDialog.ref.joinState === 'open'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.open') }}
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'request'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.request') }}
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'invite'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.invite') }}
</Badge>
<Badge
v-else-if="groupDialog.ref.joinState === 'closed'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.closed') }}
</Badge>
<Badge
v-if="groupDialog.inGroup"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.joined') }}
</Badge>
<Badge
v-if="groupDialog.ref.myMember && groupDialog.ref.myMember.bannedAt"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.banned') }}
</Badge>
<template v-if="groupDialog.inGroup && groupDialog.ref.myMember">
<Badge
v-if="groupDialog.ref.myMember.visibility === 'visible'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.visible') }}
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'friends'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.friends') }}
</Badge>
<Badge
v-else-if="groupDialog.ref.myMember.visibility === 'hidden'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.hidden') }}
</Badge>
<Badge
v-if="groupDialog.ref.myMember.isSubscribedToAnnouncements"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
{{ t('dialog.group.tags.subscribed') }}
</Badge>
</template>
</div>
<div style="margin-top: 5px">
<div style="margin-top: 6px">
<pre
v-show="groupDialog.ref.name !== groupDialog.ref.description"
style="
@@ -151,7 +149,7 @@
class="rounded-full mr-2"
variant="secondary"
size="icon-lg"
style="margin-left: 5px"
style="margin-left: 6px"
@click="clearGroupRepresentation(groupDialog.id)">
<BookmarkCheck />
</Button>
@@ -362,11 +360,11 @@
<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: 5px">
style="font-size: 12px; font-weight: bold; margin: 6px">
{{ t('dialog.group.info.instances') }}
</span>
<div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
<div style="margin: 5px 0" class="flex items-center">
<div style="margin: 6px 0" class="flex items-center">
<Location :location="room.tag" class="text-sm" />
<InstanceActionBar
class="ml-1"
@@ -380,7 +378,7 @@
<div
v-if="room.users.length"
class="flex flex-wrap items-start"
style="margin: 10px 0; padding: 0; max-height: unset">
style="margin: 8px 0; padding: 0; max-height: unset">
<div
v-for="user in room.users"
:key="user.id"
@@ -418,7 +416,7 @@
<span style="display: block" v-text="groupDialog.announcement.title" />
<div
v-if="groupDialog.announcement.imageUrl"
style="display: inline-block; margin-right: 5px">
style="display: inline-block; margin-right: 6px">
<img
:src="groupDialog.announcement.imageUrl"
class="cursor-pointer"
@@ -448,7 +446,7 @@
<div
v-if="groupDialog.announcement.id"
class="text-xs"
style="float: right; margin-left: 5px">
style="float: right; margin-left: 6px">
<TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
<template #content>
<span>{{ t('dialog.group.posts.visibility') }}</span>
@@ -466,12 +464,12 @@
</span>
</template>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<DisplayName
:userid="groupDialog.announcement.authorId"
style="margin-right: 5px" />
<span v-if="groupDialog.announcement.editorId" style="margin-right: 5px">
style="margin-right: 6px" />
<span v-if="groupDialog.announcement.editorId" style="margin-right: 6px">
({{ t('dialog.group.posts.edited_by') }}
<DisplayName :userid="groupDialog.announcement.editorId" />)
</span>
@@ -502,7 +500,7 @@
<Button
size="sm"
variant="ghost"
style="margin-left: 5px; padding: 0"
style="margin-left: 6px; padding: 0"
@click="
showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
"></Button>
@@ -511,7 +509,7 @@
<Button
size="sm"
variant="ghost"
style="margin-left: 5px; padding: 0"
style="margin-left: 6px; padding: 0"
@click="confirmDeleteGroupPost(groupDialog.announcement)"></Button>
</TooltipWrapper>
</template>
@@ -623,7 +621,7 @@
}}</span>
<div
v-if="groupDialog.ref.links && groupDialog.ref.links.length > 0"
style="margin-top: 5px"
style="margin-top: 6px"
class="flex">
<template v-for="(link, index) in groupDialog.ref.links" :key="index">
<TooltipWrapper v-if="link">
@@ -636,7 +634,7 @@
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
margin-right: 6px;
cursor: pointer;
"
@click.stop="openExternalLink(link)"
@@ -687,8 +685,8 @@
</div>
<div
v-if="groupDialog.ref.membershipStatus === 'member'"
style="width: 100%; margin-top: 10px; border-top: 1px solid #e4e7ed14">
<div style="width: 100%; display: flex; margin-top: 10px">
style="width: 100%; margin-top: 8px; border-top: 1px solid #e4e7ed14">
<div style="width: 100%; display: flex; margin-top: 8px">
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
<div class="flex-1 overflow-hidden">
<span class="block truncate font-medium leading-[18px]">{{
@@ -755,7 +753,7 @@
</template>
<template #Posts>
<template v-if="groupDialog.visible">
<span style="margin-right: 10px; vertical-align: top"
<span style="margin-right: 8px; vertical-align: top"
>{{ t('dialog.group.posts.posts_count') }} {{ groupDialog.posts.length }}</span
>
<InputGroupField
@@ -763,7 +761,7 @@
clearable
size="sm"
:placeholder="t('dialog.group.posts.search_placeholder')"
style="width: 89%; margin-bottom: 10px"
style="width: 89%; margin-bottom: 8px"
@input="updateGroupPostSearch" />
<div class="flex flex-wrap items-start">
<div
@@ -772,7 +770,7 @@
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
<div class="flex-1 overflow-hidden">
<span style="display: block" v-text="post.title" />
<div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
<div v-if="post.imageUrl" style="display: inline-block; margin-right: 6px">
<img
:src="post.imageUrl"
class="cursor-pointer"
@@ -799,7 +797,7 @@
>{{ post.text || '-' }}</pre
>
<br />
<div v-if="post.authorId" class="text-xs" style="float: right; margin-left: 5px">
<div v-if="post.authorId" class="text-xs" style="float: right; margin-left: 6px">
<TooltipWrapper v-if="post.roleIds.length" side="top">
<template #content>
<span>{{ t('dialog.group.posts.visibility') }}</span>
@@ -816,10 +814,10 @@
>
</template>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<DisplayName :userid="post.authorId" style="margin-right: 5px" />
<span v-if="post.editorId" style="margin-right: 5px"
<DisplayName :userid="post.authorId" style="margin-right: 6px" />
<span v-if="post.editorId" style="margin-right: 6px"
>({{ t('dialog.group.posts.edited_by') }}
<DisplayName :userid="post.editorId" />)</span
>
@@ -878,7 +876,7 @@
<span v-else style="font-weight: bold; font-size: 16px">{{
t('dialog.group.members.friends_only')
}}</span>
<div style="margin-top: 10px">
<div style="margin-top: 8px">
<Button
class="rounded-full h-6 w-6"
variant="ghost"
@@ -892,23 +890,23 @@
class="rounded-full h-6 w-6 ml-2"
size="icon-sm"
variant="ghost"
style="margin-left: 5px"
style="margin-left: 6px"
@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: 5px; margin-right: 5px"
style="font-size: 14px; margin-left: 6px; margin-right: 6px"
>{{ groupDialog.memberSearchResults.length }}/{{ groupDialog.ref.memberCount }}</span
>
<span v-else style="font-size: 14px; margin-left: 5px; margin-right: 5px"
<span v-else style="font-size: 14px; margin-left: 6px; margin-right: 6px"
>{{ groupDialog.members.length }}/{{ groupDialog.ref.memberCount }}</span
>
<div
v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')"
style="float: right"
class="flex items-center">
<span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</span>
<span style="margin-right: 6px">{{ t('dialog.group.members.sort_by') }}</span>
<Select
v-model="groupDialogMemberSortValue"
:disabled="isGroupMembersLoading || groupDialog.memberSearch.length > 0">
@@ -948,13 +946,13 @@
clearable
size="sm"
:placeholder="t('dialog.group.members.search')"
style="margin-top: 10px; margin-bottom: 10px"
style="margin-top: 8px; margin-bottom: 8px"
@input="groupMembersSearch" />
</div>
<div
v-if="groupDialog.memberSearch.length"
class="flex flex-wrap items-start"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
<div
v-for="user in groupDialog.memberSearchResults"
:key="user.id"
@@ -977,7 +975,7 @@
v-if="user.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
<template #content>
@@ -986,13 +984,13 @@
{{ user.visibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper
v-if="!user.isSubscribedToAnnouncements"
side="top"
:content="t('dialog.group.members.unsubscribed_announcements')">
<MessageSquare style="margin-right: 5px" />
<MessageSquare style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="user.managerNotes" side="top">
<template #content>
@@ -1000,7 +998,7 @@
<br />
<span>{{ user.managerNotes }}</span>
</template>
<Pencil style="margin-right: 5px" />
<Pencil style="margin-right: 6px" />
</TooltipWrapper>
</template>
<template v-for="roleId in user.roleIds" :key="roleId">
@@ -1017,7 +1015,7 @@
<ul
v-else-if="groupDialog.members.length > 0"
class="infinite-list flex flex-wrap items-start"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
<li
v-for="user in groupDialog.members"
:key="user.id"
@@ -1040,7 +1038,7 @@
v-if="user.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
<template #content>
@@ -1049,13 +1047,13 @@
{{ user.visibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper
v-if="!user.isSubscribedToAnnouncements"
side="top"
:content="t('dialog.group.members.unsubscribed_announcements')">
<MessageSquare style="margin-right: 5px" />
<MessageSquare style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="user.managerNotes" side="top">
<template #content>
@@ -1063,7 +1061,7 @@
<br />
<span>{{ user.managerNotes }}</span>
</template>
<Pencil style="margin-right: 5px" />
<Pencil style="margin-right: 6px" />
</TooltipWrapper>
</template>
<template v-for="roleId in user.roleIds" :key="roleId">
@@ -1110,8 +1108,8 @@
:key="`label-${index}`"
v-slot:[`label-${index}`]>
<span style="font-weight: bold; font-size: 16px" v-text="gallery.name" />
<i class="x-status-icon" style="margin-left: 5px" :class="groupGalleryStatus(gallery)" />
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{
<i class="x-status-icon" style="margin-left: 6px" :class="groupGalleryStatus(gallery)" />
<span style="color: #909399; font-size: 12px; margin-left: 6px">{{
groupDialog.galleries[gallery.id] ? groupDialog.galleries[gallery.id].length : 0
}}</span>
</template>
@@ -1119,13 +1117,13 @@
v-for="(gallery, index) in groupDialog.ref.galleries"
:key="`content-${index}`"
v-slot:[String(index)]>
<span style="color: #c7c7c7; padding: 10px" v-text="gallery.description" />
<span style="color: #c7c7c7; padding: 8px" v-text="gallery.description" />
<div
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 10px;
gap: 16px;
margin-top: 8px;
max-height: 600px;
overflow-y: auto;
">

5
src/components/dialogs/GroupDialog/GroupMemberModerationBanExportDialog.vue
View File

@@ -11,7 +11,7 @@
<DialogTitle>{{ t('dialog.group_member_moderation.export_bans') }}</DialogTitle>
</DialogHeader>
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
<div class="flex flex-col gap-2 mb-2">
<label v-for="option in exportBansOptions" :key="option.label" class="inline-flex items-center gap-2">
<Checkbox
:model-value="checkedExportBansOptions.includes(option.label)"
@@ -24,8 +24,7 @@
v-model="exportContent"
:rows="15"
readonly
style="margin-top: 15px"
input-class="resize-none"
input-class="resize-none mt-4"
@click="handleCopyExportContent" />
</DialogContent>
</Dialog>

2
src/components/dialogs/GroupDialog/GroupMemberModerationBanImportDialog.vue
View File

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

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

@@ -9,7 +9,7 @@
<h3>{{ groupMemberModeration.groupRef.name }}</h3>
<TabsUnderline default-value="members" :items="groupModerationTabs" :unmount-on-hide="false">
<template #members>
<div style="margin-top: 10px">
<div class="mt-2">
<Button
class="rounded-full"
variant="outline"
@@ -19,13 +19,13 @@
<Spinner v-if="isGroupMembersLoading" />
<RefreshCw v-else />
</Button>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">
<span class="ml-1.5 mr-1.5" style="font-size: 14px">
{{ groupMemberModerationTable.data.length }}/{{
groupMemberModeration.groupRef.memberCount
}}
</span>
<div style="float: right; margin-top: 5px">
<span style="margin-right: 5px">{{ t('dialog.group.members.sort_by') }}</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
@@ -51,7 +51,7 @@
"
@click.stop>
{{ t(memberSortOrder.name) }}
<ArrowDown style="margin-left: 5px" />
<ArrowDown class="ml-1.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
@@ -63,9 +63,7 @@
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<span class="ml-2" style="margin-right: 5px">{{
t('dialog.group.members.filter')
}}</span>
<span class="ml-2 mr-1.5">{{ t('dialog.group.members.filter') }}</span>
<DropdownMenu>
<DropdownMenuTrigger
as-child
@@ -91,7 +89,7 @@
"
@click.stop>
{{ t(memberFilter.name) }}
<ArrowDown style="margin-left: 5px" />
<ArrowDown class="ml-1.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
@@ -117,14 +115,14 @@
clearable
size="sm"
:placeholder="t('dialog.group.members.search')"
style="margin-top: 10px; margin-bottom: 10px"
style="margin-top: 8px; margin-bottom: 8px"
@input="groupMembersSearch" />
<Button size="sm" variant="outline" @click="selectAll(groupMemberModerationTable.data)">{{
t('dialog.group_member_moderation.select_all')
}}</Button>
<DataTableLayout
v-if="groupMemberModerationTable.data.length"
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupMemberModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -133,7 +131,7 @@
</template>
<template #bans>
<div style="margin-top: 10px">
<div style="margin-top: 8px">
<div class="flex justify-between">
<div class="flex gap-2 items-center">
<Button
@@ -151,7 +149,7 @@
@click="selectAll(groupBansModerationTable.data)"
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
groupBansModerationTable.data.length
}}</span>
</div>
@@ -183,7 +181,7 @@
</div>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupBansModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -192,7 +190,7 @@
</template>
<template #invites>
<div style="margin-top: 10px">
<div style="margin-top: 8px">
<Button
class="rounded-full"
variant="outline"
@@ -208,7 +206,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.sent_invites')
}}</span>
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{
<span style="color: #909399; font-size: 12px; margin-left: 6px">{{
groupInvitesModerationTable.data.length
}}</span>
</template>
@@ -216,7 +214,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.join_requests')
}}</span>
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{
<span style="color: #909399; font-size: 12px; margin-left: 6px">{{
groupJoinRequestsModerationTable.data.length
}}</span>
</template>
@@ -224,7 +222,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.group_member_moderation.blocked_requests')
}}</span>
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{
<span style="color: #909399; font-size: 12px; margin-left: 6px">{{
groupBlockedModerationTable.data.length
}}</span>
</template>
@@ -236,7 +234,7 @@
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupInvitesModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -266,7 +264,7 @@
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupJoinRequestsModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -326,7 +324,7 @@
>{{ t('dialog.group_member_moderation.select_all') }}</Button
>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupBlockedModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -352,7 +350,7 @@
</template>
<template #logs>
<div style="margin-top: 10px">
<div style="margin-top: 8px">
<Button
class="rounded-full"
variant="outline"
@@ -362,14 +360,14 @@
<Spinner v-if="isGroupMembersLoading" />
<RefreshCw v-else />
</Button>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
<span style="font-size: 14px; margin-left: 6px; margin-right: 6px">{{
groupLogsModerationTable.data.length
}}</span>
<br />
<div style="display: flex; justify-content: space-between; align-items: center">
<div>
<Select v-model="selectedAuditLogTypes" multiple>
<SelectTrigger style="margin: 10px 0; width: 250px">
<SelectTrigger style="margin: 8px 0; width: 250px">
<SelectValue
:placeholder="t('dialog.group_member_moderation.filter_type')" />
</SelectTrigger>
@@ -394,10 +392,10 @@
clearable
size="sm"
:placeholder="t('dialog.group.members.search')"
style="margin-top: 10px; margin-bottom: 10px" />
style="margin-top: 8px; margin-bottom: 8px" />
<br />
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="groupLogsModerationTanstackTable"
:loading="isGroupMembersLoading"
:page-sizes="pageSizes"
@@ -413,13 +411,13 @@
<InputGroupField
v-model="selectUserId"
size="sm"
style="margin-top: 5px"
style="margin-top: 6px"
:placeholder="t('dialog.group_member_moderation.user_id_placeholder')"
clearable />
<Button
size="sm"
variant="outline"
style="margin-top: 10px"
style="margin-top: 8px"
:disabled="!selectUserId"
@click="selectGroupMemberUserId"
>{{ t('dialog.group_member_moderation.select_user') }}</Button
@@ -431,7 +429,7 @@
class="rounded-full"
size="icon-sm"
variant="outline"
style="margin-left: 5px"
style="margin-left: 6px"
@click="clearAllSelected">
<Trash2
/></Button>
@@ -440,7 +438,7 @@
v-for="user in selectedUsersArray"
:key="user.id"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
style="margin-right: 6px; margin-top: 6px">
<TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
<template #content>
<span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
@@ -449,11 +447,11 @@
</TooltipWrapper>
<span
v-text="user.user?.displayName || user.userId"
style="font-weight: bold; margin-left: 5px"></span>
style="font-weight: bold; margin-left: 6px"></span>
<button
type="button"
style="
margin-left: 6px;
margin-left: 8px;
border: none;
background: transparent;
padding: 0;
@@ -474,14 +472,14 @@
class="text-xs"
:rows="2"
:placeholder="t('dialog.group_member_moderation.note_placeholder')"
style="margin-top: 5px"
style="margin-top: 6px"
input-class="resize-none min-h-0" />
<br />
<br />
<span class="name">{{ t('dialog.group_member_moderation.selected_roles') }}</span>
<br />
<Select v-model="selectedRoles" multiple>
<SelectTrigger style="margin-top: 5px">
<SelectTrigger style="margin-top: 6px">
<SelectValue :placeholder="t('dialog.group_member_moderation.choose_roles_placeholder')" />
</SelectTrigger>
<SelectContent>
@@ -566,14 +564,14 @@
@click="handleUnban"
>{{ t('dialog.group_member_moderation.unban') }}</Button
>
<span v-if="progressCurrent" style="margin-top: 10px">
<span v-if="progressCurrent" style="margin-top: 8px">
<Spinner class="inline-block ml-2 mr-2" />
{{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
</span>
<Button
variant="secondary"
v-if="progressCurrent"
style="margin-left: 5px"
style="margin-left: 6px"
@click="progressTotal = 0"
>{{ t('dialog.group_member_moderation.cancel') }}</Button
>

5
src/components/dialogs/GroupDialog/GroupMemberModerationExportDialog.vue
View File

@@ -11,7 +11,7 @@
<DialogTitle>{{ t('dialog.group_member_moderation.export_logs') }}</DialogTitle>
</DialogHeader>
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
<div class="flex flex-col gap-2 mb-2">
<label
v-for="option in checkGroupsLogsExportLogsOptions"
:key="option.label"
@@ -27,8 +27,7 @@
v-model="groupLogsExportContent"
:rows="15"
readonly
style="margin-top: 15px"
input-class="resize-none"
input-class="resize-none mt-4"
@click="handleCopyGroupLogsExportContent" />
</DialogContent>
</Dialog>

24
src/components/dialogs/GroupDialog/GroupPostEditDialog.vue
View File

@@ -19,8 +19,7 @@
<InputGroupTextareaField
v-model="groupPostEditDialog.text"
:rows="4"
style="margin-top: 10px"
input-class="resize-none" />
input-class="resize-none mt-2" />
</FieldContent>
</Field>
<Field v-if="!groupPostEditDialog.postId">
@@ -84,7 +83,7 @@
<FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
<FieldContent>
<template v-if="gallerySelectDialog.selectedFileId">
<div style="display: inline-block; flex: none; margin-right: 5px">
<div class="mr-1.5" style="display: inline-block; flex: none">
<img
:src="gallerySelectDialog.selectedImageUrl"
style="
@@ -195,16 +194,26 @@
return names.slice(0, 3).join(', ') + (names.length > 3 ? ` +${names.length - 3}` : '');
});
/**
*
* @param value
*/
function handleRoleIdsChange(value) {
const next = Array.isArray(value) ? value.map((v) => String(v ?? '')).filter(Boolean) : [];
groupPostEditDialog.value.roleIds = next;
}
/**
*
*/
function showGallerySelectDialog() {
const D = gallerySelectDialog.value;
D.visible = true;
refreshGalleryTable();
}
/**
*
*/
async function refreshGalleryTable() {
const params = {
n: 100,
@@ -216,6 +225,9 @@
galleryTable.value = args.json.reverse();
}
}
/**
*
*/
function editGroupPost() {
const D = groupPostEditDialog.value;
if (!D.groupId || !D.postId) {
@@ -243,6 +255,9 @@
});
D.visible = false;
}
/**
*
*/
function createGroupPost() {
const D = groupPostEditDialog.value;
if (!D.title || !D.text) {
@@ -267,6 +282,9 @@
});
D.visible = false;
}
/**
*
*/
function clearImageGallerySelect() {
const D = gallerySelectDialog.value;
D.selectedFileId = '';

9
src/components/dialogs/InviteDialog/InviteDialog.vue
View File

@@ -14,28 +14,27 @@
<div v-if="inviteDialog.visible" class="overflow-hidden">
<Location :location="inviteDialog.worldId" :link="false" class="cursor-default" />
<br />
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
<Button size="sm" class="mr-2 mt-2" variant="outline" @click="addSelfToInvite">{{
t('dialog.invite.add_self')
}}</Button>
<Button
size="sm"
class="mr-2"
class="mr-2 mt-2"
variant="outline"
:disabled="inviteDialog.friendsInInstance.length === 0"
style="margin-top: 10px"
@click="addFriendsInInstanceToInvite"
>{{ t('dialog.invite.add_friends_in_instance') }}</Button
>
<Button
class="mt-2"
size="sm"
variant="outline"
:disabled="vipFriends.length === 0"
style="margin-top: 10px"
@click="addFavoriteFriendsToInvite"
>{{ t('dialog.invite.add_favorite_friends') }}</Button
>
<div style="width: 100%; margin-top: 15px">
<div class="mt-4" style="width: 100%">
<VirtualCombobox
:model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
@update:modelValue="setInviteUserIds"

24
src/components/dialogs/InviteDialog/SendInviteDialog.vue
View File

@@ -13,7 +13,7 @@
<template v-if="isLocalUserVrcPlusSupporter">
<!-- <template v-if="gallerySelectDialog.selectedFileId">-->
<!-- <div style="display: inline-block; flex: none; margin-right: 5px">-->
<!-- <div class="mr-1.5" style="display: inline-block; flex: none">-->
<!-- <el-popover placement="right" :width="500px" trigger="click">-->
<!-- <template #reference>-->
<!-- <img-->
@@ -33,7 +33,7 @@
<!-- </el-button>-->
<!-- </template>-->
<!-- <template v-else>-->
<!-- <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
<!-- <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 6px">-->
<!-- {{ t('dialog.invite_message.select_image') }}-->
<!-- </el-button>-->
<!-- </template>-->
@@ -41,7 +41,7 @@
</template>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="inviteMessageTanstackTable"
:loading="false"
:show-pagination="false"
@@ -137,15 +137,27 @@
initialSorting: [{ id: 'slot', desc: false }]
});
/**
*
* @param row
*/
function handleInviteMessageRowClick(row) {
showSendInviteConfirmDialog(row?.original);
}
/**
*
* @param row
*/
function showSendInviteConfirmDialog(row) {
emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
isSendInviteConfirmDialogVisible.value = true;
}
/**
*
* @param row
*/
function showEditAndSendInviteDialog(row) {
emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
editAndSendInviteDialog.value = {
@@ -154,10 +166,16 @@
};
}
/**
*
*/
function cancelSendInvite() {
emit('update:sendInviteDialogVisible', false);
}
/**
*
*/
function closeInviteDialog() {
cancelSendInvite();
emit('closeInviteDialog');

4
src/components/dialogs/InviteGroupDialog.vue
View File

@@ -9,7 +9,7 @@
<span>{{ t('dialog.invite_to_group.description') }}</span>
<br />
<div style="margin-top: 15px; width: 100%">
<div class="mt-4" style="width: 100%">
<VirtualCombobox
v-model="inviteGroupDialog.groupId"
:groups="groupPickerGroups"
@@ -36,7 +36,7 @@
</VirtualCombobox>
</div>
<div style="width: 100%; margin-top: 15px">
<div style="width: 100%; margin-top: 16px">
<VirtualCombobox
v-model="inviteGroupDialog.userIds"
:groups="friendPickerGroups"

2
src/components/dialogs/ModerateGroupDialog.vue
View File

@@ -23,7 +23,7 @@
</div>
</div>
<div style="margin-top: 15px; width: 100%">
<div class="mt-4" style="width: 100%">
<VirtualCombobox
:model-value="moderateGroupDialog.groupId"
@update:modelValue="setGroupId"

18
src/components/dialogs/SendBoopDialog.vue
View File

@@ -28,8 +28,8 @@
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 5px;
margin-top: 10px;
gap: 6px;
margin-top: 8px;
max-height: 600px;
overflow-y: auto;
">
@@ -109,6 +109,9 @@
}
);
/**
*
*/
function closeDialog() {
sendBoopDialog.value.visible = false;
}
@@ -120,6 +123,10 @@
}
});
/**
*
* @param emojiName
*/
function getEmojiValue(emojiName) {
if (!emojiName) {
return '';
@@ -139,6 +146,9 @@
}
]);
/**
*
*/
function sendBoop() {
const D = sendBoopDialog.value;
dismissBoop(D.userId);
@@ -152,6 +162,10 @@
D.visible = false;
}
/**
*
* @param userId
*/
function dismissBoop(userId) {
// JANK: This is a hack to remove boop notifications when responding
const array = notificationTable.value.data;

7
src/components/dialogs/UserDialog/BioDialog.vue
View File

@@ -16,13 +16,13 @@
autosize />
<InputGroupAction
class="mt-1.5"
v-for="(link, index) in bioDialog.bioLinks"
:key="index"
v-model="bioDialog.bioLinks[index]"
:maxlength="1000"
show-count
size="sm"
style="margin-top: 5px">
size="sm">
<template #leading>
<img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
</template>
@@ -71,6 +71,9 @@
}
});
/**
*
*/
function saveBio() {
const D = props.bioDialog;
if (D.loading) {

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

@@ -6,20 +6,19 @@
</DialogHeader>
<div>
<div v-for="item in currentUser.$languages" :key="item.key" style="margin: 6px 0">
<Badge variant="outline" style="margin-right: 5px">
<div class="my-2 mx-0" v-for="item in currentUser.$languages" :key="item.key">
<Badge class="mr-1.5" variant="outline">
<span
class="flags"
class="flags mr-1.5"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
style="display: inline-block"></span>
{{ item.value }} ({{ item.key.toUpperCase() }})
<button
class="ml-2 p-0"
type="button"
style="
margin-left: 6px;
border: none;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
color: inherit;
@@ -36,7 +35,7 @@
languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)
"
@update:modelValue="handleAddUserLanguage">
<SelectTrigger size="sm" style="margin-top: 14px">
<SelectTrigger class="mt-3.5" size="sm">
<SelectValue :placeholder="t('dialog.language.select_language')" />
</SelectTrigger>
<SelectContent>
@@ -47,9 +46,9 @@
:value="item.key"
:text-value="item.value">
<span
class="flags"
class="flags mr-1.5"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
style="display: inline-block"></span>
{{ item.value }} ({{ item.key.toUpperCase() }})
</SelectItem>
</SelectGroup>
@@ -79,11 +78,19 @@
const selectedLanguageToAdd = ref('');
/**
*
* @param language
*/
function handleAddUserLanguage(language) {
addUserLanguage(language);
selectedLanguageToAdd.value = '';
}
/**
*
* @param language
*/
function removeUserLanguage(language) {
if (language !== String(language)) {
return;
@@ -99,6 +106,10 @@
});
}
/**
*
* @param language
*/
function addUserLanguage(language) {
if (language !== String(language)) {
return;

20
src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
View File

@@ -16,7 +16,7 @@
</template>
<DataTableLayout
style="margin-top: 10px"
style="margin-top: 8px"
:table="inviteRequestMessageTanstackTable"
:loading="false"
:show-pagination="false"
@@ -114,15 +114,27 @@
initialSorting: [{ id: 'slot', desc: false }]
});
/**
*
* @param row
*/
function handleInviteRequestMessageRowClick(row) {
showSendInviteConfirmDialog(row?.original);
}
/**
*
* @param row
*/
function showSendInviteConfirmDialog(row) {
emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
isSendInviteConfirmDialogVisible.value = true;
}
/**
*
* @param row
*/
function showEditAndSendInviteDialog(row) {
emit('update:sendInviteDialog', { ...props.sendInviteDialog, messageSlot: row });
editAndSendInviteDialog.value = {
@@ -130,10 +142,16 @@
visible: true
};
}
/**
*
*/
function cancelSendInviteRequest() {
emit('update:sendInviteRequestDialogVisible', false);
}
/**
*
*/
function closeInviteDialog() {
cancelSendInviteRequest();
}

105
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -21,14 +21,9 @@
<template #Info>
<template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
<div
class="mb-2 pb-2"
v-if="userDialog.ref.location"
style="
display: flex;
flex-direction: column;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e4e7ed14;
">
style="display: flex; flex-direction: column; border-bottom: 1px solid #e4e7ed14">
<div style="flex: none">
<template v-if="isRealInstance(userDialog.$location.tag)">
<InstanceActionBar
@@ -48,7 +43,7 @@
</div>
<div
class="flex flex-wrap items-start"
style="flex: 1; margin-top: 10px; max-height: 150px; overflow: auto">
style="flex: 1; margin-top: 8px; max-height: 150px; overflow: auto">
<div
v-if="userDialog.$location.userId"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@@ -177,7 +172,7 @@
</div>
<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]" style="margin-bottom: 5px">{{
<span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
t('dialog.user.info.represented_group')
}}</span>
<div
@@ -186,7 +181,7 @@
(userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
"
class="text-xs">
<div style="display: inline-block; flex: none; margin-right: 5px">
<div style="display: inline-block; flex: none; margin-right: 6px">
<Avatar
class="cursor-pointer size-15! rounded-lg!"
:style="{
@@ -206,10 +201,10 @@
@click="showGroupDialog(userDialog.representedGroup.groupId)">
<span
v-if="userDialog.representedGroup.ownerId === userDialog.id"
style="margin-right: 5px"
style="margin-right: 6px"
>👑</span
>
<span style="margin-right: 5px" v-text="userDialog.representedGroup.name"></span>
<span style="margin-right: 6px" v-text="userDialog.representedGroup.name"></span>
<span>({{ userDialog.representedGroup.memberCount }})</span>
</span>
</div>
@@ -248,12 +243,12 @@
size="icon-sm"
variant="ghost"
v-if="userDialog.id === currentUser.id"
style="margin-left: 5px; padding: 0"
style="margin-left: 6px; padding: 0"
@click="showBioDialog"
><Pencil class="h-3 w-3" />
</Button>
</div>
<div style="margin-top: 5px" class="flex items-center">
<div style="margin-top: 6px" class="flex items-center">
<TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
<template #content>
<span v-text="link"></span>
@@ -265,7 +260,7 @@
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
margin-right: 6px;
cursor: pointer;
"
@click.stop="openExternalLink(link)"
@@ -570,12 +565,12 @@
<Spinner v-if="userDialog.isMutualFriendsLoading" />
<RefreshCw v-else />
</Button>
<span style="margin-left: 5px">{{
<span style="margin-left: 6px">{{
t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
}}</span>
</div>
<div style="display: flex; align-items: center">
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
<span style="margin-right: 6px">{{ t('dialog.user.groups.sort_by') }}</span>
<Select
:model-value="userDialogMutualFriendSortingKey"
:disabled="userDialog.isMutualFriendsLoading"
@@ -596,7 +591,7 @@
</div>
<ul
class="flex flex-wrap items-start"
style="margin-top: 10px; overflow: auto; max-height: 250px; min-width: 130px">
style="margin-top: 8px; overflow: auto; max-height: 250px; min-width: 130px">
<li
v-for="user in userDialog.mutualFriends"
:key="user.id"
@@ -627,13 +622,13 @@
<Spinner v-if="userDialog.isGroupsLoading" />
<RefreshCw v-else />
</Button>
<span style="margin-left: 5px">{{
<span style="margin-left: 6px">{{
t('dialog.user.groups.total_count', { count: userDialog.userGroups.groups.length })
}}</span>
<template v-if="userDialogGroupEditMode">
<span
style="
margin-left: 10px;
margin-left: 8px;
font-size: 10px;
"
@@ -643,7 +638,7 @@
</div>
<div style="display: flex; align-items: center">
<template v-if="!userDialogGroupEditMode">
<span style="margin-right: 5px">{{ t('dialog.user.groups.sort_by') }}</span>
<span style="margin-right: 6px">{{ t('dialog.user.groups.sort_by') }}</span>
<Select
:model-value="userDialogGroupSortingKey"
:disabled="userDialog.isGroupsLoading"
@@ -682,14 +677,14 @@
</Button>
</div>
</div>
<div style="margin-top: 10px">
<div style="margin-top: 8px">
<template v-if="userDialogGroupEditMode">
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; max-height: unset">
style="margin-top: 8px; margin-bottom: 16px; max-height: unset">
<!-- Bulk actions dropdown (shown only in edit mode) -->
<Select :model-value="bulkGroupActionValue" @update:modelValue="handleBulkGroupAction">
<SelectTrigger size="sm" style="margin-right: 5px; margin-bottom: 5px" @click.stop>
<SelectTrigger size="sm" style="margin-right: 6px; margin-bottom: 6px" @click.stop>
<SelectValue :placeholder="t('dialog.group.actions.manage_selected')" />
</SelectTrigger>
<SelectContent>
@@ -712,7 +707,7 @@
<Button
size="sm"
variant="outline"
style="padding: 7px 15px; margin-bottom: 5px"
style="padding: 7px 16px; margin-bottom: 6px"
@click="selectAllGroups">
{{
userDialogGroupAllSelected
@@ -729,8 +724,8 @@
<!-- Manual checkbox -->
<div
style="
margin-left: 5px;
margin-right: 5px;
margin-left: 6px;
margin-right: 6px;
transform: scale(0.8);
transform-origin: left center;
"
@@ -740,7 +735,7 @@
@update:modelValue="() => toggleGroupSelection(group.id)" />
</div>
<div style="margin-right: 3px; margin-left: 5px" @click.stop>
<div style="margin-right: 3px; margin-left: 6px" @click.stop>
<Button
size="icon-sm"
variant="ghost"
@@ -762,7 +757,7 @@
<DownloadIcon />
</Button>
</div>
<div style="margin-right: 10px" @click.stop>
<div style="margin-right: 8px" @click.stop>
<Button
size="icon-sm"
variant="outline"
@@ -791,7 +786,7 @@
v-if="group.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
<template #content>
@@ -800,7 +795,7 @@
{{ group.myMember.visibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
@@ -840,11 +835,11 @@
setGroupSubscription(group.id, !group.myMember.isSubscribedToAnnouncements)
">
<span v-if="group.myMember.isSubscribedToAnnouncements"
><BellOff style="margin-left: 5px" />
><BellOff style="margin-left: 6px" />
{{ t('dialog.group.tags.subscribed') }}</span
>
<span v-else
><Bell style="margin-left: 5px" />
><Bell style="margin-left: 6px" />
{{ t('dialog.group.tags.unsubscribed') }}</span
>
</Button> -->
@@ -854,7 +849,7 @@
size="icon-sm"
variant="outline"
v-if="shiftHeld"
style="margin-left: 5px"
style="margin-left: 6px"
@click.stop="leaveGroup(group.id)">
<LogOut />
</Button>
@@ -863,7 +858,7 @@
size="icon-sm"
variant="outline"
v-else
style="margin-left: 5px"
style="margin-left: 6px"
@click.stop="leaveGroupPrompt(group.id)">
<LogOut />
</Button>
@@ -876,7 +871,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.user.groups.own_groups')
}}</span>
<span style="font-size: 12px; margin-left: 5px"
<span style="font-size: 12px; margin-left: 6px"
>{{ userDialog.userGroups.ownGroups.length }}/{{
// @ts-ignore
cachedConfig?.constants?.GROUPS?.MAX_OWNED
@@ -884,7 +879,7 @@
>
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.ownGroups"
:key="group.id"
@@ -905,7 +900,7 @@
v-if="group.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
@@ -914,7 +909,7 @@
{{ group.memberVisibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
@@ -926,12 +921,12 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.user.groups.mutual_groups')
}}</span>
<span style="font-size: 12px; margin-left: 5px">{{
<span style="font-size: 12px; margin-left: 6px">{{
userDialog.userGroups.mutualGroups.length
}}</span>
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.mutualGroups"
:key="group.id"
@@ -952,7 +947,7 @@
v-if="group.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
@@ -961,7 +956,7 @@
{{ group.memberVisibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</span>
@@ -971,7 +966,7 @@
</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: 5px">
<span style="font-size: 12px; margin-left: 6px">
{{ userDialog.userGroups.remainingGroups.length }}
<template v-if="currentUser.id === userDialog.id">
/
@@ -985,7 +980,7 @@
</span>
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
style="margin-top: 8px; margin-bottom: 16px; min-height: 60px">
<div
v-for="group in userDialog.userGroups.remainingGroups"
:key="group.id"
@@ -1006,7 +1001,7 @@
v-if="group.isRepresenting"
side="top"
:content="t('dialog.group.members.representing')">
<Tag style="margin-right: 5px" />
<Tag style="margin-right: 6px" />
</TooltipWrapper>
<TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
<template #content>
@@ -1015,7 +1010,7 @@
{{ group.memberVisibility }}</span
>
</template>
<Eye style="margin-right: 5px" />
<Eye style="margin-right: 6px" />
</TooltipWrapper>
<span>({{ group.memberCount }})</span>
</div>
@@ -1039,7 +1034,7 @@
<Spinner v-if="userDialog.isWorldsLoading" />
<RefreshCw v-else />
</Button>
<span style="margin-left: 5px">{{
<span style="margin-left: 6px">{{
t('dialog.user.worlds.total_count', { count: userDialog.worlds.length })
}}</span>
</div>
@@ -1080,7 +1075,7 @@
</Select>
</div>
</div>
<div class="flex flex-wrap items-start" style="margin-top: 10px; min-height: 60px">
<div class="flex flex-wrap items-start" style="margin-top: 8px; min-height: 60px">
<template v-if="userDialog.worlds.length">
<div
v-for="world in userDialog.worlds"
@@ -1136,7 +1131,7 @@
:items="favoriteWorldTabs"
:unmount-on-hide="false"
class="zero-margin-tabs"
style="margin-top: 10px; height: 50vh">
style="margin-top: 8px; height: 50vh">
<template
v-for="(list, index) in userDialog.userFavoriteWorlds"
:key="`favorite-worlds-label-${index}`"
@@ -1144,11 +1139,11 @@
<span>
<i
class="x-status-icon"
style="margin-right: 6px"
style="margin-right: 8px"
:class="userFavoriteWorldsStatus(list[1])">
</i>
<span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
<span style="font-size: 10px; margin-left: 5px"
<span style="font-size: 10px; margin-left: 6px"
>{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
>
</span>
@@ -1159,7 +1154,7 @@
v-slot:[String(index)]>
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px; max-height: none">
style="margin-top: 8px; margin-bottom: 16px; min-height: 60px; max-height: none">
<div
v-for="world in list[2]"
:key="world.favoriteId"
@@ -1217,7 +1212,7 @@
<Spinner v-if="userDialog.isAvatarsLoading" />
<RefreshCw v-else />
</Button>
<span style="margin-left: 5px">{{
<span style="margin-left: 6px">{{
t('dialog.user.avatars.total_count', { count: userDialogAvatars.length })
}}</span>
</div>
@@ -1267,7 +1262,7 @@
</div>
<div
class="flex flex-wrap items-start"
style="margin-top: 10px; min-height: 60px; max-height: 50vh; overflow: auto">
style="margin-top: 8px; min-height: 60px; max-height: 50vh; overflow: auto">
<template v-if="filteredUserDialogAvatars.length">
<div
v-for="avatar in filteredUserDialogAvatars"

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

@@ -19,7 +19,7 @@
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
<div style="flex: 1">
<div>
<TooltipWrapper v-if="userDialog.ref.status" side="top">
@@ -47,13 +47,13 @@
</template>
<span
class="font-bold"
style="margin-left: 5px; margin-right: 5px; cursor: pointer"
style="margin-left: 6px; margin-right: 6px; cursor: pointer"
v-text="userDialog.ref.displayName"
@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: 5px; font-family: monospace; font-size: 12px"
style="margin-right: 6px; font-family: monospace; font-size: 12px"
v-text="userDialog.ref.pronouns"></span>
</TooltipWrapper>
<TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
@@ -63,13 +63,13 @@
<span
class="flags"
:class="languageClass(item.key)"
style="display: inline-block; margin-right: 5px"></span>
style="display: inline-block; margin-right: 6px"></span>
</TooltipWrapper>
<template v-if="userDialog.ref.id === currentUser.id">
<br />
<span
class="x-grey"
style="margin-right: 10px; font-family: monospace; font-size: 12px; cursor: pointer"
style="margin-right: 8px; font-family: monospace; font-size: 12px; cursor: pointer"
v-text="currentUser.username"
@click="copyUserDisplayName(currentUser.username)"></span>
</template>
@@ -181,8 +181,8 @@
width: 32px;
border-radius: var(--radius-sm);
object-fit: cover;
margin-top: 5px;
margin-right: 5px;
margin-top: 6px;
margin-right: 6px;
"
:class="{ grayscale: badge.hidden }"
loading="lazy" />
@@ -208,7 +208,7 @@
</span>
<template v-if="userDialog.id === currentUser.id">
<br />
<label class="inline-flex items-center gap-2" style="margin-top: 5px">
<label class="inline-flex items-center gap-2" style="margin-top: 6px">
<Checkbox
v-model="badge.hidden"
@update:modelValue="toggleBadgeVisibility(badge)" />
@@ -233,7 +233,7 @@
</div>
</div>
<div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
<div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 8px">
<img
class="cursor-pointer"
:src="userImage(userDialog.ref, true, '256', true)"

4
src/components/dialogs/VRCXUpdateDialog.vue
View File

@@ -4,14 +4,14 @@
<DialogHeader>
<DialogTitle>{{ t('dialog.vrcx_updater.header') }}</DialogTitle>
</DialogHeader>
<div style="margin-top: 15px">
<div class="mt-4">
<template v-if="updateInProgress">
<Progress :model-value="updateProgress" class="w-full" />
<div class="mt-2 text-xs" v-text="updateProgressText()"></div>
<br />
</template>
<template v-else>
<div v-if="VRCXUpdateDialog.updatePending" style="margin-bottom: 15px">
<div v-if="VRCXUpdateDialog.updatePending" style="margin-bottom: 16px">
<span>{{ pendingVRCXInstall }}</span>
<br />
<span>{{ t('dialog.vrcx_updater.ready_for_update') }}</span>

10
src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue
View File

@@ -19,14 +19,14 @@
<Checkbox v-model="setWorldTagsDialog.debugAllowed" />
<span>{{ t('dialog.set_world_tags.enable_debugging') }}</span>
</label>
<div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
<div class="mt-2" style="font-size: 12px">{{ t('dialog.set_world_tags.author_tags') }}<br /></div>
<InputGroupTextareaField
v-model="setWorldTagsDialog.authorTags"
:rows="2"
placeholder=""
style="margin-top: 10px"
input-class="resize-none" />
<div style="font-size: 12px; margin-top: 10px">{{ t('dialog.set_world_tags.content_tags') }}<br /></div>
input-class="resize-none mt-2" />
<div class="mt-2" style="font-size: 12px">{{ 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,7 +51,7 @@
<Checkbox v-model="setWorldTagsDialog.contentSex" />
<span>{{ t('dialog.set_world_tags.content_sex') }}</span>
</label>
<div style="font-size: 12px; margin-top: 10px">
<div class="mt-2" style="font-size: 12px">
{{ t('dialog.set_world_tags.default_content_settings') }}<br />
</div>
<label class="inline-flex items-center gap-2">

6
src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue
View File

@@ -7,16 +7,16 @@
<div>
<InputGroupAction
class="mt-1.5"
v-for="(domain, index) in urlList"
:key="index"
v-model="urlList[index]"
size="sm"
style="margin-top: 5px">
size="sm">
<template #actions>
<Button variant="ghost" @click="urlList.splice(index, 1)"><Trash2 /></Button>
</template>
</InputGroupAction>
<Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
<Button size="sm" variant="outline" style="margin-top: 6px" @click="urlList.push('')">
{{ t('dialog.allowed_video_player_domains.add_domain') }}
</Button>
</div>

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

@@ -17,10 +17,10 @@
@click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
loading="lazy" />
</div>
<div style="flex: 1; display: flex; align-items: flex-start; margin-left: 15px">
<div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
<div style="flex: 1">
<div>
<span class="font-bold" style="margin-right: 5px; cursor: pointer" @click="copyWorldName">
<span class="font-bold mr-1.5" style="cursor: pointer" @click="copyWorldName">
<Home
v-if="
currentUser.$homeLocation &&
@@ -30,7 +30,7 @@
{{ worldDialog.ref.name }}
</span>
</div>
<div style="margin-top: 5px">
<div class="mt-1.5">
<span
class="cursor-pointer x-grey"
style="font-family: monospace"
@@ -38,26 +38,20 @@
v-text="worldDialog.ref.authorName" />
</div>
<div>
<Badge
v-if="worldDialog.ref.$isLabs"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="worldDialog.ref.$isLabs" variant="outline">
{{ t('dialog.world.tags.labs') }}
</Badge>
<Badge
class="mr-1.5 mt-1.5"
v-else-if="worldDialog.ref.releaseStatus === 'public'"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
variant="outline">
{{ t('dialog.world.tags.public') }}
</Badge>
<Badge v-else variant="outline" style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-else variant="outline">
{{ t('dialog.world.tags.private') }}
</Badge>
<TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
<Badge
class="text-platform-pc border-platform-pc!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="text-platform-pc border-platform-pc! mr-1.5 mt-1.5" variant="outline">
<Monitor class="h-4 w-4 text-platform-pc" />
<span
v-if="worldDialog.fileAnalysis.standalonewindows?._fileSize"
@@ -69,9 +63,8 @@
<TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
<Badge
class="text-platform-quest border-platform-quest!"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
class="text-platform-quest border-platform-quest! mr-1.5 mt-1.5"
variant="outline">
<Smartphone class="h-4 w-4 text-platform-quest" />
<span
v-if="worldDialog.fileAnalysis.android?._fileSize"
@@ -82,10 +75,7 @@
</TooltipWrapper>
<TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
<Badge
class="text-platform-ios border-platform-ios"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="text-platform-ios border-platform-ios mr-1.5 mt-1.5" variant="outline">
<Apple class="h-4 w-4 text-platform-ios" />
<span
v-if="worldDialog.fileAnalysis.ios?._fileSize"
@@ -95,29 +85,19 @@
</Badge>
</TooltipWrapper>
<Badge
v-if="worldDialog.avatarScalingDisabled"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="worldDialog.avatarScalingDisabled" variant="outline">
{{ t('dialog.world.tags.avatar_scaling_disabled') }}
</Badge>
<Badge
v-if="worldDialog.focusViewDisabled"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="worldDialog.focusViewDisabled" variant="outline">
{{ t('dialog.world.tags.focus_view_disabled') }}
</Badge>
<Badge
v-if="worldDialog.ref.unityPackageUrl"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="worldDialog.ref.unityPackageUrl" variant="outline">
{{ t('dialog.world.tags.future_proofing') }}
</Badge>
<Badge
v-if="worldDialog.inCache"
variant="outline"
class="cursor-pointer"
style="margin-right: 5px; margin-top: 5px"
class="cursor-pointer mr-1.5 mt-1.5"
@click="openFolderGeneric(worldDialog.cachePath)">
<span v-text="worldDialog.cacheSize" />
| {{ t('dialog.world.tags.cache') }}
@@ -125,10 +105,7 @@
</div>
<div>
<template v-for="tag in worldDialog.ref.tags" :key="tag">
<Badge
v-if="tag.startsWith('content_')"
variant="outline"
style="margin-right: 5px; margin-top: 5px">
<Badge class="mr-1.5 mt-1.5" v-if="tag.startsWith('content_')" variant="outline">
<span v-if="tag === 'content_horror'">
{{ t('dialog.world.tags.content_horror') }}
</span>
@@ -150,7 +127,7 @@
</Badge>
</template>
</div>
<div style="margin-top: 5px; display: flex; align-items: center">
<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"
@@ -334,13 +311,13 @@
<div class="flex items-center text-sm">
<User />
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
<User style="margin-left: 10px" />
<User style="margin-left: 8px" />
{{
t('dialog.world.instances.private_count', {
count: worldDialog.ref.privateOccupants
})
}}
<Check style="margin-left: 10px" />
<Check style="margin-left: 8px" />
{{
t('dialog.world.instances.capacity_count', {
count: worldDialog.ref.recommendedCapacity,
@@ -351,7 +328,7 @@
<div v-for="room in worldDialog.rooms" :key="room.id">
<template
v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
<div style="margin: 5px 0">
<div style="margin: 6px 0">
<div class="flex items-center">
<LocationWorld
class="text-sm"
@@ -376,7 +353,7 @@
<div
v-if="room.$location.userId || room.users.length"
class="flex flex-wrap items-start"
style="margin: 10px 0; max-height: unset">
style="margin: 8px 0; max-height: unset">
<div
v-if="room.$location.userId"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@@ -582,7 +559,7 @@
<TooltipWrapper
v-if="Object.keys(worldDialog.fileAnalysis).length"
side="top"
style="margin-left: 5px">
style="margin-left: 6px">
<template #content>
<template
v-for="(created_at, platform) in worldDialogPlatformCreatedAt"
@@ -619,7 +596,7 @@
<span class="block truncate font-medium leading-[18px]" style="display: inline">
{{ t('dialog.world.info.publication_date') }}
</span>
<TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
<TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 6px">
<template #content>
<span>
{{ t('dialog.world.info.time_in_labs') }}