GNOME.org
 

[gnome-games/wip/exalm/libhandy3: 54/55] wip: narrow mode

commit cbb00d6e397c105fa09a832d2a3dbf325e5605d4
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Sun Sep 16 12:33:17 2018 +0500

    wip: narrow mode

 data/gtk-style.css                |  4 ++++
 data/ui/application-window.ui     |  1 +
 data/ui/collection-box.ui         | 14 ++++++++++++++
 data/ui/collection-header-bar.ui  |  9 ++++++++-
 data/ui/search-bar.ui             |  2 +-
 data/ui/sidebar-view.ui           | 39 ++++++++++++++++++++++++---------------
 src/ui/application-window.vala    | 20 ++++++++++++++++++++
 src/ui/collection-box.vala        |  8 ++++++++
 src/ui/collection-header-bar.vala | 24 ++++++++++++++++++------
 src/ui/sidebar-view.vala          | 15 +++++++++++++++
 10 files changed, 113 insertions(+), 23 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index c1a79c5c..6117c028 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -43,3 +43,7 @@ stacksidebar list {
        border-right-width: 0px;
 }
 
+stackswitcher.narrow > button {
+       padding-left: 0;
+       padding-right: 0;
+}
diff --git a/data/ui/application-window.ui b/data/ui/application-window.ui
index 443f718e..67e04f30 100644
--- a/data/ui/application-window.ui
+++ b/data/ui/application-window.ui
@@ -6,6 +6,7 @@
     <property name="default-width">768</property>
     <property name="default-height">600</property>
     <property name="show-menubar">False</property>
+    <signal name="configure-event" handler="on_configure_event"/>
     <signal name="delete-event" after="yes" handler="on_delete_event"/>
     <signal name="key-press-event" after="yes" handler="on_key_pressed"/>
     <signal name="button-press-event" after="yes" handler="on_button_pressed"/>
diff --git a/data/ui/collection-box.ui b/data/ui/collection-box.ui
index 12c4c1c4..c9800f9a 100644
--- a/data/ui/collection-box.ui
+++ b/data/ui/collection-box.ui
@@ -104,6 +104,20 @@
         </child>
       </object>
     </child>
+    <child>
+      <object class="GtkActionBar" id="narrow_action_bar">
+        <property name="visible">False</property>
+        <child type="center">
+          <object class="GtkStackSwitcher" id="view_switcher">
+            <property name="visible">True</property>
+            <property name="stack">viewstack</property>
+            <style>
+              <class name="narrow"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </child>
   </template>
   <object class="GtkImage" id="close_icon">
     <property name="visible">True</property>
diff --git a/data/ui/collection-header-bar.ui b/data/ui/collection-header-bar.ui
index a7407a8d..ca0c2bc3 100644
--- a/data/ui/collection-header-bar.ui
+++ b/data/ui/collection-header-bar.ui
@@ -56,19 +56,26 @@
       <object class="GtkStack" id="title_stack">
         <property name="visible">True</property>
         <property name="transition-type">crossfade</property>
+        <property name="hhomogeneous">False</property>
         <child>
           <object class="GtkStackSwitcher" id="view_switcher">
             <property name="visible">True</property>
           </object>
+          <packing>
+            <property name="name">view_switcher</property>
+          </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="empty_title">
+          <object class="GtkLabel">
             <property name="visible">True</property>
             <property name="label" translatable="yes">Games</property>
             <style>
               <class name="title"/>
             </style>
           </object>
+          <packing>
+            <property name="name">title</property>
+          </packing>
         </child>
       </object>
     </child>
diff --git a/data/ui/search-bar.ui b/data/ui/search-bar.ui
index 3416d49f..6767a6a2 100644
--- a/data/ui/search-bar.ui
+++ b/data/ui/search-bar.ui
@@ -6,7 +6,7 @@
     <child>
       <object class="GtkSearchEntry" id="entry">
         <property name="visible">True</property>
-        <property name="width-chars">40</property>
+        <property name="width-chars">4</property>
         <signal name="search-changed" handler="on_search_changed"/>
         <signal name="activate" handler="on_search_activated"/>
       </object>
diff --git a/data/ui/sidebar-view.ui b/data/ui/sidebar-view.ui
index 0617dc21..d442950e 100644
--- a/data/ui/sidebar-view.ui
+++ b/data/ui/sidebar-view.ui
@@ -7,26 +7,35 @@
     <signal name="map" after="yes" handler="on_map"/>
     <signal name="unmap" after="no" handler="on_unmap"/>
     <child>
-      <object class="GtkScrolledWindow">
+      <object class="HdyLeaflet" id="leaflet">
         <property name="visible">True</property>
