github/VRCX
1
1
Fork 0
mirror of https://github.com/vrcx-team/VRCX.git synced 2026-04-06 00:32:02 +02:00
Code Issues 51 Packages Projects Releases Wiki Activity

refactor: use dialog for favorite friend group order settings instead of sheet

Browse Source
This commit is contained in:
pa
2026-03-23 19:32:54 +09:00
parent 387d38a496
commit e6ec7e6150
3 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/Sidebar/Sidebar.vue
View File

@@ -35,8 +35,7 @@
size="icon-sm"
@click="isNotificationCenterOpen = !isNotificationCenterOpen">
<Bell />
<span
class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
<span class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
</Button>
</TooltipWrapper>
</ContextMenuTrigger>
@@ -95,7 +94,7 @@
class="w-full text-sm"
@click="
isSettingsPopoverOpen = false;
isGroupOrderSheetOpen = true;
isGroupOrderDialogOpen = true;
">
{{ t('side_panel.settings.edit_group_order') }}
</Button>
@@ -245,7 +244,7 @@
</template>
</TabsUnderline>
<NotificationCenterSheet />
<GroupOrderSheet v-model:open="isGroupOrderSheetOpen" />
<FavoriteFriendGroupOrderDialog v-model:open="isGroupOrderDialogOpen" />
<QuickSearchDialog />
</div>
</template>
@@ -289,7 +288,7 @@
import FriendsSidebar from './components/FriendsSidebar.vue';
import QuickSearchDialog from '../../components/QuickSearchDialog.vue';
import GroupOrderSheet from './components/GroupOrderSheet.vue';
import FavoriteFriendGroupOrderDialog from './components/FavoriteFriendGroupOrderDialog.vue';
import GroupsSidebar from './components/GroupsSidebar.vue';
import NotificationCenterSheet from './components/NotificationCenterSheet.vue';
@@ -374,7 +373,7 @@
});
const CLEAR_VALUE = '__clear__';
const isGroupOrderSheetOpen = ref(false);
const isGroupOrderDialogOpen = ref(false);
const isSettingsPopoverOpen = ref(false);
const sortOptions = computed(() => [

2
src/views/Sidebar/__tests__/Sidebar.test.js
View File

@@ -129,7 +129,7 @@ vi.mock('../components/FriendsSidebar.vue', () => ({
vi.mock('../components/GroupsSidebar.vue', () => ({
default: { template: '<div />' }
}));
vi.mock('../components/GroupOrderSheet.vue', () => ({
vi.mock('../components/FavoriteFriendGroupOrderDialog.vue', () => ({
default: { template: '<div />' }
}));
vi.mock('../components/NotificationCenterSheet.vue', () => ({

22
src/views/Sidebar/components/GroupOrderSheet.vue → src/views/Sidebar/components/FavoriteFriendGroupOrderDialog.vue
View File

@@ -1,10 +1,10 @@
<template>
<Sheet v-model:open="isOpen">
<SheetContent side="right" class="w-80 flex flex-col" @open-auto-focus.prevent>
<SheetHeader>
<SheetTitle>{{ t('side_panel.settings.edit_group_order') }}</SheetTitle>
</SheetHeader>
<div class="flex-1 overflow-auto p-3">
<Dialog v-model:open="isOpen">
<DialogContent class="w-80 flex flex-col max-h-[80vh]" @open-auto-focus.prevent>
<DialogHeader>
<DialogTitle>{{ t('side_panel.settings.edit_group_order') }}</DialogTitle>
</DialogHeader>
<div class="flex-1 overflow-auto py-3">
<DragDropProvider @dragEnd="onDragEnd">
<div class="flex flex-col gap-1.5">
<SortableGroupItem
@@ -16,20 +16,20 @@
</div>
</DragDropProvider>
</div>
<div class="flex justify-end gap-2 border-t p-3">
<DialogFooter>
<Button variant="secondary" size="sm" @click="resetOrder">
{{ t('common.actions.reset') }}
</Button>
<Button size="sm" @click="confirmOrder">
{{ t('common.actions.confirm') }}
</Button>
</div>
</SheetContent>
</Sheet>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
<script setup>
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { DragDropProvider } from '@dnd-kit/vue';