[gnome-games/wip/exalm/libhandy2: 13/28] ui: Add subpage support to PreferencesWindow

[Alexander Mikhaylenko <alexm src gnome org>]

commit 655a4744bc2382bec55214cfda863b2008976cab
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Wed Sep 12 00:59:18 2018 +0500

    ui: Add subpage support to PreferencesWindow

 data/ui/preferences-window.ui  | 115 +++++++++++++++++++++++------------------
 src/ui/preferences-window.vala |  51 ++++++++++++++++++
 2 files changed, 116 insertions(+), 50 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index 05a71cbf..a28cd890 100644
--- a/data/ui/preferences-window.ui
+++ b/data/ui/preferences-window.ui
@@ -8,78 +8,93 @@
     <property name="default-height">500</property>
     <property name="window-position">GTK_WIN_POS_CENTER_ON_PARENT</property>
     <child type="titlebar">
-      <object class="GtkBox" id="titlebar_box">
+      <object class="GtkStack" id="titlebar_stack">
         <property name="visible">True</property>
+        <property name="transition-type">slide-left-right</property>
+        <property name="transition-duration">250</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>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator" id="header_separator">
-            <property name="orientation">vertical</property>
+          <object class="GtkBox" id="titlebar_box">
             <property name="visible">True</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>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSeparator" id="header_separator">
+                <property name="orientation">vertical</property>
+                <property name="visible">True</property>
+              </object>
+            </child>
           </object>
         </child>
       </object>
     </child>
     <child>
-      <object class="GtkBox" id="content_box">
+      <object class="GtkStack" id="main_stack">
         <property name="visible">True</property>
+        <property name="transition-type">slide-left-right</property>
+        <property name="transition-duration">250</property>
+        <signal name="notify::transition-running" handler="subpage_transition_finished"/>
         <child>
-          <object class="GtkStackSidebar" id="sidebar">
-            <property name="margin-top">4</property>
-            <property name="stack">stack</property>
-            <property name="vexpand">True</property>
-            <property name="visible">True</property>
-            <property name="width-request">150</property>
-            <style>
-              <class name="preferences" />
-            </style>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator" id="separator">
-            <property name="orientation">vertical</property>
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkStack" id="stack">
+          <object class="GtkBox" id="content_box">
             <property name="visible">True</property>
-            <property name="expand">True</property>
-            <property name="visible-child">video_page</property>
-            <property name="transition-type">GTK_STACK_TRANSITION_TYPE_CROSSFADE</property>
             <child>
-              <object class="GamesPreferencesPageVideo" id="video_page">
+              <object class="GtkStackSidebar" id="sidebar">
+                <property name="margin-top">4</property>
+                <property name="stack">stack</property>
+                <property name="vexpand">True</property>
                 <property name="visible">True</property>
+                <property name="width-request">150</property>
+                <style>
+                  <class name="preferences" />
+                </style>
               </object>
-              <packing>
-                <property name="name">video</property>
-                <property name="title" translatable="yes">Video</property>
-              </packing>
             </child>
             <child>
-              <object class="GamesPreferencesPageControllers" id="controllers_page">
+              <object class="GtkSeparator" id="separator">
+                <property name="orientation">vertical</property>
                 <property name="visible">True</property>
               </object>
-              <packing>
-                <property name="name">controllers</property>
-                <property name="title" translatable="yes">Controllers</property>
-              </packing>
             </child>
             <child>
-              <object class="GamesPreferencesPagePlugins" id="plugins_page">
+              <object class="GtkStack" id="stack">
                 <property name="visible">True</property>
