Add ui::Divider 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/divider.rs | 46 +++++++++++++++++++++++++++++
2 files changed, 48 insertions(+)

Detailed changes

crates/ui2/src/components.rs

@@ -3,6 +3,7 @@ mod button;
 mod checkbox;
 mod context_menu;
 mod details;
+mod divider;
 mod elevated_surface;
 mod facepile;
 mod icon;
@@ -31,6 +32,7 @@ pub use button::*;
 pub use checkbox::*;
 pub use context_menu::*;
 pub use details::*;
+pub use divider::*;
 pub use elevated_surface::*;
 pub use facepile::*;
 pub use icon::*;

crates/ui2/src/components/divider.rs

@@ -0,0 +1,46 @@
+use crate::prelude::*;
+
+enum DividerDirection {
+    Horizontal,
+    Vertical,
+}
+
+#[derive(Component)]
+pub struct Divider {
+    direction: DividerDirection,
+    inset: bool,
+}
+
+impl Divider {
+    pub fn horizontal() -> Self {
+        Self {
+            direction: DividerDirection::Horizontal,
+            inset: false,
+        }
+    }
+
+    pub fn vertical() -> Self {
+        Self {
+            direction: DividerDirection::Vertical,
+            inset: false,
+        }
+    }
+
+    pub fn inset(mut self) -> Self {
+        self.inset = true;
+        self
+    }
+
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        div()
+            .map(|this| match self.direction {
+                DividerDirection::Horizontal => {
+                    this.h_px().w_full().when(self.inset, |this| this.mx_1p5())
+                }
+                DividerDirection::Vertical => {
+                    this.w_px().h_full().when(self.inset, |this| this.my_1p5())
+                }
+            })
+            .bg(cx.theme().colors().border_variant)
+    }
+}