upstream-archive/llama.cpp
1
0
Fork 0
mirror of https://github.com/ggml-org/llama.cpp.git synced 2026-10-03 03:17:32 -05:00
Code Issues Packages Projects Releases Wiki Activity

ui : give the configuration drawer a drawer curve

Browse Source 
Opening takes the iOS-like curve, closing is the system responding and
snaps back faster, and reduced motion keeps the fade while dropping the
slide. The content fade waits for the drawer to move so it reads.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
This commit is contained in:
Aleksander Grygier
2026-09-28 12:10:13 +02:00
parent a8a19c95f6
commit ed7310b2f5
1 changed files with 37 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte
+37 -7
View File
@@ -279,15 +279,12 @@
/>
</div>
<div
class="invisible w-0 shrink-0 overflow-clip transition-[width,visibility] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-[open=true]:visible data-[open=true]:w-[30rem]"
data-open={selected !== null}
>
<div class="pane-drawer shrink-0" data-open={selected !== null}>
<!-- the content box keeps the open width, so it never reflows with the drawer -->
<div
class="flex h-full min-h-0 w-[30rem] max-w-[30rem] flex-col border-l border-border/40 transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] {selected
? 'opacity-100'
: 'opacity-0'}"
class="flex h-full min-h-0 w-[30rem] max-w-[30rem] flex-col border-l border-border/40 transition-opacity ease-[cubic-bezier(0.23,1,0.32,1)] {selected
? 'opacity-100 delay-100 duration-200'
: 'opacity-0 delay-0 duration-150'}"
>
{#if paneOption}
{@const shown = paneOption}
@@ -307,3 +304,36 @@
</div>
</div>
</div>
<style>
/*
* The drawer moves by width because the table behind it gets that space back, so
* the content box inside holds the open width and only the container changes.
* Opening takes the iOS-like drawer curve; closing is the system responding, so
* it snaps back on the stronger ease-out.
*/
.pane-drawer {
width: 0;
overflow: clip;
visibility: hidden;
transition:
width 150ms cubic-bezier(0.23, 1, 0.32, 1),
visibility 150ms;
}
.pane-drawer[data-open='true'] {
width: 30rem;
visibility: visible;
transition:
width 250ms cubic-bezier(0.32, 0.72, 0, 1),
visibility 250ms;
}
/* reduced motion keeps the fade and drops the slide */
@media (prefers-reduced-motion: reduce) {
.pane-drawer,
.pane-drawer[data-open='true'] {
transition: visibility 150ms;
}
}
</style>