dropdown: Avoid selected value text wrap. (#808)

This commit is contained in:
Jason Lee 2025-04-22 21:19:20 +08:00 committed by GitHub
parent 5cacffcc06
commit b4449f10cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 31 deletions

View file

@ -103,13 +103,14 @@ impl DropdownStory {
"Banana".into(),
"Grape".into(),
"Pineapple".into(),
"Watermelon & This is a longlonglonglonglonglonglonglonglong title".into(),
"Watermelon & This is a long long long long long long long long long title".into(),
"Avocado".into(),
]);
let fruit_dropdown = cx.new(|cx| {
Dropdown::new("dropdown-fruits", fruits, None, window, cx)
.icon(IconName::Search)
.menu_width(px(320.))
.width(px(320.))
.menu_width(px(400.))
});
cx.new(|cx| {
@ -278,25 +279,27 @@ impl Render for DropdownStory {
.child(self.simple_dropdown3.clone()),
)
.child(
section("Values")
.max_w_md()
.child(format!(
"Country: {:?}",
self.country_dropdown.read(cx).selected_value()
))
.child(format!(
"fruit: {:?}",
self.fruit_dropdown.read(cx).selected_value()
))
.child(format!(
"UI: {:?}",
self.simple_dropdown1.read(cx).selected_value()
))
.child(format!(
"Language: {:?}",
self.simple_dropdown2.read(cx).selected_value()
))
.child("This is other text."),
section("Selected Values").max_w_lg().child(
v_flex()
.gap_3()
.child(format!(
"Country: {:?}",
self.country_dropdown.read(cx).selected_value()
))
.child(format!(
"fruit: {:?}",
self.fruit_dropdown.read(cx).selected_value()
))
.child(format!(
"UI: {:?}",
self.simple_dropdown1.read(cx).selected_value()
))
.child(format!(
"Language: {:?}",
self.simple_dropdown2.read(cx).selected_value()
))
.child("This is other text."),
),
)
}
}

View file

@ -95,7 +95,7 @@ use gpui_component::{
notification::Notification,
popup_menu::PopupMenu,
scroll::ScrollbarShow,
v_flex, ActiveTheme, ContextModal, IconName, Root, StyledExt, TitleBar,
v_flex, ActiveTheme, ContextModal, IconName, Root, TitleBar,
};
#[derive(Clone, PartialEq, Eq, Deserialize)]
@ -378,15 +378,14 @@ impl RenderOnce for StorySection {
.child(self.title),
)
.child(
div()
v_flex()
.p_4()
.border_1()
.border_color(cx.theme().border)
.rounded_lg()
.v_flex()
.items_center()
.justify_center()
.child(self.base.gap_4().w_full().children(self.children)),
.child(self.base.children(self.children)),
)
}
}
@ -396,7 +395,12 @@ impl ContextMenuExt for StorySection {}
pub(crate) fn section(title: impl IntoElement) -> StorySection {
StorySection {
title: title.into_any_element(),
base: h_flex().flex_wrap().justify_center().items_center(),
base: h_flex()
.flex_wrap()
.justify_center()
.items_center()
.w_full()
.gap_4(),
children: vec![],
}
}

View file

@ -552,7 +552,7 @@ where
fn display_title(&self, _: &Window, cx: &App) -> impl IntoElement {
let title = if let Some(selected_index) = &self.selected_index(cx) {
let title = self
let mut title = self
.list
.read(cx)
.delegate()
@ -561,9 +561,11 @@ where
.map(|item| item.title().to_string())
.unwrap_or_default();
h_flex()
.when_some(self.title_prefix.clone(), |this, prefix| this.child(prefix))
.child(title.clone())
if let Some(prefix) = self.title_prefix.as_ref() {
title = format!("{}{}", prefix, title);
}
div().child(title.clone())
} else {
div().text_color(cx.theme().accent_foreground).child(
self.placeholder
@ -636,7 +638,7 @@ where
.input_text_size(self.size)
.child(
div()
.id("dropdown-input")
.id(ElementId::Name(format!("{}-input", self.id).into()))
.relative()
.flex()
.items_center()
@ -674,6 +676,8 @@ where
div()
.w_full()
.overflow_hidden()
.whitespace_nowrap()
.truncate()
.child(self.display_title(window, cx)),
)
.when(show_clean, |this| {