Fix favs scrolling

This commit is contained in:
Natsumi
2026-02-05 10:50:37 +13:00
committed by pa
parent 66a5a1ff15
commit b4bf4e2567
4 changed files with 1195 additions and 1146 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

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