MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-26 18:23:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix styles

Browse Source
This commit is contained in:
pa
2026-01-18 17:06:16 +09:00
committed by Natsumi
parent c326e4fd3e
commit 1de16dc699
40 changed files with 370 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AvatarInfo.vue
View File

@@ -3,7 +3,12 @@
<span class="flex items-center"
>{{ avatarName }} <Lock v-if="avatarType && avatarType === '(own)'" class="h-4 w-4 mx-1"
/></span>
<span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
<TooltipWrapper v-if="avatarTags">
<template #content>
<span>{{ avatarTags }}</span>
</template>
<span v-if="avatarTags" style="font-size: 12px" class="truncate">{{ avatarTags }}</span>
</TooltipWrapper>
</div>
</template>
@@ -11,6 +16,7 @@
import { ref, watch } from 'vue';
import { Lock } from 'lucide-vue-next';
import { TooltipWrapper } from './ui/tooltip';
import { useAvatarStore } from '../stores';
const avatarStore = useAvatarStore();

2
src/components/DisplayName.vue
View File

@@ -1,5 +1,5 @@
<template>
<span @click="showUserDialog" class="x-link">{{ username }}</span>
<span @click="showUserDialog" class="cursor-pointer">{{ username }}</span>
</template>
<script setup>

124
src/components/Location.vue
View File

