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

alert: Add support for text wrapping (#899)

Browse source 
<img width="935" alt="image"
src="https://github.com/user-attachments/assets/6eb10c67-5301-4414-af7f-9b4444b77fb6"
/>
This commit is contained in:
Floyd Wang 2025-05-26 17:09:12 +08:00 committed by GitHub
parent 0a9de15d79
commit ebe10e20c7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 78 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
crates/story/src/alert_story.rs
View file

@ -114,7 +114,7 @@ impl Render for AlertStory {
})), })),
) )
.child( .child(
section("Info").max_w_md().child( section("Info").w_2_3().child(
Alert::info("info1", "This is an info alert.") Alert::info("info1", "This is an info alert.")
.with_size(self.size) .with_size(self.size)
.title("Info message") .title("Info message")
@ -124,7 +124,7 @@ impl Render for AlertStory {
), ),
) )
.child( .child(
section("Success with Title").max_w_md().child( section("Success with Title").w_2_3().child(
Alert::success( Alert::success(
"success-1", "success-1",
"You have successfully submitted your form.\n\ "You have successfully submitted your form.\n\
@ -135,7 +135,7 @@ impl Render for AlertStory {
), ),
) )
.child( .child(
section("Warning").max_w_md().child( section("Warning").w_2_3().child(
Alert::warning( Alert::warning(
"warning-1", "warning-1",
"This is a warning alert with icon and title.\n\ "This is a warning alert with icon and title.\n\
@ -145,7 +145,7 @@ impl Render for AlertStory {
), ),
) )
.child( .child(
section("Error").max_w_md().child( section("Error").w_2_3().child(
Alert::error( Alert::error(
"error-1", "error-1",
"There was an error submitting your form.\n\ "There was an error submitting your form.\n\
@ -156,11 +156,14 @@ impl Render for AlertStory {
), ),
) )
.child( .child(
section("Custom Icon").max_w_md().child( section("Custom Icon").w_2_3().child(
Alert::info("other-1", "Custom icon with info alert.") Alert::info(
.title("Custom Icon") "other-1",
.with_size(self.size) "Custom icon with info alert with long long long long long long long long long long long long long long long long long long long long messageeeeeeeee.",
.icon(IconName::Bell), )
.title("Custom Icon")
.with_size(self.size)
.icon(IconName::Bell),
), ),
) )
} }

135
crates/ui/src/alert.rs
View file

@ -55,7 +55,7 @@ impl Alert {
/// Create a new alert with the given message. /// Create a new alert with the given message.
fn new(id: impl Into<ElementId>, message: impl Into<Text>) -> Self { fn new(id: impl Into<ElementId>, message: impl Into<Text>) -> Self {
Self { Self {
base: div().id(id), base: h_flex().id(id),
variant: AlertVariant::default(), variant: AlertVariant::default(),
icon: None, icon: None,
title: None, title: None,
@ -181,80 +181,77 @@ impl RenderOnce for Alert {
let color = self.variant.color(cx); let color = self.variant.color(cx);
self.base self.base
.flex_1() .w_full()
.when(self.banner, |this| this.w_full()) .bg(color.opacity(0.06))
.text_color(self.variant.fg(cx))
.px(padding_x)
.py(padding_y)
.gap(gap)
.justify_between()
.line_height(relative(line_height))
.map(|this| match self.size {
Size::Large => this.text_base(),
_ => this.text_sm(),
})
.when(!self.banner, |this| {
this.rounded(radius)
.border_1()
.border_color(color)
.items_start()
})
.child( .child(
h_flex() div()
.w_full() .flex()
.items_center() .flex_1()
.when(!self.banner, |this| { .items_start()
this.rounded(radius)
.border_1()
.border_color(color)
.items_start()
})
.bg(color.opacity(0.06))
.text_color(self.variant.fg(cx))
.px(padding_x)
.py(padding_y)
.gap(gap)
.overflow_hidden() .overflow_hidden()
.justify_between() .gap(gap)
.map(|this| match self.size {
Size::Large => this.text_base(),
_ => this.text_sm(),
})
.line_height(relative(line_height))
.child( .child(
h_flex() div().mt(icon_mt).child(
.items_start() self.icon
.gap(gap) .unwrap_or(IconName::Info.into())
.child( .with_size(self.size)
div().mt(icon_mt).child( .flex_shrink_0(),
self.icon ),
.unwrap_or(IconName::Info.into())
.with_size(self.size)
.flex_shrink_0(),
),
)
.child(
div()
.overflow_hidden()
.when(!self.banner, |this| {
this.when_some(self.title, |this, title| {
this.child(
div()
.w_full()
.truncate()
.mb_1()
.font_semibold()
.child(title),
)
})
})
.child(div().overflow_hidden().child(self.message)),
),
) )
.when_some(self.on_close, |this, on_close| { .child(
this.child( div()
div() .flex_1()
.id("close") .overflow_hidden()
.p_0p5() .when(!self.banner, |this| {
.rounded(cx.theme().radius) this.when_some(self.title, |this, title| {
.hover(|this| this.bg(color.opacity(0.1))) this.child(
.active(|this| this.bg(color.opacity(0.2))) div()
.on_click(move |ev, window, cx| { .w_full()
on_close(ev, window, cx); .truncate()
.mb_1()
.font_semibold()
.child(title),
)
}) })
.child( })
Icon::new(IconName::Close) .child(self.message),
.text_color(cx.theme().foreground) ),
.with_size(self.size.max(Size::Medium))
.flex_shrink_0(),
),
)
}),
) )
.when_some(self.on_close, |this, on_close| {
this.child(
div()
.id("close")
.p_0p5()
.rounded(cx.theme().radius)
.hover(|this| this.bg(color.opacity(0.1)))
.active(|this| this.bg(color.opacity(0.2)))
.on_click(move |ev, window, cx| {
on_close(ev, window, cx);
})
.child(
Icon::new(IconName::Close)
.text_color(cx.theme().foreground)
.with_size(self.size.max(Size::Medium))
.flex_shrink_0(),
),
)
})
.into_any_element() .into_any_element()
} }
} }