Merge pull request #477 from kevinaboos/one_search_bar

Author: kevinaboos

src/home/home_screen.rs

@@ -9,7 +9,7 @@ live_design! {
     use crate::home::rooms_sidebar::RoomsSideBar;
     use crate::home::spaces_dock::SpacesDock;
     use crate::shared::styles::*;
-    use crate::shared::search_bar::SearchBar;
+    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
     use crate::home::main_desktop_ui::MainDesktopUI;
 
     NavigationWrapper = {{NavigationWrapper}} {
@@ -31,6 +31,10 @@ live_design! {
             <View> {
                 flow: Down
                 width: Fill, height: Fill
+
+                <CachedWidget> {
+                    <RoomFilterInputBar> { }
+                }
                 <MainDesktopUI> {}
             }
         }
@@ -45,10 +49,12 @@ live_design! {
 
             <NavigationWrapper> {
                 view_stack = <StackNavigation> {
+
                     root_view = {
                         padding: {top: 40.}
                         flow: Down
                         width: Fill, height: Fill
+
                         sidebar = <RoomsSideBar> {}
                         spaces = <SpacesDock> {}
                     }

src/home/rooms_list.rs

@@ -6,11 +6,10 @@ use crate::{
     app::{AppState, SelectedRoom},
     room::room_display_filter::{FilterableRoom, RoomDisplayFilter, RoomDisplayFilterBuilder, RoomFilterCriteria, SortFn},
     shared::{collapsible_header::{CollapsibleHeaderAction, CollapsibleHeaderWidgetRefExt, HeaderCategory},
-    jump_to_bottom_button::UnreadMessageCount},
+    jump_to_bottom_button::UnreadMessageCount, room_filter_input_bar::RoomFilterAction},
     sliding_sync::{submit_async_request, MatrixRequest, PaginationDirection},
 };
-
-use super::{room_preview::RoomPreviewAction, rooms_sidebar::RoomsViewAction};
+use super::room_preview::RoomPreviewAction;
 
 /// Whether to pre-paginate visible rooms at least once in order to
 /// be able to display the latest message in the room preview,
@@ -625,8 +624,8 @@ impl Widget for RoomsList {
 
         if let Event::Actions(actions) = event {
             for action in actions {
-                if let RoomsViewAction::Search(search_text) = action.as_widget_action().cast() {
-                    self.update_displayed_rooms(cx, &search_text);
+                if let RoomFilterAction::Changed(keywords) = action.as_widget_action().cast() {
+                    self.update_displayed_rooms(cx, &keywords);
                 }
             }
         }

src/home/rooms_sidebar.rs

@@ -1,6 +1,13 @@
-use makepad_widgets::*;
+//! The RoomsSideBar is the widget that contains the RoomsList and other items.
+//!
+//! It differs in what content it includes based on the adaptive view:
+//! * On a narrow mobile view, it acts as the root_view of StackNavigation
+//!   * It includes a title label, a search bar, and the RoomsList.
+//! * On a wide desktop view, it acts as a permanent tab that is on the left side of the dock.
+//!   * It only includes a title label and the RoomsList, because the SearcBar
+//!     is at the top of the HomeScreen in Desktop view.
 
-use crate::shared::search_bar::SearchBarAction;
+use makepad_widgets::*;
 
 live_design! {
     use link::theme::*;
@@ -9,94 +16,62 @@ live_design! {
 
     use crate::shared::styles::*;
     use crate::shared::helpers::*;
-    use crate::shared::search_bar::SearchBar;
+    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
 
     use crate::home::rooms_list::RoomsList;
 
-    RoomsView = {{RoomsView}} {
-        show_bg: true,
-        draw_bg: {
-            instance bg_color: (COLOR_PRIMARY)
-            instance border_color: #f2f2f2
-            instance border_size: 0.003
+    pub RoomsSideBar = <AdaptiveView> {
+        Desktop = <View> {
+            padding: {top: 20, left: 10, right: 10}
+            flow: Down, spacing: 10
+            width: Fill, height: Fill
+
+            show_bg: true,
+            draw_bg: {
+                instance bg_color: (COLOR_PRIMARY)
+                instance border_color: #f2f2f2
+                instance border_size: 0.003
 
-            // Draws a right-side border
-            fn pixel(self) -> vec4 {
-                if self.pos.x > 1.0 - self.border_size {
-                    return self.border_color;
-                } else {
-                    return self.bg_color;
+                // Draws a right-side border
+                fn pixel(self) -> vec4 {
+                    if self.pos.x > 1.0 - self.border_size {
+                        return self.border_color;
+                    } else {
+                        return self.bg_color;
+                    }
                 }
             }
-        }
-        <Label> {
-            text: "All Rooms"
-            draw_text: {
-                color: #x0
-                text_style: <TITLE_TEXT>{}
+
+            sidebar_title = <Label> {
+                text: "All Rooms"
+                draw_text: {
+                    color: #x0
+                    text_style: <TITLE_TEXT>{}
+                }
             }
-        }
-        search_bar = <SearchBar> {
-            input = {
-                empty_message: "Filter rooms..."
+            <CachedWidget> {
+                rooms_list = <RoomsList> {}
             }
-        }
-        <CachedWidget> {
-            rooms_list = <RoomsList> {}
-        }
-    }
-
-    pub RoomsSideBar = <AdaptiveView> {
-        Desktop = <RoomsView> {
-            padding: {top: 20., left: 10., right: 10.}
-            flow: Down, spacing: 10
-            width: Fill, height: Fill
         },
-        Mobile = <RoomsView> {
-            padding: {top: 17., left: 17., right: 17.}
+
+        Mobile = <View> {
+            padding: {top: 17, left: 17, right: 17}
             flow: Down, spacing: 7
             width: Fill, height: Fill
-        }        
-    }
-}
-
-#[derive(Clone, Debug, DefaultNone)]
-pub enum RoomsViewAction {
-    /// Search for rooms
-    Search(String),
-    None,
-}
-
-#[derive(Widget, Live, LiveHook)]
-pub struct RoomsView {
-    #[deref]
-    view: View,
-}
 
-impl Widget for RoomsView {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        self.view.handle_event(cx, event, scope);
-        self.widget_match_event(cx, event, scope);
-    }
-    
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.view.draw_walk(cx, scope, walk)
-    }
-}
-
-impl WidgetMatchEvent for RoomsView {
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
-        let widget_uid = self.widget_uid();
-        for action in actions {
-            match action.as_widget_action().cast() {
-                SearchBarAction::Search(keywords) => {
-                    cx.widget_action(widget_uid, &scope.path, RoomsViewAction::Search(keywords.clone()));
+            sidebar_title = <Label> {
+                text: "All Rooms"
+                draw_text: {
+                    color: #x0
+                    text_style: <TITLE_TEXT>{}
                 }
-                SearchBarAction::ResetSearch => {
-                    cx.widget_action(widget_uid, &scope.path, RoomsViewAction::Search("".to_string()));
-                }
-                _ => {}
+            }
+            <CachedWidget> {
+                <RoomFilterInputBar> { }
+            }
+            <CachedWidget> {
+                rooms_list = <RoomsList> {}
             }
         }
     }
-}
+}

src/shared/mod.rs

@@ -9,7 +9,7 @@ pub mod icon_button;
 pub mod jump_to_bottom_button;
 pub mod mentionable_text_input;
 pub mod popup_list;
-pub mod search_bar;
+pub mod room_filter_input_bar;
 pub mod styles;
 pub mod text_or_image;
 pub mod typing_animation;
@@ -24,7 +24,7 @@ pub fn live_design(cx: &mut Cx) {
     icon_button::live_design(cx);
     unread_badge::live_design(cx);
     collapsible_header::live_design(cx);
-    search_bar::live_design(cx);
+    room_filter_input_bar::live_design(cx);
     avatar::live_design(cx);
     text_or_image::live_design(cx);
     html_or_plaintext::live_design(cx);

src/shared/search_bar.rs src/shared/room_filter_input_bar.rssrc/shared/search_bar.rs renamed to src/shared/room_filter_input_bar.rs

@@ -1,3 +1,10 @@
+//! A text input used to filter the rooms list
+//! with a search icon and a button to clear the input.
+//!
+//! This is a dedicated widget instead of a general "SearchBar"
+//! in order for us to be able to place it inside of a `CachedWidget`
+//! and have a single instance be shared across the Mobile and Desktop app views.
+
 use makepad_widgets::*;
 
 live_design! {
@@ -10,7 +17,7 @@ live_design! {
 
     ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
 
-    pub SearchBar = {{SearchBar}}<RoundedView> {
+    pub RoomFilterInputBar = {{RoomFilterInputBar}}<RoundedView> {
         width: Fill,
         height: Fit,
 
@@ -43,7 +50,7 @@ live_design! {
             width: Fill,
             height: Fit,
 
-            empty_message: "Search..."
+            empty_message: "Filter rooms..."
 
             draw_text: {
                 text_style: { font_size: 10 },
@@ -63,23 +70,23 @@ live_design! {
     }
 }
 
+/// A text input (with a search icon and cancel button) used to filter the rooms list.
+///
+/// See the module-level docs for more detail.
 #[derive(Live, LiveHook, Widget)]
-pub struct SearchBar {
-    #[deref]
-    view: View,
+pub struct RoomFilterInputBar {
+    #[deref] view: View,
 }
 
-/// Actions emitted by the search bar based on user interaction with it.
+/// Actions emitted by the `RoomFilterInputBar` based on user interaction with it.
 #[derive(Clone, Debug, DefaultNone)]
-pub enum SearchBarAction {
-    /// The user has entered a search query.
-    Search(String),
-    /// The user has cleared the search query.
-    ResetSearch,
-    None
+pub enum RoomFilterAction {
+    /// The user has changed the text entered into the filter bar.
+    Changed(String),
+    None,
 }
 
-impl Widget for SearchBar {
+impl Widget for RoomFilterInputBar {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
         self.widget_match_event(cx, event, scope);
@@ -90,40 +97,29 @@ impl Widget for SearchBar {
     }
 }
 
-impl WidgetMatchEvent for SearchBar {
+impl WidgetMatchEvent for RoomFilterInputBar {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
         let input = self.text_input(id!(input));
         let clear_button = self.button(id!(clear_button));
 
         // Handle user changing the input text
         if let Some(keywords) = input.changed(actions) {
             clear_button.set_visible(cx, !keywords.is_empty());
-            let widget_uid = self.widget_uid(); 
-            if keywords.is_empty() {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    SearchBarAction::ResetSearch
-                );
-            } else {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    SearchBarAction::Search(keywords)
-                );
-            }
+            cx.widget_action(
+                self.widget_uid(),
+                &scope.path,
+                RoomFilterAction::Changed(keywords)
+            );
         }
 
-        // Handle user clicked the clear button
         if clear_button.clicked(actions) {
             input.set_text(cx, "");
             clear_button.set_visible(cx, false);
             input.set_key_focus(cx);
-
             cx.widget_action(
                 self.widget_uid(),
                 &scope.path,
-                SearchBarAction::ResetSearch,
+                RoomFilterAction::Changed(String::new())
             );
         }
     }