-        <property name="vexpand">True</property>
-        <property name="width-request">250</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="GtkListBox" id="list_box">
+          <object class="GtkScrolledWindow">
             <property name="visible">True</property>
-            <signal name="row-activated" handler="on_list_box_row_activated"/>
-            <signal name="row-selected" handler="on_list_box_row_selected"/>
-            <style>
-              <class name="sidebar"/>
-            </style>
+            <property name="vexpand">True</property>
+            <property name="width-request">250</property>
+            <child>
+              <object class="GtkListBox" id="list_box">
+                <property name="visible">True</property>
+                <signal name="row-activated" handler="on_list_box_row_activated"/>
+                <signal name="row-selected" handler="on_list_box_row_selected"/>
+                <style>
+                  <class name="sidebar"/>
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GamesCollectionIconView" id="collection_view">
+            <property name="visible">True</property>
+            <property name="expand">True</property>
           </object>
         </child>
-      </object>
-    </child>
-    <child>
-      <object class="GamesCollectionIconView" id="collection_view">
-        <property name="visible">True</property>
-        <property name="expand">True</property>
       </object>
     </child>
   </template>
diff --git a/src/ui/application-window.vala b/src/ui/application-window.vala
index 7082d393..4ead319e 100644
--- a/src/ui/application-window.vala
+++ b/src/ui/application-window.vala
@@ -65,6 +65,8 @@ private class Games.ApplicationWindow : Gtk.ApplicationWindow {
 
        public bool loading_notification { get; set; }
 
+       public bool is_narrow { get; set; }
+
        [GtkChild]
        private Gtk.Stack content_box;
        [GtkChild]
@@ -84,9 +86,11 @@ private class Games.ApplicationWindow : Gtk.ApplicationWindow {
        private Binding box_search_binding;
        private Binding box_fullscreen_binding;
        private Binding box_empty_collection_binding;
+       private Binding box_narrow_binding;
        private Binding header_bar_search_binding;
        private Binding header_bar_fullscreen_binding;
        private Binding header_bar_empty_collection_binding;
+       private Binding header_bar_narrow_binding;
        private Binding loading_notification_binding;
 
        private Cancellable run_game_cancellable;
@@ -110,11 +114,16 @@ private class Games.ApplicationWindow : Gtk.ApplicationWindow {
                        is_collection_empty = collection.get_n_items () == 0;
                });
                is_collection_empty = collection.get_n_items () == 0;
+               is_narrow = false;
        }
 
        construct {
                settings = new Settings ("org.gnome.Games");
 
+               var window = get_window ();
+               var events = window.get_events ();
+               window.set_events (events | Gdk.EventMask.STRUCTURE_MASK);
+
                int width, height;
                settings.get ("window-size", "(ii)", out width, out height);
                var geometry = get_geometry ();
@@ -144,6 +153,11 @@ private class Games.ApplicationWindow : Gtk.ApplicationWindow {
                header_bar_empty_collection_binding = bind_property ("is-collection-empty", 
collection_header_bar, "is-collection-empty",
                                                                     BindingFlags.BIDIRECTIONAL);
 
+               box_narrow_binding = bind_property ("is-narrow", collection_box, "is-narrow",
+                                                   BindingFlags.DEFAULT);
+               header_bar_narrow_binding = bind_property ("is-narrow", collection_header_bar, "is-narrow",
+                                                          BindingFlags.DEFAULT);
+
                konami_code = new KonamiCode (this);
                konami_code.code_performed.connect (on_konami_code_performed);
 
@@ -209,6 +223,12 @@ private class Games.ApplicationWindow : Gtk.ApplicationWindow {
                        window_size_update_timeout = Timeout.add (WINDOW_SIZE_UPDATE_DELAY_MILLISECONDS, 
store_window_size);
        }
 
+       [GtkCallback]
+       public bool on_configure_event (Gtk.Widget widget, Gdk.EventConfigure event) {
+               is_narrow = event.width < 700;
+               return false;
+       }
+
        [GtkCallback]
        public bool on_delete_event () {
                return !quit_game ();
diff --git a/src/ui/collection-box.vala b/src/ui/collection-box.vala
index 63fb2776..1df33288 100644
--- a/src/ui/collection-box.vala
+++ b/src/ui/collection-box.vala
@@ -25,6 +25,10 @@ private class Games.CollectionBox : Gtk.Box {
        public Gtk.Stack viewstack {
                get { return _viewstack; }
        }
+       [GtkChild]
+       private Gtk.ActionBar narrow_action_bar;
+
+       public bool is_narrow { get; set; }
 
        private bool _is_collection_empty;
        public bool is_collection_empty {
@@ -43,6 +47,7 @@ private class Games.CollectionBox : Gtk.Box {
        private Binding platform_collection_binding;
        private Binding search_binding;
        private Binding loading_notification_binding;
+       private Binding narrow_action_bar_binding;
 
        public CollectionBox (ListStore collection) {
                Object (collection: collection);
@@ -62,6 +67,9 @@ private class Games.CollectionBox : Gtk.Box {
                                                BindingFlags.BIDIRECTIONAL);
                loading_notification_binding = bind_property ("loading-notification", 
loading_notification_revealer, "reveal-child",
                                                              BindingFlags.DEFAULT);
+
+               narrow_action_bar_binding = bind_property ("is-narrow", narrow_action_bar, "visible",
+                                                          BindingFlags.DEFAULT);
        }
 
        public bool gamepad_button_press_event (Manette.Event event) {
diff --git a/src/ui/collection-header-bar.vala b/src/ui/collection-header-bar.vala
index f2195538..1c42075b 100644
--- a/src/ui/collection-header-bar.vala
+++ b/src/ui/collection-header-bar.vala
@@ -3,6 +3,7 @@
 [GtkTemplate (ui = "/org/gnome/Games/ui/collection-header-bar.ui")]
 private class Games.CollectionHeaderBar : Gtk.HeaderBar {
        public bool search_mode { get; set; }
+
        private Gtk.Stack _viewstack;
        public Gtk.Stack viewstack {
                get { return _viewstack; }
@@ -17,19 +18,23 @@ private class Games.CollectionHeaderBar : Gtk.HeaderBar {
                get { return _is_collection_empty; }
                set {
                        _is_collection_empty = value;
-                       if (_is_collection_empty)
-                               title_stack.visible_child = empty_title;
-                       else
-                               title_stack.visible_child = view_switcher;
                        search.sensitive = !_is_collection_empty;
+                       update_title (Gtk.StackTransitionType.CROSSFADE);
+               }
+       }
+
+       private bool _is_narrow;
+       public bool is_narrow {
+               get { return _is_narrow; }
+               set {
+                       _is_narrow = value;
+                       update_title (Gtk.StackTransitionType.SLIDE_UP_DOWN);
                }
        }
 
        [GtkChild]
        private Gtk.Stack title_stack;
        [GtkChild]
-       private Gtk.Label empty_title;
-       [GtkChild]
        private Gtk.StackSwitcher view_switcher;
        [GtkChild]
        private Gtk.ToggleButton search;
@@ -39,4 +44,11 @@ private class Games.CollectionHeaderBar : Gtk.HeaderBar {
                search_binding = bind_property ("search-mode", search, "active",
                                                BindingFlags.BIDIRECTIONAL);
        }
+
+       private void update_title (Gtk.StackTransitionType transition) {
+               if (is_collection_empty || is_narrow)
+                       title_stack.set_visible_child_full ("title", transition);
+               else
+                       title_stack.set_visible_child_full ("view_switcher", transition);
+       }
 }
diff --git a/src/ui/sidebar-view.vala b/src/ui/sidebar-view.vala
index f3f5996e..1ac49546 100644
--- a/src/ui/sidebar-view.vala
+++ b/src/ui/sidebar-view.vala
@@ -50,6 +50,9 @@ private abstract class Games.SidebarView : Gtk.Box {
        [GtkChild]
        protected Gtk.ListBox list_box;
 
+       [GtkChild]
+       private Hdy.Leaflet leaflet;
+
        [GtkChild]
        private GamepadBrowse gamepad_browse;
 
@@ -177,6 +180,7 @@ private abstract class Games.SidebarView : Gtk.Box {
        [GtkCallback]
        private void on_list_box_row_activated (Gtk.ListBoxRow row_item) {
                collection_view.select_default_game (Gtk.DirectionType.RIGHT);
+               leaflet.visible_child = collection_view;
        }
 
        private void on_model_changed (uint position, uint removed, uint added) {
@@ -198,4 +202,15 @@ private abstract class Games.SidebarView : Gtk.Box {
 
                on_list_box_row_selected (row);
        }
+
+       [GtkCallback]
+       private void on_fold_changed (Object object, ParamSpec paramSpec) {
+               var folded = (leaflet.fold == Hdy.Fold.FOLDED);
+
+               if (folded)
+                       list_box.selection_mode = Gtk.SelectionMode.NONE;
+               else {
+                       list_box.selection_mode = Gtk.SelectionMode.SINGLE;
+               }
+       }
 }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]