Add indicator component

Nate Butler and Marshall Bowers created 2 years ago

Co-Authored-By: Marshall Bowers <[e-mail]>

Change summary

crates/ui2/src/components.rs           |  2 
crates/ui2/src/components/indicator.rs | 59 ++++++++++++++++++++++++++++
2 files changed, 61 insertions(+)

Detailed changes

crates/ui2/src/components.rs

@@ -5,6 +5,7 @@ mod context_menu;
 mod disclosure;
 mod divider;
 mod icon;
+mod indicator;
 mod keybinding;
 mod label;
 mod list;
@@ -24,6 +25,7 @@ pub use context_menu::*;
 pub use disclosure::*;
 pub use divider::*;
 pub use icon::*;
+pub use indicator::*;
 pub use keybinding::*;
 pub use label::*;
 pub use list::*;

crates/ui2/src/components/indicator.rs

@@ -0,0 +1,59 @@
+use gpui::{AnyView, Div, Position};
+
+use crate::prelude::*;
+
+#[derive(Default)]
+pub enum IndicatorStyle {
+    #[default]
+    Dot,
+    Bar,
+}
+
+#[derive(IntoElement)]
+pub struct Indicator {
+    position: Position,
+    style: IndicatorStyle,
+    color: Color,
+}
+
+impl Indicator {
+    pub fn dot() -> Self {
+        Self {
+            position: Position::Relative,
+            style: IndicatorStyle::Dot,
+            color: Color::Default,
+        }
+    }
+
+    pub fn bar() -> Self {
+        Self {
+            position: Position::Relative,
+            style: IndicatorStyle::Dot,
+            color: Color::Default,
+        }
+    }
+
+    pub fn color(mut self, color: Color) -> Self {
+        self.color = color;
+        self
+    }
+
+    pub fn absolute(mut self) -> Self {
+        self.position = Position::Absolute;
+        self
+    }
+}
+
+impl RenderOnce for Indicator {
+    type Rendered = Div;
+
+    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+        div()
+            .map(|this| match self.style {
+                IndicatorStyle::Dot => this.w_1p5().h_1p5().rounded_full(),
+                IndicatorStyle::Bar => this.w_full().h_1p5().rounded_t_md(),
+            })
+            .when(self.position == Position::Absolute, |this| this.absolute())
+            .bg(self.color.color(cx))
+    }
+}