From dfbda3999a2533efc6b7d92e3a04401c35406bdd Mon Sep 17 00:00:00 2001 From: Cyandev Date: Wed, 23 Jul 2025 10:29:42 +0800 Subject: [PATCH] modal: Refine enter animation (#1080) 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 --- Cargo.lock | 38 +++++++++++++++++++------------------- crates/ui/src/modal.rs | 41 +++++++++++++++++++++++++++-------------- 2 files changed, 46 insertions(+), 33 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index d4c696cf..dd99d886 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -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", diff --git a/crates/ui/src/modal.rs b/crates/ui/src/modal.rs index f1a01ad6..31778645 100644 --- a/crates/ui/src/modal.rs +++ b/crates/ui/src/modal.rs @@ -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)), ) } }