Checkpoint

crates/gpui2/src/elements/pressable.rs

@@ -5,7 +5,7 @@ use crate::{
     ViewContext,
 };
 use anyhow::Result;
-use gpui::{color::Color, geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
+use gpui::{geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
 use refineable::{CascadeSlot, Refineable, RefinementCascade};
 use smallvec::SmallVec;
 use std::{cell::Cell, rc::Rc};

crates/storybook/src/components.rs

@@ -7,6 +7,7 @@ use std::{marker::PhantomData, rc::Rc};
 mod avatar;
 mod icon_button;
 mod tab;
+mod text_button;
 mod tool_divider;
 
 pub use avatar::avatar;
@@ -14,6 +15,8 @@ pub use avatar::Avatar;
 pub use icon_button::icon_button;
 pub use tab::tab;
 pub use tab::Tab;
+pub use text_button::text_button;
+pub use text_button::TextButton;
 pub use tool_divider::tool_divider;
 pub use tool_divider::ToolDivider;
 

crates/storybook/src/components/text_button.rs

@@ -0,0 +1,81 @@
+use crate::prelude::{ButtonVariant, InteractionState};
+use crate::theme::theme;
+use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct TextButton {
+    label: &'static str,
+    variant: ButtonVariant,
+    state: InteractionState,
+}
+
+pub fn text_button(label: &'static str) -> TextButton {
+    TextButton {
+        label,
+        variant: ButtonVariant::default(),
+        state: InteractionState::default(),
+    }
+}
+
+impl TextButton {
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    pub fn state(mut self, state: InteractionState) -> Self {
+        self.state = state;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let text_color_default;
+        let text_color_hover;
+        let text_color_active;
+
+        let background_color_default;
+        let background_color_hover;
+        let background_color_active;
+
+        let div = div();
+
+        match self.variant {
+            ButtonVariant::Ghost => {
+                text_color_default = theme.lowest.base.default.foreground;
+                text_color_hover = theme.lowest.base.hovered.foreground;
+                text_color_active = theme.lowest.base.pressed.foreground;
+                background_color_default = theme.lowest.base.default.background;
+                background_color_hover = theme.lowest.base.hovered.background;
+                background_color_active = theme.lowest.base.pressed.background;
+            }
+            ButtonVariant::Filled => {
+                text_color_default = theme.lowest.base.default.foreground;
+                text_color_hover = theme.lowest.base.hovered.foreground;
+                text_color_active = theme.lowest.base.pressed.foreground;
+                background_color_default = theme.lowest.on.default.background;
+                background_color_hover = theme.lowest.on.hovered.background;
+                background_color_active = theme.lowest.on.pressed.background;
+            }
+        };
+        div.h_6()
+            .px_1()
+            .flex()
+            .items_center()
+            .justify_center()
+            .rounded_md()
+            .text_xs()
+            .text_color(text_color_default)
+            .fill(background_color_default)
+            .hover()
+            .text_color(text_color_hover)
+            .fill(background_color_hover)
+            .active()
+            .text_color(text_color_active)
+            .fill(background_color_active)
+            .child(self.label.clone())
+    }
+}

crates/storybook/src/modules/tab_bar.rs

@@ -57,7 +57,7 @@ impl<V: 'static> TabBar<V> {
                 div().w_0().flex_1().h_full().child(
                     div()
                         .flex()
-                        .gap_8()
+                        .gap_1()
                         .overflow_x_scroll(self.scroll_state.clone())
                         .child(tab("Cargo.toml", false))
                         .child(tab("Channels Panel", true))

crates/storybook/src/modules/title_bar.rs

@@ -1,9 +1,9 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, tool_divider, Avatar};
+use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
-use crate::prelude::Shape;
+use crate::prelude::{ButtonVariant, Shape};
 use crate::theme::theme;
-use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
@@ -29,37 +29,6 @@ impl<V: 'static> TitleBar<V> {
             .w_full()
             .h_8()
             .fill(theme.lowest.base.default.background)
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .child(
-                        div()
-                            .px_2()
-                            .flex()
-                            .items_center()
-                            .gap_1()
-                            .child(icon_button("icons/stop_sharing.svg"))
-                            .child(icon_button("icons/exit.svg")),
-                    )
-                    .child(tool_divider())
-                    .child(
-                        div()
-                            .px_2()
-                            .flex()
-                            .items_center()
-                            .gap_1()
-                            .child(icon_button("icons/radix/mic.svg"))
-                            .child(icon_button("icons/radix/speaker-loud.svg"))
-                            .child(icon_button("icons/radix/desktop.svg")),
-                    )
-                    .child(
-                        div().px_2().flex().items_center().child(
-                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
-                                .shape(Shape::RoundedRectangle),
-                        ),
-                    ),
-            )
             .child(
                 div()
                     .flex()
@@ -101,35 +70,8 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(
+                            .child(text_button("zed"))
-                                div()
+                            .child(text_button("nate/gpui2-ui-components")),
-                                    .h_full()
-                                    .flex()
-                                    .items_center()
-                                    .justify_center()
-                                    .px_2()
-                                    .rounded_md()
-                                    .hover()
-                                    .fill(theme.lowest.base.hovered.background)
-                                    .active()
-                                    .fill(theme.lowest.base.pressed.background)
-                                    .child(div().text_sm().child("project")),
-                            )
-                            .child(
-                                div()
-                                    .h_full()
-                                    .flex()
-                                    .items_center()
-                                    .justify_center()
-                                    .px_2()
-                                    .rounded_md()
-                                    .text_color(theme.lowest.variant.default.foreground)
-                                    .hover()
-                                    .fill(theme.lowest.base.hovered.background)
-                                    .active()
-                                    .fill(theme.lowest.base.pressed.background)
-                                    .child(div().text_sm().child("branch")),
-                            ),
                     ),
             )
             .child(

crates/storybook/src/storybook.rs

@@ -2,15 +2,10 @@
 
 use crate::theme::Theme;
 use ::theme as legacy_theme;
-use components::icon_button;
 use element_ext::ElementExt;
-use gpui2::{
+use gpui2::{serde_json, vec2f, view, Element, RectF, ViewContext, WindowBounds};
-    elements::div, serde_json, style::StyleHelpers, vec2f, view, Element, ParentElement, RectF,
-    ViewContext, WindowBounds,
-};
 use legacy_theme::ThemeSettings;
 use log::LevelFilter;
-use modules::title_bar;
 use settings::{default_settings, SettingsStore};
 use simplelog::SimpleLogger;