modal: Avoid background color with alpha. (#1154)

This commit is contained in:
Jason Lee 2025-08-19 14:10:32 +08:00 committed by GitHub
parent 8e525c6c99
commit fc764d8e96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 3 deletions

View file

@ -394,8 +394,8 @@ impl Render for ModalStory {
window.open_modal(cx, move |modal, _, cx| { window.open_modal(cx, move |modal, _, cx| {
modal modal
.rounded_lg() .rounded_lg()
.bg(cx.theme().cyan) .bg(cx.theme().green.alpha(0.2))
.text_color(cx.theme().info_foreground) .text_color(cx.theme().foreground)
.title("Custom Modal Title") .title("Custom Modal Title")
.child("This is a custom modal content.") .child("This is a custom modal content.")
}); });

View file

@ -374,6 +374,17 @@ impl RenderOnce for Modal {
let animation = Animation::new(Duration::from_secs_f64(0.25)) let animation = Animation::new(Duration::from_secs_f64(0.25))
.with_easing(cubic_bezier(0.32, 0.72, 0., 1.)); .with_easing(cubic_bezier(0.32, 0.72, 0., 1.));
let content_bg = div()
.size_full()
.absolute()
.top_0()
.left_0()
.right_0()
.bottom_0()
.refine_style(&self.style);
let mut style = self.style;
style.background = None;
anchored() anchored()
.position(point(window_paddings.left, window_paddings.top)) .position(point(window_paddings.left, window_paddings.top))
.snap_to_window() .snap_to_window()
@ -412,7 +423,7 @@ impl RenderOnce for Modal {
.pt(paddings.top) .pt(paddings.top)
.pb(paddings.bottom) .pb(paddings.bottom)
.gap(paddings.top.min(px(16.))) .gap(paddings.top.min(px(16.)))
.refine_style(&self.style) .refine_style(&style)
.px_0() .px_0()
.key_context(CONTEXT) .key_context(CONTEXT)
.track_focus(&self.focus_handle) .track_focus(&self.focus_handle)
@ -454,6 +465,7 @@ impl RenderOnce for Modal {
.top(y) .top(y)
.w(self.width) .w(self.width)
.when_some(self.max_width, |this, w| this.max_w(w)) .when_some(self.max_width, |this, w| this.max_w(w))
.child(content_bg)
.when_some(self.title, |this, title| { .when_some(self.title, |this, title| {
this.child( this.child(
div() div()