1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
//! Popover menu component with positioned menu items.
use crate::components::icon::Icon;
use crate::theme::use_theme;
use kael::prelude::FluentBuilder;
use kael::*;
use std::rc::Rc;
pub struct PopoverMenuItem {
pub id: SharedString,
pub label: SharedString,
pub icon: Option<SharedString>,
pub on_click: Option<Rc<dyn Fn(&mut Window, &mut App) + 'static>>,
pub disabled: bool,
}
impl PopoverMenuItem {
pub fn new(id: impl Into<SharedString>, label: impl Into<SharedString>) -> Self {
Self {
id: id.into(),
label: label.into(),
icon: None,
on_click: None,
disabled: false,
}
}
pub fn icon(mut self, icon: impl Into<SharedString>) -> Self {
self.icon = Some(icon.into());
self
}
pub fn on_click<F>(mut self, handler: F) -> Self
where
F: Fn(&mut Window, &mut App) + 'static,
{
self.on_click = Some(Rc::new(handler));
self
}
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
}
#[derive(IntoElement)]
pub struct PopoverMenu {
position: Point<Pixels>,
items: Vec<PopoverMenuItem>,
on_close: Option<Rc<dyn Fn(&mut Window, &mut App) + 'static>>,
style: StyleRefinement,
}
impl PopoverMenu {
pub fn new(position: Point<Pixels>, items: Vec<PopoverMenuItem>) -> Self {
Self {
position,
items,
on_close: None,
style: StyleRefinement::default(),
}
}
pub fn on_close<F>(mut self, handler: F) -> Self
where
F: Fn(&mut Window, &mut App) + 'static,
{
self.on_close = Some(Rc::new(handler));
self
}
}
impl Styled for PopoverMenu {
fn style(&mut self) -> &mut StyleRefinement {
&mut self.style
}
}
impl RenderOnce for PopoverMenu {
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
let theme = use_theme();
let on_close_backdrop = self.on_close.clone();
let user_style = self.style;
div()
.absolute()
.top_0()
.left_0()
.size_full()
.on_mouse_down(MouseButton::Left, move |_, window, cx| {
if let Some(ref handler) = on_close_backdrop {
handler(window, cx);
}
})
.child(
deferred(
anchored().snap_to_window().position(self.position).child(
div().occlude().child(
div()
.min_w(px(200.0))
.max_w(px(300.0))
.flex()
.flex_col()
.bg(theme.tokens.popover)
.text_color(theme.tokens.popover_foreground)
.border_1()
.border_color(theme.tokens.border)
.rounded(theme.tokens.radius_md)
.shadow_lg()
.p(px(4.0))
.map(|this| {
let mut div = this;
div.style().refine(&user_style);
div
})
.on_mouse_down(MouseButton::Left, |_, _, cx| {
cx.stop_propagation();
})
.children(self.items.into_iter().map(|item| {
let on_click = item.on_click;
let disabled = item.disabled;
div()
.flex()
.items_center()
.gap(px(8.0))
.px(px(12.0))
.py(px(8.0))
.rounded(px(4.0))
.cursor(if disabled {
CursorStyle::Arrow
} else {
CursorStyle::PointingHand
})
.when(!disabled, |this| {
this.hover(|style| {
style.bg(theme.tokens.accent.opacity(0.1))
})
})
.when(disabled, |this| this.opacity(0.5))
.when_some(item.icon, |this, icon_name| {
this.child(
Icon::new(icon_name)
.size(px(16.0))
.color(theme.tokens.foreground),
)
})
.child(div().text_size(px(14.0)).child(item.label))
.when(!disabled && on_click.is_some(), |this| {
this.on_mouse_down(
MouseButton::Left,
move |_, window, cx| {
if let Some(ref handler) = on_click {
handler(window, cx);
}
cx.stop_propagation();
},
)
})
})),
),
),
)
.with_priority(1),
)
}
}