[fractal] fractal-gtk: Use HdyLeaflet to adapt to small sizes

[Julian Sparber <jsparber src gnome org>]

commit 3b69e8e898590c0e97a79abc3da7f6a58bc35a26
Author: Christopher Davis <brainblasted disroot org>
Date:   Sat Jan 26 16:07:03 2019 -0500

    fractal-gtk: Use HdyLeaflet to adapt to small sizes
    
    Fractal's main view could only shrink so far, barring usage at smaller sizes such as a phone's screen. 
HdyLeaflet enables
    Fractal to adapt.
    
    Related to https://gitlab.gnome.org/GNOME/fractal/issues/377

 fractal-gtk/res/ui/main_window.ui | 98 ++++++++++++++++++++++++++++++++-------
 fractal-gtk/src/actions/global.rs |  2 +-
 fractal-gtk/src/appop/mod.rs      |  7 +++
 fractal-gtk/src/appop/state.rs    | 12 ++---
 4 files changed, 93 insertions(+), 26 deletions(-)
---
diff --git a/fractal-gtk/res/ui/main_window.ui b/fractal-gtk/res/ui/main_window.ui
index 9b3a2389..726d3260 100644
--- a/fractal-gtk/res/ui/main_window.ui
+++ b/fractal-gtk/res/ui/main_window.ui
@@ -10,16 +10,23 @@
     <child>
       <object class="GtkStack" id="main_content_stack">
         <property name="can_focus">False</property>
+        <property name="hhomogeneous">False</property>
         <child>
-          <object class="GtkBox" id="chat_state">
+          <object class="HdyLeaflet" id="chat_state_leaflet">
+            <property name="child-transition-duration" bind-source="header_leaflet" 
bind-property="child-transition-duration" bind-flags="bidirectional|sync-create"/>
+            <property name="child-transition-type" bind-source="header_leaflet" 
bind-property="child-transition-type" bind-flags="bidirectional|sync-create"/>
+            <property name="mode-transition-duration" bind-source="header_leaflet" 
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
+            <property name="mode-transition-type" bind-source="header_leaflet" 
bind-property="mode-transition-type" bind-flags="bidirectional|sync-create"/>
+            <property name="visible-child-name" bind-source="header_leaflet" 
bind-property="visible-child-name" bind-flags="bidirectional|sync-create"/>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="hhomogeneous-folded">True</property>
             <child>
               <object class="GtkBox" id="sidebar-box">
                 <property name="width_request">200</property>
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="halign">start</property>
+                <property name="halign">fill</property>
                 <property name="hexpand">False</property>
                 <property name="orientation">vertical</property>
                 <child>
@@ -80,21 +87,17 @@
                 </child>
               </object>
               <packing>
-                <property name="expand">False</property>
-                <property name="fill">False</property>
-                <property name="position">0</property>
+                <property name="name">sidebar</property>
               </packing>
             </child>
             <child>
-              <object class="GtkSeparator">
+              <object class="GtkSeparator" id="content_separator">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
+                <style>
+                    <class name="sidebar"/>
+                </style>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">1</property>
-              </packing>
             </child>
             <child>
               <object class="GtkOverlay" id="inapp">
@@ -277,10 +280,7 @@
                 </child>
               </object>
               <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="pack_type">end</property>
-                <property name="position">0</property>
+                <property name="name">content</property>
               </packing>
             </child>
           </object>
@@ -729,14 +729,19 @@
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="hexpand">True</property>
+            <property name="hhomogeneous">False</property>
             <child>
-              <object class="GtkBox"> <!--message view-->
+              <object class="HdyLeaflet" id="header_leaflet"> <!--message view-->
                 <property name="visible">True</property>
+                <property name="child-transition-type">slide</property>
+                <property name="mode-transition-type">slide</property>
+                <property name="hhomogeneous-folded">True</property>
                 <child>
                   <object class="GtkHeaderBar" id="left-header"> <!--left titlebar-->
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <!--<property name="show-close-button">True</property>-->
+                    <property name="halign">fill</property>
+                    <property name="show-close-button">True</property>
                     <child>
                       <object class="GtkMenuButton" id="main_menu_button">
                         <property name="visible">True</property>
@@ -818,9 +823,12 @@
                       </object>
                     </child>
                   </object>
+                  <packing>
+                    <property name="name">sidebar</property>
+                  </packing>
                 </child>
                 <child>
-                  <object class="GtkSeparator">
+                  <object class="GtkSeparator" id="header_separator">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="orientation">vertical</property>
@@ -834,6 +842,37 @@
                     <property name="show-close-button">True</property>
                     <property name="has-subtitle">False</property>
                     <property name="hexpand">True</property>
