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

Revert "modal: Add scrollbar to Modal for overflow contents. #960" (#970)

Browse source
This commit is contained in:
Jason Lee 2025-06-17 17:48:42 +08:00 committed by GitHub
parent edf9ed7e5f
commit 0e3b61a704
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
crates/story/src/modal_story.rs
View file

@ -13,7 +13,7 @@ use gpui_component::{
input::{InputState, TextInput}, input::{InputState, TextInput},
modal::ModalButtonProps, modal::ModalButtonProps,
text::TextView, text::TextView,
v_flex, ContextModal as _, v_flex, ActiveTheme, ContextModal as _,
}; };
use crate::section; use crate::section;
@ -374,6 +374,28 @@ impl Render for ModalStory {
}); });
})), })),
), ),
)
.child(
section("Custom Modal style").child(
Button::new("custom-modal-style")
.label("Custom Modal Style")
.on_click(cx.listener(move |_, _, window, cx| {
window.open_modal(cx, move |modal, _, cx| {
modal
.rounded_lg()
.p_0()
.title(div().pt_4().px_4().child("Custom Modal Title"))
.child(
div()
.bg(cx.theme().info)
.text_color(cx.theme().info_foreground)
.p_4()
.rounded_b_lg()
.child("This is a custom modal content."),
)
});
})),
),
), ),
) )
} }

25
crates/ui/src/modal.rs
View file

@ -12,9 +12,7 @@ use crate::{
actions::{Cancel, Confirm}, actions::{Cancel, Confirm},
animation::cubic_bezier, animation::cubic_bezier,
button::{Button, ButtonVariant, ButtonVariants as _}, button::{Button, ButtonVariant, ButtonVariants as _},
h_flex, h_flex, v_flex, ActiveTheme as _, ContextModal, IconName, Root, Sizable as _, StyledExt,
scroll::ScrollbarAxis,
v_flex, ActiveTheme as _, ContextModal, IconName, Root, Sizable as _, StyledExt,
}; };
const CONTEXT: &str = "Modal"; const CONTEXT: &str = "Modal";
@ -393,7 +391,7 @@ impl RenderOnce for Modal {
.rounded(border_radius) .rounded(border_radius)
.shadow_xl() .shadow_xl()
.min_h_24() .min_h_24()
.py_4() .p_4()
.gap_4() .gap_4()
.refine_style(&self.style) .refine_style(&self.style)
.key_context(CONTEXT) .key_context(CONTEXT)
@ -437,11 +435,7 @@ impl RenderOnce for Modal {
.when_some(self.max_width, |this, w| this.max_w(w)) .when_some(self.max_width, |this, w| this.max_w(w))
.when_some(self.title, |this, title| { .when_some(self.title, |this, title| {
this.child( this.child(
div() div().font_semibold().line_height(relative(1.)).child(title),
.font_semibold()
.px_4()
.line_height(relative(1.))
.child(title),
) )
}) })
.when(self.show_close, |this| { .when(self.show_close, |this| {
@ -461,17 +455,16 @@ impl RenderOnce for Modal {
) )
}) })
.child( .child(
div().w_full().flex_1().overflow_hidden().child( div()
v_flex() .w_full()
.scrollable(window.current_view(), ScrollbarAxis::Vertical) .flex_1()
.px_4() .overflow_hidden()
.child(self.content), .child(self.content),
),
) )
.when(self.footer.is_some(), |this| { .when(self.footer.is_some(), |this| {
let footer = self.footer.unwrap(); let footer = self.footer.unwrap();
this.child(h_flex().px_4().gap_2().justify_end().children(footer( this.child(h_flex().gap_2().justify_end().children(footer(
render_ok, render_ok,
render_cancel, render_cancel,
window, window,