@@ -3,9 +3,9 @@
<div v-if="!text" class="transparent">-</div>
<div v-show="text" class="flex items-center">
<div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
<template v-if="disableTooltip">
<TooltipWrapper :content="tooltipContent" :disabled="tooltipDisabled" :delay-duration="300" side="top">
<div
:class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
:class="locationClasses"
class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
@click="handleShowWorldDialog">
<Spinner v-if="isTraveling" class="mr-1" />
@@ -13,48 +13,25 @@
<span v-if="showInstanceIdInLocation && instanceName" class="ml-1 whitespace-nowrap">{{
` · #${instanceName}`
}}</span>
<span v-if="groupName" class="ml-0.5 whitespace-nowrap x-link" @click.stop="handleShowGroupDialog">
<span
v-if="groupName"
class="ml-0.5 whitespace-nowrap cursor-pointer"
@click.stop="handleShowGroupDialog">
({{ groupName }})
</span>
</div>
</TooltipWrapper>
<AlertTriangle v-if="isClosed" :class="['inline-block', 'ml-5']" style="color: lightcoral" />
</template>
<template v-else>
<TooltipWrapper
:content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
:disabled="!instanceName || showInstanceIdInLocation"
:delay-duration="300"
side="top">
<div
:class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
@click="handleShowWorldDialog">
<Spinner v-if="isTraveling" class="mr-1" />
<span class="min-w-0 truncate">{{ text }}</span>
<span v-if="showInstanceIdInLocation && instanceName" class="ml-1 whitespace-nowrap">{{
` · #${instanceName}`
}}</span>
<span
v-if="groupName"
class="ml-0.5 whitespace-nowrap x-link"
@click.stop="handleShowGroupDialog">
({{ groupName }})
</span>
</div>
</TooltipWrapper>
<TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<AlertTriangle :class="['inline-block', 'ml-5']" style="color: lightcoral" />
</TooltipWrapper>
</template>
<Lock v-if="strict" :class="['inline-block', 'ml-5']" />
<TooltipWrapper v-if="isClosed" :content="closedTooltip" :disabled="disableTooltip">
<AlertTriangle class="inline-block ml-2 text-muted-foreground" />
</TooltipWrapper>
<Lock v-if="strict" class="inline-block ml-2 text-muted-foreground" />
</div>
</div>
</template>
<script setup>
import { onBeforeUnmount, ref, watch } from 'vue';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { AlertTriangle, Lock } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -113,6 +90,19 @@
const isClosed = ref(false);
const instanceName = ref('');
const isLocationLink = computed(() => props.link && props.location !== 'private' && props.location !== 'offline');
const locationClasses = computed(() => [
'x-location',
{
'cursor-pointer': isLocationLink.value
}
]);
const tooltipContent = computed(() => `${t('dialog.new_instance.instance_id')}: #${instanceName.value}`);
const tooltipDisabled = computed(
() => props.disableTooltip || !instanceName.value || showInstanceIdInLocation.value
);
const closedTooltip = computed(() => t('dialog.user.info.instance_closed'));
let isDisposed = false;
onBeforeUnmount(() => {
isDisposed = true;
@@ -136,16 +126,21 @@
return props.location;
}
function parse() {
if (isDisposed) {
return;
}
function resetState() {
text.value = '';
region.value = '';
strict.value = false;
isTraveling.value = false;
groupName.value = '';
isClosed.value = false;
instanceName.value = '';
}
function parse() {
if (isDisposed) {
return;
}
resetState();
let instanceId = props.location;
if (typeof props.traveling !== 'undefined' && props.location === 'traveling') {
@@ -159,27 +154,43 @@
return;
}
const instanceRef = cachedInstances.get(L.tag);
if (typeof instanceRef !== 'undefined') {
if (instanceRef.displayName) {
setText(L);
instanceName.value = instanceRef.displayName;
}
if (instanceRef.closedAt) {
isClosed.value = true;
}
}
applyInstanceRef(L);
updateGroupName(L, instanceId);
updateRegion(L);
strict.value = L.strict;
}
function applyInstanceRef(L) {
const instanceRef = cachedInstances.get(L.tag);
if (typeof instanceRef === 'undefined') {
return;
}
if (instanceRef.displayName) {
setText(L);
instanceName.value = instanceRef.displayName;
}
if (instanceRef.closedAt) {
isClosed.value = true;
}
}
function updateGroupName(L, instanceId) {
if (props.grouphint) {
groupName.value = props.grouphint;
} else if (L.groupId) {
groupName.value = L.groupId;
getGroupName(instanceId).then((name) => {
if (!isDisposed && name && currentInstanceId() === L.tag) {
groupName.value = name;
}
});
return;
}
if (!L.groupId) {
return;
}
groupName.value = L.groupId;
getGroupName(instanceId).then((name) => {
if (!isDisposed && name && currentInstanceId() === L.tag) {
groupName.value = name;
}
});
}
function updateRegion(L) {
region.value = '';
if (!L.isOffline && !L.isPrivate && !L.isTraveling) {
region.value = L.region;
@@ -187,7 +198,6 @@
region.value = 'us';
}
}
strict.value = L.strict;
}
function setText(L) {

4
src/components/LocationWorld.vue
View File

@@ -1,11 +1,11 @@
<template>
<span class="x-location-world">
<span v-if="region" :class="['flags', 'inline-block', 'mr-1.25', region]"></span>
<span @click="showLaunchDialog" class="x-link">
<span @click="showLaunchDialog" class="cursor-pointer">
<Unlock v-if="isUnlocked" :class="['inline-block', 'mr-1.25']" />
<span> {{ accessTypeName }} #{{ instanceName }}</span>
</span>
<span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
<span v-if="groupName" @click="showGroupDialog" class="cursor-pointer">({{ groupName }})</span>
<TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
<AlertTriangle :class="['inline-block', 'ml-5']" style="color: lightcoral" />
</TooltipWrapper>

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

@@ -8,7 +8,7 @@
<div style="display: flex">
<img
:src="avatarDialog.ref.thumbnailImageUrl"
class="x-link"
class="cursor-pointer"
@click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
style="flex: none; width: 160px; height: 120px; border-radius: 12px"
loading="lazy" />
@@ -23,7 +23,7 @@
</div>
<div style="margin-top: 5px">
<span
class="x-link x-grey"
class="cursor-pointer x-grey"
style="font-family: monospace"
@click="showUserDialog(avatarDialog.ref.authorId)"
v-text="avatarDialog.ref.authorName"></span>
@@ -105,7 +105,7 @@
<Badge
v-if="avatarDialog.inCache"
variant="outline"
class="x-link"
class="cursor-pointer"
style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(avatarDialog.cachePath)">
<span v-text="avatarDialog.cacheSize"></span>

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

@@ -154,7 +154,7 @@
</div>
<div class="mt-2">
<a
class="x-link"
class="cursor-pointer"
@click.prevent="openExternalLink('https://remixicon.com/')">
https://remixicon.com/
</a>

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

@@ -15,7 +15,7 @@
<img
:src="groupDialog.ref.iconUrl"
style="flex: none; width: 120px; height: 120px; border-radius: 12px"
class="x-link"
class="cursor-pointer"
@click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
loading="lazy" />
<div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
@@ -42,7 +42,7 @@
</TooltipWrapper>
<div style="margin-top: 5px">
<span
class="x-link x-grey"
class="cursor-pointer x-grey"
style="font-family: monospace"
@click="showUserDialog(groupDialog.ref.ownerId)"
v-text="groupDialog.ownerDisplayName"></span>
@@ -357,7 +357,7 @@
<div class="group-banner-image-info">
<img
:src="groupDialog.ref.bannerUrl"
class="x-link"
class="cursor-pointer"
style="
flex: none;
width: 100%;
@@ -424,7 +424,7 @@
style="display: inline-block; margin-right: 5px">
<img
:src="groupDialog.announcement.imageUrl"
class="x-link"
class="cursor-pointer"
style="
flex: none;
width: 60px;
@@ -760,7 +760,7 @@
<div v-if="post.imageUrl" style="display: inline-block; margin-right: 5px">
<img
:src="post.imageUrl"
class="x-link"
class="cursor-pointer"
style="
flex: none;
width: 60px;
@@ -1123,7 +1123,7 @@
class="p-0 overflow-hidden transition-shadow hover:shadow-md">
<img
:src="image.imageUrl"
:class="['x-link', 'max-w-full', 'max-h-full']"
:class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
@click="showFullscreenImageDialog(image.imageUrl)"
loading="lazy" />
</Card>

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

@@ -12,7 +12,7 @@
</DialogHeader>
<div v-if="inviteDialog.visible">
<Location :location="inviteDialog.worldId" :link="false" />
<Location :location="inviteDialog.worldId" :link="false" class="cursor-default" />
<br />
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
t('dialog.invite.add_self')

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

@@ -29,7 +29,7 @@
<span class="flex items-center gap-1">
<span>{{ t('dialog.launch.short_url') }}</span>
<TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
<AlertTriangle />
<Info class="text-muted-foreground" />
</TooltipWrapper>
</span>
</FieldLabel>
@@ -145,7 +145,7 @@
} from '@/components/ui/dropdown-menu';
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { AlertTriangle, Copy, MoreHorizontal } from 'lucide-vue-next';
import { Copy, Info, MoreHorizontal } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { InputGroupField } from '@/components/ui/input-group';

2
src/components/dialogs/PreviousInstancesDialog/previousInstancesInfoColumns.jsx
View File

@@ -76,7 +76,7 @@ export const createColumns = ({ onLookupUser }) => [
const original = row.original;
return (
<span
class="x-link"
class=" cursor-pointer"
onClick={(event) => {
event.stopPropagation();
onLookupUser?.(original);

4
src/components/dialogs/UserDialog/UserActionDropdown.vue
View File

@@ -66,10 +66,6 @@
{{ t('dialog.user.actions.edit_pronouns') }}
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="onCommand('Logout')">
<Power class="size-4" />
{{ t('dialog.user.actions.logout') }}
</DropdownMenuItem>
</template>
<template v-else>
<template v-if="userDialog.isFriend">

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

@@ -178,7 +178,7 @@
class="extra">
<div style="display: inline-block; flex: none; margin-right: 5px">
<Avatar
class="x-link size-15! rounded-lg!"
class="cursor-pointer size-15! rounded-lg!"
:style="{
background: userDialog.isRepresentedGroupLoading ? '#f5f7fa' : ''
}"
@@ -1442,7 +1442,6 @@
const { getFriendRequest, handleFriendDelete } = useFriendStore();
const { clearInviteImageUpload, showFullscreenImageDialog, showGalleryPage } = useGalleryStore();
const { logout } = useAuthStore();
const { cachedConfig } = storeToRefs(useAuthStore());
const { applyPlayerModeration, handlePlayerModerationDelete } = useModerationStore();
const { shiftHeld } = storeToRefs(useUiStore());
@@ -1802,8 +1801,6 @@
showBioDialog();
} else if (command === 'Pencil Pronouns') {
showPronounsDialog();
} else if (command === 'Logout') {
logout();
} else if (command === 'Request Invite') {
notificationRequest
.sendRequestInvite(

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

@@ -4,14 +4,14 @@
v-if="
!userDialog.loading && (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
"
class="x-link"
class="cursor-pointer"
:src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
style="flex: none; height: 120px; width: 213.33px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
loading="lazy" />
<img
v-else-if="!userDialog.loading"
class="x-link"
class="cursor-pointer"
:src="userDialog.ref.currentAvatarThumbnailImageUrl"
style="flex: none; height: 120px; width: 160px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
@@ -191,7 +191,7 @@
<Popover>
<PopoverTrigger asChild>
<img
class="x-link hover:grayscale-0"
class="cursor-pointer hover:grayscale-0"
:src="badge.badgeImageUrl"
style="
flex: none;
@@ -208,7 +208,7 @@
<PopoverContent side="bottom" class="w-75">
<img
:src="badge.badgeImageUrl"
:class="['x-link', 'max-w-full', 'max-h-full']"
:class="['cursor-pointer', 'max-w-full', 'max-h-full']"
@click="showFullscreenImageDialog(badge.badgeImageUrl)"
loading="lazy" />
<br />
@@ -253,7 +253,7 @@
<div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 10px">
<img
class="x-link"
class="cursor-pointer"
:src="userImage(userDialog.ref, true, '256', true)"
style="flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover"
@click="showFullscreenImageDialog(userDialog.ref.userIcon)"

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

@@ -14,7 +14,7 @@
<div style="display: flex">
<img
:src="worldDialog.ref.thumbnailImageUrl"
class="x-link"
class="cursor-pointer"
style="flex: none; width: 160px; height: 120px; border-radius: 12px"
@click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
loading="lazy" />
@@ -36,7 +36,7 @@
</div>
<div style="margin-top: 5px">
<span
class="x-link x-grey"
class="cursor-pointer x-grey"
style="font-family: monospace"
@click="showUserDialog(worldDialog.ref.authorId)"
v-text="worldDialog.ref.authorName" />
@@ -125,7 +125,7 @@
<Badge
v-if="worldDialog.inCache"
variant="outline"
class="x-link"
class="cursor-pointer"
style="margin-right: 5px; margin-top: 5px"
@click="openFolderGeneric(worldDialog.cachePath)">
<span v-text="worldDialog.cacheSize" />