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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 3b84145ecf1e8309a82ae3bdddeeaab29c32275e
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 c648118d..527e84bb 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>
@@ -135,4 +141,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;
        }
 }