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