MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 06:46:04 +02:00
Code Issues 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
src/views/Sidebar/Sidebar.vue
+5 -6
View File
@@ -35,8 +35,7 @@
size="icon-sm" size="icon-sm"
@click="isNotificationCenterOpen = !isNotificationCenterOpen"> @click="isNotificationCenterOpen = !isNotificationCenterOpen">
<Bell /> <Bell />
<span <span class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
</Button> </Button>
</TooltipWrapper> </TooltipWrapper>
</ContextMenuTrigger> </ContextMenuTrigger>
@@ -95,7 +94,7 @@
class="w-full text-sm" class="w-full text-sm"
@click=" @click="
isSettingsPopoverOpen = false; isSettingsPopoverOpen = false;
isGroupOrderSheetOpen = true; isGroupOrderDialogOpen = true;
"> ">
{{ t('side_panel.settings.edit_group_order') }} {{ t('side_panel.settings.edit_group_order') }}
</Button> </Button>
@@ -245,7 +244,7 @@
</template> </template>
</TabsUnderline> </TabsUnderline>
<NotificationCenterSheet /> <NotificationCenterSheet />
<GroupOrderSheet v-model:open="isGroupOrderSheetOpen" /> <FavoriteFriendGroupOrderDialog v-model:open="isGroupOrderDialogOpen" />
<QuickSearchDialog /> <QuickSearchDialog />
</div> </div>
</template> </template>
@@ -289,7 +288,7 @@
import FriendsSidebar from './components/FriendsSidebar.vue'; import FriendsSidebar from './components/FriendsSidebar.vue';
import QuickSearchDialog from '../../components/QuickSearchDialog.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 GroupsSidebar from './components/GroupsSidebar.vue';
import NotificationCenterSheet from './components/NotificationCenterSheet.vue'; import NotificationCenterSheet from './components/NotificationCenterSheet.vue';
@@ -374,7 +373,7 @@
}); });
const CLEAR_VALUE = '__clear__'; const CLEAR_VALUE = '__clear__';
const isGroupOrderSheetOpen = ref(false); const isGroupOrderDialogOpen = ref(false);
const isSettingsPopoverOpen = ref(false); const isSettingsPopoverOpen = ref(false);
const sortOptions = computed(() => [ const sortOptions = computed(() => [
src/views/Sidebar/__tests__/Sidebar.test.js
+1 -1
View File
@@ -129,7 +129,7 @@ vi.mock('../components/FriendsSidebar.vue', () => ({
vi.mock('../components/GroupsSidebar.vue', () => ({ vi.mock('../components/GroupsSidebar.vue', () => ({
default: { template: '<div />' } default: { template: '<div />' }
})); }));
vi.mock('../components/GroupOrderSheet.vue', () => ({ vi.mock('../components/FavoriteFriendGroupOrderDialog.vue', () => ({
default: { template: '<div />' } default: { template: '<div />' }
})); }));
vi.mock('../components/NotificationCenterSheet.vue', () => ({ vi.mock('../components/NotificationCenterSheet.vue', () => ({
src/views/Sidebar/components/GroupOrderSheet.vue → src/views/Sidebar/components/FavoriteFriendGroupOrderDialog.vue
+11 -11
View File
@@ -1,10 +1,10 @@
<template> <template>
<Sheet v-model:open="isOpen"> <Dialog v-model:open="isOpen">
<SheetContent side="right" class="w-80 flex flex-col" @open-auto-focus.prevent> <DialogContent class="w-80 flex flex-col max-h-[80vh]" @open-auto-focus.prevent>
<SheetHeader> <DialogHeader>
<SheetTitle>{{ t('side_panel.settings.edit_group_order') }}</SheetTitle> <DialogTitle>{{ t('side_panel.settings.edit_group_order') }}</DialogTitle>
</SheetHeader> </DialogHeader>
<div class="flex-1 overflow-auto p-3"> <div class="flex-1 overflow-auto py-3">
<DragDropProvider @dragEnd="onDragEnd"> <DragDropProvider @dragEnd="onDragEnd">
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
<SortableGroupItem <SortableGroupItem
@@ -16,20 +16,20 @@
</div> </div>
</DragDropProvider> </DragDropProvider>
</div> </div>
<div class="flex justify-end gap-2 border-t p-3"> <DialogFooter>
<Button variant="secondary" size="sm" @click="resetOrder"> <Button variant="secondary" size="sm" @click="resetOrder">
{{ t('common.actions.reset') }} {{ t('common.actions.reset') }}
</Button> </Button>
<Button size="sm" @click="confirmOrder"> <Button size="sm" @click="confirmOrder">
{{ t('common.actions.confirm') }} {{ t('common.actions.confirm') }}
</Button> </Button>
</div> </DialogFooter>
</SheetContent> </DialogContent>
</Sheet> </Dialog>
</template> </template>
<script setup> <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 { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { DragDropProvider } from '@dnd-kit/vue'; import { DragDropProvider } from '@dnd-kit/vue';