dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modal: Refine enter animation (#1080)

Browse source 
This PR adds a fade in animation for modals, which makes the UI looks
smoother.


https://github.com/user-attachments/assets/7671aa78-a3bd-43a6-ace7-d051d24f2523

---------

Co-authored-by: Jason Lee <huacnlee@gmail.com>
This commit is contained in:
Cyandev 2025-07-23 10:29:42 +08:00 committed by GitHub
parent 7d3301d695
commit dfbda3999a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
Cargo.lock generated
View file

@ -733,7 +733,7 @@ dependencies = [
"bitflags 2.9.1", "bitflags 2.9.1",
"cexpr", "cexpr",
"clang-sys", "clang-sys",
"itertools 0.11.0", "itertools 0.10.5",
"lazy_static", "lazy_static",
"lazycell", "lazycell",
"log", "log",
@ -756,7 +756,7 @@ dependencies = [
"bitflags 2.9.1", "bitflags 2.9.1",
"cexpr", "cexpr",
"clang-sys", "clang-sys",
"itertools 0.11.0", "itertools 0.10.5",
"log", "log",
"prettyplease", "prettyplease",
"proc-macro2", "proc-macro2",
@ -1432,7 +1432,7 @@ dependencies = [
[[package]] [[package]]
name = "collections" name = "collections"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"indexmap 2.9.0", "indexmap 2.9.0",
"rustc-hash 2.1.0", "rustc-hash 2.1.0",
@ -1990,7 +1990,7 @@ dependencies = [
[[package]] [[package]]
name = "derive_refineable" name = "derive_refineable"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"proc-macro2", "proc-macro2",
"quote", "quote",
@ -3142,7 +3142,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui" name = "gpui"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"as-raw-xcb-connection", "as-raw-xcb-connection",
@ -3327,7 +3327,7 @@ dependencies = [
[[package]] [[package]]
name = "gpui_macros" name = "gpui_macros"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"heck 0.5.0", "heck 0.5.0",
"proc-macro2", "proc-macro2",
@ -3338,9 +3338,9 @@ dependencies = [
[[package]] [[package]]
name = "grid" name = "grid"
version = "0.14.0" version = "0.17.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "be136d9dacc2a13cc70bb6c8f902b414fb2641f8db1314637c6b7933411a8f82" checksum = "71b01d27060ad58be4663b9e4ac9e2d4806918e8876af8912afbddd1a91d5eaa"
[[package]] [[package]]
name = "gtk" name = "gtk"
@ -3597,13 +3597,14 @@ dependencies = [
[[package]] [[package]]
name = "http_client" name = "http_client"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"bytes", "bytes",
"derive_more", "derive_more",
"futures", "futures",
"http", "http",
"http-body",
"log", "log",
"serde", "serde",
"serde_json", "serde_json",
@ -3614,7 +3615,7 @@ dependencies = [
[[package]] [[package]]
name = "http_client_tls" name = "http_client_tls"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"rustls", "rustls",
"rustls-platform-verifier", "rustls-platform-verifier",
@ -4440,7 +4441,7 @@ dependencies = [
[[package]] [[package]]
name = "media" name = "media"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"bindgen 0.71.1", "bindgen 0.71.1",
@ -6389,7 +6390,7 @@ dependencies = [
[[package]] [[package]]
name = "refineable" name = "refineable"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"derive_refineable", "derive_refineable",
"workspace-hack", "workspace-hack",
@ -6544,7 +6545,7 @@ dependencies = [
[[package]] [[package]]
name = "reqwest_client" name = "reqwest_client"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"bytes", "bytes",
@ -7120,7 +7121,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a"
[[package]] [[package]]
name = "semantic_version" name = "semantic_version"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"serde", "serde",
@ -7703,7 +7704,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
[[package]] [[package]]
name = "sum_tree" name = "sum_tree"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"arrayvec", "arrayvec",
"log", "log",
@ -7906,13 +7907,12 @@ dependencies = [
[[package]] [[package]]
name = "taffy" name = "taffy"
version = "0.5.1" version = "0.8.3"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e8b61630cba2afd2c851821add2e1bb1b7851a2436e839ab73b56558b009035e" checksum = "7aaef0ac998e6527d6d0d5582f7e43953bb17221ac75bb8eb2fcc2db3396db1c"
dependencies = [ dependencies = [
"arrayvec", "arrayvec",
"grid", "grid",
"num-traits",
"serde", "serde",
"slotmap", "slotmap",
] ]
@ -8931,7 +8931,7 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
[[package]] [[package]]
name = "util" name = "util"
version = "0.1.0" version = "0.1.0"
source = "git+https://github.com/zed-industries/zed.git#5a530ecd39f8be386a98cabef45c13163ff1da19" source = "git+https://github.com/zed-industries/zed.git#3e27fa1d92d084a3374691a83bd3ab5766b14ad8"
dependencies = [ dependencies = [
"anyhow", "anyhow",
"async-fs 2.1.2", "async-fs 2.1.2",

41
crates/ui/src/modal.rs
View file

@ -2,9 +2,9 @@ use std::{rc::Rc, time::Duration};
use gpui::{ use gpui::{
anchored, div, hsla, point, prelude::FluentBuilder, px, relative, Animation, AnimationExt as _, anchored, div, hsla, point, prelude::FluentBuilder, px, relative, Animation, AnimationExt as _,
AnyElement, App, Axis, Bounds, ClickEvent, Div, FocusHandle, Hsla, InteractiveElement, AnyElement, App, Axis, Bounds, BoxShadow, ClickEvent, Div, FocusHandle, Hsla,
IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point, RenderOnce, SharedString, InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point,
StyleRefinement, Styled, Window, RenderOnce, SharedString, StyleRefinement, Styled, Window,
}; };
use rust_i18n::t; use rust_i18n::t;
@ -363,6 +363,9 @@ impl RenderOnce for Modal {
padding_right = pr.to_pixels(self.width.into(), window.rem_size()); padding_right = pr.to_pixels(self.width.into(), window.rem_size());
} }
let animation = Animation::new(Duration::from_secs_f64(0.25))
.with_easing(cubic_bezier(0.32, 0.72, 0., 1.));
anchored() anchored()
.position(point(window_paddings.left, window_paddings.top)) .position(point(window_paddings.left, window_paddings.top))
.snap_to_window() .snap_to_window()
@ -397,7 +400,6 @@ impl RenderOnce for Modal {
.border_1() .border_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.rounded(cx.theme().radius_lg) .rounded(cx.theme().radius_lg)
.shadow_xl()
.min_h_24() .min_h_24()
.py_6() .py_6()
.gap_4() .gap_4()
@ -490,16 +492,27 @@ impl RenderOnce for Modal {
.children(footer(render_ok, render_cancel, window, cx)), .children(footer(render_ok, render_cancel, window, cx)),
) )
}) })
.with_animation( .with_animation("slide-down", animation.clone(), move |this, delta| {
"slide-down", let y_offset = px(0.) + delta * px(30.);
Animation::new(Duration::from_secs_f64(0.25)) // This is equivalent to `shadow_xl` with an extra opacity.
.with_easing(cubic_bezier(0.32, 0.72, 0., 1.)), let shadow = vec![
move |this, delta| { BoxShadow {
let y_offset = px(0.) + delta * px(30.); color: hsla(0., 0., 0., 0.1 * delta),
this.top(y + y_offset) offset: point(px(0.), px(20.)),
}, blur_radius: px(25.),
), spread_radius: px(-5.),
), },
BoxShadow {
color: hsla(0., 0., 0., 0.1 * delta),
offset: point(px(0.), px(8.)),
blur_radius: px(10.),
spread_radius: px(-6.),
},
];
this.top(y + y_offset).shadow(shadow)
}),
)
.with_animation("fade-in", animation, move |this, delta| this.opacity(delta)),
) )
} }
} }