diff --git a/crates/gpui2/src/elements/pressable.rs b/crates/gpui2/src/elements/pressable.rs index 76851677737809b6f4785b57c43d83cf542a1676..30e853bf39e222f142b6ee3bd6be6ff170647825 100644 --- a/crates/gpui2/src/elements/pressable.rs +++ b/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}; diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs index 4860ef28f473285e285a8aaed76629f12855592a..e407bd43f82c586c93b665d335e15e434f5a754f 100644 --- a/crates/storybook/src/components.rs +++ b/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; diff --git a/crates/storybook/src/components/text_button.rs b/crates/storybook/src/components/text_button.rs new file mode 100644 index 0000000000000000000000000000000000000000..24fd1eb5d35898511694a90dde9f101e3f88195b --- /dev/null +++ b/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(&mut self, _: &mut V, cx: &mut ViewContext) -> impl IntoElement { + 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()) + } +} diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs index bbe1975cdc53e9851835bb19c1620fd8a78a6b11..c2536ad06c6254badf62436966f4b7f23907d098 100644 --- a/crates/storybook/src/modules/tab_bar.rs +++ b/crates/storybook/src/modules/tab_bar.rs @@ -57,7 +57,7 @@ impl TabBar { 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)) diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs index f5cc2936696751fef7e38bf55643e7457fc72d1a..675a3d0dd229fe8486c7feeaf6195be738de7da2 100644 --- a/crates/storybook/src/modules/title_bar.rs +++ b/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::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 TitleBar { .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::("https://avatars.githubusercontent.com/u/1714999?v=4") - .shape(Shape::RoundedRectangle), - ), - ), - ) .child( div() .flex() @@ -101,35 +70,8 @@ impl TitleBar { .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( diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs index 7550256afb544974a0f8619e6ca27d2b28fa4ddc..fc7f861e80f9b1685b1186a7db035218ac613dfd 100644 --- a/crates/storybook/src/storybook.rs +++ b/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::{ - 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;