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}