[gnome-games/wip/exalm/libhandy2] ui: Use HdyLeaflet in preferences window

[Alexander Mikhaylenko <alexm src gnome org>]

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

    ui: Use HdyLeaflet in preferences window

 data/ui/preferences-window.ui  | 46 ++++++++++++++++++++++++++++++++++++++----
 src/main.vala                  |  1 +
 src/ui/preferences-window.vala | 40 +++++++++++++++++++++++++++++++++---
 3 files changed, 80 insertions(+), 7 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index 4c296932..683a8c5c 100644
--- a/data/ui/preferences-window.ui
+++ b/data/ui/preferences-window.ui
@@ -12,15 +12,17 @@
         <property name="visible">True</property>
         <property name="transition-type">GTK_STACK_TRANSITION_TYPE_SLIDE_LEFT_RIGHT</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>
+            <property name="fold">unfolded</property>
             <child>
               <object class="GtkHeaderBar" id="left_header_bar">
                 <property name="name">left_header_bar</property>
                 <property name="visible">True</property>
                 <property name="title" translatable="yes">Preferences</property>
-                <property name="show-close-button">True</property>
-                <property name="decoration_layout">menu</property>
+                <property name="show-close-button">False</property>
               </object>
             </child>
             <child>
@@ -35,6 +37,30 @@
                 <property name="visible">True</property>
                 <property name="hexpand">True</property>
                 <property name="show-close-button">True</property>
+                <child>
+                  <object class="GtkButton" id="back_button">
+                    <property name="visible">False</property>
+                    <signal name="clicked" handler="on_back_clicked"/>
+                    <style>
+                      <class name="image-button"/>
+                    </style>
+                    <child internal-child="accessible">
+                      <object class="AtkObject" id="a11y-back">
+                        <property name="accessible-name" translatable="yes">Back</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkImage" id="back_image">
+                        <property name="visible">True</property>
+                        <property name="icon-name">go-previous-symbolic</property>
+                        <property name="icon-size">1</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack-type">start</property>
+                  </packing>
+                </child>
               </object>
             </child>
           </object>
@@ -46,8 +72,12 @@
         <property name="visible">True</property>
         <property name="transition-type">GTK_STACK_TRANSITION_TYPE_SLIDE_LEFT_RIGHT</property>
         <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>
+            <property name="fold">unfolded</property>
+            <signal name="notify::fold" handler="on_fold_changed" after="yes"/>
             <child>
               <object class="GtkBox" id="sidebar_vbox">
                 <property name="orientation">vertical</property>
@@ -78,6 +108,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>
@@ -119,4 +150,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 50cea9d0..32b1a032 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 ();
 
        var app = new Games.Application ();
        var result = app.run (args);
diff --git a/src/ui/preferences-window.vala b/src/ui/preferences-window.vala
index ff3017b0..d4de6ade 100644
--- a/src/ui/preferences-window.vala
+++ b/src/ui/preferences-window.vala
@@ -5,16 +5,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 Gtk.Box sidebar_vbox;
        [GtkChild]
        private Gtk.Stack stack;
 
+       [GtkChild]
+       private Gtk.Button back_button;
+
        // FIXME: Rework this
        private PreferencesSubpage subpage_temp;
        private PreferencesSubpage _subpage;
@@ -54,10 +61,17 @@ private class Games.PreferencesWindow : Gtk.Window {
 
        public PreferencesWindow () {
                stack.notify["visible-child-name"].connect (visible_child_changed);
-               visible_child_changed ();
+               update_ui ();
        }
 
        private void visible_child_changed () {
+               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 = "";
@@ -67,10 +81,30 @@ private class Games.PreferencesWindow : Gtk.Window {
                }
 
                var title = "";
+
                stack.child_get (page, "title", out title, null);
                right_header_bar.title = title;
 
                subpage_binding = page.bind_property ("subpage", this, "subpage",
                                                      BindingFlags.SYNC_CREATE);
        }
+
+       [GtkCallback]
+       private void on_back_clicked () {
+               content_box.visible_child = sidebar_vbox;
+               titlebar_box.visible_child = left_header_bar;
+       }
+
+       [GtkCallback]
+       private void on_fold_changed (Object object, ParamSpec paramSpec) {
+               var folded = (content_box.fold == Hdy.Fold.FOLDED);
+
+               left_header_bar.show_close_button = folded;
+               back_button.visible = folded;
+
+               if (folded)
+                       stack.transition_type = Gtk.StackTransitionType.NONE;
+               else
+                       stack.transition_type = Gtk.StackTransitionType.CROSSFADE;
+       }
 }