split_button.rs

 1use gpui::{
 2    AnyElement, App, BoxShadow, IntoElement, ParentElement, RenderOnce, Styled, Window, div, hsla,
 3    point, prelude::FluentBuilder, px,
 4};
 5use theme::ActiveTheme;
 6
 7use crate::{ElevationIndex, h_flex};
 8
 9use super::ButtonLike;
10
11#[derive(Clone, Copy, PartialEq)]
12pub enum SplitButtonStyle {
13    Filled,
14    Outlined,
15    Transparent,
16}
17
18/// /// A button with two parts: a primary action on the left and a secondary action on the right.
19///
20/// The left side is a [`ButtonLike`] with the main action, while the right side can contain
21/// any element (typically a dropdown trigger or similar).
22///
23/// The two sections are visually separated by a divider, but presented as a unified control.
24#[derive(IntoElement)]
25pub struct SplitButton {
26    pub left: ButtonLike,
27    pub right: AnyElement,
28    style: SplitButtonStyle,
29}
30
31impl SplitButton {
32    pub const fn new(left: ButtonLike, right: AnyElement) -> Self {
33        Self {
34            left,
35            right,
36            style: SplitButtonStyle::Filled,
37        }
38    }
39
40    pub const fn style(mut self, style: SplitButtonStyle) -> Self {
41        self.style = style;
42        self
43    }
44}
45
46impl RenderOnce for SplitButton {
47    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
48        let is_filled_or_outlined = matches!(
49            self.style,
50            SplitButtonStyle::Filled | SplitButtonStyle::Outlined
51        );
52
53        h_flex()
54            .rounded_sm()
55            .when(is_filled_or_outlined, |this| {
56                this.border_1()
57                    .border_color(cx.theme().colors().border.opacity(0.8))
58            })
59            .child(div().flex_grow().child(self.left))
60            .child(
61                div()
62                    .h_full()
63                    .w_px()
64                    .bg(cx.theme().colors().border.opacity(0.5)),
65            )
66            .child(self.right)
67            .when(self.style == SplitButtonStyle::Filled, |this| {
68                this.bg(ElevationIndex::Surface.on_elevation_bg(cx))
69                    .shadow(vec![BoxShadow {
70                        color: hsla(0.0, 0.0, 0.0, 0.16),
71                        offset: point(px(0.), px(1.)),
72                        blur_radius: px(0.),
73                        spread_radius: px(0.),
74                    }])
75            })
76    }
77}