Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-04 13:12:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add slide-in animation for right panel in BaseModalLayout

Browse Source
This commit is contained in:
Alexander Brown
2026-01-16 16:49:55 -08:00
parent ea78e3c2a3
commit 9146b33659
2 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/widget/layout/BaseModalLayout.vue
View File

@@ -14,7 +14,7 @@
</nav>
</Transition>
<div class="flex-1 flex bg-base-background">
<div class="flex-1 flex bg-base-background overflow-hidden">
<div class="flex h-full w-full flex-col">
<header
v-if="$slots.header"
@@ -65,32 +65,35 @@
</div>
</main>
</div>
<aside
v-if="hasRightPanel && isRightPanelOpen"
class="flex w-72 shrink-0 bg-modal-panel-background flex-col"
>
<header
data-component-id="RightPanelHeader"
class="flex h-16 shrink-0 items-center gap-2 px-4"
<Transition name="slide-panel-right">
<aside
v-if="hasRightPanel && isRightPanelOpen"
key="right-panel"
class="flex w-72 shrink-0 bg-modal-panel-background flex-col"
>
<h2 v-if="rightPanelTitle" class="flex-1 text-lg font-semibold">
{{ rightPanelTitle }}
</h2>
<div v-else class="flex-1">
<slot name="rightPanelHeaderTitle" />
<header
data-component-id="RightPanelHeader"
class="flex h-16 shrink-0 items-center gap-2 px-4"
>
<h2 v-if="rightPanelTitle" class="flex-1 text-lg font-semibold">
{{ rightPanelTitle }}
</h2>
<div v-else class="flex-1">
<slot name="rightPanelHeaderTitle" />
</div>
<slot name="rightPanelHeaderActions" />
<Button size="icon" @click="toggleRightPanel">
<i class="icon-[lucide--panel-right-close] text-sm" />
</Button>
<Button size="icon" @click="closeDialog">
<i class="pi pi-times" />
</Button>
</header>
<div class="min-h-0 flex-1 overflow-y-auto">
<slot name="rightPanel" />
</div>
<slot name="rightPanelHeaderActions" />
<Button size="icon" @click="toggleRightPanel">
<i class="icon-[lucide--panel-right-close] text-sm" />
</Button>
<Button size="icon" @click="closeDialog">
<i class="pi pi-times" />
</Button>
</header>
<div class="min-h-0 flex-1 overflow-y-auto">
<slot name="rightPanel" />
</div>
</aside>
</aside>
</Transition>
</div>
</div>
</div>
@@ -201,4 +204,21 @@ const toggleRightPanel = () => {
.slide-panel-leave-to {
transform: translateX(-100%);
}
/* Slide transition for right panel */
.slide-panel-right-enter-active,
.slide-panel-right-leave-active {
position: absolute;
right: 0;
top: 0;
height: 100%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
backface-visibility: hidden;
}
.slide-panel-right-enter-from,
.slide-panel-right-leave-to {
transform: translateX(100%);
}
</style>