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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

45
crates/story/src/dropdown_story.rs
View file

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

14
crates/story/src/lib.rs
View file

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

14
crates/ui/src/dropdown.rs
View file

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