[gnome-contacts/Community/Purism/gnome-contacts-wip/aplazas/leaflet: 3/4] Window: Use Hdy.Leaflet

[Niels De Graef <nielsdg src gnome org>]

commit 7cc15930b6a0401992f9c7e18ed4e76b2e5a4755
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Thu Oct 18 16:02:16 2018 +0200

    Window: Use Hdy.Leaflet

 data/ui/contacts-window.ui | 67 +++++++++++++++++++++++++++++++++++-----------
 src/contacts-window.vala   | 52 ++++++++++++++++++++++++++++++-----
 2 files changed, 96 insertions(+), 23 deletions(-)
---
diff --git a/data/ui/contacts-window.ui b/data/ui/contacts-window.ui
index efe415d..9c46b92 100644
--- a/data/ui/contacts-window.ui
+++ b/data/ui/contacts-window.ui
@@ -106,12 +106,18 @@
       <object class="HdyTitleBar" id="titlebar">
         <property name="visible">True</property>
         <child>
-          <object class="GtkGrid">
+          <object class="HdyLeaflet" id="header">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="mode-transition-type" bind-source="content_box" 
bind-property="mode-transition-type" bind-flags="bidirectional|sync-create"/>
+            <property name="mode-transition-duration" bind-source="content_box" 
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
+            <property name="child-transition-type" bind-source="content_box" 
bind-property="child-transition-type" bind-flags="bidirectional|sync-create"/>
+            <property name="child-transition-duration" bind-source="content_box" 
bind-property="child-transition-duration" bind-flags="bidirectional|sync-create"/>
+            <property name="visible-child-name" bind-source="content_box" bind-property="visible-child-name" 
bind-flags="bidirectional|sync-create"/>
             <child>
               <object class="GtkHeaderBar" id="left_header">
                 <property name="visible">True</property>
+                <property name="hexpand">False</property>
                 <property name="can_focus">False</property>
                 <property name="title" translatable="yes">Contacts</property>
                 <property name="show_close_button">True</property>
@@ -179,6 +185,9 @@
                   </packing>
                 </child>
               </object>
+              <packing>
+                <property name="name">list-pane</property>
+              </packing>
             </child>
             <child>
               <object class="GtkSeparator" id="header_separator">
@@ -195,8 +204,10 @@
                 <property name="show_close_button">True</property>
                 <child>
                   <object class="GtkRevealer" id="back_revealer">
+                    <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="transition-type">slide-right</property>
+                    <property name="transition-duration" bind-source="content_box" 
bind-property="mode-transition-duration" bind-flags="bidirectional|sync-create"/>
                     <child>
                       <object class="GtkButton" id="back">
                         <property name="visible">True</property>
@@ -230,6 +241,7 @@
                     <property name="label" translatable="yes">Cancel</property>
                     <property name="width_request">70</property>
                     <property name="valign">center</property>
+                    <signal name="notify::visible" handler="on_cancel_visible" object="ContactsWindow" 
after="yes" swapped="no"/>
                     <style>
                       <class name="text-button"/>
                     </style>
@@ -296,6 +308,9 @@
                   </packing>
                 </child>
               </object>
+              <packing>
+                <property name="name">contact-pane</property>
+              </packing>
             </child>
           </object>
         </child>
@@ -306,27 +321,46 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <child>
-          <object class="GtkGrid" id="content_grid">
+          <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <child>
-              <object class="GtkSeparator">
-                <property name="visible">True</property>
-              </object>
-              <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkOverlay" id="contact_pane_container">
+              <object class="HdyLeaflet" id="content_box">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
+                <property name="mode-transition-type">slide</property>
+                <property name="child-transition-type">slide</property>
+                <signal name="notify::fold" handler="on_fold" object="ContactsWindow" after="yes" 
swapped="no"/>
+                <signal name="notify::child-transition-running" handler="on_child_transition_running" 
object="ContactsWindow" after="yes" swapped="no"/>
+                <child>
+                  <object class="GtkOverlay" id="list_pane_container">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="hexpand">False</property>
+                  </object>
+                  <packing>
+                    <property name="name">list-pane</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="visible">True</property>
+                    <style>
+                      <class name="sidebar"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkOverlay" id="contact_pane_container">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="hexpand">True</property>
+                  </object>
+                  <packing>
+                    <property name="name">contact-pane</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="left_attach">2</property>
-                <property name="top_attach">0</property>
-              </packing>
             </child>
             <child>
               <object class="GtkGrid" id="loading_box">
