mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-27 02:33:48 +02:00
some fix
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user