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",
"cexpr",
"clang-sys",
"itertools 0.11.0",
"itertools 0.10.5",
"lazy_static",
"lazycell",
"log",
@ -756,7 +756,7 @@ dependencies = [
"bitflags 2.9.1",
"cexpr",
"clang-sys",
"itertools 0.11.0",
"itertools 0.10.5",
"log",
"prettyplease",
"proc-macro2",
@ -1432,7 +1432,7 @@ dependencies = [
[[package]]
name = "collections"
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 = [
"indexmap 2.9.0",
"rustc-hash 2.1.0",
@ -1990,7 +1990,7 @@ dependencies = [
[[package]]
name = "derive_refineable"
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 = [
"proc-macro2",
"quote",
@ -3142,7 +3142,7 @@ dependencies = [
[[package]]
name = "gpui"
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 = [
"anyhow",
"as-raw-xcb-connection",
@ -3327,7 +3327,7 @@ dependencies = [
[[package]]
name = "gpui_macros"
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 = [
"heck 0.5.0",
"proc-macro2",
@ -3338,9 +3338,9 @@ dependencies = [
[[package]]
name = "grid"
version = "0.14.0"
version = "0.17.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "be136d9dacc2a13cc70bb6c8f902b414fb2641f8db1314637c6b7933411a8f82"
checksum = "71b01d27060ad58be4663b9e4ac9e2d4806918e8876af8912afbddd1a91d5eaa"
[[package]]
name = "gtk"
@ -3597,13 +3597,14 @@ dependencies = [
[[package]]
name = "http_client"
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 = [
"anyhow",
"bytes",
"derive_more",
"futures",
"http",
"http-body",
"log",
"serde",
"serde_json",
@ -3614,7 +3615,7 @@ dependencies = [
[[package]]
name = "http_client_tls"
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 = [
"rustls",
"rustls-platform-verifier",
@ -4440,7 +4441,7 @@ dependencies = [
[[package]]
name = "media"
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 = [
"anyhow",
"bindgen 0.71.1",
@ -6389,7 +6390,7 @@ dependencies = [
[[package]]
name = "refineable"
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 = [
"derive_refineable",
"workspace-hack",
@ -6544,7 +6545,7 @@ dependencies = [
[[package]]
name = "reqwest_client"
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 = [
"anyhow",
"bytes",
@ -7120,7 +7121,7 @@ checksum = "d369a96f978623eb3dc28807c4852d6cc617fed53da5d3c400feff1ef34a714a"
[[package]]
name = "semantic_version"
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 = [
"anyhow",
"serde",
@ -7703,7 +7704,7 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
[[package]]
name = "sum_tree"
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 = [
"arrayvec",
"log",
@ -7906,13 +7907,12 @@ dependencies = [
[[package]]
name = "taffy"
version = "0.5.1"
version = "0.8.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e8b61630cba2afd2c851821add2e1bb1b7851a2436e839ab73b56558b009035e"
checksum = "7aaef0ac998e6527d6d0d5582f7e43953bb17221ac75bb8eb2fcc2db3396db1c"
dependencies = [
"arrayvec",
"grid",
"num-traits",
"serde",
"slotmap",
]
@ -8931,7 +8931,7 @@ checksum = "06abde3611657adf66d383f00b093d7faecc7fa57071cce2578660c9f1010821"
[[package]]
name = "util"
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 = [
"anyhow",
"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::{
anchored, div, hsla, point, prelude::FluentBuilder, px, relative, Animation, AnimationExt as _,
AnyElement, App, Axis, Bounds, ClickEvent, Div, FocusHandle, Hsla, InteractiveElement,
IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point, RenderOnce, SharedString,
StyleRefinement, Styled, Window,
AnyElement, App, Axis, Bounds, BoxShadow, ClickEvent, Div, FocusHandle, Hsla,
InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point,
RenderOnce, SharedString, StyleRefinement, Styled, Window,
};
use rust_i18n::t;
@ -363,6 +363,9 @@ impl RenderOnce for Modal {
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()
.position(point(window_paddings.left, window_paddings.top))
.snap_to_window()
@ -397,7 +400,6 @@ impl RenderOnce for Modal {
.border_1()
.border_color(cx.theme().border)
.rounded(cx.theme().radius_lg)
.shadow_xl()
.min_h_24()
.py_6()
.gap_4()
@ -490,16 +492,27 @@ impl RenderOnce for Modal {
.children(footer(render_ok, render_cancel, window, cx)),
)
})
.with_animation(
"slide-down",
Animation::new(Duration::from_secs_f64(0.25))
.with_easing(cubic_bezier(0.32, 0.72, 0., 1.)),
move |this, delta| {
let y_offset = px(0.) + delta * px(30.);
this.top(y + y_offset)
},
),
),
.with_animation("slide-down", animation.clone(), move |this, delta| {
let y_offset = px(0.) + delta * px(30.);
// This is equivalent to `shadow_xl` with an extra opacity.
let shadow = vec![
BoxShadow {
color: hsla(0., 0., 0., 0.1 * delta),
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)),
)
}
}