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

fix icon alignment

Browse Source
This commit is contained in:
pa
2026-01-15 16:36:46 +09:00
committed by Natsumi
parent 3b47d3a0eb
commit 5ba081a9db
31 changed files with 102 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.css
View File

@@ -881,7 +881,6 @@ html.dark .x-friend-item > .detail > .extra,
.x-login-container {
position: absolute;
z-index: 1999;
display: flex;
align-items: center;
justify-content: center;
@@ -984,10 +983,6 @@ hr.x-vertical-divider {
transition: transform 0.3s;
}
.x-friend-group > .rotation-transition.is-rotated {
transform: rotate(90deg);
}
.x-aside-container > .x-friend-list {
flex: 1;
}

6
src/components/InstanceInfo.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="display: inline-block; margin-left: 5px">
<div class="flex items-center ml-2">
<TooltipWrapper v-if="state.isValidInstance" side="bottom">
<template #content>
<div>
@@ -40,7 +40,7 @@
</template>
</div>
</template>
<ChevronDown />
<Info class="text-xs text-accent-foreground" />
</TooltipWrapper>
<span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
>{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
@@ -66,7 +66,7 @@
<script setup>
import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ChevronDown } from 'lucide-vue-next';
import { Info } from 'lucide-vue-next';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';

4
src/components/InviteYourself.vue
View File

@@ -7,8 +7,8 @@
variant="outline"
v-show="isVisible"
@click="confirmInvite"
><Mail class="h-4 w-4" /> ></Button
>
><Mail class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<Button

2
src/components/Location.vue
View File

@@ -31,7 +31,7 @@
</template>
<script setup>
import { Loader2, Lock, AlertTriangle } from 'lucide-vue-next';
import { AlertTriangle, Loader2, Lock } from 'lucide-vue-next';
import { onBeforeUnmount, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';

1
src/components/NavMenu.vue
View File

@@ -766,7 +766,6 @@
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
z-index: 600;
background-color: var(--el-bg-color-page);
box-shadow: none;
backdrop-filter: blur(14px) saturate(130%);

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

@@ -471,11 +471,7 @@
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name"
>{{ t('dialog.avatar.info.time_spent')
}}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" /> </TooltipWrapper
></span>
<span class="name">{{ t('dialog.avatar.info.time_spent') }}</span>
<span v-if="timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(timeSpent) }}</span>
@@ -499,7 +495,7 @@
size="icon-sm"
variant="outline"
@click="refreshAvatarDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -532,7 +528,6 @@
<script setup>
import {
AlertTriangle,
Apple,
Check,
CheckCircle,
@@ -542,7 +537,6 @@
Image,
Monitor,
Pencil,
RefreshCcw,
RefreshCw,
Share2,
Smartphone,
@@ -703,6 +697,9 @@
function avatarDialogTabClick(tabName) {
if (tabName === avatarDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshAvatarDialogTreeData();
}
return;
}
handleAvatarDialogTab(tabName);

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

@@ -4,6 +4,12 @@
class="x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235"
:show-close-button="false"
style="top: 10vh">
<DialogHeader class="sr-only">
<DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
<DialogDescription>
{{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="groupDialog.loading">
<div style="display: flex">
<img
@@ -605,9 +611,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.group.info.last_visited') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
</div>
@@ -1144,7 +1147,7 @@
size="icon-sm"
variant="outline"
@click="refreshGroupDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -1171,7 +1174,6 @@
<script setup>
import {
AlertTriangle,
Bell,
BellOff,
Check,
@@ -1193,9 +1195,9 @@
X,
XCircle
} from 'lucide-vue-next';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { InputGroupField } from '@/components/ui/input-group';
@@ -1706,6 +1708,9 @@
function groupDialogTabClick(tabName) {
if (tabName === groupDialogTabCurrentName.value) {
if (tabName === 'JSON') {
refreshGroupDialogTreeData();
}
return;
}
handleGroupDialogTab(tabName);

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

@@ -3,6 +3,7 @@
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('dialog.launch.header') }}</DialogTitle>
<DialogDescription class="sr-only">{{ t('dialog.launch.header') }}</DialogDescription>
</DialogHeader>
<FieldGroup class="gap-4">
<Field>
@@ -129,7 +130,7 @@
<script setup>
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import {
DropdownMenu,
DropdownMenuContent,

3
src/components/dialogs/NewInstanceDialog.vue
View File

@@ -3,6 +3,7 @@
<DialogContent>
<DialogHeader>
<DialogTitle>{{ t('dialog.new_instance.header') }}</DialogTitle>
<DialogDescription class="sr-only">{{ t('dialog.new_instance.header') }}</DialogDescription>
</DialogHeader>
<TabsUnderline
v-model="newInstanceDialog.selectedTab"
@@ -514,7 +515,7 @@
<script setup>
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Check as CheckIcon } from 'lucide-vue-next';

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

@@ -178,7 +178,7 @@
"
side="top"
:content="t('dialog.user.info.vrcplus_hides_avatar')">
<AlertTriangle />
<Info />
</TooltipWrapper>
</div>
</div>
@@ -293,9 +293,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.last_seen') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
</div>
@@ -308,11 +305,6 @@
style="display: flex; justify-content: space-between; align-items: center">
<div>
{{ t('dialog.user.info.join_count') }}
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</div>
<TooltipWrapper
@@ -330,9 +322,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.time_together') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -348,11 +337,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.user.info.play_time') }}
<TooltipWrapper
side="top"
:content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-if="userDialog.timeSpent === 0" class="extra">-</span>
<span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -370,15 +354,9 @@
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
class="name">
{{ t('dialog.user.info.online_for') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.offline_for') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
</div>
@@ -423,15 +401,9 @@
<div class="detail">
<span v-if="userDialog.unFriended" class="name">
{{ t('dialog.user.info.unfriended') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span v-else class="name">
{{ t('dialog.user.info.friended') }}
<TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
<AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">{{
formatDateFilter(userDialog.dateFriended, 'long')
@@ -1320,7 +1292,7 @@
size="icon-sm"
variant="outline"
@click="refreshUserDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -1367,12 +1339,12 @@
Download,
DownloadIcon,
Eye,
Info,
Languages,
Loader2,
LogOut,
MoreHorizontal,
Pencil,
RefreshCcw,
RefreshCw,
Tag,
Trash2
@@ -1719,6 +1691,9 @@
function userDialogTabClick(tabName) {
if (tabName === userDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshUserDialogTreeData();
}
return;
}
handleUserDialogTab(tabName);

4
src/components/dialogs/UserDialog/previousInstancesUserColumns.jsx
View File

@@ -1,4 +1,4 @@
import { ArrowUpDown, DoorOpen, Info, Trash2 } from 'lucide-vue-next';
import { ArrowUpDown, Info, LogIn, Trash2 } from 'lucide-vue-next';
import DisplayName from '../../DisplayName.vue';
import Location from '../../Location.vue';
@@ -115,7 +115,7 @@ export const createColumns = ({
onLaunch?.(original?.location);
}}
>
<DoorOpen class="h-4 w-4" />
<LogIn class="h-4 w-4" />
</Button>
<Button

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

@@ -4,6 +4,12 @@
class="x-dialog x-world-dialog translate-y-0 sm:max-w-235"
:show-close-button="false"
style="top: 10vh">
<DialogHeader class="sr-only">
<DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
<DialogDescription>
{{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
</DialogDescription>
</DialogHeader>
<div v-loading="worldDialog.loading">
<div style="display: flex">
<img
@@ -316,7 +322,7 @@
:unmount-on-hide="false"
@update:modelValue="worldDialogTabClick">
<template #Instances>
<div>
<div class="flex items-center">
<User />
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
<User style="margin-left: 10px" />
@@ -664,9 +670,6 @@
<div class="detail">
<span class="name">
{{ t('dialog.world.info.last_visited') }}
<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
><AlertTriangle style="margin-left: 3px" />
</TooltipWrapper>
</span>
<span class="extra">
{{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
@@ -681,7 +684,7 @@
size="icon-sm"
variant="outline"
@click="refreshWorldDialogTreeData()">
<RefreshCcw />
<RefreshCw />
</Button>
<Button
class="rounded-full h-6 w-6"
@@ -723,7 +726,6 @@
<script setup>
import {
AlertTriangle,
Apple,
ArrowDown,
Check,
@@ -740,7 +742,6 @@
MessageSquare,
Monitor,
Pencil,
RefreshCcw,
RefreshCw,
Share2,
Smartphone,
@@ -750,8 +751,8 @@
User,
Wand2
} from 'lucide-vue-next';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { InputGroupTextareaField } from '@/components/ui/input-group';
import { TabsUnderline } from '@/components/ui/tabs';
@@ -944,6 +945,9 @@
function worldDialogTabClick(tabName) {
if (tabName === worldDialogLastActiveTab.value) {
if (tabName === 'JSON') {
refreshWorldDialogTreeData();
}
return;
}
handleWorldDialogTab(tabName);

4
src/components/ui/alert-dialog/AlertDialogContent.vue
View File

@@ -32,13 +32,13 @@
<AlertDialogPortal>
<AlertDialogOverlay
data-slot="alert-dialog-overlay"
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80" />
class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80" />
<AlertDialogContent
data-slot="alert-dialog-content"
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class
)
">

2
src/components/ui/button/index.js
View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

2
src/components/ui/dialog/DialogContent.vue
View File

@@ -40,7 +40,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
props.class
)
">

2
src/components/ui/dialog/DialogOverlay.vue
View File

@@ -19,7 +19,7 @@
v-bind="delegatedProps"
:class="
cn(
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
props.class
)
">

4
src/components/ui/dialog/DialogScrollContent.vue
View File

@@ -32,11 +32,11 @@
<template>
<DialogPortal>
<DialogOverlay
class="fixed inset-0 z-10000 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
<DialogContent
:class="
cn(
'relative z-10000 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
props.class
)
"

2
src/components/ui/dropdown-menu/DropdownMenuContent.vue
View File

@@ -51,7 +51,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
props.class
)
">

2
src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@@ -46,7 +46,7 @@
v-bind="forwarded"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
props.class
)
">

2
src/components/ui/hover-card/HoverCardContent.vue
View File

@@ -43,7 +43,7 @@
v-bind="{ ...$attrs, ...forwardedProps }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-64 rounded-md border p-4 shadow-md outline-hidden',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
props.class
)
">

2
src/components/ui/popover/PopoverContent.vue
View File

@@ -52,7 +52,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
props.class
)
">

2
src/components/ui/select/SelectContent.vue
View File

@@ -49,7 +49,7 @@
v-bind="{ ...$attrs, ...forwarded }"
:class="
cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-10000 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
props.class

4
src/components/ui/tooltip/TooltipContent.vue
View File

@@ -40,14 +40,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
props.class
)
">
<slot />
<TooltipArrow
class="bg-foreground fill-foreground z-10000 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
</TooltipContent>
</TooltipPortal>
</template>

4
src/views/Charts/components/InstanceActivity.vue
View File

@@ -12,10 +12,6 @@
<div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
<div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
<div>
<AlertTriangle />
<i>{{ t('view.charts.instance_activity.tips.accuracy_notice') }}</i>
</div>
</div>
</HoverCardContent>
</HoverCard>

4
src/views/FriendsLocations/components/FriendsLocationsCard.vue
View File

@@ -11,7 +11,7 @@
</div>
<div class="friend-card__body">
<div class="friend-card__signature" :title="friend.ref?.statusDescription">
<Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-0.5" style="opacity: 0.7" />
<Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-1" style="opacity: 0.7" />
{{ friend.ref?.statusDescription || '&nbsp;' }}
</div>
<div v-if="displayInstanceInfo" @click.stop class="friend-card__world" :title="friend.worldName">
@@ -184,6 +184,8 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
.friend-card__world {

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

@@ -114,7 +114,7 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
<span>
{original.displayName ? (
<span
class="x-link table-user pr-2.5"
class="x-link table-user mr-1"
onClick={() => lookupUser(original)}
>
{original.displayName}

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

@@ -1,5 +1,5 @@
<template>
<div style="float: left; margin: 5px; z-index: 3000">
<div style="float: left; margin: 5px">
<TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
<Button class="rounded-full mr-2 text-xs" size="icon-sm" variant="ghost" @click="showVRCXUpdateDialog"
><CircleArrowDown

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

@@ -163,15 +163,4 @@
font-size: 12px;
margin-left: 10px;
}
.group-calendar-button {
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: var(--el-box-shadow-lighter);
border: none;
z-index: 5;
width: 40px;
height: 40px;
}
</style>

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

@@ -1,13 +1,13 @@
<template>
<div class="x-friend-list" style="padding: 10px 5px">
<div
class="x-friend-group x-link"
class="x-friend-group x-link flex items-center"
style="padding: 0 0 5px"
@click="
isFriendsGroupMe = !isFriendsGroupMe;
saveFriendsGroupStates();
">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isFriendsGroupMe }" />
<span style="margin-left: 5px">{{ t('side_panel.me') }}</span>
</div>
<div v-show="isFriendsGroupMe">
@@ -38,12 +38,12 @@
</div>
<div
v-show="vipFriendsDisplayNumber"
class="x-friend-group x-link"
class="x-friend-group x-link flex items-center"
@click="
isVIPFriends = !isVIPFriends;
saveFriendsGroupStates();
">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isVIPFriends }" />
<span style="margin-left: 5px">
{{ t('side_panel.favorite') }} &horbar;
{{ vipFriendsDisplayNumber }}
@@ -78,8 +78,8 @@
</div>
<template v-if="isSidebarGroupByInstance && friendsInSameInstance.length">
<div class="x-friend-group x-link" @click="toggleSwitchGroupByInstanceCollapsed">
<ArrowRight
<div class="x-friend-group x-link flex items-center" @click="toggleSwitchGroupByInstanceCollapsed">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !isSidebarGroupByInstanceCollapsed }" />
<span style="margin-left: 5px"
@@ -111,12 +111,12 @@
</template>
<div
v-show="onlineFriendsByGroupStatus.length"
class="x-friend-group x-link"
class="x-friend-group x-link flex items-center"
@click="
isOnlineFriends = !isOnlineFriends;
saveFriendsGroupStates();
">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOnlineFriends }" />
<span style="margin-left: 5px"
>{{ t('side_panel.online') }} &horbar; {{ onlineFriendsByGroupStatus.length }}</span
>
@@ -130,12 +130,12 @@
</div>
<div
v-show="activeFriends.length"
class="x-friend-group x-link"
class="x-friend-group x-link flex items-center"
@click="
isActiveFriends = !isActiveFriends;
saveFriendsGroupStates();
">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isActiveFriends }" />
<span style="margin-left: 5px">{{ t('side_panel.active') }} &horbar; {{ activeFriends.length }}</span>
</div>
<div v-if="isActiveFriends">
@@ -147,12 +147,12 @@
</div>
<div
v-show="offlineFriends.length"
class="x-friend-group x-link"
class="x-friend-group x-link flex items-center"
@click="
isOfflineFriends = !isOfflineFriends;
saveFriendsGroupStates();
">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }" />
<ChevronDown class="rotation-transition" :class="{ 'is-rotated': isOfflineFriends }" />
<span style="margin-left: 5px">{{ t('side_panel.offline') }} &horbar; {{ offlineFriends.length }}</span>
</div>
<div v-if="isOfflineFriends">
@@ -167,7 +167,7 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { ArrowRight } from 'lucide-vue-next';
import { ChevronDown } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -319,7 +319,7 @@
text-decoration: underline;
} */
.is-rotated {
transform: rotate(90deg);
transform: rotate(-90deg);
}
.rotation-transition {
transition: transform 0.2s ease-in-out;

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

@@ -3,7 +3,7 @@
<template v-for="(group, index) in groupedGroupInstances" :key="getGroupId(group)">
<div class="x-friend-group x-link" :style="{ paddingTop: index === 0 ? '0px' : '10px' }">
<div @click="toggleGroupSidebarCollapse(getGroupId(group))" style="display: flex; align-items: center">
<ArrowRight
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !groupInstancesCfg[getGroupId(group)]?.isCollapsed }" />
<span style="margin-left: 5px">{{ group[0].group.name }} – {{ group.length }}</span>
@@ -38,7 +38,7 @@
<script setup>
import { computed, ref } from 'vue';
import { ArrowRight } from 'lucide-vue-next';
import { ChevronDown } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useAppearanceSettingsStore, useGroupStore } from '../../../stores';
@@ -100,7 +100,7 @@
text-decoration: underline;
}
.is-rotated {
transform: rotate(90deg);
transform: rotate(-90deg);
}
.rotation-transition {
transition: transform 0.2s ease-in-out;

38
src/views/Tools/Tools.vue
View File

@@ -6,7 +6,7 @@
<div class="tool-categories">
<div class="tool-category">
<div class="category-header" @click="toggleCategory('group')">
<ArrowRight
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['group'] }" />
<span class="category-title">{{ t('view.tools.group.header') }}</span>
@@ -14,7 +14,7 @@
<div class="tools-grid" v-show="!categoryCollapsed['group']">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showGroupCalendarDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<CalendarDays />
</div>
<div class="tool-info">
@@ -27,15 +27,15 @@
</div>
<div class="tool-category">
<div class="category-header" @click="toggleCategory('image')">
<ArrowRight
<div class="category-header text-2xl" @click="toggleCategory('image')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['image'] }" />
<span class="category-title">{{ t('view.tools.pictures.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['image']">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showScreenshotMetadataPage">
<div class="tool-content text-2xl" @click="showScreenshotMetadataPage">
<div class="tool-icon">
<Camera />
</div>
@@ -49,7 +49,7 @@
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showGalleryPage">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<Images />
</div>
<div class="tool-info">
@@ -62,7 +62,7 @@
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="openVrcPhotosFolder">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<FolderOpen />
</div>
<div class="tool-info">
@@ -75,7 +75,7 @@
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="openVrcScreenshotsFolder">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<FolderOpen />
</div>
<div class="tool-info">
@@ -92,15 +92,17 @@
</div>
<div class="tool-category">
<div class="category-header" @click="toggleCategory('user')">
<ArrowRight class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }" />
<div class="category-header text-2xl" @click="toggleCategory('user')">
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['user'] }" />
<span class="category-title">{{ t('view.tools.export.header') }}</span>
</div>
<div class="tools-grid" v-show="!categoryCollapsed['user']">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportDiscordNamesDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<MessageSquare />
</div>
<div class="tool-info">
@@ -113,7 +115,7 @@
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showNoteExportDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<UserCheck />
</div>
<div class="tool-info">
@@ -127,7 +129,7 @@
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportFriendsListDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<UserCheck />
</div>
<div class="tool-info">
@@ -140,7 +142,7 @@
</Card>
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showExportAvatarsListDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<UserCheck />
</div>
<div class="tool-info">
@@ -156,7 +158,7 @@
<div class="tool-category">
<div class="category-header" @click="toggleCategory('other')">
<ArrowRight
<ChevronDown
class="rotation-transition"
:class="{ 'is-rotated': !categoryCollapsed['other'] }" />
<span class="category-title">{{ t('view.tools.other.header') }}</span>
@@ -164,7 +166,7 @@
<div class="tools-grid" v-show="!categoryCollapsed['other']">
<Card class="tool-card p-0 gap-0">
<div class="tool-content" @click="showEditInviteMessageDialog">
<div class="tool-icon">
<div class="tool-icon text-2xl">
<SquarePen />
</div>
<div class="tool-info">
@@ -202,9 +204,9 @@
<script setup>
import {
ArrowRight,
CalendarDays,
Camera,
ChevronDown,
FolderOpen,
Images,
MessageSquare,
@@ -401,7 +403,7 @@
}
.is-rotated {
transform: rotate(90deg);
transform: rotate(-90deg);
}
.rotation-transition {