diff --git a/crates/storybook/src/stories/components.rs b/crates/storybook/src/stories/components.rs index 89ee5a92ea..35bed24c01 100644 --- a/crates/storybook/src/stories/components.rs +++ b/crates/storybook/src/stories/components.rs @@ -1,2 +1,4 @@ +pub mod breadcrumb; pub mod facepile; +pub mod toolbar; pub mod traffic_lights; diff --git a/crates/storybook/src/stories/components/breadcrumb.rs b/crates/storybook/src/stories/components/breadcrumb.rs new file mode 100644 index 0000000000..c702eb3def --- /dev/null +++ b/crates/storybook/src/stories/components/breadcrumb.rs @@ -0,0 +1,16 @@ +use gpui2::{Element, IntoElement, ParentElement, ViewContext}; +use ui::breadcrumb; + +use crate::story::Story; + +#[derive(Element, Default)] +pub struct BreadcrumbStory {} + +impl BreadcrumbStory { + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + Story::container() + .child(Story::title_for::<_, ui::Breadcrumb>()) + .child(Story::label("Default")) + .child(breadcrumb()) + } +} diff --git a/crates/storybook/src/stories/components/toolbar.rs b/crates/storybook/src/stories/components/toolbar.rs new file mode 100644 index 0000000000..7a7688a9d8 --- /dev/null +++ b/crates/storybook/src/stories/components/toolbar.rs @@ -0,0 +1,16 @@ +use gpui2::{Element, IntoElement, ParentElement, ViewContext}; +use ui::toolbar; + +use crate::story::Story; + +#[derive(Element, Default)] +pub struct ToolbarStory {} + +impl ToolbarStory { + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + Story::container() + .child(Story::title_for::<_, ui::Toolbar>()) + .child(Story::label("Default")) + .child(toolbar()) + } +} diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs index a57be4fd89..59aca22be7 100644 --- a/crates/storybook/src/storybook.rs +++ b/crates/storybook/src/storybook.rs @@ -14,7 +14,9 @@ use legacy_theme::ThemeSettings; use log::LevelFilter; use settings::{default_settings, SettingsStore}; use simplelog::SimpleLogger; +use stories::components::breadcrumb::BreadcrumbStory; use stories::components::facepile::FacepileStory; +use stories::components::toolbar::ToolbarStory; use stories::components::traffic_lights::TrafficLightsStory; use stories::elements::avatar::AvatarStory; use strum::EnumString; @@ -64,7 +66,9 @@ enum ElementStory { #[derive(Debug, Clone, Copy, EnumString)] #[strum(serialize_all = "snake_case")] enum ComponentStory { + Breadcrumb, Facepile, + Toolbar, TrafficLights, } @@ -97,9 +101,15 @@ fn main() { Some(StorySelector::Element(ElementStory::Avatar)) => { view(|cx| render_story(&mut ViewContext::new(cx), AvatarStory::default())) } + Some(StorySelector::Component(ComponentStory::Breadcrumb)) => { + view(|cx| render_story(&mut ViewContext::new(cx), BreadcrumbStory::default())) + } Some(StorySelector::Component(ComponentStory::Facepile)) => { view(|cx| render_story(&mut ViewContext::new(cx), FacepileStory::default())) } + Some(StorySelector::Component(ComponentStory::Toolbar)) => { + view(|cx| render_story(&mut ViewContext::new(cx), ToolbarStory::default())) + } Some(StorySelector::Component(ComponentStory::TrafficLights)) => view(|cx| { render_story(&mut ViewContext::new(cx), TrafficLightsStory::default()) }), diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs index 58c5fed62d..3ddaa5caa6 100644 --- a/crates/storybook/src/workspace.rs +++ b/crates/storybook/src/workspace.rs @@ -3,7 +3,7 @@ use gpui2::{ style::StyleHelpers, Element, IntoElement, ParentElement, ViewContext, }; -use ui::{chat_panel, project_panel, status_bar, tab_bar, theme, title_bar}; +use ui::{chat_panel, project_panel, status_bar, tab_bar, theme, title_bar, toolbar}; #[derive(Element, Default)] pub struct WorkspaceElement { @@ -45,7 +45,8 @@ impl WorkspaceElement { .flex() .flex_col() .flex_1() - .child(tab_bar(self.tab_bar_scroll_state.clone())), + .child(tab_bar(self.tab_bar_scroll_state.clone())) + .child(toolbar()), ), ) .child(chat_panel(self.right_scroll_state.clone())), diff --git a/crates/ui/src/components.rs b/crates/ui/src/components.rs index a8fbc02265..15790fe9f8 100644 --- a/crates/ui/src/components.rs +++ b/crates/ui/src/components.rs @@ -1,17 +1,21 @@ +mod breadcrumb; mod facepile; mod follow_group; mod list_item; mod list_section_header; mod palette_item; mod tab; +mod toolbar; mod traffic_lights; +pub use breadcrumb::*; pub use facepile::*; pub use follow_group::*; pub use list_item::*; pub use list_section_header::*; pub use palette_item::*; pub use tab::*; +pub use toolbar::*; pub use traffic_lights::*; use std::marker::PhantomData; diff --git a/crates/ui/src/components/breadcrumb.rs b/crates/ui/src/components/breadcrumb.rs new file mode 100644 index 0000000000..1883e35ae9 --- /dev/null +++ b/crates/ui/src/components/breadcrumb.rs @@ -0,0 +1,36 @@ +use gpui2::elements::div; +use gpui2::style::{StyleHelpers, Styleable}; +use gpui2::{Element, IntoElement, ParentElement, ViewContext}; + +use crate::theme; + +#[derive(Element)] +pub struct Breadcrumb {} + +pub fn breadcrumb() -> Breadcrumb { + Breadcrumb {} +} + +impl Breadcrumb { + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + let theme = theme(cx); + + div() + .px_1() + .flex() + .flex_row() + // TODO: Read font from theme (or settings?). + .font("Zed Mono Extended") + .text_sm() + .text_color(theme.middle.base.default.foreground) + .rounded_md() + .hover() + .fill(theme.highest.base.hovered.background) + // TODO: Replace hardcoded breadcrumbs. + .child("crates/ui/src/components/toolbar.rs") + .child(" › ") + .child("impl Breadcrumb") + .child(" › ") + .child("fn render") + } +} diff --git a/crates/ui/src/components/toolbar.rs b/crates/ui/src/components/toolbar.rs new file mode 100644 index 0000000000..cc493c00f4 --- /dev/null +++ b/crates/ui/src/components/toolbar.rs @@ -0,0 +1,35 @@ +use gpui2::elements::div; +use gpui2::style::StyleHelpers; +use gpui2::{Element, IntoElement, ParentElement, ViewContext}; + +use crate::{breadcrumb, icon_button, theme}; + +pub struct ToolbarItem {} + +#[derive(Element)] +pub struct Toolbar { + items: Vec, +} + +pub fn toolbar() -> Toolbar { + Toolbar { items: Vec::new() } +} + +impl Toolbar { + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + let theme = theme(cx); + + div() + .p_2() + .flex() + .justify_between() + .child(breadcrumb()) + .child( + div() + .flex() + .child(icon_button("icons/inlay_hint.svg")) + .child(icon_button("icons/magnifying_glass.svg")) + .child(icon_button("icons/magic-wand.svg")), + ) + } +}