[gnome-games/wip/exalm/libhandy4: 9/19] preferences-window: Integrate subpages

[Alexander Mikhaylenko <alexm src gnome org>]

commit 7b59e7eb4be7dea4dbb1d4e9f8e816d9b57aeeb4
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Mon Sep 17 16:29:52 2018 +0500

    preferences-window: Integrate subpages
    
    Add 'subpage' property to PreferencesWindow and sync it with the active
    PreferencePage. Display a subpage instead of main content whenever the
    property value is not null.

 data/ui/preferences-window.ui  | 127 +++++++++++++++++++++++------------------
 src/ui/preferences-window.vala |  56 ++++++++++++++++++
 2 files changed, 127 insertions(+), 56 deletions(-)
---
diff --git a/data/ui/preferences-window.ui b/data/ui/preferences-window.ui
index 43066663..c843d35b 100644
--- a/data/ui/preferences-window.ui
+++ b/data/ui/preferences-window.ui
@@ -11,24 +11,31 @@
       <object class="HdyTitleBar" id="titlebar">
         <property name="visible">True</property>
         <child>
-          <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>
+              <object class="GtkBox" id="titlebar_box">
                 <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>
-                <style>
-                  <class name="sidebar"/>
-                </style>
+                <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>
+                    <style>
+                      <class name="sidebar"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
@@ -36,61 +43,69 @@
       </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>
-            <style>
-              <class name="sidebar"/>
-            </style>
-          </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>
+                <style>
+                  <class name="sidebar"/>
+                </style>
               </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 33acaf1a..38e1bf54 100644
--- a/src/ui/preferences-window.vala
+++ b/src/ui/preferences-window.vala
@@ -5,12 +5,18 @@ private class Games.PreferencesWindow : Gtk.Window {
        [GtkChild]
        private Hdy.TitleBar titlebar;
        [GtkChild]
+       private Gtk.Stack titlebar_stack;
+       [GtkChild]
        private Gtk.Box titlebar_box;
        [GtkChild]
        private Gtk.HeaderBar left_header_bar;
        [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;
@@ -47,8 +53,45 @@ 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;
+                               selection_mode_binding.unbind ();
+                       }
+
+                       if (value != null) {
+                               var header_bar = value.header_bar;
+
+                               main_stack.add (value);
+                               main_stack.visible_child = value;
+
+                               selection_mode_binding = value.bind_property ("request-selection-mode",
+                                                                             titlebar, "selection-mode",
+                                                                             BindingFlags.SYNC_CREATE);
+
+                               titlebar_stack.add (header_bar);
+                               titlebar_stack.visible_child = header_bar;
+                       }
+
+                       _subpage = value;
+               }
+       }
+
+       // The previous subpage instance must be kept around during the transition
+       private PreferencesSubpage previous_subpage;
+
        private Binding right_header_bar_binding;
        private Binding immersive_mode_binding;
+       private Binding subpage_binding;
+       private Binding selection_mode_binding;
 
        public PreferencesWindow () {
                stack.foreach ((child) => {
@@ -63,6 +106,7 @@ private class Games.PreferencesWindow : Gtk.Window {
                var page = stack.visible_child as PreferencesPage;
                if (page == null) {
                        right_header_bar = null;
+                       subpage = null;
 
                        return;
                }
@@ -70,5 +114,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;
        }
 }