+                    <child>
+                      <object class="GtkRevealer">
+                        <property name="reveal-child" bind-source="header_leaflet" bind-property="folded" 
bind-flags="sync-create"/>
+                        <property name="transition-duration" bind-source="header_leaflet" 
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
+                        <property name="transition-type">crossfade</property>
+                        <property name="visible">True</property>
+                        <child>
+                          <object class="GtkButton" id="leaflet_back_button">
+                            <property name="action_name">app.back</property>
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="icon_name">go-previous-symbolic</property>
+                              </object>
+                            </child>
+                            <accessibility>
+
+                            </accessibility>
+                            <child internal-child="accessible">
+                              <object class="AtkObject" id="a11y-leaflet_back_button">
+                                <property name="AtkObject::accessible_name" 
translatable="yes">Back</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
                     <child type="title">
                       <object class="GtkBox" id="room_info">
                         <property name="visible">True</property>
@@ -898,6 +937,9 @@
                       </packing>
                     </child>
                   </object>
+                  <packing>
+                    <property name="name">content</property>
+                  </packing>
                 </child>
               </object>
               <packing>
@@ -1037,4 +1079,24 @@
       <widget name="sidebar-box"/>
     </widgets>
   </object>
+  <object class="GtkSizeGroup">
+    <property name="mode">horizontal</property>
+    <widgets>
+      <widget name="inapp"/>
+      <widget name="room_header_bar"/>
+    </widgets>
+  </object>
+  <object class="GtkSizeGroup">
+    <property name="mode">horizontal</property>
+    <widgets>
+      <widget name="header_separator"/>
+      <widget name="content_separator"/>
+    </widgets>
+  </object>
+  <object class="HdyHeaderGroup">
+    <headerbars>
+      <headerbar name="left-header"/>
+      <headerbar name="room_header_bar"/>
+    </headerbars>
+  </object>
 </interface>
diff --git a/fractal-gtk/src/actions/global.rs b/fractal-gtk/src/actions/global.rs
index ca2cb829..edd93395 100644
--- a/fractal-gtk/src/actions/global.rs
+++ b/fractal-gtk/src/actions/global.rs
@@ -160,7 +160,7 @@ pub fn new(app: &gtk::Application, op: &Arc<Mutex<AppOp>>) {
     open_room.connect_activate(clone!(op => move |_, data| {
         if let Some(id) = get_room_id(data) {
             op.lock().unwrap().set_active_room_by_id(id.to_string());
-            /* This does nothing if fractal is already in focus */
+           /* This does nothing if fractal is already in focus */
             op.lock().unwrap().activate();
         }
         let back = upgrade_weak!(back_weak);
diff --git a/fractal-gtk/src/appop/mod.rs b/fractal-gtk/src/appop/mod.rs
index 16a127c6..9b3e79b6 100644
--- a/fractal-gtk/src/appop/mod.rs
+++ b/fractal-gtk/src/appop/mod.rs
@@ -73,12 +73,18 @@ pub struct AppOp {
     search_type: SearchType,
 
     pub directory: Vec<Room>,
+    pub leaflet: libhandy::Leaflet,
 }
 
 impl PasswordStorage for AppOp {}
 
 impl AppOp {
     pub fn new(ui: uibuilder::UI, tx: Sender<BKCommand>) -> AppOp {
+        let leaflet = ui
+            .builder
+            .get_object::<libhandy::Leaflet>("header_leaflet")
+            .expect("Couldn't find header_leaflet in ui file");
+
         AppOp {
             ui: ui,
             backend: tx,
@@ -108,6 +114,7 @@ impl AppOp {
             search_type: SearchType::Invite,
 
             directory: vec![],
+            leaflet: leaflet,
         }
     }
 
diff --git a/fractal-gtk/src/appop/state.rs b/fractal-gtk/src/appop/state.rs
index b72f2f6f..cc33fa1a 100644
--- a/fractal-gtk/src/appop/state.rs
+++ b/fractal-gtk/src/appop/state.rs
@@ -1,5 +1,6 @@
 use gtk;
 use gtk::prelude::*;
+use libhandy::LeafletExt;
 
 use crate::actions::AppState;
 use crate::appop::AppOp;
@@ -18,20 +19,21 @@ impl AppOp {
             .get_object::<gtk::HeaderBar>("room_header_bar")
             .expect("Can't find room_header_bar in ui file.");
 
-        let mut view_child = None;
         let widget_name = match self.state {
             AppState::Login => {
                 self.clean_login();
                 "login"
             }
             AppState::NoRoom => {
-                view_child = Some("noroom");
                 self.set_state_no_room(&headerbar);
+                self.leaflet.set_visible_child_name("sidebar");
+                stack.set_visible_child_name("noroom");
                 "chat"
             }
             AppState::Room => {
-                view_child = Some("room_view");
                 self.set_state_room(&headerbar);
+                self.leaflet.set_visible_child_name("content");
+                stack.set_visible_child_name("room_view");
                 "chat"
             }
             AppState::Directory => "directory",
@@ -41,10 +43,6 @@ impl AppOp {
             AppState::MediaViewer => "media-viewer",
         };
 
-        view_child.map(|name| {
-            stack.set_visible_child_name(name);
-        });
-
         self.ui
             .builder
             .get_object::<gtk::Stack>("main_content_stack")