From 8bd410742323b7d832a794bb5109809d656d362d Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 13 Oct 2023 11:46:48 -0400 Subject: [PATCH] Fix toast contents not filling container --- crates/ui2/src/components/notification.rs | 14 ++++++++++---- crates/ui2/src/components/toast.rs | 17 +++++++++++------ 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/crates/ui2/src/components/notification.rs b/crates/ui2/src/components/notification.rs index 424358efb2..d8f6919463 100644 --- a/crates/ui2/src/components/notification.rs +++ b/crates/ui2/src/components/notification.rs @@ -11,7 +11,7 @@ use crate::{ /// /// You must provide a primary action for the user to take. /// -/// To simply convey information, use a Status. +/// To simply convey information, use a `StatusToast`. #[derive(Element)] pub struct NotificationToast { state_type: PhantomData, @@ -52,21 +52,27 @@ impl NotificationToast { let color = ThemeColor::new(cx); let notification = h_stack() + .min_w_64() + .max_w_96() .gap_1() .items_start() + .p_1() .children(self.left_icon.map(|i| IconElement::new(i))) .child( v_stack() + .flex_1() + .w_full() + .gap_1() .child( h_stack() .justify_between() - .p_1() .child(Label::new(self.title.clone())) - .child(IconButton::new(Icon::Close)), + .child(IconButton::new(Icon::Close).color(crate::IconColor::Muted)), ) .child( v_stack() - .p_1() + .overflow_hidden_x() + .gap_1() .child(Label::new(self.message.clone())) .child( h_stack() diff --git a/crates/ui2/src/components/toast.rs b/crates/ui2/src/components/toast.rs index 3290f458a5..9f72364c5f 100644 --- a/crates/ui2/src/components/toast.rs +++ b/crates/ui2/src/components/toast.rs @@ -10,6 +10,11 @@ pub enum ToastOrigin { BottomRight, } +/// Don't use toast directly: +/// +/// - For messages with a required action, use a `NotificationToast`. +/// - For messages that convey information, use a `StatusToast`. +/// /// A toast is a small, temporary window that appears to show a message to the user /// or indicate a required action. /// @@ -39,19 +44,19 @@ impl Toast { if self.origin == ToastOrigin::Bottom { div = div.right_1_2(); } else { - div = div.right_4(); + div = div.right_2(); } div.z_index(5) .absolute() - .bottom_4() + .bottom_9() .flex() - .py_2() + .py_1() .px_1p5() - .min_w_64() - .rounded_md() + .rounded_lg() + .shadow_md() + .overflow_hidden() .fill(color.elevated_surface) - .max_w_96() .children(self.children.drain(..)) } }