MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-28 11:13:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve dialog layout

Browse Source
This commit is contained in:
pa
2026-03-19 21:38:09 +09:00
parent f9d3f7089b
commit fbfaf7b93c
7 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="w-223">
<div class="w-223 flex-1 min-h-0 flex flex-col">
<DialogHeader class="sr-only">
<DialogTitle>{{ avatarDialog.ref?.name || t('dialog.avatar.info.header') }}</DialogTitle>
<DialogDescription>
{{ avatarDialog.ref?.description || avatarDialog.ref?.name || t('dialog.avatar.info.header') }}
</DialogDescription>
</DialogHeader>
<div>
<div class="flex">
<div class="flex-1 min-h-0 flex flex-col">
<div class="flex flex-shrink-0">
<div style="flex: none; width: 160px; height: 120px">
<img
v-if="!imageError"
@@ -320,6 +320,7 @@
v-model="avatarDialog.activeTab"
:items="avatarDialogTabs"
:unmount-on-hide="false"
fill
@update:modelValue="avatarDialogTabClick">
<template #Info>
<div class="flex flex-wrap items-start px-2.5" style="max-height: unset">
@@ -584,7 +585,6 @@
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
useAuthStore,
useAvatarStore,

7
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="w-223">
<div class="w-223 flex-1 min-h-0 flex flex-col">
<DialogHeader class="sr-only">
<DialogTitle>{{ groupDialog.ref?.name || t('dialog.group.info.header') }}</DialogTitle>
<DialogDescription>
{{ groupDialog.ref?.description || groupDialog.ref?.name || t('dialog.group.info.header') }}
</DialogDescription>
</DialogHeader>
<div>
<div style="display: flex">
<div class="flex-1 min-h-0 flex flex-col">
<div class="flex-shrink-0" style="display: flex">
<div style="flex: none; width: 120px; height: 120px">
<img
v-if="!groupDialog.loading && !imageError"
@@ -341,6 +341,7 @@
v-model="groupDialog.activeTab"
:items="groupDialogTabs"
:unmount-on-hide="false"
fill
@update:modelValue="groupDialogTabClick">
<template #Info>
<GroupDialogInfoTab

10
src/components/dialogs/MainDialogContainer.vue
View File

@@ -109,11 +109,11 @@
const dialogClass = computed(() => {
switch (activeType.value) {
case 'world':
return 'x-dialog x-world-dialog translate-y-0 sm:max-w-235';
return 'x-dialog translate-y-0 sm:max-w-235 overflow-hidden flex flex-col';
case 'avatar':
return 'x-dialog x-avatar-dialog sm:max-w-235 translate-y-0';
return 'x-dialog sm:max-w-235 translate-y-0 overflow-hidden flex flex-col';
case 'group':
return 'x-dialog x-group-dialog group-body translate-y-0 sm:max-w-235';
return 'x-dialog translate-y-0 sm:max-w-235 overflow-hidden flex flex-col';
case 'previous-instances-info':
case 'previous-instances-user':
case 'previous-instances-world':
@@ -121,7 +121,7 @@
return 'x-dialog translate-y-0 sm:max-w-250';
case 'user':
default:
return 'x-dialog x-user-dialog sm:max-w-235 translate-y-0';
return 'x-dialog sm:max-w-235 translate-y-0 overflow-hidden flex flex-col';
}
});
@@ -149,7 +149,7 @@
<template>
<Dialog v-if="isOpen" v-model:open="isOpen">
<DialogContent :class="dialogClass" style="top: 10vh" :show-close-button="false">
<Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2">
<Breadcrumb v-if="shouldShowBreadcrumbs" class="mb-2 flex-shrink-0">
<BreadcrumbList>
<TooltipWrapper :content="backCrumbLabel" :disabled="!backCrumbLabel" :delayDuration="500">
<Button variant="ghost" size="icon-sm" @click="handleBreadcrumbClick(dialogCrumbs.length - 2)">

4
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="w-223">
<div class="w-223 flex-1 min-h-0 flex flex-col">
<DialogHeader class="sr-only">
<DialogTitle>{{
userDialog.ref?.displayName || userDialog.id || t('dialog.user.info.header')
@@ -7,6 +7,7 @@
<DialogDescription>{{ getUserStateText(userDialog.ref || {}) }}</DialogDescription>
</DialogHeader>
<UserSummaryHeader
class="flex-shrink-0"
:get-user-state-text="getUserStateText"
:copy-user-display-name="copyUserDisplayName"
:toggle-badge-visibility="toggleBadgeVisibility"
@@ -17,6 +18,7 @@
v-model="userDialog.activeTab"
:items="userDialogTabs"
:unmount-on-hide="false"
fill
@update:modelValue="userDialogTabClick">
<template #Info>
<UserDialogInfoTab ref="infoTabRef" @show-bio-dialog="showBioDialog" />

7
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="w-223">
<div class="w-223 flex-1 min-h-0 flex flex-col">
<DialogHeader class="sr-only">
<DialogTitle>{{ worldDialog.ref?.name || t('dialog.world.info.header') }}</DialogTitle>
<DialogDescription>
{{ worldDialog.ref?.description || worldDialog.ref?.name || t('dialog.world.info.header') }}
</DialogDescription>
</DialogHeader>
<div>
<div style="display: flex">
<div class="flex-1 min-h-0 flex flex-col">
<div class="flex-shrink-0" style="display: flex">
<div style="flex: none; width: 160px; height: 120px">
<img
v-if="!worldDialog.loading && !imageError"
@@ -313,6 +313,7 @@
v-model="worldDialog.activeTab"
:items="worldDialogTabs"
:unmount-on-hide="false"
fill
@update:modelValue="worldDialogTabClick">
<template #Instances>
<WorldDialogInstancesTab />