diff --git a/data/resources/stylesheet/_common.scss b/data/resources/stylesheet/_common.scss index bd8f0d20..7fe4b257 100644 --- a/data/resources/stylesheet/_common.scss +++ b/data/resources/stylesheet/_common.scss @@ -115,3 +115,7 @@ scrolledwindow.card { padding: 12px; } } + +.padded-top-bar { + padding: 0 12px; +} diff --git a/src/session/view/content/explore/mod.rs b/src/session/view/content/explore/mod.rs index db38af92..c256f670 100644 --- a/src/session/view/content/explore/mod.rs +++ b/src/session/view/content/explore/mod.rs @@ -35,7 +35,9 @@ mod imp { #[template_child] pub(super) header_bar: TemplateChild, #[template_child] - stack: TemplateChild, + second_top_bar: TemplateChild, + #[template_child] + search_clamp: TemplateChild, #[template_child] search_entry: TemplateChild, #[template_child] @@ -43,9 +45,11 @@ mod imp { #[template_child] servers_popover: TemplateChild, #[template_child] - listview: TemplateChild, + stack: TemplateChild, #[template_child] scrolled_window: TemplateChild, + #[template_child] + listview: TemplateChild, /// The current session. #[property(get, set = Self::set_session, explicit_notify)] session: glib::WeakRef, @@ -61,7 +65,7 @@ mod imp { impl ObjectSubclass for Explore { const NAME: &'static str = "ContentExplore"; type Type = super::Explore; - type ParentType = adw::Bin; + type ParentType = adw::BreakpointBin; fn class_init(klass: &mut Self::Class) { PublicRoom::ensure_type(); @@ -147,7 +151,7 @@ mod imp { } } - impl BinImpl for Explore {} + impl BreakpointBinImpl for Explore {} #[gtk::template_callbacks] impl Explore { @@ -211,6 +215,52 @@ mod imp { }) } + /// Update the header when the view is narrow. + #[template_callback] + fn switch_to_narrow_mode(&self) { + if self + .header_bar + .title_widget() + .is_some_and(|widget| widget == *self.servers_button) + { + // We are already in narrow mode, nothing to do. + return; + } + + // Unparent the children. + self.header_bar.remove(&*self.search_clamp); + self.header_bar.remove(&*self.servers_button); + + // In narrow mode, the servers button is in the header bar, and the search entry + // is in the second top bar. + self.header_bar + .set_title_widget(Some(&*self.servers_button)); + self.second_top_bar.set_child(Some(&*self.search_clamp)); + self.second_top_bar.set_visible(true); + } + + /// Update the header when the view is wide. + #[template_callback] + fn switch_to_wide_mode(&self) { + if self + .header_bar + .title_widget() + .is_some_and(|widget| widget == *self.search_clamp) + { + // We are already be in wide mode, nothing to do. + return; + } + + // Unparent the children. + self.header_bar.remove(&*self.servers_button); + self.second_top_bar.set_child(None::<>k::Widget>); + self.second_top_bar.set_visible(false); + + // In wide mode, both widgets are in the header bar. + self.header_bar.set_title_widget(Some(&*self.search_clamp)); + self.header_bar.pack_end(&*self.servers_button); + } + /// Make sure that the view is initialized. /// /// If it is already initialized, this is a noop. @@ -288,7 +338,7 @@ mod imp { glib::wrapper! { /// A view to explore rooms in the public directory of homeservers. pub struct Explore(ObjectSubclass) - @extends gtk::Widget, adw::Bin, @implements gtk::Accessible; + @extends gtk::Widget, adw::BreakpointBin, @implements gtk::Accessible; } impl Explore { diff --git a/src/session/view/content/explore/mod.ui b/src/session/view/content/explore/mod.ui index 3d3579ce..98df11e9 100644 --- a/src/session/view/content/explore/mod.ui +++ b/src/session/view/content/explore/mod.ui @@ -1,17 +1,19 @@ -