guise/layout/
breakpoint.rs

1//! Responsive breakpoints: window width → a token, and per-breakpoint values.
2//!
3//! Desktop windows resize like browser windows; these helpers make layout
4//! decisions declarative. `Breakpoint::from_window(window)` during render,
5//! then either branch on it or resolve a [`Responsive`] value.
6//!
7//! ```ignore
8//! let bp = Breakpoint::from_window(window);
9//! let columns = Responsive::new(1).md(2).xl(4).resolve(bp);
10//! SimpleGrid::new(columns).children(cards)
11//! ```
12
13use gpui::Window;
14
15/// Width class thresholds (px), Tailwind-flavored: `Sm` 640, `Md` 768,
16/// `Lg` 1024, `Xl` 1280. Anything narrower is `Xs`.
17#[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
18pub enum Breakpoint {
19    Xs,
20    Sm,
21    Md,
22    Lg,
23    Xl,
24}
25
26impl Breakpoint {
27    /// The breakpoint for a width in px.
28    pub fn of(width: f32) -> Breakpoint {
29        match width {
30            w if w >= 1280.0 => Breakpoint::Xl,
31            w if w >= 1024.0 => Breakpoint::Lg,
32            w if w >= 768.0 => Breakpoint::Md,
33            w if w >= 640.0 => Breakpoint::Sm,
34            _ => Breakpoint::Xs,
35        }
36    }
37
38    /// The breakpoint for the window's current viewport width.
39    pub fn from_window(window: &Window) -> Breakpoint {
40        Breakpoint::of(f32::from(window.viewport_size().width))
41    }
42
43    /// Mobile-first comparison: `bp.at_least(Breakpoint::Md)` reads like
44    /// CSS `min-width: 768px`.
45    pub fn at_least(self, other: Breakpoint) -> bool {
46        self >= other
47    }
48}
49
50/// A value that changes at breakpoints, mobile-first: the base applies from
51/// `Xs` up, and each override kicks in at its breakpoint and above.
52#[derive(Debug, Clone, Copy, PartialEq, Eq)]
53pub struct Responsive<T> {
54    base: T,
55    sm: Option<T>,
56    md: Option<T>,
57    lg: Option<T>,
58    xl: Option<T>,
59}
60
61impl<T: Clone> Responsive<T> {
62    /// The value below the first override.
63    pub fn new(base: T) -> Self {
64        Responsive {
65            base,
66            sm: None,
67            md: None,
68            lg: None,
69            xl: None,
70        }
71    }
72
73    pub fn sm(mut self, value: T) -> Self {
74        self.sm = Some(value);
75        self
76    }
77
78    pub fn md(mut self, value: T) -> Self {
79        self.md = Some(value);
80        self
81    }
82
83    pub fn lg(mut self, value: T) -> Self {
84        self.lg = Some(value);
85        self
86    }
87
88    pub fn xl(mut self, value: T) -> Self {
89        self.xl = Some(value);
90        self
91    }
92
93    /// The value in effect at `bp`: the largest override at or below it,
94    /// else the base.
95    pub fn resolve(&self, bp: Breakpoint) -> T {
96        let ladder = [
97            (Breakpoint::Xl, &self.xl),
98            (Breakpoint::Lg, &self.lg),
99            (Breakpoint::Md, &self.md),
100            (Breakpoint::Sm, &self.sm),
101        ];
102        for (level, value) in ladder {
103            if bp.at_least(level) {
104                if let Some(v) = value {
105                    return v.clone();
106                }
107            }
108        }
109        self.base.clone()
110    }
111
112    /// Shorthand: resolve against the window's current width.
113    pub fn for_window(&self, window: &Window) -> T {
114        self.resolve(Breakpoint::from_window(window))
115    }
116}
117
118#[cfg(test)]
119mod tests {
120    use super::*;
121
122    #[test]
123    fn widths_map_to_breakpoints() {
124        assert_eq!(Breakpoint::of(0.0), Breakpoint::Xs);
125        assert_eq!(Breakpoint::of(639.9), Breakpoint::Xs);
126        assert_eq!(Breakpoint::of(640.0), Breakpoint::Sm);
127        assert_eq!(Breakpoint::of(767.0), Breakpoint::Sm);
128        assert_eq!(Breakpoint::of(768.0), Breakpoint::Md);
129        assert_eq!(Breakpoint::of(1024.0), Breakpoint::Lg);
130        assert_eq!(Breakpoint::of(1280.0), Breakpoint::Xl);
131        assert_eq!(Breakpoint::of(3840.0), Breakpoint::Xl);
132    }
133
134    #[test]
135    fn at_least_is_mobile_first() {
136        assert!(Breakpoint::Lg.at_least(Breakpoint::Md));
137        assert!(Breakpoint::Md.at_least(Breakpoint::Md));
138        assert!(!Breakpoint::Sm.at_least(Breakpoint::Md));
139    }
140
141    #[test]
142    fn responsive_resolves_the_nearest_override_below() {
143        let cols = Responsive::new(1).md(2).xl(4);
144        assert_eq!(cols.resolve(Breakpoint::Xs), 1);
145        assert_eq!(cols.resolve(Breakpoint::Sm), 1);
146        assert_eq!(cols.resolve(Breakpoint::Md), 2);
147        assert_eq!(cols.resolve(Breakpoint::Lg), 2); // inherits md
148        assert_eq!(cols.resolve(Breakpoint::Xl), 4);
149    }
150
151    #[test]
152    fn base_only_is_constant() {
153        let pad = Responsive::new("tight");
154        assert_eq!(pad.resolve(Breakpoint::Xs), "tight");
155        assert_eq!(pad.resolve(Breakpoint::Xl), "tight");
156    }
157}
guise/layout/breakpoint.rs

guise/layout/
breakpoint.rs
