Add icon_button

Nate Butler created 2 years ago

Change summary

crates/storybook/src/component/icon_button.rs | 54 +++++++++++++++++++++
crates/storybook/src/component/mod.rs         |  1 
crates/storybook/src/storybook.rs             |  3 
crates/storybook/src/workspace.rs             | 16 +++++
4 files changed, 71 insertions(+), 3 deletions(-)

Detailed changes

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<V: 'static>(path: &'static str, variant: Variant) -> impl Element<V> {
+    IconButton { path, variant }
+}
+
+impl IconButton {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        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),
+            )
+    }
+}

crates/storybook/src/component/mod.rs

@@ -0,0 +1 @@
+pub(crate) mod icon_button;

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))
                 })
             },

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())