[gnome-contacts] Window: Use Hdy.Leaflet

[Niels De Graef <nielsdg src gnome org>]

commit 988db23ed2833b698a81c54db47de29b04db2154
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 | 124 ++++++++++++++++++++++++---------------------
 src/contacts-window.vala   |  58 +++++++++++++++++----
 2 files changed, 112 insertions(+), 70 deletions(-)
---
diff --git a/data/ui/contacts-window.ui b/data/ui/contacts-window.ui
index efe415d..597b5c8 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,81 +321,72 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <child>
-          <object class="GtkGrid" id="content_grid">
+          <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="GtkSeparator">
+              <object class="GtkStack" id="list_pane_stack">
                 <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="hexpand">False</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="orientation">vertical</property>
+                    <property name="width_request">300</property>
+                    <property name="homogeneous">True</property>
+                    <child>
+                      <object class="GtkSpinner">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="active">True</property>
+                        <property name="valign">end</property>
+                        <property name="halign">center</property>
+                        <style>
+                          <class name="contacts-watermark"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="label1">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="valign">start</property>
+                        <property name="halign">center</property>
+                        <property name="label" translatable="yes">Loading</property>
+                        <style>
+                          <class name="contacts-watermark"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
               </object>
               <packing>
-                <property name="left_attach">1</property>
-                <property name="top_attach">0</property>
+                <property name="name">list-pane</property>
               </packing>
             </child>
             <child>
-              <object class="GtkOverlay" id="contact_pane_container">
+              <object class="GtkSeparator">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
+                <style>
+                  <class name="sidebar"/>
+                </style>
               </object>
-              <packing>
-                <property name="left_attach">2</property>
-                <property name="top_attach">0</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkGrid" id="loading_box">
+              <object class="GtkOverlay" id="contact_pane_container">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="hexpand">True</property>
-                <property name="vexpand">True</property>
-                <property name="orientation">vertical</property>
-                <property name="width_request">300</property>
-                <property name="row_homogeneous">True</property>
-                <child>
-                  <object class="GtkSpinner">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="active">True</property>
-                    <property name="valign">end</property>
-                    <property name="halign">center</property>
-                    <style>
-                      <class name="contacts-watermark"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">0</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel" id="label1">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="vexpand">True</property>
-                    <property name="valign">start</property>
-                    <property name="hexpand">True</property>
-                    <property name="halign">center</property>
-                    <property name="label" translatable="yes">Loading</property>
-                    <style>
-                      <class name="contacts-watermark"/>
-                    </style>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">1</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
-                  </packing>
-                </child>
               </object>
               <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
+                <property name="name">contact-pane</property>
               </packing>
             </child>
           </object>
@@ -392,7 +398,7 @@
     <property name="mode">horizontal</property>
     <widgets>
       <widget name="left_header"/>
-      <widget name="loading_box"/>
+      <widget name="list_pane_stack"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="right_pane_size_group">
diff --git a/src/contacts-window.vala b/src/contacts-window.vala
index 2feab89..738228d 100644
--- a/src/contacts-window.vala
+++ b/src/contacts-window.vala
@@ -23,15 +23,15 @@ 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 Revealer back_revealer;
+  private Leaflet content_box;
   [GtkChild]
-  private Container contact_pane_container;
+  private Revealer back_revealer;
   [GtkChild]
-  private Grid loading_box;
+  private Stack list_pane_stack;
   [GtkChild]
-  private SizeGroup left_pane_size_group;
+  private Container contact_pane_container;
   [GtkChild]
   private TitleBar titlebar;
   [GtkChild]
@@ -194,16 +194,13 @@ 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 ();
-
-    content_grid.attach (list_pane, 0, 0, 1, 1);
+    list_pane_stack.add (list_pane);
+    list_pane.show ();
+    list_pane_stack.visible_child = list_pane;
 
     if (this.contact_pane.contact != null)
       list_pane.select_contact (this.contact_pane.contact);
 
-    list_pane.show ();
   }
 
   private void on_ui_state_changed (Object obj, ParamSpec pspec) {
@@ -241,6 +238,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
 
   [GtkCallback]
   private void on_back_clicked () {
+    show_list_pane ();
   }
 
   [GtkCallback]
@@ -267,6 +265,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
 
   private void stop_editing (bool drop_changes = false) {
     if (this.state == UiState.CREATING) {
+      show_list_pane ();
 
       if (drop_changes) {
         this.contact_pane.stop_editing (drop_changes);
@@ -275,6 +274,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
       }
       this.state = UiState.NORMAL;
     } else {
+      show_contact_pane ();
       this.contact_pane.stop_editing (drop_changes);
       this.state = UiState.SHOWING;
     }
@@ -323,6 +323,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 +404,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) {