dropdown: Avoid selected value text wrap. (#808)
This commit is contained in:
parent
5cacffcc06
commit
b4449f10cf
3 changed files with 42 additions and 31 deletions
|
|
@ -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."),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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![],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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| {
|
||||
|
|
|
|||
Loading…
Reference in a new issue