mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 08:13:52 +02:00
Fix favs scrolling
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="favorites-page x-container">
|
<div class="x-container">
|
||||||
|
<div class="favorites-page">
|
||||||
<div class="favorites-toolbar">
|
<div class="favorites-toolbar">
|
||||||
<div>
|
<div>
|
||||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||||
@@ -52,7 +53,9 @@
|
|||||||
<li class="favorites-dropdown__control" @click.stop>
|
<li class="favorites-dropdown__control" @click.stop>
|
||||||
<div class="favorites-dropdown__control-header">
|
<div class="favorites-dropdown__control-header">
|
||||||
<span>Spacing</span>
|
<span>Spacing</span>
|
||||||
<span class="favorites-dropdown__control-value"> {{ avatarCardSpacingPercent }}% </span>
|
<span class="favorites-dropdown__control-value">
|
||||||
|
{{ avatarCardSpacingPercent }}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Slider
|
<Slider
|
||||||
v-model="avatarCardSpacingValue"
|
v-model="avatarCardSpacingValue"
|
||||||
@@ -113,7 +116,9 @@
|
|||||||
@click="handleGroupClick('remote', group.key)">
|
@click="handleGroupClick('remote', group.key)">
|
||||||
<div class="group-item__top">
|
<div class="group-item__top">
|
||||||
<span class="group-item__name">{{ group.displayName }}</span>
|
<span class="group-item__name">{{ group.displayName }}</span>
|
||||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
<span class="group-item__count"
|
||||||
|
>{{ group.count }}/{{ group.capacity }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-item__bottom">
|
<div class="group-item__bottom">
|
||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
@@ -125,7 +130,11 @@
|
|||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button
|
||||||
|
class="rounded-full"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
@click.stop>
|
||||||
<MoreHorizontal />
|
<MoreHorizontal />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
@@ -138,13 +147,18 @@
|
|||||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||||
</DropdownMenuSubTrigger>
|
</DropdownMenuSubTrigger>
|
||||||
<DropdownMenuPortal>
|
<DropdownMenuPortal>
|
||||||
<DropdownMenuSubContent side="right" align="start" class="w-45">
|
<DropdownMenuSubContent
|
||||||
|
side="right"
|
||||||
|
align="start"
|
||||||
|
class="w-45">
|
||||||
<DropdownMenuCheckboxItem
|
<DropdownMenuCheckboxItem
|
||||||
v-for="visibility in avatarGroupVisibilityOptions"
|
v-for="visibility in avatarGroupVisibilityOptions"
|
||||||
:key="visibility"
|
:key="visibility"
|
||||||
:model-value="group.visibility === visibility"
|
:model-value="group.visibility === visibility"
|
||||||
indicator-position="right"
|
indicator-position="right"
|
||||||
@select="handleVisibilitySelection(group, visibility)">
|
@select="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
<span>{{
|
<span>{{
|
||||||
t(`view.favorite.visibility.${visibility}`)
|
t(`view.favorite.visibility.${visibility}`)
|
||||||
}}</span>
|
}}</span>
|
||||||
@@ -218,7 +232,9 @@
|
|||||||
}}</span>
|
}}</span>
|
||||||
<DropdownMenu
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||||
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
|
@update:open="
|
||||||
|
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||||
|
">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
class="rounded-full"
|
class="rounded-full"
|
||||||
@@ -490,6 +506,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
<AvatarExportDialog v-model:avatarExportDialogVisible="avatarExportDialogVisible" />
|
<AvatarExportDialog v-model:avatarExportDialogVisible="avatarExportDialogVisible" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="favorites-page x-container">
|
<div class="x-container">
|
||||||
|
<div class="favorites-page">
|
||||||
<div class="favorites-toolbar">
|
<div class="favorites-toolbar">
|
||||||
<div>
|
<div>
|
||||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||||
@@ -40,7 +41,9 @@
|
|||||||
<li class="favorites-dropdown__control" @click.stop>
|
<li class="favorites-dropdown__control" @click.stop>
|
||||||
<div class="favorites-dropdown__control-header">
|
<div class="favorites-dropdown__control-header">
|
||||||
<span>Scale</span>
|
<span>Scale</span>
|
||||||
<span class="favorites-dropdown__control-value"> {{ friendCardScalePercent }}% </span>
|
<span class="favorites-dropdown__control-value">
|
||||||
|
{{ friendCardScalePercent }}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Slider
|
<Slider
|
||||||
v-model="friendCardScaleValue"
|
v-model="friendCardScaleValue"
|
||||||
@@ -52,7 +55,9 @@
|
|||||||
<li class="favorites-dropdown__control" @click.stop>
|
<li class="favorites-dropdown__control" @click.stop>
|
||||||
<div class="favorites-dropdown__control-header">
|
<div class="favorites-dropdown__control-header">
|
||||||
<span>Spacing</span>
|
<span>Spacing</span>
|
||||||
<span class="favorites-dropdown__control-value"> {{ friendCardSpacingPercent }}% </span>
|
<span class="favorites-dropdown__control-value">
|
||||||
|
{{ friendCardSpacingPercent }}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Slider
|
<Slider
|
||||||
v-model="friendCardSpacingValue"
|
v-model="friendCardSpacingValue"
|
||||||
@@ -113,7 +118,9 @@
|
|||||||
@click="handleGroupClick('remote', group.key)">
|
@click="handleGroupClick('remote', group.key)">
|
||||||
<div class="group-item__top">
|
<div class="group-item__top">
|
||||||
<span class="group-item__name">{{ group.displayName }}</span>
|
<span class="group-item__name">{{ group.displayName }}</span>
|
||||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
<span class="group-item__count"
|
||||||
|
>{{ group.count }}/{{ group.capacity }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-item__bottom">
|
<div class="group-item__bottom">
|
||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
@@ -125,7 +132,11 @@
|
|||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button
|
||||||
|
class="rounded-full"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
@click.stop>
|
||||||
<MoreHorizontal />
|
<MoreHorizontal />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
@@ -147,7 +158,9 @@
|
|||||||
:key="visibility"
|
:key="visibility"
|
||||||
:model-value="group.visibility === visibility"
|
:model-value="group.visibility === visibility"
|
||||||
indicator-position="right"
|
indicator-position="right"
|
||||||
@select="handleVisibilitySelection(group, visibility)">
|
@select="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
<span>{{
|
<span>{{
|
||||||
t(`view.favorite.visibility.${visibility}`)
|
t(`view.favorite.visibility.${visibility}`)
|
||||||
}}</span>
|
}}</span>
|
||||||
@@ -290,6 +303,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
<FriendExportDialog v-model:friendExportDialogVisible="friendExportDialogVisible" />
|
<FriendExportDialog v-model:friendExportDialogVisible="friendExportDialogVisible" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="favorites-page x-container">
|
<div class="x-container">
|
||||||
|
<div class="favorites-page">
|
||||||
<div class="favorites-toolbar">
|
<div class="favorites-toolbar">
|
||||||
<div>
|
<div>
|
||||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||||
@@ -40,7 +41,9 @@
|
|||||||
<li class="favorites-dropdown__control" @click.stop>
|
<li class="favorites-dropdown__control" @click.stop>
|
||||||
<div class="favorites-dropdown__control-header">
|
<div class="favorites-dropdown__control-header">
|
||||||
<span>Scale</span>
|
<span>Scale</span>
|
||||||
<span class="favorites-dropdown__control-value"> {{ worldCardScalePercent }}% </span>
|
<span class="favorites-dropdown__control-value">
|
||||||
|
{{ worldCardScalePercent }}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Slider
|
<Slider
|
||||||
v-model="worldCardScaleValue"
|
v-model="worldCardScaleValue"
|
||||||
@@ -52,7 +55,9 @@
|
|||||||
<li class="favorites-dropdown__control" @click.stop>
|
<li class="favorites-dropdown__control" @click.stop>
|
||||||
<div class="favorites-dropdown__control-header">
|
<div class="favorites-dropdown__control-header">
|
||||||
<span>Spacing</span>
|
<span>Spacing</span>
|
||||||
<span class="favorites-dropdown__control-value"> {{ worldCardSpacingPercent }}% </span>
|
<span class="favorites-dropdown__control-value">
|
||||||
|
{{ worldCardSpacingPercent }}%
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Slider
|
<Slider
|
||||||
v-model="worldCardSpacingValue"
|
v-model="worldCardSpacingValue"
|
||||||
@@ -113,7 +118,9 @@
|
|||||||
@click="handleGroupClick('remote', group.key)">
|
@click="handleGroupClick('remote', group.key)">
|
||||||
<div class="group-item__top">
|
<div class="group-item__top">
|
||||||
<span class="group-item__name">{{ group.displayName }}</span>
|
<span class="group-item__name">{{ group.displayName }}</span>
|
||||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
<span class="group-item__count"
|
||||||
|
>{{ group.count }}/{{ group.capacity }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="group-item__bottom">
|
<div class="group-item__bottom">
|
||||||
<Badge variant="outline">
|
<Badge variant="outline">
|
||||||
@@ -125,7 +132,11 @@
|
|||||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||||
">
|
">
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
<Button
|
||||||
|
class="rounded-full"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
@click.stop>
|
||||||
<MoreHorizontal />
|
<MoreHorizontal />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
@@ -147,7 +158,9 @@
|
|||||||
:key="visibility"
|
:key="visibility"
|
||||||
:model-value="group.visibility === visibility"
|
:model-value="group.visibility === visibility"
|
||||||
indicator-position="right"
|
indicator-position="right"
|
||||||
@select="handleVisibilitySelection(group, visibility)">
|
@select="
|
||||||
|
handleVisibilitySelection(group, visibility)
|
||||||
|
">
|
||||||
<span>{{
|
<span>{{
|
||||||
t(`view.favorite.visibility.${visibility}`)
|
t(`view.favorite.visibility.${visibility}`)
|
||||||
}}</span>
|
}}</span>
|
||||||
@@ -214,7 +227,9 @@
|
|||||||
<div class="group-item__top">
|
<div class="group-item__top">
|
||||||
<span class="group-item__name">{{ group }}</span>
|
<span class="group-item__name">{{ group }}</span>
|
||||||
<div class="group-item__right">
|
<div class="group-item__right">
|
||||||
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
|
<span class="group-item__count">{{
|
||||||
|
localWorldFavGroupLength(group)
|
||||||
|
}}</span>
|
||||||
<div class="group-item__bottom">
|
<div class="group-item__bottom">
|
||||||
<DropdownMenu
|
<DropdownMenu
|
||||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||||
@@ -397,7 +412,9 @@
|
|||||||
style="overflow: hidden scroll">
|
style="overflow: hidden scroll">
|
||||||
<template v-if="currentLocalFavorites.length">
|
<template v-if="currentLocalFavorites.length">
|
||||||
<div class="favorites-card-virtual" :style="localVirtualContainerStyle">
|
<div class="favorites-card-virtual" :style="localVirtualContainerStyle">
|
||||||
<template v-for="item in localVirtualItems" :key="String(item.virtualItem.key)">
|
<template
|
||||||
|
v-for="item in localVirtualItems"
|
||||||
|
:key="String(item.virtualItem.key)">
|
||||||
<div
|
<div
|
||||||
v-if="item.row"
|
v-if="item.row"
|
||||||
class="favorites-card-virtual-row"
|
class="favorites-card-virtual-row"
|
||||||
@@ -430,6 +447,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</ResizablePanel>
|
</ResizablePanel>
|
||||||
</ResizablePanelGroup>
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
<WorldExportDialog v-model:worldExportDialogVisible="worldExportDialogVisible" />
|
<WorldExportDialog v-model:worldExportDialogVisible="worldExportDialogVisible" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="x-container" ref="playerListRef">
|
<div class="x-container" ref="playerListRef">
|
||||||
<div class="flex h-full min-h-0 flex-col">
|
<div class="flex h-full min-h-0 flex-col overflow-auto">
|
||||||
<div
|
<div
|
||||||
v-if="currentInstanceWorld.ref.id"
|
v-if="currentInstanceWorld.ref.id"
|
||||||
ref="playerListHeaderRef"
|
ref="playerListHeaderRef"
|
||||||
|
|||||||
Reference in New Issue
Block a user