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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 9a40ff35d81b158d63b5ea32ff653f91ba788654
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 | 39 ++++++++++++++++++++++++++++++++---
 3 files changed, 79 insertions(+), 7 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index 0b9e4c3e..d1e9ba7c 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>
@@ -47,8 +73,12 @@
         <property name="transition-type">GTK_STACK_TRANSITION_TYPE_SLIDE_LEFT_RIGHT</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>
+            <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>
@@ -79,6 +109,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>
@@ -120,4 +151,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 54cefc63..994e9ed4 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;
+
        private PreferencesSubpage _subpage;
        public PreferencesSubpage subpage {
                get { return _subpage; }
@@ -50,10 +57,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 = "";
@@ -79,4 +93,23 @@ private class Games.PreferencesWindow : Gtk.Window {
                titlebar_stack.remove (previous_subpage.header_bar);
                previous_subpage = null;
        }
+
+       [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;
+       }
 }