crates/storybook/src/stories/components.rs 🔗
@@ -1 +1,2 @@
pub mod facepile;
+pub mod traffic_lights;
Nate Butler created
crates/storybook/src/stories/components.rs | 1
crates/storybook/src/stories/components/traffic_lights.rs | 29 ++++++++
crates/storybook/src/storybook.rs | 6 +
crates/ui/src/components.rs | 2
crates/ui/src/components/traffic_lights.rs | 30 ++++++++
crates/ui/src/templates/title_bar.rs | 31 --------
6 files changed, 70 insertions(+), 29 deletions(-)
@@ -1 +1,2 @@
pub mod facepile;
+pub mod traffic_lights;
@@ -0,0 +1,29 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{rgb, Element, Hsla, IntoElement, ParentElement, ViewContext};
+use ui::{theme, traffic_lights};
+
+#[derive(Element, Default)]
+pub struct TrafficLightsStory {}
+
+impl TrafficLightsStory {
+ fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+ let theme = theme(cx);
+
+ div()
+ .size_full()
+ .flex()
+ .flex_col()
+ .pt_2()
+ .px_4()
+ .font("Zed Mono Extended")
+ .fill(rgb::<Hsla>(0x282c34))
+ .child(
+ div()
+ .text_2xl()
+ .text_color(rgb::<Hsla>(0xffffff))
+ .child(std::any::type_name::<ui::TrafficLights>()),
+ )
+ .child(traffic_lights())
+ }
+}
@@ -14,6 +14,7 @@ use log::LevelFilter;
use settings::{default_settings, SettingsStore};
use simplelog::SimpleLogger;
use stories::components::facepile::FacepileStory;
+use stories::components::traffic_lights::TrafficLightsStory;
use stories::elements::avatar::AvatarStory;
use ui::{ElementExt, Theme};
@@ -35,6 +36,7 @@ impl FromStr for Story {
match s.to_ascii_lowercase().as_str() {
"elements/avatar" => Ok(Self::Element(ElementStory::Avatar)),
"components/facepile" => Ok(Self::Component(ComponentStory::Facepile)),
+ "components/traffic_lights" => Ok(Self::Component(ComponentStory::TrafficLights)),
_ => Err(anyhow!("story not found for '{s}'")),
}
}
@@ -48,6 +50,7 @@ enum ElementStory {
#[derive(Debug, Clone, Copy)]
enum ComponentStory {
Facepile,
+ TrafficLights,
}
#[derive(Parser)]
@@ -82,6 +85,9 @@ fn main() {
Some(Story::Component(ComponentStory::Facepile)) => {
view(|cx| render_story(&mut ViewContext::new(cx), FacepileStory::default()))
}
+ Some(Story::Component(ComponentStory::TrafficLights)) => view(|cx| {
+ render_story(&mut ViewContext::new(cx), TrafficLightsStory::default())
+ }),
None => {
view(|cx| render_story(&mut ViewContext::new(cx), WorkspaceElement::default()))
}
@@ -4,6 +4,7 @@ mod list_item;
mod list_section_header;
mod palette_item;
mod tab;
+mod traffic_lights;
pub use facepile::*;
pub use follow_group::*;
@@ -11,6 +12,7 @@ pub use list_item::*;
pub use list_section_header::*;
pub use palette_item::*;
pub use tab::*;
+pub use traffic_lights::*;
use std::marker::PhantomData;
use std::rc::Rc;
@@ -0,0 +1,30 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, Hsla, IntoElement, ParentElement, ViewContext};
+
+use crate::theme;
+
+#[derive(Element)]
+pub struct TrafficLights {}
+
+pub fn traffic_lights() -> TrafficLights {
+ TrafficLights {}
+}
+
+impl TrafficLights {
+ fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+ let theme = theme(cx);
+
+ div()
+ .flex()
+ .items_center()
+ .gap_2()
+ .child(traffic_light(theme.lowest.negative.default.foreground))
+ .child(traffic_light(theme.lowest.warning.default.foreground))
+ .child(traffic_light(theme.lowest.positive.default.foreground))
+ }
+}
+
+fn traffic_light<V: 'static, C: Into<Hsla>>(fill: C) -> div::Div<V> {
+ div().w_3().h_3().rounded_full().fill(fill.into())
+}
@@ -5,7 +5,7 @@ use gpui2::style::StyleHelpers;
use gpui2::{Element, IntoElement, ParentElement, ViewContext};
use crate::prelude::Shape;
-use crate::{avatar, follow_group, icon_button, text_button, theme, tool_divider};
+use crate::{avatar, follow_group, icon_button, text_button, theme, tool_divider, traffic_lights};
#[derive(Element)]
pub struct TitleBar<V: 'static> {
@@ -40,34 +40,7 @@ impl<V: 'static> TitleBar<V> {
.h_full()
.gap_4()
.px_2()
- // === Traffic Lights === //
- .child(
- div()
- .flex()
- .items_center()
- .gap_2()
- .child(
- div()
- .w_3()
- .h_3()
- .rounded_full()
- .fill(theme.lowest.positive.default.foreground),
- )
- .child(
- div()
- .w_3()
- .h_3()
- .rounded_full()
- .fill(theme.lowest.warning.default.foreground),
- )
- .child(
- div()
- .w_3()
- .h_3()
- .rounded_full()
- .fill(theme.lowest.negative.default.foreground),
- ),
- )
+ .child(traffic_lights())
// === Project Info === //
.child(
div()