Skip to content

Commit ded9825

Browse files
jmbejarjmbejar
authored
Merge pull request #157 from moxin-org/extract-moxin-panel-further
Extract moxin panel (further)
2 parents 180a304 + b09db0e commit ded9825

File tree

4 files changed

+340
-160
lines changed

4 files changed

+340
-160
lines changed

‎src/chat/chat_history.rs

+23-84
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,22 @@
1-
use makepad_widgets::*;
2-
use crate::data::store::Store;
31
use super::chat_history_card::ChatHistoryCardWidgetRefExt;
2+
use crate::{data::store::Store, shared::toggle_panel::TogglePanel};
3+
use makepad_widgets::*;
44

55
live_design! {
66
import makepad_widgets::base::*;
77
import makepad_widgets::theme_desktop_dark::*;
88

99
import crate::shared::styles::*;
10-
import crate::shared::widgets::FadeView;
1110
import crate::shared::widgets::MoxinButton;
1211
import makepad_draw::shader::std::*;
1312

1413
import crate::chat::shared::ChatAgentAvatar;
1514
import crate::chat::chat_history_card::ChatHistoryCard;
1615

1716
ICON_NEW_CHAT = dep("crate://self/resources/icons/new_chat.svg")
18-
ICON_CLOSE_PANEL = dep("crate://self/resources/icons/close_left_panel.svg")
19-
ICON_OPEN_PANEL = dep("crate://self/resources/icons/open_left_panel.svg")
20-
21-
ChatHistoryActions = <View> {
22-
spacing: 10,
23-
height: Fit
24-
25-
close_panel_button = <MoxinButton> {
26-
width: Fit,
27-
height: Fit,
28-
icon_walk: {width: 20, height: 20},
29-
draw_icon: {
30-
svg_file: (ICON_CLOSE_PANEL),
31-
fn get_color(self) -> vec4 {
32-
return #475467;
33-
}
34-
}
35-
}
36-
37-
open_panel_button = <MoxinButton> {
38-
width: Fit,
39-
height: Fit,
40-
visible: false,
41-
icon_walk: {width: 20, height: 20},
42-
draw_icon: {
43-
svg_file: (ICON_OPEN_PANEL),
44-
fn get_color(self) -> vec4 {
45-
return #475467;
46-
}
47-
}
48-
}
49-
50-
new_chat_button = <MoxinButton> {
51-
width: Fit,
52-
height: Fit,
53-
icon_walk: {margin: { top: -1 }, width: 21, height: 21},
54-
draw_icon: {
55-
svg_file: (ICON_NEW_CHAT),
56-
fn get_color(self) -> vec4 {
57-
return #475467;
58-
}
59-
}
60-
}
61-
}
6217

6318
ChatHistory = {{ChatHistory}} {
64-
flow: Overlay
65-
width: Fit
66-
height: Fill
67-
68-
main_content = <FadeView> {
69-
width: 300
70-
height: Fill,
19+
open_content = {
7120
<View> {
7221
width: Fill,
7322
height: Fill,
@@ -90,42 +39,36 @@ live_design! {
9039
}
9140
}
9241

93-
<ChatHistoryActions> {
94-
padding: {top: 58, left: 25, right: 25}
95-
}
96-
97-
animator: {
98-
panel = {
99-
default: show,
100-
show = {
101-
redraw: true,
102-
from: {all: Forward {duration: 0.3}}
103-
ease: ExpDecay {d1: 0.80, d2: 0.97}
104-
apply: {main_content = { width: 300, draw_bg: {opacity: 1.0} }}
105-
}
106-
hide = {
107-
redraw: true,
108-
from: {all: Forward {duration: 0.3}}
109-
ease: ExpDecay {d1: 0.80, d2: 0.97}
110-
apply: {main_content = { width: 110, draw_bg: {opacity: 0.0} }}
42+
persistent_content = {
43+
default = {
44+
after = {
45+
new_chat_button = <MoxinButton> {
46+
width: Fit,
47+
height: Fit,
48+
icon_walk: {margin: { top: -1 }, width: 21, height: 21},
49+
draw_icon: {
50+
svg_file: (ICON_NEW_CHAT),
51+
fn get_color(self) -> vec4 {
52+
return #475467;
53+
}
54+
}
55+
}
11156
}
11257
}
11358
}
59+
11460
}
11561
}
11662

11763
#[derive(Live, LiveHook, Widget)]
11864
pub struct ChatHistory {
11965
#[deref]
120-
view: View,
121-
122-
#[animator]
123-
animator: Animator,
66+
deref: TogglePanel,
12467
}
12568

12669
impl Widget for ChatHistory {
12770
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
128-
self.view.handle_event(cx, event, scope);
71+
self.deref.handle_event(cx, event, scope);
12972
self.widget_match_event(cx, event, scope);
13073

13174
// TODO This is a hack to redraw the chat history and reflect the
@@ -134,10 +77,6 @@ impl Widget for ChatHistory {
13477
if let Event::Signal = event {
13578
self.redraw(cx);
13679
}
137-
138-
if self.animator_handle_event(cx, event).must_redraw() {
139-
self.redraw(cx);
140-
}
14180
}
14281

14382
fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
@@ -154,7 +93,7 @@ impl Widget for ChatHistory {
15493

15594
let chats_count = chats.saved_chats.len();
15695

157-
while let Some(view_item) = self.view.draw_walk(cx, scope, walk).step() {
96+
while let Some(view_item) = self.deref.draw_walk(cx, scope, walk).step() {
15897
if let Some(mut list) = view_item.as_portal_list().borrow_mut() {
15998
list.set_item_range(cx, 0, chats_count);
16099
while let Some(item_id) = list.next_visible_item(cx) {
@@ -186,13 +125,13 @@ impl WidgetMatchEvent for ChatHistory {
186125
if self.button(id!(close_panel_button)).clicked(&actions) {
187126
self.button(id!(close_panel_button)).set_visible(false);
188127
self.button(id!(open_panel_button)).set_visible(true);
189-
self.animator_play(cx, id!(panel.hide));
128+
self.deref.set_open(cx, false);
190129
}
191130

192131
if self.button(id!(open_panel_button)).clicked(&actions) {
193132
self.button(id!(open_panel_button)).set_visible(false);
194133
self.button(id!(close_panel_button)).set_visible(true);
195-
self.animator_play(cx, id!(panel.show));
134+
self.deref.set_open(cx, true);
196135
}
197136
}
198137
}

‎src/chat/chat_params.rs

+29-76
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ use makepad_widgets::*;
22

33
use crate::{
44
data::{chats::chat::ChatID, store::Store},
5-
shared::actions::TooltipAction,
5+
shared::{actions::TooltipAction, toggle_panel::TogglePanel},
66
};
77

88
live_design! {
@@ -36,50 +36,8 @@ live_design! {
3636
}
3737
}
3838

39-
ChatParamsActions = <View> {
40-
height: Fit
41-
flow: Right
42-
43-
<View> {
44-
width: Fill
45-
height: Fit
46-
}
47-
48-
49-
close_panel_button = <MoxinButton> {
50-
width: Fit,
51-
height: Fit,
52-
icon_walk: {width: 20, height: 20},
53-
draw_icon: {
54-
svg_file: (ICON_CLOSE_PANEL),
55-
fn get_color(self) -> vec4 {
56-
return #475467;
57-
}
58-
}
59-
}
60-
61-
open_panel_button = <MoxinButton> {
62-
width: Fit,
63-
height: Fit,
64-
visible: false,
65-
icon_walk: {width: 20, height: 20},
66-
draw_icon: {
67-
svg_file: (ICON_OPEN_PANEL),
68-
fn get_color(self) -> vec4 {
69-
return #475467;
70-
}
71-
}
72-
}
73-
}
74-
7539
ChatParams = {{ChatParams}} {
76-
flow: Overlay,
77-
width: Fit,
78-
height: Fill,
79-
80-
main_content = <FadeView> {
81-
width: 300
82-
height: Fill
40+
open_content = {
8341
<View> {
8442
width: Fill
8543
height: Fill
@@ -239,53 +197,48 @@ live_design! {
239197
}
240198
}
241199

242-
<ChatParamsActions> {
243-
padding: {top: 58, left: 25, right: 25}
244-
}
245-
246-
animator: {
247-
panel = {
248-
default: show,
249-
show = {
250-
redraw: true,
251-
from: {all: Forward {duration: 0.3}}
252-
ease: ExpDecay {d1: 0.80, d2: 0.97}
253-
apply: {main_content = { width: 300, draw_bg: {opacity: 1.0} }}
200+
persistent_content = {
201+
default = {
202+
before = {
203+
width: Fill
254204
}
255-
hide = {
256-
redraw: true,
257-
from: {all: Forward {duration: 0.3}}
258-
ease: ExpDecay {d1: 0.80, d2: 0.97}
259-
apply: {main_content = { width: 110, draw_bg: {opacity: 0.0} }}
205+
open = {
206+
draw_icon: {
207+
svg_file: (ICON_OPEN_PANEL),
208+
}
209+
}
210+
close = {
211+
draw_icon: {
212+
svg_file: (ICON_CLOSE_PANEL),
213+
}
260214
}
261215
}
262216
}
263217
}
264218
}
265219

266-
const TOOLTIP_OFFSET: DVec2 = DVec2 { x: -320.0, y: -30.0 };
267-
const TOOLTIP_OFFSET_BOTTOM: DVec2 = DVec2 { x: -320.0, y: -100.0 };
220+
const TOOLTIP_OFFSET: DVec2 = DVec2 {
221+
x: -320.0,
222+
y: -30.0,
223+
};
224+
const TOOLTIP_OFFSET_BOTTOM: DVec2 = DVec2 {
225+
x: -320.0,
226+
y: -100.0,
227+
};
268228

269229
#[derive(Live, LiveHook, Widget)]
270230
pub struct ChatParams {
271231
#[deref]
272-
view: View,
273-
274-
#[animator]
275-
animator: Animator,
232+
deref: TogglePanel,
276233

277234
#[rust]
278235
current_chat_id: Option<ChatID>,
279236
}
280237

281238
impl Widget for ChatParams {
282239
fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
283-
self.view.handle_event(cx, event, scope);
240+
self.deref.handle_event(cx, event, scope);
284241
self.widget_match_event(cx, event, scope);
285-
286-
if self.animator_handle_event(cx, event).must_redraw() {
287-
self.redraw(cx);
288-
}
289242
}
290243

291244
fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
@@ -327,7 +280,7 @@ impl Widget for ChatParams {
327280
self.visible = false;
328281
}
329282

330-
self.view.draw_walk(cx, scope, walk)
283+
self.deref.draw_walk(cx, scope, walk)
331284
}
332285
}
333286

@@ -342,13 +295,13 @@ impl WidgetMatchEvent for ChatParams {
342295
if close.clicked(&actions) {
343296
close.set_visible(false);
344297
open.set_visible(true);
345-
self.animator_play(cx, id!(panel.hide));
298+
self.set_open(cx, false);
346299
}
347300

348301
if open.clicked(&actions) {
349302
open.set_visible(false);
350303
close.set_visible(true);
351-
self.animator_play(cx, id!(panel.show));
304+
self.set_open(cx, true);
352305
}
353306

354307
if let Some(chat) = store.chats.get_current_chat() {
@@ -402,7 +355,7 @@ impl WidgetMatchEvent for ChatParams {
402355

403356
impl ChatParams {
404357
fn handle_tooltip_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
405-
if self.animator.animator_in_state(cx, id!(panel.hide)) {
358+
if !self.is_open(cx) {
406359
return;
407360
}
408361

‎src/shared/mod.rs

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ pub mod modal;
88
pub mod portal;
99
pub mod resource_imports;
1010
pub mod styles;
11+
pub mod toggle_panel;
1112
pub mod tooltip;
1213
pub mod utils;
1314
pub mod widgets;
@@ -22,4 +23,5 @@ pub fn live_design(cx: &mut Cx) {
2223
download_notification_popup::live_design(cx);
2324
tooltip::live_design(cx);
2425
desktop_buttons::live_design(cx);
26+
toggle_panel::live_design(cx);
2527
}

0 commit comments

Comments
 (0)