+                <property name="expand">True</property>
+                <property name="visible-child">video_page</property>
+                <property name="transition-type">GTK_STACK_TRANSITION_TYPE_CROSSFADE</property>
+                <child>
+                  <object class="GamesPreferencesPageVideo" id="video_page">
+                    <property name="visible">True</property>
+                  </object>
+                  <packing>
+                    <property name="name">video</property>
+                    <property name="title" translatable="yes">Video</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GamesPreferencesPageControllers" id="controllers_page">
+                    <property name="visible">True</property>
+                  </object>
+                  <packing>
+                    <property name="name">controllers</property>
+                    <property name="title" translatable="yes">Controllers</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GamesPreferencesPagePlugins" id="plugins_page">
+                    <property name="visible">True</property>
+                  </object>
+                  <packing>
+                    <property name="name">plugins</property>
+                    <property name="title" translatable="yes">Extensions</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="name">plugins</property>
-                <property name="title" translatable="yes">Extensions</property>
-              </packing>
             </child>
           </object>
         </child>
diff --git a/src/ui/preferences-window.vala b/src/ui/preferences-window.vala
index 6a89c1e2..881de7d2 100644
--- a/src/ui/preferences-window.vala
+++ b/src/ui/preferences-window.vala
@@ -2,6 +2,8 @@
 
 [GtkTemplate (ui = "/org/gnome/Games/ui/preferences-window.ui")]
 private class Games.PreferencesWindow : Gtk.Window {
+       [GtkChild]
+       private Gtk.Stack titlebar_stack;
        [GtkChild]
        private Gtk.Box titlebar_box;
        [GtkChild]
@@ -9,6 +11,10 @@ private class Games.PreferencesWindow : Gtk.Window {
        [GtkChild]
        private Gtk.Separator header_separator;
        [GtkChild]
+       private Gtk.Stack main_stack;
+       [GtkChild]
+       private Gtk.Box content_box;
+       [GtkChild]
        private Gtk.StackSidebar sidebar;
        [GtkChild]
        private Gtk.Separator separator;
@@ -44,8 +50,40 @@ private class Games.PreferencesWindow : Gtk.Window {
                }
        }
 
+       private PreferencesSubpage _subpage;
+       public PreferencesSubpage subpage {
+               get { return _subpage; }
+               set {
+                       if (subpage == value)
+                               return;
+
+                       if (subpage != null) {
+                               previous_subpage = subpage;
+                               main_stack.visible_child = content_box;
+                               titlebar_stack.visible_child = titlebar_box;
+                       }
+
+                       if (value != null) {
+                               var header_bar = value.header_bar;
+
+                               main_stack.add (value);
+                               main_stack.visible_child = value;
+
+                               titlebar_stack.add (header_bar);
+                               titlebar_stack.visible_child = header_bar;
+                       }
+
+                       _subpage = value;
+               }
+       }
+
+       // The previous subpage instance must be kept around
+       // until the transition animation has ended
+       private PreferencesSubpage previous_subpage;
+
        private Binding right_header_bar_binding;
        private Binding immersive_mode_binding;
+       private Binding subpage_binding;
 
        public PreferencesWindow () {
                stack.foreach ((child) => {
@@ -60,6 +98,7 @@ private class Games.PreferencesWindow : Gtk.Window {
                var page = stack.visible_child as PreferencesPage;
                if (page == null) {
                        right_header_bar = null;
+                       subpage = null;
 
                        return;
                }
@@ -67,5 +106,17 @@ private class Games.PreferencesWindow : Gtk.Window {
                                                               BindingFlags.SYNC_CREATE);
                immersive_mode_binding = page.bind_property ("immersive-mode", this, "immersive-mode",
                                                             BindingFlags.SYNC_CREATE);
+               subpage_binding = page.bind_property ("subpage", this, "subpage",
+                                                     BindingFlags.SYNC_CREATE);
+       }
+
+       [GtkCallback]
+       public void subpage_transition_finished (Object object, ParamSpec param) {
+               if (main_stack.transition_running || previous_subpage == null)
+                       return;
+
+               main_stack.remove (previous_subpage);
+               titlebar_stack.remove (previous_subpage.header_bar);
+               previous_subpage = null;
        }
 }