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
+119 -108
View File
@@ -94,138 +94,148 @@
</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>
<Select <FieldContent>
:model-value="resolvedSidebarFavoriteGroups" <Select
multiple :model-value="resolvedSidebarFavoriteGroups"
@update:modelValue="handleFavoriteGroupsChange"> multiple
<SelectTrigger size="sm" class="w-full overflow-hidden"> @update:modelValue="handleFavoriteGroupsChange">
<SelectValue <SelectTrigger size="sm" class="w-full overflow-hidden">
:placeholder="t('side_panel.settings.favorite_groups_placeholder')"> <SelectValue
<template v-if="resolvedSidebarFavoriteGroups.length"> :placeholder="t('side_panel.settings.favorite_groups_placeholder')">
<span class="truncate">{{ selectedFavGroupLabel }}</span> <template v-if="resolvedSidebarFavoriteGroups.length">
<span <span class="truncate">{{ selectedFavGroupLabel }}</span>
v-if="resolvedSidebarFavoriteGroups.length > 1" <span
class="bg-primary text-primary-foreground shrink-0 rounded px-1 text-xs"> v-if="resolvedSidebarFavoriteGroups.length > 1"
+{{ resolvedSidebarFavoriteGroups.length - 1 }} class="bg-primary text-primary-foreground shrink-0 rounded px-1 text-xs">
</span> +{{ resolvedSidebarFavoriteGroups.length - 1 }}
</template> </span>
</SelectValue> </template>
</SelectTrigger> </SelectValue>
<SelectContent> </SelectTrigger>
<SelectGroup> <SelectContent>
<SelectItem
v-for="group in favoriteFriendGroups"
:key="group.key"
:value="group.key">
{{ group.displayName }}
</SelectItem>
</SelectGroup>
<template v-if="localFriendFavoriteGroups.length">
<SelectSeparator />
<SelectGroup> <SelectGroup>
<SelectItem <SelectItem
v-for="group in localFriendFavoriteGroups" v-for="group in favoriteFriendGroups"
:key="'local:' + group" :key="group.key"
:value="'local:' + group"> :value="group.key">
{{ group }} {{ group.displayName }}
</SelectItem> </SelectItem>
</SelectGroup> </SelectGroup>
</template> <template v-if="localFriendFavoriteGroups.length">
</SelectContent> <SelectSeparator />
</Select> <SelectGroup>
</div> <SelectItem
v-for="group in localFriendFavoriteGroups"
:key="'local:' + group"
:value="'local:' + group">
{{ group }}
</SelectItem>
</SelectGroup>
</template>
</SelectContent>
</Select>
</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>
<SelectTrigger size="sm"> <Select
<SelectValue :model-value="sidebarSortMethod1"
:placeholder=" @update:modelValue="setSidebarSortMethod1">
t('view.settings.appearance.side_panel.sorting.placeholder') <SelectTrigger size="sm">
" /> <SelectValue
</SelectTrigger> :placeholder="
<SelectContent> t('view.settings.appearance.side_panel.sorting.placeholder')
<SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value"> " />
{{ opt.label }} </SelectTrigger>
</SelectItem> <SelectContent>
</SelectContent> <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
</Select> {{ opt.label }}
</div> </SelectItem>
<div class="flex flex-col gap-1.5"> </SelectContent>
<span>{{ t('side_panel.settings.sort_secondary') }}</span> </Select>
<Select </FieldContent>
:model-value="sidebarSortMethod2" </Field>
:disabled="!sidebarSortMethod1" <Field>
@update:modelValue="(v) => setSidebarSortMethod2(v === CLEAR_VALUE ? '' : v)"> <FieldLabel>{{ t('side_panel.settings.sort_secondary') }}</FieldLabel>
<SelectTrigger size="sm"> <FieldContent>
<SelectValue <Select
:placeholder=" :model-value="sidebarSortMethod2"
t('view.settings.appearance.side_panel.sorting.placeholder') :disabled="!sidebarSortMethod1"
" /> @update:modelValue="(v) => setSidebarSortMethod2(v === CLEAR_VALUE ? '' : v)">
</SelectTrigger> <SelectTrigger size="sm">
<SelectContent> <SelectValue
<SelectItem :value="CLEAR_VALUE">{{ :placeholder="
t('dialog.gallery_select.none') t('view.settings.appearance.side_panel.sorting.placeholder')
}}</SelectItem> " />
<SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value"> </SelectTrigger>
{{ opt.label }} <SelectContent>
</SelectItem> <SelectItem :value="CLEAR_VALUE">{{
</SelectContent> t('dialog.gallery_select.none')
</Select> }}</SelectItem>
</div> <SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
<div class="flex flex-col gap-1.5"> {{ opt.label }}
<span>{{ t('side_panel.settings.sort_tertiary') }}</span> </SelectItem>
<Select </SelectContent>
:model-value="sidebarSortMethod3" </Select>
:disabled="!sidebarSortMethod2" </FieldContent>
@update:modelValue="(v) => setSidebarSortMethod3(v === CLEAR_VALUE ? '' : v)"> </Field>
<SelectTrigger size="sm"> <Field>
<SelectValue <FieldLabel>{{ t('side_panel.settings.sort_tertiary') }}</FieldLabel>
:placeholder=" <FieldContent>
t('view.settings.appearance.side_panel.sorting.placeholder') <Select
" /> :model-value="sidebarSortMethod3"
</SelectTrigger> :disabled="!sidebarSortMethod2"
<SelectContent> @update:modelValue="(v) => setSidebarSortMethod3(v === CLEAR_VALUE ? '' : v)">
<SelectItem :value="CLEAR_VALUE">{{ <SelectTrigger size="sm">
t('dialog.gallery_select.none') <SelectValue
}}</SelectItem> :placeholder="
<SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value"> t('view.settings.appearance.side_panel.sorting.placeholder')
{{ opt.label }} " />
</SelectItem> </SelectTrigger>
</SelectContent> <SelectContent>
</Select> <SelectItem :value="CLEAR_VALUE">{{
</div> t('dialog.gallery_select.none')
}}</SelectItem>
<SelectItem v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
{{ opt.label }}
</SelectItem>
</SelectContent>
</Select>
</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>