Nate Butler created
crates/gpui2/src/elements/pressable.rs | 2
crates/storybook/src/components.rs | 3
crates/storybook/src/components/text_button.rs | 81 ++++++++++++++++++++
crates/storybook/src/modules/tab_bar.rs | 2
crates/storybook/src/modules/title_bar.rs | 68 +---------------
crates/storybook/src/storybook.rs | 7 -
6 files changed, 92 insertions(+), 71 deletions(-)
@@ -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};
@@ -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;
@@ -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())
+ }
+}
@@ -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))
@@ -1,9 +1,9 @@
use std::marker::PhantomData;
-use crate::components::{avatar, icon_button, tool_divider, Avatar};
-use crate::prelude::Shape;
+use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
+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(
- div()
- .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(text_button("zed"))
+ .child(text_button("nate/gpui2-ui-components")),
),
)
.child(
@@ -2,15 +2,10 @@
use crate::theme::Theme;
use ::theme as legacy_theme;
-use components::icon_button;
use element_ext::ElementExt;
-use gpui2::{
- elements::div, serde_json, style::StyleHelpers, vec2f, view, Element, ParentElement, RectF,
- ViewContext, WindowBounds,
-};
+use gpui2::{serde_json, vec2f, view, Element, RectF, ViewContext, WindowBounds};
use legacy_theme::ThemeSettings;
use log::LevelFilter;
-use modules::title_bar;
use settings::{default_settings, SettingsStore};
use simplelog::SimpleLogger;