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

alert: Fix the icon position and let all size use same text size. (#1175)

Browse source 
<img width="1270" height="1286" alt="image"
src="https://github.com/user-attachments/assets/08c485bf-daac-4490-8fca-1dd2f0efa396"
/>
<img width="1270" height="1286" alt="image"
src="https://github.com/user-attachments/assets/71bb1a59-0669-4102-8529-df81435fcb7d"
/>
<img width="1270" height="1286" alt="image"
src="https://github.com/user-attachments/assets/1ebd6095-4bd8-47e8-88a2-fdd470c47344"
/>
<img width="1270" height="1286" alt="image"
src="https://github.com/user-attachments/assets/71bb1a59-0669-4102-8529-df81435fcb7d"
/>
This commit is contained in:
Jason Lee 2025-08-27 11:06:31 +08:00 committed by GitHub
parent 9c615e5413
commit 5b6f2dc26e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -140,7 +140,7 @@ impl Render for AlertStory {
.child( .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, but no title.\n\
This is second line of text to test is the line-height is correct.", This is second line of text to test is the line-height is correct.",
) )
.with_size(self.size), .with_size(self.size),

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

@ -1,7 +1,7 @@
use std::rc::Rc; use std::rc::Rc;
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, px, relative, rems, App, ClickEvent, ElementId, Empty, Hsla, div, prelude::FluentBuilder as _, px, rems, App, ClickEvent, ElementId, Empty, Hsla,
InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString,
StatefulInteractiveElement, StyleRefinement, Styled, Window, StatefulInteractiveElement, StyleRefinement, Styled, Window,
}; };
@ -9,7 +9,7 @@ use gpui::{
use crate::{ use crate::{
h_flex, h_flex,
text::{Text, TextViewStyle}, text::{Text, TextViewStyle},
ActiveTheme as _, Icon, IconName, Sizable, Size, StyleSized, StyledExt, ActiveTheme as _, Icon, IconName, Sizable, Size, StyledExt,
}; };
#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)] #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
@ -179,8 +179,8 @@ impl RenderOnce for Alert {
let (radius, padding_x, padding_y, gap) = match self.size { let (radius, padding_x, padding_y, gap) = match self.size {
Size::XSmall => (cx.theme().radius, px(12.), px(6.), px(6.)), Size::XSmall => (cx.theme().radius, px(12.), px(6.), px(6.)),
Size::Small => (cx.theme().radius, px(12.), px(8.), px(6.)), Size::Small => (cx.theme().radius, px(12.), px(8.), px(6.)),
Size::Large => (cx.theme().radius_lg, px(20.), px(16.), px(12.)), Size::Large => (cx.theme().radius_lg, px(20.), px(14.), px(12.)),
_ => (cx.theme().radius_lg, px(16.), px(12.), px(12.)), _ => (cx.theme().radius, px(16.), px(10.), px(12.)),
}; };
let color = self.variant.color(cx); let color = self.variant.color(cx);
@ -196,7 +196,7 @@ impl RenderOnce for Alert {
.py(padding_y) .py(padding_y)
.gap(gap) .gap(gap)
.justify_between() .justify_between()
.input_text_size(self.size.smaller()) .text_sm()
.border_1() .border_1()
.border_color(border_color) .border_color(border_color)
.when(!self.banner, |this| this.rounded(radius).items_start()) .when(!self.banner, |this| this.rounded(radius).items_start())
@ -205,25 +205,23 @@ impl RenderOnce for Alert {
div() div()
.flex() .flex()
.flex_1() .flex_1()
.items_start()
.when(self.banner, |this| this.items_center()) .when(self.banner, |this| this.items_center())
.overflow_hidden() .overflow_hidden()
.gap(gap) .gap(gap)
.child(self.icon) .child(
div()
.when(!self.banner, |this| this.mt(px(5.)))
.child(self.icon),
)
.child( .child(
div() div()
.flex_1() .flex_1()
.overflow_hidden() .overflow_hidden()
.gap_3()
.when(!self.banner, |this| { .when(!self.banner, |this| {
this.when_some(self.title, |this, title| { this.when_some(self.title, |this, title| {
this.child( this.child(
div() div().w_full().truncate().font_semibold().child(title),
.w_full()
.truncate()
.font_semibold()
.line_height(relative(1.))
.mb(rems(0.3))
.child(title),
) )
}) })
}) })