MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-27 02:33:48 +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

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