diff --git a/crates/storybook/src/story_selector.rs b/crates/storybook/src/story_selector.rs index b4b20b9087dd366cfbc60bcb3418b64255d1f202..9720522430b8fa9261cb567a42fc6f667d0e737a 100644 --- a/crates/storybook/src/story_selector.rs +++ b/crates/storybook/src/story_selector.rs @@ -38,6 +38,7 @@ pub enum ComponentStory { Text, TitleBar, ToggleButton, + ToolStrip, ViewportUnits, } @@ -73,6 +74,7 @@ impl ComponentStory { Self::TabBar => cx.new_view(|_| ui::TabBarStory).into(), Self::TitleBar => cx.new_view(|_| ui::TitleBarStory).into(), Self::ToggleButton => cx.new_view(|_| ui::ToggleButtonStory).into(), + Self::ToolStrip => cx.new_view(|_| ui::ToolStripStory).into(), Self::ViewportUnits => cx.new_view(|_| crate::stories::ViewportUnitsStory).into(), Self::Picker => PickerStory::new(cx).into(), } diff --git a/crates/ui/src/components.rs b/crates/ui/src/components.rs index b93a997fe79613becc9a28e0b07a55ca745a1c1b..5a2b1e9cf12ea02a623d6729e7207513f3eb705b 100644 --- a/crates/ui/src/components.rs +++ b/crates/ui/src/components.rs @@ -18,6 +18,7 @@ mod stack; mod tab; mod tab_bar; mod title_bar; +mod tool_strip; mod tooltip; #[cfg(feature = "stories")] @@ -43,6 +44,7 @@ pub use stack::*; pub use tab::*; pub use tab_bar::*; pub use title_bar::*; +pub use tool_strip::*; pub use tooltip::*; #[cfg(feature = "stories")] diff --git a/crates/ui/src/components/stories.rs b/crates/ui/src/components/stories.rs index eb84ed3ccbcbd6a523daf6d5afb56da1c3710a86..302b740c7fe203ed958d82df7f6a7a9a1d14f702 100644 --- a/crates/ui/src/components/stories.rs +++ b/crates/ui/src/components/stories.rs @@ -14,6 +14,7 @@ mod tab; mod tab_bar; mod title_bar; mod toggle_button; +mod tool_strip; pub use avatar::*; pub use button::*; @@ -31,3 +32,4 @@ pub use tab::*; pub use tab_bar::*; pub use title_bar::*; pub use toggle_button::*; +pub use tool_strip::*; diff --git a/crates/ui/src/components/stories/tool_strip.rs b/crates/ui/src/components/stories/tool_strip.rs new file mode 100644 index 0000000000000000000000000000000000000000..5a87c121abf7b614c22b6f2593b210617c5125e8 --- /dev/null +++ b/crates/ui/src/components/stories/tool_strip.rs @@ -0,0 +1,35 @@ +use gpui::Render; +use story::{StoryContainer, StoryItem, StorySection}; + +use crate::{prelude::*, ToolStrip, Tooltip}; + +pub struct ToolStripStory; + +impl Render for ToolStripStory { + fn render(&mut self, _cx: &mut ViewContext) -> impl IntoElement { + StoryContainer::new( + "Tool Strip", + "crates/ui/src/components/stories/tool_strip.rs", + ) + .child( + StorySection::new().child(StoryItem::new( + "Vertical Tool Strip", + h_flex().child( + ToolStrip::vertical("tool_strip_example") + .tool( + IconButton::new("example_tool", IconName::AudioOn) + .tooltip(|cx| Tooltip::text("Example tool", cx)), + ) + .tool( + IconButton::new("example_tool_2", IconName::MicMute) + .tooltip(|cx| Tooltip::text("Example tool 2", cx)), + ) + .tool( + IconButton::new("example_tool_3", IconName::Screen) + .tooltip(|cx| Tooltip::text("Example tool 3", cx)), + ), + ), + )), + ) + } +} diff --git a/crates/ui/src/components/tool_strip.rs b/crates/ui/src/components/tool_strip.rs new file mode 100644 index 0000000000000000000000000000000000000000..ced4b271ad3c4afb59b33c2e11cf30dffd805529 --- /dev/null +++ b/crates/ui/src/components/tool_strip.rs @@ -0,0 +1,55 @@ +use crate::prelude::*; +use gpui::*; + +#[derive(IntoElement)] +pub struct ToolStrip { + id: ElementId, + tools: Vec, + axis: Axis, +} + +impl ToolStrip { + fn new(id: ElementId, axis: Axis) -> Self { + Self { + id, + tools: vec![], + axis, + } + } + + pub fn vertical(id: impl Into) -> Self { + Self::new(id.into(), Axis::Vertical) + } + + pub fn tools(mut self, tools: Vec) -> Self { + self.tools = tools; + self + } + + pub fn tool(mut self, tool: IconButton) -> Self { + self.tools.push(tool); + self + } +} + +impl RenderOnce for ToolStrip { + fn render(self, cx: &mut WindowContext) -> impl IntoElement { + let group = format!("tool_strip_{}", self.id.clone()); + + div() + .id(self.id.clone()) + .group(group) + .map(|element| match self.axis { + Axis::Vertical => element.v_flex(), + Axis::Horizontal => element.h_flex(), + }) + .flex_none() + .gap(Spacing::Small.rems(cx)) + .p(Spacing::XSmall.rems(cx)) + .border_1() + .border_color(cx.theme().colors().border) + .rounded(rems_from_px(6.0)) + .bg(cx.theme().colors().elevated_surface_background) + .children(self.tools) + } +} diff --git a/crates/ui/src/prelude.rs b/crates/ui/src/prelude.rs index d51564e38341357cb63fd172bfcccdab67fa827e..895c755c786c109462eeca504e53316a6cc42807 100644 --- a/crates/ui/src/prelude.rs +++ b/crates/ui/src/prelude.rs @@ -11,7 +11,7 @@ pub use crate::clickable::*; pub use crate::disableable::*; pub use crate::fixed::*; pub use crate::selectable::*; -pub use crate::styles::{rems_from_px, vh, vw, PlatformStyle, StyledTypography}; +pub use crate::styles::{rems_from_px, vh, vw, PlatformStyle, StyledTypography, TextSize}; pub use crate::visible_on_hover::*; pub use crate::Spacing; pub use crate::{h_flex, v_flex};