diff --git a/crates/storybook/src/component/icon_button.rs b/crates/storybook/src/component/icon_button.rs new file mode 100644 index 0000000000..9e8df098be --- /dev/null +++ b/crates/storybook/src/component/icon_button.rs @@ -0,0 +1,54 @@ +use crate::theme::theme; +use gpui2::elements::svg; +use gpui2::style::{StyleHelpers, Styleable}; +use gpui2::{elements::div, IntoElement}; +use gpui2::{Element, ParentElement, ViewContext}; + +#[derive(Element)] +struct IconButton { + path: &'static str, + variant: Variant, +} + +#[derive(PartialEq)] +pub enum Variant { + Ghost, + Filled, +} + +pub fn icon_button(path: &'static str, variant: Variant) -> impl Element { + IconButton { path, variant } +} + +impl IconButton { + fn render(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + let theme = theme(cx); + let mut div = div(); + + if self.variant == Variant::Filled { + div = div.fill(theme.middle.base.default.background); + } + + div.w_7() + .h_6() + .flex() + .items_center() + .justify_center() + .rounded_md() + .border() + .border_color(theme.middle.base.default.background) + .hover() + .fill(theme.middle.base.hovered.background) + .border_color(theme.middle.variant.hovered.border) + .active() + .fill(theme.middle.base.pressed.background) + .border_color(theme.middle.variant.pressed.border) + .child( + svg() + .path(self.path) + .w_4() + .h_4() + .fill(theme.middle.variant.default.foreground), + ) + } +} diff --git a/crates/storybook/src/component/mod.rs b/crates/storybook/src/component/mod.rs new file mode 100644 index 0000000000..e26b06c8dd --- /dev/null +++ b/crates/storybook/src/component/mod.rs @@ -0,0 +1 @@ +pub(crate) mod icon_button; diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs index 04e1038988..7f9aa86672 100644 --- a/crates/storybook/src/storybook.rs +++ b/crates/storybook/src/storybook.rs @@ -10,6 +10,7 @@ use settings::{default_settings, SettingsStore}; use simplelog::SimpleLogger; mod collab_panel; +mod component; mod components; mod element_ext; mod theme; @@ -40,7 +41,7 @@ fn main() { }, |cx| { view(|cx| { - cx.enable_inspector(); + // cx.enable_inspector(); storybook(&mut ViewContext::new(cx)) }) }, diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs index d9f9c22fcb..441a4c68fa 100644 --- a/crates/storybook/src/workspace.rs +++ b/crates/storybook/src/workspace.rs @@ -1,4 +1,8 @@ -use crate::{collab_panel::collab_panel, theme::theme}; +use crate::{ + collab_panel::collab_panel, + component::icon_button::{icon_button, Variant}, + theme::theme, +}; use gpui2::{ elements::{div, div::ScrollState, img, svg}, style::{StyleHelpers, Styleable}, @@ -38,7 +42,15 @@ impl WorkspaceElement { .flex_row() .overflow_hidden() .child(collab_panel(self.left_scroll_state.clone())) - .child(div().h_full().flex_1()) + .child( + div().h_full().flex_1().child( + div() + .w_24() + .h_24() + .child(icon_button("icons/plus.svg", Variant::Ghost)) + .child(icon_button("icons/x.svg", Variant::Filled)), + ), + ) .child(collab_panel(self.right_scroll_state.clone())), ) .child(statusbar())