MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 06:56:04 +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> </PopoverTrigger>
<PopoverContent side="bottom" align="end" class="w-64 p-3" @open-auto-focus.prevent> <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 flex-col gap-2.5 text-xs">
<div class="flex items-center justify-between"> <Field orientation="horizontal">
<span>{{ t('side_panel.settings.group_by_instance') }}</span> <FieldLabel>{{ t('side_panel.settings.group_by_instance') }}</FieldLabel>
<Switch <Switch
:model-value="isSidebarGroupByInstance" :model-value="isSidebarGroupByInstance"
@update:modelValue="setIsSidebarGroupByInstance" /> @update:modelValue="setIsSidebarGroupByInstance" />
</div> </Field>
<div v-if="isSidebarGroupByInstance" class="flex items-center justify-between"> <Field v-if="isSidebarGroupByInstance" orientation="horizontal">
<span>{{ t('side_panel.settings.hide_friends_in_same_instance') }}</span> <FieldLabel>{{ t('side_panel.settings.hide_friends_in_same_instance') }}</FieldLabel>
<Switch <Switch
:model-value="isHideFriendsInSameInstance" :model-value="isHideFriendsInSameInstance"
@update:modelValue="setIsHideFriendsInSameInstance" /> @update:modelValue="setIsHideFriendsInSameInstance" />
</div> </Field>
<div class="flex items-center justify-between"> <Field orientation="horizontal">
<span>{{ t('side_panel.settings.split_favorite_friends') }}</span> <FieldLabel>{{ t('side_panel.settings.split_favorite_friends') }}</FieldLabel>
<Switch <Switch
:model-value="isSidebarDivideByFriendGroup" :model-value="isSidebarDivideByFriendGroup"
@update:modelValue="setIsSidebarDivideByFriendGroup" /> @update:modelValue="setIsSidebarDivideByFriendGroup" />
</div> </Field>
<Button <Button
v-if="isSidebarDivideByFriendGroup" v-if="isSidebarDivideByFriendGroup"
variant="outline" variant="outline"
size="sm" size="sm"
class="w-full text-xs" class="w-full text-sm"
@click=" @click="
isSettingsPopoverOpen = false; isSettingsPopoverOpen = false;
isGroupOrderSheetOpen = true; isGroupOrderSheetOpen = true;
"> ">
{{ t('side_panel.settings.edit_group_order') }} {{ t('side_panel.settings.edit_group_order') }}
</Button> </Button>
<div class="flex flex-col gap-1.5"> <Field>
<span>{{ t('side_panel.settings.favorite_groups') }}</span> <FieldLabel>{{ t('side_panel.settings.favorite_groups') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="resolvedSidebarFavoriteGroups" :model-value="resolvedSidebarFavoriteGroups"
multiple multiple
@@ -164,11 +165,15 @@
</template> </template>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </FieldContent>
</Field>
<Separator /> <Separator />
<div class="flex flex-col gap-1.5"> <Field>
<span>{{ t('side_panel.settings.sort_primary') }}</span> <FieldLabel>{{ t('side_panel.settings.sort_primary') }}</FieldLabel>
<Select :model-value="sidebarSortMethod1" @update:modelValue="setSidebarSortMethod1"> <FieldContent>
<Select
:model-value="sidebarSortMethod1"
@update:modelValue="setSidebarSortMethod1">
<SelectTrigger size="sm"> <SelectTrigger size="sm">
<SelectValue <SelectValue
:placeholder=" :placeholder="
@@ -181,9 +186,11 @@
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </FieldContent>
<div class="flex flex-col gap-1.5"> </Field>
<span>{{ t('side_panel.settings.sort_secondary') }}</span> <Field>
<FieldLabel>{{ t('side_panel.settings.sort_secondary') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="sidebarSortMethod2" :model-value="sidebarSortMethod2"
:disabled="!sidebarSortMethod1" :disabled="!sidebarSortMethod1"
@@ -203,9 +210,11 @@
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </FieldContent>
<div class="flex flex-col gap-1.5"> </Field>
<span>{{ t('side_panel.settings.sort_tertiary') }}</span> <Field>
<FieldLabel>{{ t('side_panel.settings.sort_tertiary') }}</FieldLabel>
<FieldContent>
<Select <Select
:model-value="sidebarSortMethod3" :model-value="sidebarSortMethod3"
:disabled="!sidebarSortMethod2" :disabled="!sidebarSortMethod2"
@@ -225,7 +234,8 @@
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </FieldContent>
</Field>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
@@ -274,6 +284,7 @@
SelectValue SelectValue
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Bell, RefreshCw, Settings } from 'lucide-vue-next'; 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 { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
src/views/Sidebar/components/SortableGroupItem.vue
+12 -5
View File
@@ -1,4 +1,5 @@
<script setup> <script setup>
import { Item, ItemContent, ItemMedia, ItemTitle } from '@/components/ui/item';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { GripVertical } from 'lucide-vue-next'; import { GripVertical } from 'lucide-vue-next';
import { useSortable } from '@dnd-kit/vue/sortable'; import { useSortable } from '@dnd-kit/vue/sortable';
@@ -19,11 +20,17 @@
</script> </script>
<template> <template>
<div <Item
ref="element" 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 }"> :class="{ 'opacity-50': isDragSource }">
<GripVertical class="size-4 shrink-0 text-muted-foreground" /> <ItemMedia>
<span class="truncate">{{ label }}</span> <GripVertical class="size-4 text-muted-foreground" />
</div> </ItemMedia>
<ItemContent>
<ItemTitle class="truncate">{{ label }}</ItemTitle>
</ItemContent>
</Item>
</template> </template>