window: Use AdwNavigationSplitView and AdwBreakpoint

Replaces our leaflet with the new AdwNavigationSplitView
widget and AdwBreakpoint.

src/gui/gcal-window.c

@@ -110,7 +110,7 @@ struct _GcalWindow
   GcalSyncIndicator      *sync_indicator;
   GcalToolbarEnd         *toolbar_end;
   GcalToolbarEnd         *sidebar_toolbar_end;
-  AdwLeaflet         *leaflet;
+  AdwNavigationSplitView *split_view;
 
   /* header_bar widets */
   GtkWidget          *calendars_button;
@@ -328,6 +328,17 @@ hide_widget (GtkWidget *widget)
   gtk_widget_set_visible (widget, FALSE);
 }
 
+static char *
+content_title (GcalWindow     *self,
+               GcalWindowView  active_view)
+{
+  /* We check for NULL so we get the right page name during initialization */
+  if (active_view == GCAL_WINDOW_VIEW_WEEK)
+    return g_strdup (_("Week"));
+  else
+    return g_strdup (_("Month"));
+}
+
 /*
  * Callbacks
  */
@@ -1053,10 +1064,10 @@ gcal_window_class_init (GcalWindowClass *klass)
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, quick_add_popover);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, calendar_management_dialog);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, overlay);
+  gtk_widget_class_bind_template_child (widget_class, GcalWindow, sidebar_toolbar_end);
+  gtk_widget_class_bind_template_child (widget_class, GcalWindow, split_view);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, sync_indicator);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, toolbar_end);
-  gtk_widget_class_bind_template_child (widget_class, GcalWindow, sidebar_toolbar_end);
-  gtk_widget_class_bind_template_child (widget_class, GcalWindow, leaflet);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, views_stack);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, views_switcher);
   gtk_widget_class_bind_template_child (widget_class, GcalWindow, weather_settings);
@@ -1065,12 +1076,13 @@ gcal_window_class_init (GcalWindowClass *klass)
   gtk_widget_class_bind_template_callback (widget_class, view_changed);
 
   /* Event creation related */
-  gtk_widget_class_bind_template_callback (widget_class, edit_event);
-  gtk_widget_class_bind_template_callback (widget_class, create_event_detailed_cb);
-  gtk_widget_class_bind_template_callback (widget_class, show_new_event_widget);
   gtk_widget_class_bind_template_callback (widget_class, close_new_event_widget);
+  gtk_widget_class_bind_template_callback (widget_class, content_title);
+  gtk_widget_class_bind_template_callback (widget_class, create_event_detailed_cb);
   gtk_widget_class_bind_template_callback (widget_class, day_selected);
+  gtk_widget_class_bind_template_callback (widget_class, edit_event);
   gtk_widget_class_bind_template_callback (widget_class, event_activated);
+  gtk_widget_class_bind_template_callback (widget_class, show_new_event_widget);
 
   /* Edit dialog related */
   gtk_widget_class_bind_template_callback (widget_class, on_event_editor_dialog_remove_event_cb);
@@ -1149,7 +1161,7 @@ gcal_window_set_search_query (GcalWindow  *self,
 
   g_return_if_fail (GCAL_IS_WINDOW (self));
 
-  if (adw_leaflet_get_folded (self->leaflet))
+  if (adw_navigation_split_view_get_collapsed (self->split_view))
     toolbar_end = self->sidebar_toolbar_end;
   else
     toolbar_end = self->toolbar_end;

src/gui/gcal-window.ui

@@ -4,6 +4,7 @@
     <property name="title" translatable="yes">Calendar</property>
     <property name="default_width">800</property>
     <property name="default_height">600</property>
+    <property name="width_request">360</property>
     <property name="height_request">600</property>
 
     <!-- Shortcuts -->
@@ -98,21 +99,19 @@
     <child>
       <object class="AdwToastOverlay" id="overlay">
         <child>
-          <object class="AdwLeaflet" id="leaflet">
+          <object class="AdwNavigationSplitView" id="split_view">
-            <property name="homogeneous">False</property>
-
             <!-- Sidebar -->
-            <child>
+            <property name="sidebar">
+              <object class="AdwNavigationPage">
+                <property name="title" translatable="yes">Calendar</property>
+                <property name="child">
                   <object class="AdwToolbarView">
-                <property name="hexpand">False</property>
-
                     <child type="top">
                       <object class="GtkBox">
                         <property name="orientation">vertical</property>
 
                         <child>
                           <object class="AdwHeaderBar">
-                        <property name="show-end-title-buttons" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
                             <child type="start">
                               <object class="GcalSyncIndicator" id="sync_indicator" />
                             </child>
@@ -154,7 +153,7 @@
 
                     <child type="bottom">
                       <object class="GtkActionBar" id="action_bar">
-                    <property name="revealed" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
+                        <property name="revealed">False</property>
                         <child type="start">
                           <object class="GtkButton">
                             <property name="action-name">win.today</property>
@@ -173,18 +172,19 @@
                       </object>
                     </child>
                   </object>
-            </child>
-            <child>
-              <object class="AdwLeafletPage">
-                <property name="navigatable">True</property>
-                <property name="child">
-                  <object class="GtkSeparator"/>
                 </property>
               </object>
-            </child>
+            </property>
 
             <!-- Main content -->
-            <child>
+            <property name="content">
+              <object class="AdwNavigationPage" id="content_page">
+                <binding name="title">
+                  <closure type="gchararray" function="content_title">
+                    <lookup type="GcalWindow" name="active-view"/>
+                  </closure>
+                </binding>
+                <property name="child">
                   <object class="AdwToolbarView">
                     <style>
                       <class name="view" />
@@ -192,7 +192,6 @@
 
                     <child type="top">
                       <object class="AdwHeaderBar" id="header_bar">
-                    <property name="show-start-title-buttons" bind-source="leaflet" bind-property="folded" bind-flags="sync-create"/>
                         <child>
                           <object class="GtkButton">
                             <property name="action-name">win.today</property>
@@ -267,9 +266,21 @@
                     </property>
 
                   </object>
+                </property>
+              </object>
+            </property>
+          </object>
         </child>
       </object>
     </child>
+
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 700sp</condition>
+        <setter object="split_view" property="collapsed">True</setter>
+        <setter object="action_bar" property="revealed">True</setter>
+        <!-- This needs to be set so that focus does not stay in the content pane when folding. -->
+        <setter object="content_page" property="sensitive">False</setter>
       </object>
     </child>
   </template>

src/theme/style.css

@@ -375,6 +375,11 @@ agenda-view list > label {
   padding: 6px 12px;
 }
 
+.sidebar-pane agenda-view .background {
+  background: none;
+  color: inherit;
+}
+
 label.no-events {
   font-style: italic;
 }