diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs index 3e431ca448..056ad56a2b 100644 --- a/crates/storybook/src/ui.rs +++ b/crates/storybook/src/ui.rs @@ -1,5 +1,6 @@ mod element; pub use element::avatar::*; +pub use element::details::*; pub use element::icon::*; pub use element::icon_button::*; pub use element::indicator::*; diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs index c5265e0ab4..e79a9c5986 100644 --- a/crates/storybook/src/ui/element.rs +++ b/crates/storybook/src/ui/element.rs @@ -1,4 +1,5 @@ pub(crate) mod avatar; +pub(crate) mod details; pub(crate) mod icon; pub(crate) mod icon_button; pub(crate) mod indicator; diff --git a/crates/storybook/src/ui/element/details.rs b/crates/storybook/src/ui/element/details.rs new file mode 100644 index 0000000000..5d06862439 --- /dev/null +++ b/crates/storybook/src/ui/element/details.rs @@ -0,0 +1,36 @@ +use crate::theme::theme; +use gpui2::elements::div; +use gpui2::style::StyleHelpers; +use gpui2::{Element, ViewContext}; +use gpui2::{IntoElement, ParentElement}; + +#[derive(Element, Clone)] +pub struct Details { + text: &'static str, + meta: Option<&'static str>, +} + +pub fn details(text: &'static str) -> Details { + Details { text, meta: None } +} + +impl Details { + pub fn meta_text(mut self, meta: &'static str) -> Self { + self.meta = Some(meta); + self + } + + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + let theme = theme(cx); + + div() + // .flex() + // .w_full() + .p_1() + .gap_0p5() + .text_xs() + .text_color(theme.lowest.base.default.foreground) + .child(self.text.clone()) + .children(self.meta.map(|m| m)) + } +} diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs index 516817cae2..5a9608d3e3 100644 --- a/crates/storybook/src/ui/module/project_panel.rs +++ b/crates/storybook/src/ui/module/project_panel.rs @@ -1,7 +1,7 @@ use crate::{ prelude::{InteractionState, ToggleState}, theme::theme, - ui::{input, label, list_item, IconAsset, LabelColor}, + ui::{details, input, label, list_item, IconAsset, LabelColor}, }; use gpui2::{ elements::{div, div::ScrollState}, @@ -36,10 +36,11 @@ impl ProjectPanel { .fill(theme.middle.base.default.background) .child( div() - .w_full() + .w_56() .flex() .flex_col() .overflow_y_scroll(self.scroll_state.clone()) + .child(details("This is a long string that should wrap when it keeps going for a long time.").meta_text("6 h ago)")) .child( div().flex().flex_col().children( std::iter::repeat_with(|| {