[gnome-games/wip/exalm/libhandy2: 5/5] preferences-window: Wrap into HdyLeaflet

[Alexander Mikhaylenko <alexm src gnome org>]

commit 0b7d8a0c5000a3f3e4c6e49d23314b9c0b3d95a8
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Wed Sep 12 14:08:34 2018 +0500

    preferences-window: Wrap into HdyLeaflet
    
    Dynamically hide and show panes depending on window width.
    
    In folded mode, clicking on sidebar row switches to right pane, and
    clicking on back button switches back to sidebar.

 data/ui/preferences-window.ui  | 17 +++++++++++++++--
 src/main.vala                  |  1 +
 src/ui/preferences-window.vala | 39 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 52 insertions(+), 5 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index 1d9e7035..1c60c372 100644
--- a/data/ui/preferences-window.ui
+++ b/data/ui/preferences-window.ui
@@ -16,8 +16,10 @@
             <property name="transition-type">slide-left-right</property>
             <property name="transition-duration">250</property>
             <child>
-              <object class="GtkBox" id="titlebar_box">
+              <object class="HdyLeaflet" id="titlebar_box">
                 <property name="visible">True</property>
+                <property name="mode_transition_type">slide</property>
+                <property name="child_transition_type">slide</property>
                 <child>
                   <object class="GtkHeaderBar" id="left_header_bar">
                     <property name="name">left_header_bar</property>
@@ -80,8 +82,11 @@
         <property name="transition-duration">250</property>
         <signal name="notify::transition-running" handler="subpage_transition_finished"/>
         <child>
-          <object class="GtkBox" id="content_box">
+          <object class="HdyLeaflet" id="content_box">
             <property name="visible">True</property>
+            <property name="mode_transition_type">slide</property>
+            <property name="child_transition_type">slide</property>
+            <signal name="notify::folded" handler="on_folded_changed" after="yes"/>
             <child>
               <object class="GamesPreferencesSidebar" id="sidebar">
                 <property name="stack">stack</property>
@@ -106,6 +111,7 @@
                 <property name="expand">True</property>
                 <property name="visible-child">video_page</property>
                 <property name="transition-type">GTK_STACK_TRANSITION_TYPE_CROSSFADE</property>
+                <property name="width-request">300</property>
                 <child>
                   <object class="GamesPreferencesPageVideo" id="video_page">
                     <property name="visible">True</property>
@@ -147,4 +153,11 @@
       <widget name="sidebar"/>
     </widgets>
   </object>
+  <object class="GtkSizeGroup">
+    <property name="mode">GTK_SIZE_GROUP_HORIZONTAL</property>
+    <widgets>
+      <widget name="right_header_bar"/>
+      <widget name="stack"/>
+    </widgets>
+  </object>
 </interface>
diff --git a/src/main.vala b/src/main.vala
index 7aa30afe..413171b0 100644
--- a/src/main.vala
+++ b/src/main.vala
@@ -8,6 +8,7 @@ int main (string[] args) {
        Grl.init (ref args);
 
        typeof (Hdy.Column).ensure ();
+       typeof (Hdy.Leaflet).ensure ();
        typeof (Hdy.TitleBar).ensure ();
 
        var app = new Games.Application ();
diff --git a/src/ui/preferences-window.vala b/src/ui/preferences-window.vala
index 30dc2b66..7d24e394 100644
--- a/src/ui/preferences-window.vala
+++ b/src/ui/preferences-window.vala
@@ -7,16 +7,23 @@ private class Games.PreferencesWindow : Gtk.Window {
        [GtkChild]
        private Gtk.Stack titlebar_stack;
        [GtkChild]
-       private Gtk.Box titlebar_box;
+       private Hdy.Leaflet titlebar_box;
+       [GtkChild]
+       private Gtk.HeaderBar left_header_bar;
        [GtkChild]
        private Gtk.HeaderBar right_header_bar;
        [GtkChild]
        private Gtk.Stack main_stack;
        [GtkChild]
-       private Gtk.Box content_box;
+       private Hdy.Leaflet content_box;
+       [GtkChild]
+       private PreferencesSidebar sidebar;
        [GtkChild]
        private Gtk.Stack stack;
 
+       [GtkChild]
+       private Gtk.Button back_button;
+
        private PreferencesSubpage _subpage;
        public PreferencesSubpage subpage {
                get { return _subpage; }
@@ -43,6 +50,9 @@ private class Games.PreferencesWindow : Gtk.Window {
 
                                titlebar_stack.add (header_bar);
                                titlebar_stack.visible_child = header_bar;
+
+                               content_box.visible_child = stack;
+                               titlebar_box.visible_child = right_header_bar;
                        }
 
                        _subpage = value;
@@ -56,11 +66,18 @@ private class Games.PreferencesWindow : Gtk.Window {
        private Binding selection_mode_binding;
 
        public PreferencesWindow () {
-               sidebar_row_selected ();
+               update_ui ();
        }
 
        [GtkCallback]
        private void sidebar_row_selected () {
+               content_box.visible_child = stack;
+               titlebar_box.visible_child = right_header_bar;
+
+               update_ui ();
+       }
+
+       private void update_ui () {
                var page = stack.visible_child as PreferencesPage;
                if (page == null) {
                        right_header_bar.title = "";
@@ -87,5 +104,21 @@ private class Games.PreferencesWindow : Gtk.Window {
 
        [GtkCallback]
        private void on_back_clicked () {
+               content_box.visible_child = sidebar;
+               titlebar_box.visible_child = left_header_bar;
+       }
+
+       [GtkCallback]
+       private void on_folded_changed (Object object, ParamSpec paramSpec) {
+               var folded = content_box.folded;
+
+               left_header_bar.show_close_button = folded;
+               back_button.visible = folded;
+               sidebar.show_selection = !folded;
+
+               if (folded)
+                       stack.transition_type = Gtk.StackTransitionType.NONE;
+               else
+                       stack.transition_type = Gtk.StackTransitionType.CROSSFADE;
        }
 }