1use gpui::{Hsla, IntoElement, PathBuilder, canvas, point};
2
3use crate::prelude::*;
4
5pub fn divider() -> Divider {
6 Divider {
7 style: DividerStyle::Solid,
8 direction: DividerDirection::Horizontal,
9 color: DividerColor::default(),
10 inset: false,
11 }
12}
13
14pub fn vertical_divider() -> Divider {
15 Divider {
16 style: DividerStyle::Solid,
17 direction: DividerDirection::Vertical,
18 color: DividerColor::default(),
19 inset: false,
20 }
21}
22
23#[derive(Clone, Copy, PartialEq)]
24enum DividerStyle {
25 Solid,
26 Dashed,
27}
28
29#[derive(Clone, Copy, PartialEq)]
30enum DividerDirection {
31 Horizontal,
32 Vertical,
33}
34
35/// The color of a [`Divider`].
36#[derive(Default)]
37pub enum DividerColor {
38 Border,
39 BorderFaded,
40 #[default]
41 BorderVariant,
42}
43
44impl DividerColor {
45 pub fn hsla(self, cx: &mut App) -> Hsla {
46 match self {
47 DividerColor::Border => cx.theme().colors().border,
48 DividerColor::BorderFaded => cx.theme().colors().border.opacity(0.6),
49 DividerColor::BorderVariant => cx.theme().colors().border_variant,
50 }
51 }
52}
53
54#[derive(IntoElement, RegisterComponent)]
55pub struct Divider {
56 style: DividerStyle,
57 direction: DividerDirection,
58 color: DividerColor,
59 inset: bool,
60}
61
62impl Divider {
63 pub fn horizontal() -> Self {
64 Self {
65 style: DividerStyle::Solid,
66 direction: DividerDirection::Horizontal,
67 color: DividerColor::default(),
68 inset: false,
69 }
70 }
71
72 pub fn vertical() -> Self {
73 Self {
74 style: DividerStyle::Solid,
75 direction: DividerDirection::Vertical,
76 color: DividerColor::default(),
77 inset: false,
78 }
79 }
80
81 pub fn horizontal_dashed() -> Self {
82 Self {
83 style: DividerStyle::Dashed,
84 direction: DividerDirection::Horizontal,
85 color: DividerColor::default(),
86 inset: false,
87 }
88 }
89
90 pub fn vertical_dashed() -> Self {
91 Self {
92 style: DividerStyle::Dashed,
93 direction: DividerDirection::Vertical,
94 color: DividerColor::default(),
95 inset: false,
96 }
97 }
98
99 pub fn inset(mut self) -> Self {
100 self.inset = true;
101 self
102 }
103
104 pub fn color(mut self, color: DividerColor) -> Self {
105 self.color = color;
106 self
107 }
108
109 pub fn render_solid(self, base: Div, cx: &mut App) -> impl IntoElement {
110 base.bg(self.color.hsla(cx))
111 }
112
113 pub fn render_dashed(self, base: Div) -> impl IntoElement {
114 base.relative().child(
115 canvas(
116 |_, _, _| {},
117 move |bounds, _, window, cx| {
118 let mut builder = PathBuilder::stroke(px(1.)).dash_array(&[px(4.), px(2.)]);
119 let (start, end) = match self.direction {
120 DividerDirection::Horizontal => {
121 let x = bounds.origin.x;
122 let y = bounds.origin.y + px(0.5);
123 (point(x, y), point(x + bounds.size.width, y))
124 }
125 DividerDirection::Vertical => {
126 let x = bounds.origin.x + px(0.5);
127 let y = bounds.origin.y;
128 (point(x, y), point(x, y + bounds.size.height))
129 }
130 };
131 builder.move_to(start);
132 builder.line_to(end);
133 if let Ok(line) = builder.build() {
134 window.paint_path(line, self.color.hsla(cx));
135 }
136 },
137 )
138 .absolute()
139 .size_full(),
140 )
141 }
142}
143
144impl RenderOnce for Divider {
145 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
146 let base = match self.direction {
147 DividerDirection::Horizontal => {
148 div().h_px().w_full().when(self.inset, |this| this.mx_1p5())
149 }
150 DividerDirection::Vertical => {
151 div().w_px().h_full().when(self.inset, |this| this.my_1p5())
152 }
153 };
154
155 match self.style {
156 DividerStyle::Solid => self.render_solid(base, cx).into_any_element(),
157 DividerStyle::Dashed => self.render_dashed(base).into_any_element(),
158 }
159 }
160}
161
162impl Component for Divider {
163 fn scope() -> ComponentScope {
164 ComponentScope::Layout
165 }
166
167 fn description() -> Option<&'static str> {
168 Some(
169 "Visual separator used to create divisions between groups of content or sections in a layout.",
170 )
171 }
172
173 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
174 Some(
175 v_flex()
176 .gap_6()
177 .children(vec![
178 example_group_with_title(
179 "Horizontal Dividers",
180 vec![
181 single_example("Default", Divider::horizontal().into_any_element()),
182 single_example(
183 "Border Color",
184 Divider::horizontal()
185 .color(DividerColor::Border)
186 .into_any_element(),
187 ),
188 single_example(
189 "Inset",
190 Divider::horizontal().inset().into_any_element(),
191 ),
192 single_example(
193 "Dashed",
194 Divider::horizontal_dashed().into_any_element(),
195 ),
196 ],
197 ),
198 example_group_with_title(
199 "Vertical Dividers",
200 vec![
201 single_example(
202 "Default",
203 div().h_16().child(Divider::vertical()).into_any_element(),
204 ),
205 single_example(
206 "Border Color",
207 div()
208 .h_16()
209 .child(Divider::vertical().color(DividerColor::Border))
210 .into_any_element(),
211 ),
212 single_example(
213 "Inset",
214 div()
215 .h_16()
216 .child(Divider::vertical().inset())
217 .into_any_element(),
218 ),
219 single_example(
220 "Dashed",
221 div()
222 .h_16()
223 .child(Divider::vertical_dashed())
224 .into_any_element(),
225 ),
226 ],
227 ),
228 example_group_with_title(
229 "Example Usage",
230 vec![single_example(
231 "Between Content",
232 v_flex()
233 .w_full()
234 .gap_4()
235 .px_4()
236 .child(Label::new("Section One"))
237 .child(Divider::horizontal())
238 .child(Label::new("Section Two"))
239 .child(Divider::horizontal_dashed())
240 .child(Label::new("Section Three"))
241 .into_any_element(),
242 )],
243 ),
244 ])
245 .into_any_element(),
246 )
247 }
248}