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

improve Breadcrumb navigation with back button and tooltips

Browse Source
This commit is contained in:
pa
2026-02-03 21:27:48 +09:00
parent 20457ff082
commit f87dde04f8
2 changed files with 66 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialogs/MainDialogContainer.vue
+48 -10
View File
@@ -16,6 +16,9 @@
DropdownMenuTrigger DropdownMenuTrigger
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { Dialog, DialogContent } from '@/components/ui/dialog'; import { Dialog, DialogContent } from '@/components/ui/dialog';
import { ArrowLeft } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { TooltipWrapper } from '@/components/ui/tooltip';
import { computed } from 'vue'; import { computed } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@@ -130,6 +133,13 @@
} }
return dialogCrumbs.value.slice(1, -2); return dialogCrumbs.value.slice(1, -2);
}); });
const backCrumbLabel = computed(() => {
if (dialogCrumbs.value.length < 2) {
return '';
}
const backCrumb = dialogCrumbs.value[dialogCrumbs.value.length - 2];
return backCrumb?.label || backCrumb?.id || '';
});
function handleBreadcrumbClick(index) { function handleBreadcrumbClick(index) {
uiStore.handleBreadcrumbClick(index); uiStore.handleBreadcrumbClick(index);
@@ -141,16 +151,28 @@
<DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false"> <DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
<Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2"> <Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
<BreadcrumbList> <BreadcrumbList>
<TooltipWrapper :content="backCrumbLabel" :disabled="!backCrumbLabel" :delayDuration="500">
<Button variant="ghost" size="icon-sm" @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
<ArrowLeft />
<span class="sr-only">{{ backCrumbLabel }}</span>
</Button>
</TooltipWrapper>
<template v-if="shouldCollapseBreadcrumbs"> <template v-if="shouldCollapseBreadcrumbs">
<BreadcrumbItem> <BreadcrumbItem>
<TooltipWrapper
:content="dialogCrumbs[0]?.label || dialogCrumbs[0]?.id"
:delayDuration="500">
<BreadcrumbLink as-child> <BreadcrumbLink as-child>
<button <Button
type="button" type="button"
class="max-w-40 truncate text-left" variant="ghost"
size="sm"
class="max-w-40 justify-start truncate text-left"
@click="handleBreadcrumbClick(0)"> @click="handleBreadcrumbClick(0)">
{{ dialogCrumbs[0]?.label || dialogCrumbs[0]?.id }} {{ dialogCrumbs[0]?.label || dialogCrumbs[0]?.id }}
</button> </Button>
</BreadcrumbLink> </BreadcrumbLink>
</TooltipWrapper>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator /> <BreadcrumbSeparator />
<BreadcrumbItem> <BreadcrumbItem>
@@ -170,17 +192,26 @@
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator /> <BreadcrumbSeparator />
<BreadcrumbItem> <BreadcrumbItem>
<TooltipWrapper
:content="
dialogCrumbs[dialogCrumbs.length - 2]?.label ||
dialogCrumbs[dialogCrumbs.length - 2]?.id
"
:delayDuration="500">
<BreadcrumbLink as-child> <BreadcrumbLink as-child>
<button <Button
type="button" type="button"
class="max-w-40 truncate text-left" variant="ghost"
size="sm"
class="max-w-40 justify-start truncate text-left"
@click="handleBreadcrumbClick(dialogCrumbs.length - 2)"> @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">
{{ {{
dialogCrumbs[dialogCrumbs.length - 2]?.label || dialogCrumbs[dialogCrumbs.length - 2]?.label ||
dialogCrumbs[dialogCrumbs.length - 2]?.id dialogCrumbs[dialogCrumbs.length - 2]?.id
}} }}
</button> </Button>
</BreadcrumbLink> </BreadcrumbLink>
</TooltipWrapper>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbSeparator /> <BreadcrumbSeparator />
<BreadcrumbItem> <BreadcrumbItem>
@@ -195,14 +226,21 @@
<template v-else> <template v-else>
<template v-for="(crumb, index) in dialogCrumbs" :key="`${crumb.type}-${crumb.id}`"> <template v-for="(crumb, index) in dialogCrumbs" :key="`${crumb.type}-${crumb.id}`">
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink v-if="index < dialogCrumbs.length - 1" as-child> <TooltipWrapper
<button v-if="index < dialogCrumbs.length - 1"
:content="crumb.label || crumb.id"
:delayDuration="500">
<BreadcrumbLink as-child>
<Button
type="button" type="button"
class="max-w-40 truncate text-left" variant="ghost"
size="sm"
class="max-w-40 justify-start truncate text-left"
@click="handleBreadcrumbClick(index)"> @click="handleBreadcrumbClick(index)">
{{ crumb.label || crumb.id }} {{ crumb.label || crumb.id }}
</button> </Button>
</BreadcrumbLink> </BreadcrumbLink>
</TooltipWrapper>
<BreadcrumbPage v-else class="max-w-40 truncate"> <BreadcrumbPage v-else class="max-w-40 truncate">
{{ crumb.label || crumb.id }} {{ crumb.label || crumb.id }}
</BreadcrumbPage> </BreadcrumbPage>
src/views/FriendsLocations/components/FriendsLocationsCard.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="friend-card__name ml-0.5" :title="friend.name">{{ friend.name }}</div> <div class="friend-card__name ml-0.5" :title="friend.name">{{ friend.name }}</div>
</div> </div>
<div class="friend-card__body"> <div class="friend-card__body">
<div class="friend-card__signature" :title="friend.ref?.statusDescription"> <div class="friend-card__signature ml-1" :title="friend.ref?.statusDescription">
<Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-1" style="opacity: 0.7" /> <Pencil v-if="friend.ref?.statusDescription" class="h-3.5 w-3.5 mr-1" style="opacity: 0.7" />
{{ friend.ref?.statusDescription || '&nbsp;' }} {{ friend.ref?.statusDescription || '&nbsp;' }}
</div> </div>