@@ -392,6 +426,7 @@
     <property name="mode">horizontal</property>
     <widgets>
       <widget name="left_header"/>
+      <widget name="list_pane_container"/>
       <widget name="loading_box"/>
     </widgets>
   </object>
diff --git a/src/contacts-window.vala b/src/contacts-window.vala
index 2feab89..f3c6efa 100644
--- a/src/contacts-window.vala
+++ b/src/contacts-window.vala
@@ -23,16 +23,18 @@ using Folks;
 [GtkTemplate (ui = "/org/gnome/Contacts/ui/contacts-window.ui")]
 public class Contacts.Window : Gtk.ApplicationWindow {
   [GtkChild]
-  private Grid content_grid;
+  private Leaflet header;
+  [GtkChild]
+  private Leaflet content_box;
   [GtkChild]
   private Revealer back_revealer;
   [GtkChild]
+  private Container list_pane_container;
+  [GtkChild]
   private Container contact_pane_container;
   [GtkChild]
   private Grid loading_box;
   [GtkChild]
-  private SizeGroup left_pane_size_group;
-  [GtkChild]
   private TitleBar titlebar;
   [GtkChild]
   private HeaderBar left_header;
@@ -194,11 +196,9 @@ public class Contacts.Window : Gtk.ApplicationWindow {
                                        .printf (nr_contacts);
       });
 
-    left_pane_size_group.add_widget (list_pane);
-    left_pane_size_group.remove_widget (loading_box);
-    loading_box.destroy ();
+    loading_box.visible = false;
 
-    content_grid.attach (list_pane, 0, 0, 1, 1);
+    list_pane_container.add (list_pane);
 
     if (this.contact_pane.contact != null)
       list_pane.select_contact (this.contact_pane.contact);
@@ -241,6 +241,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
 
   [GtkCallback]
   private void on_back_clicked () {
+    show_list_pane ();
   }
 
   [GtkCallback]
@@ -266,6 +267,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
   }
 
   private void stop_editing (bool drop_changes = false) {
+    show_list_pane ();
     if (this.state == UiState.CREATING) {
 
       if (drop_changes) {
@@ -323,6 +325,39 @@ public class Contacts.Window : Gtk.ApplicationWindow {
     this.right_header.title = _("New Contact");
 
     this.contact_pane.new_contact ();
+    show_contact_pane ();
+  }
+
+  [GtkCallback]
+  private void on_cancel_visible () {
+    update ();
+  }
+
+  [GtkCallback]
+  private void on_fold () {
+    update ();
+  }
+
+  [GtkCallback]
+  private void on_child_transition_running () {
+    if (!content_box.child_transition_running && content_box.visible_child_name == "list-pane")
+      this.list_pane.select_contact (null);
+  }
+
+  private void update () {
+    left_header.show_close_button = this.content_box.fold == Fold.UNFOLDED || header.visible_child == 
left_header;
+    right_header.show_close_button = this.content_box.fold == Fold.UNFOLDED || header.visible_child == 
right_header;
+    back_revealer.reveal_child = back_revealer.visible = this.content_box.fold == Fold.FOLDED && 
!this.cancel_button.visible && header.visible_child == right_header;
+  }
+
+  private void show_list_pane () {
+    content_box.visible_child_name = "list-pane";
+    update ();
+  }
+
+  private void show_contact_pane () {
+    content_box.visible_child_name = "contact-pane";
+    update ();
   }
 
   public void show_search (string query) {
@@ -371,6 +406,9 @@ public class Contacts.Window : Gtk.ApplicationWindow {
     set_shown_contact (new_selection);
     if (this.state != UiState.SELECTING)
       this.state = UiState.SHOWING;
+
+    if (new_selection != null)
+      show_contact_pane ();
   }
 
   void list_pane_link_contacts_cb (LinkedList<Contact> contact_list) {