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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 892bc5555ce3c1c2dbc87060bb62ad37bb594f21
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 | 42 +++++++++++++++++++++++++++++++++++---
 3 files changed, 82 insertions(+), 7 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index b9a845b2..ba96e399 100644
--- a/data/ui/preferences-window.ui
+++ b/data/ui/preferences-window.ui
@@ -13,15 +13,17 @@
         <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>
+            <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>
@@ -36,6 +38,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>
@@ -49,8 +75,12 @@
         <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>
+            <property name="fold">unfolded</property>
+            <signal name="notify::fold" handler="on_fold_changed" after="yes"/>
             <child>
               <object class="GtkStackSidebar" id="sidebar">
                 <property name="margin-top">4</property>
@@ -75,6 +105,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>
@@ -116,4 +147,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..a2442667 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.StackSidebar sidebar;
        [GtkChild]
        private Gtk.Stack stack;
 
+       [GtkChild]
+       private Gtk.Button back_button;
+
        private PreferencesSubpage _subpage;
        public PreferencesSubpage subpage {
                get { return _subpage; }
@@ -36,6 +43,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;
@@ -50,10 +60,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 +96,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;
+               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;
+       }
 }