From 5ce2a632c969062a0e37d54697d82a1a0f4fe1cf Mon Sep 17 00:00:00 2001 From: Kevin Boos Date: Thu, 11 Jul 2024 13:35:28 -0700 Subject: [PATCH 1/6] WIP (panics) --- README.md | 4 + resources/icons/close.svg | 3 + resources/icons/copy.svg | 8 + resources/icons/external_link.svg | 8 + resources/icons/go_back.svg | 1 + resources/icons/prohibited.svg | 21 ++ resources/icons/start_chat.svg | 1 + src/app.rs | 112 +++++--- src/contacts/mod.rs | 10 + src/discover/mod.rs | 9 + src/home/mod.rs | 10 +- src/home/room_screen.rs | 222 +++++++------- src/home/rooms_list.rs | 3 +- src/profile/mod.rs | 9 + src/profile/user_profile.rs | 461 ++++++++++++++++++++++++++++++ src/shared/avatar.rs | 70 ++++- src/shared/mod.rs | 24 +- src/shared/modal.rs | 77 +++++ src/shared/portal.rs | 242 ++++++++++++++++ 19 files changed, 1135 insertions(+), 160 deletions(-) create mode 100644 resources/icons/close.svg create mode 100644 resources/icons/copy.svg create mode 100644 resources/icons/external_link.svg create mode 100644 resources/icons/go_back.svg create mode 100644 resources/icons/prohibited.svg create mode 100644 resources/icons/start_chat.svg create mode 100644 src/profile/user_profile.rs create mode 100644 src/shared/modal.rs create mode 100644 src/shared/portal.rs diff --git a/README.md b/README.md index c6de19e3..fdf9c5f4 100644 --- a/README.md +++ b/README.md @@ -115,3 +115,7 @@ These are generally sorted in order of priority. If you're interested in helping - [ ] User profile settings screen - [ ] Persistence of app state to disk + +## Known problems/issues + - URLs do not wrap properly; that is a Makepad-side problem. + - Matrix-specific links are not yet fully handled (https://matrix.to/...) diff --git a/resources/icons/close.svg b/resources/icons/close.svg new file mode 100644 index 00000000..4d5ee5b1 --- /dev/null +++ b/resources/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/icons/copy.svg b/resources/icons/copy.svg new file mode 100644 index 00000000..ea7de352 --- /dev/null +++ b/resources/icons/copy.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/icons/external_link.svg b/resources/icons/external_link.svg new file mode 100644 index 00000000..37838221 --- /dev/null +++ b/resources/icons/external_link.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/icons/go_back.svg b/resources/icons/go_back.svg new file mode 100644 index 00000000..07c293cf --- /dev/null +++ b/resources/icons/go_back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/icons/prohibited.svg b/resources/icons/prohibited.svg new file mode 100644 index 00000000..93e1e509 --- /dev/null +++ b/resources/icons/prohibited.svg @@ -0,0 +1,21 @@ + + + + + + image/svg+xml + + + + + + + diff --git a/resources/icons/start_chat.svg b/resources/icons/start_chat.svg new file mode 100644 index 00000000..df1bc381 --- /dev/null +++ b/resources/icons/start_chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app.rs b/src/app.rs index 605a7ca8..1a9123e8 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,5 +1,6 @@ use crate::home::rooms_list::RoomListAction; use crate::home::room_screen::*; +use crate::profile::user_profile::{ShowUserProfileAction, UserProfileSlidingPaneWidgetRefExt}; use makepad_widgets::*; live_design! { @@ -15,8 +16,8 @@ live_design! { import crate::discover::moments_screen::MomentsScreen import crate::profile::profile_screen::ProfileScreen import crate::profile::my_profile_screen::MyProfileScreen - import crate::shared::clickable_view::ClickableView + import crate::shared::portal::*; import crate::shared::styles::*; ICON_CHAT = dep("crate://self/resources/icons/chat.svg") @@ -184,75 +185,82 @@ live_design! { } } - moments_stack_view = { + rooms_stack_view = { header = { content = { title_container = { + padding: { bottom: 0 } title = { - text: "Moments" + width: Fit, + text: "Loading room..." + draw_text: { + color: (MESSAGE_TEXT_COLOR), + } } } + button_container = { left_button = { + icon_walk: {width: 12, height: 68}, + } } } } body = { - {} + room_screen = {} } } - add_contact_stack_view = { + moments_stack_view = { header = { content = { title_container = { title = { - text: "Add Contact" + text: "Moments" } } } } body = { - {} + {} } } - my_profile_stack_view = { + add_contact_stack_view = { header = { content = { title_container = { title = { - text: "My Profile" + text: "Add Contact" } } } } body = { - {} + {} } } - rooms_stack_view = { + my_profile_stack_view = { header = { content = { title_container = { - padding: { bottom: 0 } title = { - width: Fit, - text: "Loading room..." - draw_text: { - color: (MESSAGE_TEXT_COLOR), - } + text: "My Profile" } } - button_container = { left_button = { - icon_walk: {width: 12, height: 68}, - } } } } body = { - room_screen = {} + {} } } + + } // end of StackNavigation + + portal_root = { + user_profile_sliding_pane_portal = { + user_profile_sliding_pane = { } + } } - } + } // end of body } } } @@ -265,10 +273,8 @@ pub struct App { ui: WidgetRef, } -impl LiveRegister for App { - fn live_register(cx: &mut Cx) { - makepad_widgets::live_design(cx); +/* // shared crate::shared::styles::live_design(cx); crate::shared::helpers::live_design(cx); @@ -300,6 +306,21 @@ impl LiveRegister for App { // profile crate::profile::profile_screen::live_design(cx); crate::profile::my_profile_screen::live_design(cx); + +*/ + +impl LiveRegister for App { + fn live_register(cx: &mut Cx) { + // Order matters here, as some widget definitions depend on others. + // `makepad_widgets` must be registered first, + // then `shared`` widgets (in which styles are defined), + // then other modules widgets. + makepad_widgets::live_design(cx); + crate::shared::live_design(cx); + crate::home::live_design(cx); + crate::contacts::live_design(cx); + crate::discover::live_design(cx); + crate::profile::live_design(cx); } } @@ -335,6 +356,7 @@ impl MatchEvent for App { */ fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) { + // Handle the user selecting a tab in the mobile menu on bottom. self.ui.radio_button_set(ids!( mobile_modes.tab1, mobile_modes.tab2, @@ -353,39 +375,41 @@ impl MatchEvent for App { ), ); - self.handle_rooms_list_action(&actions); - - let mut navigation = self.ui.stack_navigation(id!(navigation)); - navigation.handle_stack_view_actions(cx, &actions); - } -} + // Handle stack navigation actions, e.g., navigating to/from a room screen + let mut stack_navigation = self.ui.stack_navigation(id!(navigation)); + stack_navigation.handle_stack_view_actions(cx, &actions); -impl AppMain for App { - fn handle_event(&mut self, cx: &mut Cx, event: &Event) { - // Forward events to the MatchEvent trait impl, and then to the App's UI element. - self.match_event(cx, event); - self.ui.handle_event(cx, event, &mut Scope::empty()); - } -} -impl App { - fn handle_rooms_list_action(&mut self, actions: &Actions) { for action in actions { // Handle the user selecting a room to view (a RoomPreview in the RoomsList). - if let RoomListAction::Selected { room_index: _, room_id, room_name } = action.as_widget_action().cast() { - let stack_navigation = self.ui.stack_navigation(id!(navigation)); - + if let RoomListAction::Selected { room_index: _, room_id, room_name } = action.as_widget_action().cast() { // Set the title of the RoomScreen's header to the room name. stack_navigation.set_title( live_id!(rooms_stack_view), &room_name.unwrap_or_else(|| format!("Room {}", &room_id)), ); - // Get a reference to the `RoomScreen` widget and tell it which room's data to show. stack_navigation .room_screen(id!(rooms_stack_view.room_screen)) .set_displayed_room(room_id); } + + // Handle the action that requests to show the user profile sliding pane. + if let ShowUserProfileAction::ShowUserProfile(room_id, user_id) = action.as_widget_action().cast() { + let mut pane = self.ui.user_profile_sliding_pane(id!(user_profile_sliding_pane)); + pane.set_info(room_id, user_id); + // TODO: Hack for error that when you first open the modal, doesnt draw until an event + // this forces the entire ui to rerender, still weird that only happens the first time. + self.ui.redraw(cx); + } } } } + +impl AppMain for App { + fn handle_event(&mut self, cx: &mut Cx, event: &Event) { + // Forward events to the MatchEvent trait impl, and then to the App's UI element. + self.match_event(cx, event); + self.ui.handle_event(cx, event, &mut Scope::empty()); + } +} diff --git a/src/contacts/mod.rs b/src/contacts/mod.rs index 7bcd5ad1..4cf22f9b 100644 --- a/src/contacts/mod.rs +++ b/src/contacts/mod.rs @@ -1,5 +1,15 @@ +use makepad_widgets::Cx; + pub mod add_contact_screen; pub mod contact_info; pub mod contacts_group; pub mod contacts_list; pub mod contacts_screen; + +pub fn live_design(cx: &mut Cx) { + // Order matters here, as some widget definitions depend on others. + contacts_screen::live_design(cx); + contacts_group::live_design(cx); + contacts_list::live_design(cx); + add_contact_screen::live_design(cx); +} diff --git a/src/discover/mod.rs b/src/discover/mod.rs index 0730a941..21fa660c 100644 --- a/src/discover/mod.rs +++ b/src/discover/mod.rs @@ -1,3 +1,12 @@ +use makepad_widgets::Cx; + pub mod discover_screen; pub mod moments_screen; pub mod moment_list; + +pub fn live_design(cx: &mut Cx) { + // Order matters here: moments_screen depends on moment_list. + discover_screen::live_design(cx); + moment_list::live_design(cx); + moments_screen::live_design(cx); +} diff --git a/src/home/mod.rs b/src/home/mod.rs index d5e42cd2..0be8a62b 100644 --- a/src/home/mod.rs +++ b/src/home/mod.rs @@ -1,3 +1,11 @@ +use makepad_widgets::Cx; + +pub mod home_screen; pub mod rooms_list; pub mod room_screen; -pub mod home_screen; + +pub fn live_design(cx: &mut Cx) { + home_screen::live_design(cx); + rooms_list::live_design(cx); + room_screen::live_design(cx); +} diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs index ba46dd67..284753b9 100644 --- a/src/home/room_screen.rs +++ b/src/home/room_screen.rs @@ -12,7 +12,7 @@ use matrix_sdk::ruma::{ history_visibility::HistoryVisibility, join_rules::JoinRule, message::{MessageFormat, MessageType, RoomMessageEventContent}, MediaSource, }, AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent, SyncMessageLikeEvent - }, uint, MilliSecondsSinceUnixEpoch, OwnedRoomId, + }, uint, MilliSecondsSinceUnixEpoch, OwnedRoomId, RoomId, }; use matrix_sdk_ui::timeline::{ self, AnyOtherFullStateEventContent, BundledReactions, EventTimelineItem, MemberProfileChange, MembershipChange, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem @@ -38,6 +38,7 @@ live_design! { import crate::shared::avatar::Avatar; import crate::shared::text_or_image::TextOrImage; import crate::shared::html_or_plaintext::*; + import crate::profile::user_profile::UserProfileSlidingPane; IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png") ICO_FAV = dep("crate://self/resources/icon_favorite.svg") @@ -119,15 +120,6 @@ live_design! { padding: 9.0 text: "" } - - LineH = { - width: Fill, - height: 2, - margin: 0.0 - padding: 0.0, - spacing: 0.0 - draw_bg: {color: (COLOR_DIVIDER)} - } Timestamp =