guise/data/
timeline.rs

1//! `Timeline` — a vertical sequence of events with bullets and connectors.
2
3use gpui::prelude::*;
4use gpui::{div, px, App, FontWeight, IntoElement, SharedString, Window};
5
6use crate::devtools::Probed;
7use crate::theme::{theme, ColorName, Size};
8
9struct Item {
10    title: SharedString,
11    description: Option<SharedString>,
12}
13
14/// A vertical timeline. Items up to and including `active` are highlighted.
15#[derive(IntoElement)]
16pub struct Timeline {
17    items: Vec<Item>,
18    active: usize,
19    color: ColorName,
20}
21
22impl Timeline {
23    pub fn new() -> Self {
24        Timeline {
25            items: Vec::new(),
26            active: 0,
27            color: ColorName::Blue,
28        }
29    }
30
31    pub fn item(mut self, title: impl Into<SharedString>) -> Self {
32        self.items.push(Item {
33            title: title.into(),
34            description: None,
35        });
36        self
37    }
38
39    pub fn item_desc(
40        mut self,
41        title: impl Into<SharedString>,
42        description: impl Into<SharedString>,
43    ) -> Self {
44        self.items.push(Item {
45            title: title.into(),
46            description: Some(description.into()),
47        });
48        self
49    }
50
51    /// Index of the last highlighted item.
52    pub fn active(mut self, active: usize) -> Self {
53        self.active = active;
54        self
55    }
56
57    pub fn color(mut self, color: ColorName) -> Self {
58        self.color = color;
59        self
60    }
61}
62
63impl Default for Timeline {
64    fn default() -> Self {
65        Timeline::new()
66    }
67}
68
69impl RenderOnce for Timeline {
70    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
71        let t = theme(cx);
72        let accent = t.color(self.color, t.primary_shade()).hsla();
73        let border = t.border().hsla();
74        let surface = t.surface().hsla();
75        let text = t.text().hsla();
76        let dimmed = t.dimmed().hsla();
77        let font = t.font_size(Size::Sm);
78        let last = self.items.len().saturating_sub(1);
79
80        let mut column = div().flex().flex_col();
81        for (i, item) in self.items.iter().enumerate() {
82            let reached = i <= self.active;
83            let connector_done = i < self.active;
84
85            let mut rail = div().flex().flex_col().items_center().w(px(20.0));
86            let mut dot = div().w(px(14.0)).h(px(14.0)).rounded(px(7.0));
87            dot = if reached {
88                dot.bg(accent)
89            } else {
90                dot.bg(surface).border_1().border_color(border)
91            };
92            rail = rail.child(dot);
93            if i != last {
94                rail = rail.child(
95                    div()
96                        .w(px(2.0))
97                        .flex_grow()
98                        .min_h(px(12.0))
99                        .bg(if connector_done { accent } else { border }),
100                );
101            }
102
103            let mut content = div()
104                .flex()
105                .flex_col()
106                .gap(px(2.0))
107                .pb(px(if i == last { 0.0 } else { 18.0 }))
108                .child(
109                    div()
110                        .font_weight(FontWeight::SEMIBOLD)
111                        .text_size(px(font))
112                        .text_color(text)
113                        .child(item.title.clone()),
114                );
115            if let Some(description) = item.description.clone() {
116                content = content.child(
117                    div()
118                        .text_size(px(t.font_size(Size::Xs)))
119                        .text_color(dimmed)
120                        .child(description),
121                );
122            }
123
124            column = column.child(div().flex().gap(px(10.0)).child(rail).child(content));
125        }
126        column.probe("Timeline")
127    }
128}
guise/data/timeline.rs

guise/data/
timeline.rs
