Add TrafficLights component (#3011)

This PR adds a `TrafficLights` component for GPUI2.

<img width="861" alt="Screenshot 2023-09-21 at 11 32 10 PM"
src="https://github.com/zed-industries/zed/assets/1486634/0fe0e847-49b3-44dc-bd4c-64f12f0051c1">

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2023-09-21 23:42:18 -04:00 committed by GitHub
parent 66358f2900
commit 5083ab7694
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 29 deletions

View file

@ -1 +1,2 @@
pub mod facepile;
pub mod traffic_lights;

View file

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

View file

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

View file

@ -2,11 +2,13 @@ mod facepile;
mod follow_group;
mod list_item;
mod tab;
mod traffic_lights;
pub use facepile::*;
pub use follow_group::*;
pub use list_item::*;
pub use tab::*;
pub use traffic_lights::*;
use std::marker::PhantomData;
use std::rc::Rc;

View file

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

View file

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