MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 14:56:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui adjust

Browse Source
This commit is contained in:
pa
2026-02-24 21:40:20 +09:00
committed by Natsumi
parent 60fc08b472
commit 31bb8be576
2 changed files with 131 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Sidebar/Sidebar.vue
+34 -23
View File
@@ -94,37 +94,38 @@
</PopoverTrigger>
<PopoverContent side="bottom" align="end" class="w-64 p-3" @open-auto-focus.prevent>
<div class="flex flex-col gap-2.5 text-xs">
<div class="flex items-center justify-between">
<span>{{ t('side_panel.settings.group_by_instance') }}</span>
<Field orientation="horizontal">
<FieldLabel>{{ t('side_panel.settings.group_by_instance') }}</FieldLabel>
<Switch
:model-value="isSidebarGroupByInstance"
@update:modelValue="setIsSidebarGroupByInstance" />
</div>
<div v-if="isSidebarGroupByInstance" class="flex items-center justify-between">
<span>{{ t('side_panel.settings.hide_friends_in_same_instance') }}</span>
</Field>
<Field v-if="isSidebarGroupByInstance" orientation="horizontal">
<FieldLabel>{{ t('side_panel.settings.hide_friends_in_same_instance') }}</FieldLabel>
<Switch
:model-value="isHideFriendsInSameInstance"
@update:modelValue="setIsHideFriendsInSameInstance" />
</div>
<div class="flex items-center justify-between">
<span>{{ t('side_panel.settings.split_favorite_friends') }}</span>
</Field>
<Field orientation="horizontal">
<FieldLabel>{{ t('side_panel.settings.split_favorite_friends') }}</FieldLabel>
<Switch
:model-value="isSidebarDivideByFriendGroup"
@update:modelValue="setIsSidebarDivideByFriendGroup" />
</div>
</Field>
<Button
v-if="isSidebarDivideByFriendGroup"
variant="outline"
size="sm"
class="w-full text-xs"
class="w-full text-sm"
@click="
isSettingsPopoverOpen = false;
isGroupOrderSheetOpen = true;
">
{{ t('side_panel.settings.edit_group_order') }}
</Button>
<div class="flex flex-col gap-1.5">
<span>{{ t('side_panel.settings.favorite_groups') }}</span>
<Field>
<FieldLabel>{{ t('side_panel.settings.favorite_groups') }}</FieldLabel>
<FieldContent>
<Select
:model-value="resolvedSidebarFavoriteGroups"
multiple
@@ -164,11 +165,15 @@
</template>
</SelectContent>
</Select>
</div>
</FieldContent>
</Field>
<Separator />
<div class="flex flex-col gap-1.5">
<span>{{ t('side_panel.settings.sort_primary') }}</span>
<Select :model-value="sidebarSortMethod1" @update:modelValue="setSidebarSortMethod1">
<Field>
<FieldLabel>{{ t('side_panel.settings.sort_primary') }}</FieldLabel>
<FieldContent>
<Select
:model-value="sidebarSortMethod1"
@update:modelValue="setSidebarSortMethod1">
<SelectTrigger size="sm">
<SelectValue
:placeholder="
@@ -181,9 +186,11 @@
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="flex flex-col gap-1.5">
<span>{{ t('side_panel.settings.sort_secondary') }}</span>
</FieldContent>
</Field>
<Field>
<FieldLabel>{{ t('side_panel.settings.sort_secondary') }}</FieldLabel>
<FieldContent>
<Select
:model-value="sidebarSortMethod2"
:disabled="!sidebarSortMethod1"
@@ -203,9 +210,11 @@
</SelectItem>
</SelectContent>
</Select>
</div>
<div class="flex flex-col gap-1.5">
<span>{{ t('side_panel.settings.sort_tertiary') }}</span>
</FieldContent>
</Field>
<Field>
<FieldLabel>{{ t('side_panel.settings.sort_tertiary') }}</FieldLabel>
<FieldContent>
<Select
:model-value="sidebarSortMethod3"
:disabled="!sidebarSortMethod2"
@@ -225,7 +234,8 @@
</SelectItem>
</SelectContent>
</Select>
</div>
</FieldContent>
</Field>
</div>
</PopoverContent>
</Popover>
@@ -274,6 +284,7 @@
SelectValue
} from '@/components/ui/select';
import { Bell, RefreshCw, Settings } from 'lucide-vue-next';
import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
src/views/Sidebar/components/SortableGroupItem.vue
+12 -5
View File
@@ -1,4 +1,5 @@
<script setup>
import { Item, ItemContent, ItemMedia, ItemTitle } from '@/components/ui/item';
import { computed, ref } from 'vue';
import { GripVertical } from 'lucide-vue-next';
import { useSortable } from '@dnd-kit/vue/sortable';
@@ -19,11 +20,17 @@
</script>
<template>
<div
<Item
ref="element"
class="flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm select-none cursor-grab active:cursor-grabbing"
variant="outline"
size="sm"
class="cursor-grab select-none active:cursor-grabbing"
:class="{ 'opacity-50': isDragSource }">
<GripVertical class="size-4 shrink-0 text-muted-foreground" />
<span class="truncate">{{ label }}</span>
</div>
<ItemMedia>
<GripVertical class="size-4 text-muted-foreground" />
</ItemMedia>
<ItemContent>
<ItemTitle class="truncate">{{ label }}</ItemTitle>
</ItemContent>
</Item>
</template>