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(
section("Info").max_w_md().child(
section("Info").w_2_3().child(
Alert::info("info1", "This is an info alert.")
.with_size(self.size)
.title("Info message")
@ -124,7 +124,7 @@ impl Render for AlertStory {
),
)
.child(
section("Success with Title").max_w_md().child(
section("Success with Title").w_2_3().child(
Alert::success(
"success-1",
"You have successfully submitted your form.\n\
@ -135,7 +135,7 @@ impl Render for AlertStory {
),
)
.child(
section("Warning").max_w_md().child(
section("Warning").w_2_3().child(
Alert::warning(
"warning-1",
"This is a warning alert with icon and title.\n\
@ -145,7 +145,7 @@ impl Render for AlertStory {
),
)
.child(
section("Error").max_w_md().child(
section("Error").w_2_3().child(
Alert::error(
"error-1",
"There was an error submitting your form.\n\
@ -156,11 +156,14 @@ impl Render for AlertStory {
),
)
.child(
section("Custom Icon").max_w_md().child(
Alert::info("other-1", "Custom icon with info alert.")
.title("Custom Icon")
.with_size(self.size)
.icon(IconName::Bell),
section("Custom Icon").w_2_3().child(
Alert::info(
"other-1",
"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.",
)
.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.
fn new(id: impl Into<ElementId>, message: impl Into<Text>) -> Self {
Self {
base: div().id(id),
base: h_flex().id(id),
variant: AlertVariant::default(),
icon: None,
title: None,
@ -181,80 +181,77 @@ impl RenderOnce for Alert {
let color = self.variant.color(cx);
self.base
.flex_1()
.when(self.banner, |this| this.w_full())
.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(
h_flex()
.w_full()
.items_center()
.when(!self.banner, |this| {
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)
div()
.flex()
.flex_1()
.items_start()
.overflow_hidden()
.justify_between()
.map(|this| match self.size {
Size::Large => this.text_base(),
_ => this.text_sm(),
})
.line_height(relative(line_height))
.gap(gap)
.child(
h_flex()
.items_start()
.gap(gap)
.child(
div().mt(icon_mt).child(
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)),
),
div().mt(icon_mt).child(
self.icon
.unwrap_or(IconName::Info.into())
.with_size(self.size)
.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(
div()
.flex_1()
.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(
Icon::new(IconName::Close)
.text_color(cx.theme().foreground)
.with_size(self.size.max(Size::Medium))
.flex_shrink_0(),
),
)
}),
})
.child(self.message),
),
)
.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()
}
}