This commit is contained in:
pa
2026-01-17 23:14:31 +09:00
committed by Natsumi
parent 5e5abc1141
commit 2d812d7c05
18 changed files with 211 additions and 97 deletions

View File

@@ -1892,12 +1892,14 @@
display: flex;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
@@ -1906,7 +1908,7 @@
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
}
:deep(.favorites-search-card__content) {

View File

@@ -1159,12 +1159,14 @@
display: flex;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
@@ -1173,7 +1175,7 @@
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
}
:deep(.favorites-search-card.is-selected) {

View File

@@ -1661,12 +1661,14 @@
display: flex;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
@@ -1675,7 +1677,7 @@
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
}
:deep(.favorites-search-card.is-selected) {

View File

@@ -3,7 +3,7 @@
<SidebarProvider
:open="sidebarOpen"
:width="navWidth"
:width-icon="64"
:width-icon="48"
class="relative flex-1 h-full min-w-0"
@update:open="handleSidebarOpenChange">
<NavMenu />
@@ -14,7 +14,7 @@
:style="{ left: 'var(--sidebar-width)' }"
@pointerdown.prevent="startNavResize" />
<SidebarInset class="min-w-0">
<SidebarInset class="min-w-0 bg-sidebar">
<ResizablePanelGroup
ref="panelGroupRef"
direction="horizontal"

View File

@@ -128,7 +128,9 @@
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.world.info.last_updated') }}</span>
<span class="block truncate text-xs">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
<span class="block truncate text-xs">{{
formatDateFilter(currentInstanceWorld.lastUpdated, 'long')
}}</span>
</div>
</div>
<div class="x-friend-item" style="cursor: default">
@@ -148,13 +150,10 @@
<div class="current-instance-table flex min-h-0 min-w-0 flex-1">
<DataTableLayout
class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
class="[&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
:table="playerListTable"
table-class="min-w-max w-max"
:use-table-min-width="true"
:table-style="playerListTableStyle"
:loading="false"
:total-items="playerListTotalItems"
:show-pagination="false"
:on-row-click="handlePlayerListRowClick" />
</div>
@@ -255,15 +254,9 @@
return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
}
const initialColumnPinning = {
left: ['avatar', 'timer', 'displayName'],
right: []
};
const playerListColumns = computed(() =>
createColumns({
randomUserColours,
photonLoggingEnabled,
chatboxUserBlacklist,
onBlockChatbox: addChatboxUserBlacklist,
onUnblockChatbox: deleteChatboxUserBlacklist,
@@ -274,14 +267,8 @@
const { table: playerListTable } = useVrcxVueTable({
persistKey: 'playerList',
data: currentInstanceUsersData,
columns: playerListColumns.value,
getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`,
enablePinning: true,
initialColumnPinning,
initialPagination: {
pageIndex: 0,
pageSize: 500
}
columns: playerListColumns,
getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`
});
watch(
@@ -295,6 +282,18 @@
{ immediate: true }
);
watch(
photonLoggingEnabled,
(enabled) => {
const column = playerListTable?.getColumn?.('photonId');
if (!column) {
return;
}
column.toggleVisibility(Boolean(enabled));
},
{ immediate: true }
);
const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
const handlePlayerListRowClick = (row) => {

View File

@@ -58,13 +58,11 @@ const sortInstanceIcon = (a, b) =>
export const createColumns = ({
randomUserColours,
photonLoggingEnabled,
chatboxUserBlacklist,
onBlockChatbox,
onUnblockChatbox,
sortAlphabetically
}) => {
/** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
const cols = [
{
id: 'avatar',
@@ -72,7 +70,6 @@ export const createColumns = ({
header: () => t('table.playerList.avatar'),
size: 70,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const userRef = row.original?.ref;
const src = userImage(userRef);
@@ -94,7 +91,6 @@ export const createColumns = ({
header: ({ column }) =>
sortButton({ column, label: t('table.playerList.timer') }),
size: 90,
enableResizing: false,
sortingFn: (rowA, rowB) =>
(rowA.original?.timer ?? 0) - (rowB.original?.timer ?? 0),
cell: ({ row }) => <Timer epoch={row.original?.timer} />
@@ -144,7 +140,11 @@ export const createColumns = ({
id: 'status',
accessorFn: (row) => row?.ref?.statusDescription,
header: () => t('table.playerList.status'),
minSize: 200,
size:200,
minSize: 100,
meta: {
stretch: true
},
enableSorting: false,
cell: ({ row }) => {
const userRef = row.original?.ref;
@@ -165,16 +165,14 @@ export const createColumns = ({
</span>
);
}
}
];
if (photonLoggingEnabled?.value) {
cols.push({
},
{
id: 'photonId',
accessorFn: (row) => row?.photonId,
header: ({ column }) =>
sortButton({ column, label: t('table.playerList.photonId') }),
size: 110,
enableHiding: true,
sortingFn: (rowA, rowB) =>
(rowA.original?.photonId ?? 0) - (rowB.original?.photonId ?? 0),
cell: ({ row }) => {
@@ -208,10 +206,7 @@ export const createColumns = ({
</div>
);
}
});
}
cols.push(
},
{
id: 'icon',
header: ({ column }) =>
@@ -295,6 +290,10 @@ export const createColumns = ({
id: 'platform',
header: () => t('table.playerList.platform'),
size: 90,
meta: {
stretch: true
},
minSize: 20,
enableSorting: false,
cell: ({ row }) => {
const userRef = row.original?.ref;
@@ -405,7 +404,7 @@ export const createColumns = ({
accessorFn: (row) => row?.ref?.note,
header: () => t('table.playerList.note'),
size: 150,
minSize: 40,
minSize: 20,
meta: {
stretch: true
},
@@ -419,7 +418,7 @@ export const createColumns = ({
return <span>{text}</span>;
}
}
);
];
return cols;
};

View File

@@ -33,7 +33,16 @@
</Select>
</div>
<div class="options-container-item">
<span class="name">{{ t('view.settings.appearance.appearance.font_family') }}</span>
<span class="name flex! items-center!">
{{ t('view.settings.appearance.appearance.font_family') }}
<TooltipWrapper
side="top"
style="margin-left: 5px"
:content="t('view.settings.appearance.appearance.font_family_tooltip')">
<Info />
</TooltipWrapper>
</span>
<Select :model-value="appFontFamily" @update:modelValue="setAppFontFamily">
<SelectTrigger size="sm">
<SelectValue
@@ -41,10 +50,7 @@
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="fontKey in appFontFamilyOptions"
:key="fontKey"
:value="fontKey">
<SelectItem v-for="fontKey in appFontFamilyOptions" :key="fontKey" :value="fontKey">
{{ t(`view.settings.appearance.appearance.font_family_${fontKey}`) }}
</SelectItem>
</SelectGroup>
@@ -437,9 +443,9 @@
TagsInputItemDelete,
TagsInputItemText
} from '@/components/ui/tags-input';
import { ArrowRight, CheckIcon, ChevronDown, Info } from 'lucide-vue-next';
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { ArrowRight, CheckIcon, ChevronDown } from 'lucide-vue-next';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
@@ -449,8 +455,8 @@
import PresetColorPicker from '@/components/PresetColorPicker.vue';
import { useAppearanceSettingsStore, useFavoriteStore, useVrStore } from '../../../../stores';
import { getLanguageName, languageCodes } from '../../../../localization';
import { APP_FONT_FAMILIES, THEME_CONFIG } from '../../../../shared/constants';
import { getLanguageName, languageCodes } from '../../../../localization';
import SimpleSwitch from '../SimpleSwitch.vue';

View File

@@ -27,12 +27,16 @@
item.ref.displayName
}}</span>
<span v-if="!item.ref.isFriend" class="block truncate text-xs"></span>
<span v-else-if="item.ref.state === 'offline'" class="block truncate text-xs">{{
t('side_panel.search_result_active')
}}</span>
<span v-else-if="item.ref.state === 'active'" class="block truncate text-xs">{{
t('side_panel.search_result_offline')
}}</span>
<span
v-else-if="item.ref.state === 'offline'"
class="block truncate text-xs"
>{{ t('side_panel.search_result_active') }}</span
>
<span
v-else-if="item.ref.state === 'active'"
class="block truncate text-xs"
>{{ t('side_panel.search_result_offline') }}</span
>
<Location
v-else
class="text-xs"
@@ -182,7 +186,7 @@
display: flex;
flex: none;
flex-direction: column;
padding: 13px 5px 5px 5px;
padding: 10px 5px 5px 5px;
order: 99;
height: 100%;
box-sizing: border-box;