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

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

6
src/app.css
View File

@@ -21,11 +21,15 @@ html {
box-sizing: border-box;
background: var(--background);
height: calc(100vh - 20px);
margin: 10px 10px 10px 0;
margin: 10px 0 10px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
}
.aside-collapsed .x-container {
margin-right: 10px;
}
html.dark .x-container {
background: var(--sidebar);
}

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" />

3
src/localization/en.json
View File

@@ -348,7 +348,8 @@
"stop_fetching": "Stop fetching"
},
"status": {
"no_friends_to_process": "You have no friends to process"
"no_friends_to_process": "You have no friends to process",
"loading_cache": "Loading cached mutual friends from database"
},
"progress": {
"friends_processed": "Friends processed",

16
src/views/Charts/components/MutualFriends.vue
View File

@@ -215,7 +215,11 @@
const isOptOut = computed(() => Boolean(currentUser.value?.hasSharedConnectionsOptOut));
// @ts-ignore
const graphReady = computed(() => Array.isArray(graphPayload.value?.nodes) && graphPayload.value.nodes.length > 0);
const fetchButtonDisabled = computed(() => isFetching.value || isOptOut.value || totalFriends.value === 0);
const isLoadingSnapshot = ref(false);
const loadingToastId = ref(null);
const fetchButtonDisabled = computed(
() => isFetching.value || isOptOut.value || totalFriends.value === 0 || isLoadingSnapshot.value
);
const fetchButtonLabel = computed(() =>
hasFetched.value
? t('view.charts.mutual_friend.actions.fetch_again')
@@ -361,9 +365,11 @@
}
async function loadGraphFromDatabase() {
if (hasFetched.value || isFetching.value) {
if (hasFetched.value || isFetching.value || isLoadingSnapshot.value) {
return;
}
isLoadingSnapshot.value = true;
loadingToastId.value = toast.loading(t('view.charts.mutual_friend.status.loading_cache'));
try {
const snapshot = await database.getMutualGraphSnapshot();
if (!snapshot || snapshot.size === 0) {
@@ -399,6 +405,12 @@
status.needsRefetch = false;
} catch (err) {
console.error('[MutualNetworkGraph] Failed to load cached mutual graph', err);
} finally {
isLoadingSnapshot.value = false;
if (loadingToastId.value !== null && loadingToastId.value !== undefined) {
toast.dismiss(loadingToastId.value);
loadingToastId.value = null;
}
}
}

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

@@ -129,57 +129,30 @@
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item"
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-45 p-1 rounded-lg">
<div class="group-visibility-menu">
<button
v-for="visibility in avatarGroupVisibilityOptions"
:key="visibility"
type="button"
:class="[
'group-visibility-menu__item',
{
'is-active':
group.visibility === visibility
}
]"
@click="
handleVisibilitySelection(group, visibility)
">
<span>{{ formatVisibility(visibility) }}</span>
<span
v-if="group.visibility === visibility"
class="group-visibility-menu__check">
<Check class="h-3 w-3" />
</span>
</button>
</div>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-55">
<DropdownMenuItem @click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent side="right" align="start" class="w-45">
<DropdownMenuCheckboxItem
v-for="visibility in avatarGroupVisibilityOptions"
:key="visibility"
:model-value="group.visibility === visibility"
indicator-position="right"
@select="handleVisibilitySelection(group, visibility)">
<span>{{ formatVisibility(visibility) }}</span>
</DropdownMenuCheckboxItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -251,27 +224,16 @@
><Ellipsis
/></Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item"
@click="handleLocalRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<button
type="button"
class="favorites-group-menu__item"
@click="handleCheckInvalidAvatars(group)">
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
</button>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-50">
<DropdownMenuItem @click="handleLocalRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -317,15 +279,10 @@
><Ellipsis
/></Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-45 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleHistoryClear">
<span>{{ t('view.favorite.clear_tooltip') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-45">
<DropdownMenuItem variant="destructive" @click="handleHistoryClear">
<span>{{ t('view.favorite.clear_tooltip') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -537,6 +494,7 @@
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
@@ -1736,63 +1694,6 @@
padding: 12px 0;
}
.favorites-group-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.favorites-group-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
color: inherit;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.favorites-group-menu__item--submenu {
padding-right: 8px;
}
.favorites-group-menu__arrow {
margin-left: auto;
font-size: 12px;
}
.group-visibility-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.group-visibility-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
color: inherit;
font-size: 13px;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.group-visibility-menu__check {
font-size: 12px;
}
.favorites-content {
display: flex;
flex-direction: column;

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

@@ -129,57 +129,35 @@
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item"
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[180px] p-1 rounded-lg">
<div class="group-visibility-menu">
<button
v-for="visibility in friendGroupVisibilityOptions"
:key="visibility"
type="button"
:class="[
'group-visibility-menu__item',
{
'is-active':
group.visibility === visibility
}
]"
@click="
handleVisibilitySelection(group, visibility)
">
<span>{{ formatVisibility(visibility) }}</span>
<span
v-if="group.visibility === visibility"
class="group-visibility-menu__check">
<Check class="h-3 w-3" />
</span>
</button>
</div>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-55">
<DropdownMenuItem @click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[180px]">
<DropdownMenuCheckboxItem
v-for="visibility in friendGroupVisibilityOptions"
:key="visibility"
:model-value="group.visibility === visibility"
indicator-position="right"
@select="handleVisibilitySelection(group, visibility)">
<span>{{ formatVisibility(visibility) }}</span>
</DropdownMenuCheckboxItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem
variant="destructive"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -320,6 +298,7 @@
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
@@ -993,73 +972,6 @@
padding: 12px 0;
}
.favorites-group-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.favorites-group-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
color: inherit;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.favorites-group-menu__item:hover {
}
.favorites-group-menu__item--danger {
}
.favorites-group-menu__item--submenu {
padding-right: 8px;
}
.favorites-group-menu__arrow {
margin-left: auto;
font-size: 12px;
}
.group-visibility-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.group-visibility-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
color: inherit;
font-size: 13px;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.group-visibility-menu__item:hover,
.group-visibility-menu__item.is-active {
}
.group-visibility-menu__check {
font-size: 12px;
}
.favorites-content {
display: flex;
flex-direction: column;

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

@@ -129,54 +129,30 @@
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item"
@click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<DropdownMenuSub>
<DropdownMenuSubTrigger
class="favorites-group-menu__item favorites-group-menu__item--submenu">
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
side="right"
align="start"
class="w-[200px] p-1 rounded-lg">
<div class="group-visibility-menu">
<button
v-for="visibility in worldGroupVisibilityOptions"
:key="visibility"
type="button"
class="group-visibility-menu__item"
:class="{
'is-active': group.visibility === visibility
}"
@click="
handleVisibilitySelection(group, visibility)
">
<span>{{ formatVisibility(visibility) }}</span>
<span
v-if="group.visibility === visibility"
class="group-visibility-menu__check"
>✔</span
>
</button>
</div>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-50">
<DropdownMenuItem @click="handleRemoteRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent side="right" align="start" class="w-[200px]">
<DropdownMenuCheckboxItem
v-for="visibility in worldGroupVisibilityOptions"
:key="visibility"
:model-value="group.visibility === visibility"
indicator-position="right"
@select="handleVisibilitySelection(group, visibility)">
<span>{{ formatVisibility(visibility) }}</span>
</DropdownMenuCheckboxItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -247,21 +223,13 @@
><Ellipsis
/></Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
<button
type="button"
class="favorites-group-menu__item"
@click="handleLocalRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<button
type="button"
class="favorites-group-menu__item favorites-group-menu__item--danger"
@click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</button>
</div>
<DropdownMenuContent side="right" class="w-50">
<DropdownMenuItem @click="handleLocalRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
@@ -448,6 +416,7 @@
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
@@ -1496,72 +1465,6 @@
padding: 12px 0;
}
.favorites-group-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.favorites-group-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
color: inherit;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.favorites-group-menu__item:hover {
}
.favorites-group-menu__item--danger {
}
.favorites-group-menu__item--submenu {
padding-right: 8px;
}
.favorites-group-menu__arrow {
margin-left: auto;
font-size: 12px;
}
.group-visibility-menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.group-visibility-menu__item {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
background: transparent;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
color: inherit;
font-size: 13px;
transition: background-color 0.15s ease;
min-height: 32px;
align-self: stretch;
}
.group-visibility-menu__item:hover,
.group-visibility-menu__item.is-active {
}
.group-visibility-menu__check {
font-size: 12px;
}
.favorites-content {
display: flex;
flex-direction: column;

4
src/views/Favorites/dialogs/avatarImportColumns.jsx
View File

@@ -42,7 +42,7 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc
const original = row.original;
return (
<span
class="x-link"
class=" cursor-pointer"
title={original?.name}
onClick={(e) => {
e.stopPropagation();
@@ -63,7 +63,7 @@ export const createColumns = ({ onShowAvatar, onShowUser, onDelete, onShowFullsc
const original = row.original;
return (
<span
class="x-link"
class=" cursor-pointer"
title={original?.authorName}
onClick={(e) => {
e.stopPropagation();

2
src/views/Favorites/dialogs/friendImportColumns.jsx
View File

@@ -42,7 +42,7 @@ export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage,
const original = row.original;
return (
<span
class="x-link"
class="cursor-pointer"
title={original?.displayName}
onClick={(e) => {
e.stopPropagation();

4
src/views/Favorites/dialogs/worldImportColumns.jsx
View File

@@ -42,7 +42,7 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr
const original = row.original;
return (
<span
class="x-link"
class="cursor-pointer"
title={original?.name}
onClick={(e) => {
e.stopPropagation();
@@ -63,7 +63,7 @@ export const createColumns = ({ onShowWorld, onShowUser, onDelete, onShowFullscr
const original = row.original;
return (
<span
class="x-link"
class="cursor-pointer"
title={original?.authorName}
onClick={(e) => {
e.stopPropagation();

6
src/views/Feed/columns.jsx
View File

@@ -92,7 +92,7 @@ const expandedRow = ({ row }) => {
src={
original.previousCurrentAvatarThumbnailImageUrl
}
class="x-link h-30 w-40 rounded pointer"
class="cursor-pointer h-30 w-40 rounded pointer"
loading="lazy"
onClick={() =>
showFullscreenImageDialog(
@@ -125,7 +125,7 @@ const expandedRow = ({ row }) => {
src={
original.currentAvatarThumbnailImageUrl
}
class="x-link h-30 w-40 rounded pointer"
class="cursor-pointer h-30 w-40 rounded pointer"
loading="lazy"
onClick={() =>
showFullscreenImageDialog(
@@ -280,7 +280,7 @@ export const columns = [
const original = row.original;
return (
<span
class="x-link pr-2.5 cursor-pointer"
class="cursor-pointer pr-2.5 cursor-pointer"
onClick={() => showUserDialog(original.userId)}
>
{original.displayName}

4
src/views/FriendLog/columns.jsx
View File

@@ -89,7 +89,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
const displayName =
original.displayName || original.userId || '';
return (
<span class="block w-full whitespace-normal break-words">
<span class="block w-full whitespace-normal wrap-break-word cursor-pointer">
{original.type === 'DisplayName' ? (
<span class="mr-1">
{original.previousDisplayName}
@@ -97,7 +97,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
</span>
) : null}
<span
class="x-link pr-2.5"
class="cursor-pointer pr-2.5"
onClick={() => showUserDialog(original.userId)}
>
{displayName}

105
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -10,49 +10,65 @@
</Tabs>
<div class="friend-view__actions">
<InputGroupSearch v-model="searchTerm" class="friend-view__search" placeholder="Search Friend" />
<Popover>
<PopoverTrigger asChild>
<div>
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
<div>
<Popover>
<PopoverTrigger asChild>
<Button class="rounded-full mr-2" size="icon" variant="outline">
<Settings />
</Button>
</TooltipWrapper>
</div>
</PopoverTrigger>
<PopoverContent side="bottom" class="w-87.5">
<div style="display: flex; justify-content: space-between; align-items: center">
<span class="friend-view__settings-label">{{
t('view.friends_locations.separate_same_instance_friends')
}}</span>
<Switch v-model="showSameInstance" />
</div>
<div class="friend-view__settings-row">
<span class="friend-view__settings-label">{{ t('view.friends_locations.scale') }}</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
<Slider
v-model="cardScaleValue"
class="friend-view__slider"
:min="0.5"
:max="1.0"
:step="0.01" />
</div>
</div>
<div class="friend-view__settings-row">
<span class="friend-view__settings-label">{{ t('view.friends_locations.spacing') }}</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
<Slider
v-model="cardSpacingValue"
class="friend-view__slider"
:min="0.25"
:max="1.0"
:step="0.05" />
</div>
</div>
</PopoverContent>
</Popover>
</PopoverTrigger>
<PopoverContent side="bottom" class="w-87.5">
<div class="friend-view__settings">
<Field orientation="horizontal" class="friend-view__settings-row">
<FieldLabel class="friend-view__settings-label">{{
t('view.friends_locations.separate_same_instance_friends')
}}</FieldLabel>
<FieldContent>
<Switch v-model="showSameInstance" />
</FieldContent>
</Field>
<Field orientation="horizontal" class="friend-view__settings-row">
<FieldLabel class="friend-view__settings-label">
{{ t('view.friends_locations.scale') }}
</FieldLabel>
<FieldContent>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value"
>{{ cardScalePercentLabel }}&nbsp;</span
>
<Slider
v-model="cardScaleValue"
class="friend-view__slider"
:min="0.5"
:max="1.0"
:step="0.01" />
</div>
</FieldContent>
</Field>
<Field orientation="horizontal" class="friend-view__settings-row">
<FieldLabel class="friend-view__settings-label">
{{ t('view.friends_locations.spacing') }}
</FieldLabel>
<FieldContent>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value"
>{{ cardSpacingPercentLabel }}&nbsp;</span
>
<Slider
v-model="cardSpacingValue"
class="friend-view__slider"
:min="0.25"
:max="1.0"
:step="0.05" />
</div>
</FieldContent>
</Field>
</div>
</PopoverContent>
</Popover>
</div>
</TooltipWrapper>
</div>
</div>
<div v-else class="friend-view__toolbar friend-view__toolbar--loading">
@@ -64,7 +80,7 @@
<template v-if="row.type === 'header'">
<header class="friend-view__instance-header">
<Location class="text-xs" :location="row.instanceId" style="display: inline" />
<span class="friend-view__instance-count">{{ row.count }}</span>
<span class="friend-view__instance-count">({{ row.count }})</span>
</header>
</template>
@@ -95,6 +111,7 @@
<script setup>
import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Loader2, Settings } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
@@ -714,6 +731,11 @@
font-weight: 500;
}
.friend-view__settings {
display: grid;
gap: 12px;
}
.friend-view__loading-text {
padding-right: 12px;
}
@@ -828,7 +850,6 @@
.friend-view__instance-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 2px;
margin: 5px 10px;
font-weight: 600;

16
src/views/GameLog/columns.jsx
View File

@@ -91,7 +91,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
return (
<Badge variant="outline" class="text-muted-foreground">
<span
class={isLink ? 'x-link' : undefined}
class={isLink ? 'cursor-pointer' : undefined}
onClick={() =>
isLink && showWorldDialog(original.location)
}
@@ -111,10 +111,10 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
const isFriend = original.isFriend;
const isFavorite = original.isFavorite;
return (
<span>
<span class="cursor-pointer">
{original.displayName ? (
<span
class="x-link table-user mr-1"
class="cursor-pointer table-user mr-1"
onClick={() => lookupUser(original)}
>
{original.displayName}
@@ -183,13 +183,13 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.videoId !== 'PopcornPalace';
const label = original.videoName || original.videoUrl;
return (
<span class="block w-full min-w-0 truncate">
<span class="block w-full min-w-0 truncate cursor-pointer">
{original.videoId ? (
<span class="mr-1.5">{original.videoId}:</span>
) : null}
{showLink ? (
<span
class="x-link"
class="cursor-pointer"
onClick={() =>
openExternalLink(original.videoUrl)
}
@@ -208,9 +208,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
original.type === 'StringLoad'
) {
return (
<span class="block w-full min-w-0 truncate">
<span class="block w-full min-w-0 truncate cursor-pointer">
<span
class="x-link"
class="cursor-pointer"
onClick={() =>
openExternalLink(original.resourceUrl)
}
@@ -230,7 +230,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
}
return (
<span class="x-link block w-full min-w-0 truncate">
<span class="block w-full min-w-0 truncate">
{original.data}
</span>
);

11
src/views/Layout/AuthenticatedLayout.vue
View File

@@ -18,7 +18,10 @@
<ResizablePanelGroup
ref="panelGroupRef"
direction="horizontal"
class="group/main-layout flex-1 h-full min-w-0"
:class="[
'group/main-layout flex-1 h-full min-w-0',
{ 'aside-collapsed': isAsideCollapsedStatic }
]"
@layout="handleLayout">
<template #default="{ layout }">
<ResizablePanel :default-size="mainDefaultSize" :order="1">
@@ -126,7 +129,7 @@
const router = useRouter();
const appearanceSettingsStore = useAppearanceSettingsStore();
const { navWidth, isNavCollapsed } = storeToRefs(appearanceSettingsStore);
const { navWidth, isNavCollapsed, asideWidth } = storeToRefs(appearanceSettingsStore);
const sidebarOpen = computed(() => !isNavCollapsed.value);
@@ -184,6 +187,10 @@
isSideBarTabShow
} = useAuthenticatedLayoutResizable();
const isAsideCollapsedStatic = computed(
() => !isSideBarTabShow.value || asideWidth.value === 0
);
watch(
() => watchState.isLoggedIn,
(isLoggedIn) => {

9
src/views/Login/Login.vue
View File

@@ -158,14 +158,17 @@
<div class="x-legal-notice-container">
<div style="text-align: center; font-size: 12px">
<p>
<a class="x-link" @click="openExternalLink('https://vrchat.com/home/password')">{{
<a class="cursor-pointer" @click="openExternalLink('https://vrchat.com/home/password')">{{
t('view.login.forgotPassword')
}}</a>
</p>
<p>
&copy; 2019-2026
<a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
<a class="x-link" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
<a class="cursor-pointer" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a>
&amp;
<a class="cursor-pointer" @click="openExternalLink('https://github.com/Natsumi-sama')"
>Natsumi</a
>
</p>
<p>{{ t('view.settings.general.legal_notice.info') }}</p>
<p>{{ t('view.settings.general.legal_notice.disclaimer1') }}</p>

4
src/views/Moderation/columns.jsx
View File

@@ -87,7 +87,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
const original = row.original;
return (
<span
class="x-link block w-full min-w-0 truncate pr-2.5"
class="cursor-pointer block w-full min-w-0 truncate pr-2.5 cursor-pointer"
onClick={() => showUserDialog(original.sourceUserId)}
>
{original.sourceDisplayName}
@@ -107,7 +107,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
const original = row.original;
return (
<span
class="x-link block w-full whitespace-normal break-words pr-2.5"
class="cursor-pointer block w-full whitespace-normal wrap-break-word pr-2.5 cursor-pointer"
onClick={() => showUserDialog(original.targetUserId)}
>
{original.targetDisplayName}

20
src/views/Notifications/columns.jsx
View File

@@ -167,7 +167,7 @@ export const createColumns = ({
<Tooltip>
<TooltipTrigger asChild>
<span
class="x-link"
class="cursor-pointer"
onClick={() =>
showWorldDialog(
original.location
@@ -200,7 +200,7 @@ export const createColumns = ({
<Tooltip>
<TooltipTrigger asChild>
<span
class="x-link"
class="cursor-pointer"
onClick={() =>
openNotificationLink(
original.link
@@ -242,7 +242,7 @@ export const createColumns = ({
return (
<span class="table-user-text block w-full min-w-0 truncate">
<span
class="x-link block w-full min-w-0 truncate"
class="cursor-pointer block w-full min-w-0 truncate"
onClick={() =>
showUserDialog(original.senderUserId)
}
@@ -257,7 +257,7 @@ export const createColumns = ({
return (
<span class="table-user-text block w-full min-w-0 truncate">
<span
class="x-link block w-full min-w-0 truncate"
class="cursor-pointer block w-full min-w-0 truncate"
onClick={() =>
openNotificationLink(original.link)
}
@@ -306,7 +306,7 @@ export const createColumns = ({
return (
<span class="table-user-text block w-full min-w-0 truncate">
<span
class="x-link block w-full min-w-0 truncate"
class="cursor-pointer block w-full min-w-0 truncate"
onClick={() =>
showGroupDialog(original.senderUserId)
}
@@ -332,7 +332,7 @@ export const createColumns = ({
return (
<span class="table-user-text block w-full min-w-0 truncate">
<span
class="x-link block w-full min-w-0 truncate"
class="cursor-pointer block w-full min-w-0 truncate"
onClick={() =>
openNotificationLink(original.link)
}
@@ -347,7 +347,7 @@ export const createColumns = ({
return (
<span class="table-user-text block w-full min-w-0 truncate">
<span
class="x-link block w-full min-w-0 truncate"
class="cursor-pointer block w-full min-w-0 truncate"
onClick={() =>
openNotificationLink(original.link)
}
@@ -400,7 +400,7 @@ export const createColumns = ({
}
return (
<Emoji
class="x-link h-7.5 w-7.5 rounded object-cover"
class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
onClick={() => showFullscreenImageDialog(imageUrl)}
imageUrl={imageUrl}
size={30}
@@ -411,7 +411,7 @@ export const createColumns = ({
if (original.details?.imageUrl) {
return (
<img
class="x-link h-7.5 w-7.5 rounded object-cover"
class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
src={getSmallThumbnailUrl(
original.details.imageUrl
)}
@@ -428,7 +428,7 @@ export const createColumns = ({
if (original.imageUrl) {
return (
<img
class="x-link h-7.5 w-7.5 rounded object-cover"
class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
src={getSmallThumbnailUrl(original.imageUrl)}
onClick={() =>
showFullscreenImageDialog(original.imageUrl)

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

@@ -8,14 +8,14 @@
class="mb-7">
<img
:src="currentInstanceWorld.ref.thumbnailImageUrl"
class="x-link"
class="cursor-pointer"
style="flex: none; width: 160px; height: 120px; border-radius: 4px"
@click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
loading="lazy" />
<div style="margin-left: 10px; display: flex; flex-direction: column; min-width: 320px; width: 100%">
<div>
<span
class="x-link"
class="cursor-pointer"
style="
font-weight: bold;
overflow: hidden;
@@ -36,7 +36,7 @@
</div>
<div>
<span
class="x-link x-grey"
class="cursor-pointer x-grey"
style="font-family: monospace"
@click="showUserDialog(currentInstanceWorld.ref.authorId)"
v-text="currentInstanceWorld.ref.authorName"></span>
@@ -268,6 +268,7 @@
persistKey: 'playerList',
data: currentInstanceUsersData,
columns: playerListColumns,
enablePagination: false,
getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`
});

25
src/views/PlayerList/components/photonEventColumns.jsx
View File

@@ -35,7 +35,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
return (
<>
<span
class="x-link"
class="cursor-pointer"
onClick={(e) => {
e.stopPropagation();
onShowAvatar?.(r.avatar?.id);
@@ -116,7 +116,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
return (
<>
<span
class="x-link"
class="cursor-pointer"
style="margin-right: 5px"
onClick={(e) => {
e.stopPropagation();
@@ -129,7 +129,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
<ArrowRight />
</span>
<span
class="x-link"
class="cursor-pointer"
style="margin-left: 5px"
onClick={(e) => {
e.stopPropagation();
@@ -145,7 +145,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
if (r.type === 'PortalSpawn') {
return (
<span
class="x-link"
class="cursor-pointer"
onClick={(e) => {
e.stopPropagation();
onShowWorld?.(r.location, r.shortName);
@@ -176,7 +176,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
<span>Android&nbsp;</span>
) : null}
<span
class="x-link"
class="cursor-pointer"
onClick={(e) => {
e.stopPropagation();
onShowAvatar?.(r.avatar?.id);
@@ -233,7 +233,14 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
return <span>{r.text}</span>;
}
export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGroup, onShowWorld, onShowImage }) => [
export const createColumns = ({
isPrevious,
onShowUser,
onShowAvatar,
onShowGroup,
onShowWorld,
onShowImage
}) => [
{
id: 'created_at',
accessorFn: (row) => (row?.created_at ? Date.parse(row.created_at) : 0),
@@ -250,7 +257,9 @@ export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGrou
)
}}
>
<span>{formatDateFilter(row.original?.created_at, 'short')}</span>
<span>
{formatDateFilter(row.original?.created_at, 'short')}
</span>
</TooltipWrapper>
)
},
@@ -261,7 +270,7 @@ export const createColumns = ({ isPrevious, onShowUser, onShowAvatar, onShowGrou
enableSorting: false,
cell: ({ row }) => (
<span
class="x-link"
class="cursor-pointer"
style="padding-right: 10px"
onClick={(e) => {
e.stopPropagation();

4
src/views/Settings/components/Tabs/GeneralTab.vue
View File

@@ -283,8 +283,8 @@
<div class="options-container-item" style="display: block">
<p>
&copy; 2019-2026
<a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
<a class="x-link" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
<a class="cursor-pointer" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
<a class="cursor-pointer" @click="openExternalLink('https://github.com/Natsumi-sama')">Natsumi</a>
</p>
<p>{{ t('view.settings.general.legal_notice.info') }}</p>
<p>{{ t('view.settings.general.legal_notice.disclaimer1') }}</p>

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

@@ -8,8 +8,9 @@
<h2 v-text="changeLogDialog.buildName"></h2>
<span v-show="changeLogDialog.buildName">
{{ t('dialog.change_log.description') }}
<a class="x-link" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')">Patreon</a>,
<a class="x-link" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
<a class="cursor-pointer" @click="openExternalLink('https://www.patreon.com/Natsumi_VRCX')"
>Patreon</a
>, <a class="cursor-pointer" @click="openExternalLink('https://ko-fi.com/natsumi_sama')">Ko-fi</a>.
</span>
<VueShowdown
:markdown="changeLogDialog.changeLog"

1
src/views/Sidebar/Sidebar.vue
View File

@@ -190,6 +190,7 @@
order: 99;
height: 100%;
box-sizing: border-box;
padding-left: 10px;
}
.sidebar-tab-count {

15
src/views/Sidebar/components/FriendsSidebar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="x-friend-list" style="padding: 10px 5px">
<div
class="x-friend-group x-link flex items-center"
class="x-friend-group cursor-pointer flex items-center"
style="padding: 0 0 5px"
@click="
isFriendsGroupMe = !isFriendsGroupMe;
@@ -38,7 +38,7 @@
</div>
<div
v-show="vipFriendsDisplayNumber"
class="x-friend-group x-link flex items-center"
class="x-friend-group cursor-pointer flex items-center"
@click="
isVIPFriends = !isVIPFriends;
saveFriendsGroupStates();
@@ -78,7 +78,7 @@
</div>
<template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
<div class="x-friend-group x-link flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
<div class="x-friend-group cursor-pointer flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isSidebarGroupByInstanceCollapsed }" />
<span style="margin-left: 5px"
>{{ t('side_panel.same_instance') }} &horbar; {{ friendsInSameInstance.length }}</span
@@ -109,7 +109,7 @@
</template>
<div
v-show="onlineFriendsByGroupStatus.length"
class="x-friend-group x-link flex items-center"
class="x-friend-group cursor-pointer flex items-center"
@click="
isOnlineFriends = !isOnlineFriends;
saveFriendsGroupStates();
@@ -128,7 +128,7 @@
</div>
<div
v-show="activeFriends.length"
class="x-friend-group x-link flex items-center"
class="x-friend-group cursor-pointer flex items-center"
@click="
isActiveFriends = !isActiveFriends;
saveFriendsGroupStates();
@@ -145,7 +145,7 @@
</div>
<div
v-show="offlineFriends.length"
class="x-friend-group x-link flex items-center"
class="x-friend-group cursor-pointer flex items-center"
@click="
isOfflineFriends = !isOfflineFriends;
saveFriendsGroupStates();
@@ -310,9 +310,6 @@
</script>
<style scoped>
.x-link:hover {
text-decoration: none;
}
.is-rotated {
transform: rotate(-90deg);
}

8
src/views/Sidebar/components/GroupsSidebar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="x-friend-list" style="padding: 10px 5px">
<template v-for="(group, index) in groupedGroupInstances" :key="getGroupId(group)">
<div class="x-friend-group x-link" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
<div class="x-friend-group cursor-pointer" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
<div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
<ChevronDown
class="rotation-transition"
@@ -93,12 +93,6 @@
</script>
<style scoped>
.x-link:hover {
text-decoration: none;
}
.x-link:hover span {
text-decoration: underline;
}
.is-rotated {
transform: rotate(-90deg);
}

17
src/views/Tools/ScreenshotMetadata.vue
View File

@@ -7,9 +7,7 @@
<span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
</div>
<div @dragover.prevent @dragenter.prevent @drop="handleDrop">
<span>{{
t('dialog.screenshot_metadata.drag')
}}</span>
<span>{{ t('dialog.screenshot_metadata.drag') }}</span>
<br />
<br />
<Button size="sm" variant="outline" class="mr-2" @click="getAndDisplayScreenshotFromFile">{{
@@ -100,8 +98,7 @@
<DisplayName
v-if="screenshotMetadataDialog.metadata.author"
:userid="screenshotMetadataDialog.metadata.author.id"
:hint="screenshotMetadataDialog.metadata.author.displayName"
/>
:hint="screenshotMetadataDialog.metadata.author.displayName" />
<br />
<div class="my-2 w-[90%] ml-17">
<Carousel :opts="{ loop: false }" @init-api="handleScreenshotMetadataCarouselInit">
@@ -109,7 +106,6 @@
<CarouselItem>
<div class="h-150 w-full">
<img
class="x-link"
:src="screenshotMetadataDialog.metadata.previousFilePath"
style="width: 100%; height: 100%; object-fit: contain" />
</div>
@@ -117,7 +113,7 @@
<CarouselItem>
<div class="h-150 w-full">
<img
class="x-link"
class="cursor-pointer"
:src="screenshotMetadataDialog.metadata.filePath"
style="width: 100%; height: 100%; object-fit: contain"
@click="showFullscreenImageDialog(screenshotMetadataDialog.metadata.filePath)" />
@@ -126,7 +122,6 @@
<CarouselItem>
<div class="h-150 w-full">
<img
class="x-link"
:src="screenshotMetadataDialog.metadata.nextFilePath"
style="width: 100%; height: 100%; object-fit: contain" />
</div>
@@ -143,10 +138,8 @@
<br />
</template>
<span v-for="user in screenshotMetadataDialog.metadata.players" :key="user.id" style="margin-top: 5px">
<span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
<span
v-if="user.pos"
v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
<span class="cursor-pointer" @click="lookupUser(user)" v-text="user.displayName"></span>
<span v-if="user.pos" v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
<br />
</span>
</div>

2
src/views/Tools/dialogs/noteExportColumns.jsx
View File

@@ -41,7 +41,7 @@ export const createColumns = ({ userImage, userImageFull, onShowFullscreenImage,
const original = row.original;
return (
<span
class="x-link"
class="cursor-pointer"
onClick={(e) => {
e.stopPropagation();
onShowUser?.(original?.id);