[gnome-software: 4/6] shell: Split the modes in decks
- From: Philip Withnall <pwithnall src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software: 4/6] shell: Split the modes in decks
- Date: Fri, 11 Jun 2021 14:44:56 +0000 (UTC)
commit b09b035253d4485366807344605c86c390cdae25
Author: Adrien Plazas <kekun plazas laposte net>
Date: Thu Apr 22 12:46:28 2021 +0200
shell: Split the modes in decks
This split the main view and the sub views into two stacks, and uses a
deck to move between the main and sub views with an "over" transition
animation.
In practice, this avoids weird jumps caused by changing the sidebar's
visibility, and this gives a better sense of spatialization to the user
that is reflected into the UI's layout.
In the future, it will allow to simplify the shell's code further and to
support gestures.
The indentation is purposefully left broken here to make the actual code
change easier to review and will be fixed in the next commit.
Fixes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1219
src/gs-shell.c | 117 ++++++++++++++++----------
src/gs-shell.ui | 257 +++++++++++++++++++++++++++++++++++++++-----------------
2 files changed, 252 insertions(+), 122 deletions(-)
---
diff --git a/src/gs-shell.c b/src/gs-shell.c
index 04c144663..00a2cd5c7 100644
--- a/src/gs-shell.c
+++ b/src/gs-shell.c
@@ -70,13 +70,18 @@ struct _GsShell
GQueue *back_entry_stack;
GPtrArray *modal_dialogs;
gchar *events_info_uri;
+ HdyDeck *main_deck;
HdyLeaflet *main_leaflet;
+ HdyDeck *details_deck;
GtkStack *stack_loading;
GtkStack *stack_main;
+ GtkStack *stack_sub;
GsPage *page;
GsSidebar *sidebar;
+ GBinding *main_header_title_binding;
GBinding *application_details_header_binding;
+ GBinding *sub_page_header_title_binding;
#ifdef HAVE_MOGWAI
MwscScheduler *scheduler;
@@ -87,8 +92,6 @@ struct _GsShell
GtkWidget *sidebar_box;
GtkWidget *main_header;
GtkWidget *metered_updates_bar;
- GtkWidget *menu_button_main;
- GtkWidget *menu_button_sidebar;
GtkWidget *search_button_main;
GtkWidget *search_button_sidebar;
GtkWidget *entry_search;
@@ -104,6 +107,7 @@ struct _GsShell
GtkWidget *label_events;
GtkWidget *primary_menu;
GtkWidget *application_details_header;
+ GtkWidget *sub_page_header_title;
GsPage *pages[GS_SHELL_MODE_LAST];
};
@@ -403,6 +407,26 @@ gs_shell_clean_back_entry_stack (GsShell *shell)
}
}
+static gboolean
+gs_shell_get_mode_is_main (GsShellMode mode)
+{
+ switch (mode) {
+ case GS_SHELL_MODE_OVERVIEW:
+ case GS_SHELL_MODE_INSTALLED:
+ case GS_SHELL_MODE_SEARCH:
+ case GS_SHELL_MODE_UPDATES:
+ case GS_SHELL_MODE_LOADING:
+ return TRUE;
+ case GS_SHELL_MODE_DETAILS:
+ case GS_SHELL_MODE_CATEGORY:
+ case GS_SHELL_MODE_EXTRAS:
+ case GS_SHELL_MODE_MODERATE:
+ return FALSE;
+ default:
+ return TRUE;
+ }
+}
+
static void search_button_clicked_cb (GtkToggleButton *toggle_button, GsShell *shell);
static void gs_overview_page_button_cb (GtkWidget *widget, GsShell *shell);
@@ -410,36 +434,11 @@ static void
update_header_widgets (GsShell *shell)
{
GsShellMode mode = gs_shell_get_mode (shell);
- gboolean mode_needs_sidebar;
- gboolean sidebar_visible;
- gboolean mode_needs_menu;
- gboolean mode_needs_search;
-
- /* update the visibility of various shell widgets */
- mode_needs_sidebar = (mode == GS_SHELL_MODE_OVERVIEW ||
- mode == GS_SHELL_MODE_INSTALLED ||
- mode == GS_SHELL_MODE_UPDATES ||
- mode == GS_SHELL_MODE_SEARCH);
- gtk_widget_set_visible (shell->sidebar_box, mode_needs_sidebar);
- sidebar_visible = mode_needs_sidebar && !hdy_leaflet_get_folded (shell->main_leaflet);
-
- mode_needs_menu = (mode == GS_SHELL_MODE_OVERVIEW ||
- mode == GS_SHELL_MODE_INSTALLED ||
- mode == GS_SHELL_MODE_UPDATES ||
- mode == GS_SHELL_MODE_SEARCH);
- gtk_widget_set_visible (shell->menu_button_main, mode_needs_menu && !sidebar_visible);
- gtk_widget_set_visible (shell->menu_button_sidebar, mode_needs_menu && sidebar_visible);
/* only show the search button in overview and search pages */
g_signal_handlers_block_by_func (shell->search_button_main, search_button_clicked_cb, shell);
g_signal_handlers_block_by_func (shell->search_button_sidebar, search_button_clicked_cb, shell);
- mode_needs_search = (mode == GS_SHELL_MODE_OVERVIEW ||
- mode == GS_SHELL_MODE_SEARCH ||
- mode == GS_SHELL_MODE_INSTALLED);
- gtk_widget_set_visible (shell->search_button_main, mode_needs_search && !sidebar_visible);
- gtk_widget_set_visible (shell->search_button_sidebar, mode_needs_search && sidebar_visible);
-
/* hide unless we're going to search */
gtk_search_bar_set_search_mode (GTK_SEARCH_BAR (shell->search_bar),
mode == GS_SHELL_MODE_SEARCH);
@@ -456,11 +455,9 @@ stack_notify_visible_child_cb (GObject *object,
GsShell *shell = GS_SHELL (user_data);
GsPage *page;
GtkWidget *widget;
- GsShellMode mode;
+ GsShellMode mode = gs_shell_get_mode (shell);
gsize i;
- mode = gs_shell_get_mode (shell);
-
update_header_widgets (shell);
/* set the window title back to default */
@@ -474,11 +471,6 @@ stack_notify_visible_child_cb (GObject *object,
mode == GS_SHELL_MODE_UPDATES)
gs_shell_clean_back_entry_stack (shell);
- /* show the back button if needed */
- gtk_widget_set_visible (shell->button_back,
- mode != GS_SHELL_MODE_SEARCH &&
- !g_queue_is_empty (shell->back_entry_stack));
-
if (shell->page != NULL)
gs_page_switch_from (shell->page);
g_set_object (&shell->page, page);
@@ -491,11 +483,21 @@ stack_notify_visible_child_cb (GObject *object,
widget = gs_page_get_header_end_widget (page);
gs_shell_set_header_end_widget (shell, widget);
+ g_clear_object (&shell->main_header_title_binding);
+ shell->main_header_title_binding = g_object_bind_property (gtk_stack_get_visible_child
(shell->stack_main), "title",
+ shell->main_header, "title",
+ G_BINDING_SYNC_CREATE);
+
g_clear_object (&shell->application_details_header_binding);
- shell->application_details_header_binding = g_object_bind_property (page, "title",
+ shell->application_details_header_binding = g_object_bind_property (gtk_stack_get_visible_child
(shell->stack_sub), "title",
shell->application_details_header, "label",
G_BINDING_SYNC_CREATE);
+ g_clear_object (&shell->sub_page_header_title_binding);
+ shell->sub_page_header_title_binding = g_object_bind_property (gtk_stack_get_visible_child
(shell->stack_sub), "title",
+ shell->sub_page_header_title, "label",
+ G_BINDING_SYNC_CREATE);
+
/* refresh the updates bar when moving out of the loading mode, but only
* if the Mogwai scheduler state is already known, to avoid spuriously
* showing the updates bar */
@@ -550,6 +552,10 @@ gs_shell_change_mode (GsShell *shell,
{
GsApp *app;
GsPage *page;
+ gboolean mode_is_main = gs_shell_get_mode_is_main (mode);
+
+ if (gs_shell_get_mode (shell) == mode)
+ return;
/* switch page */
if (mode == GS_SHELL_MODE_LOADING) {
@@ -558,7 +564,15 @@ gs_shell_change_mode (GsShell *shell,
}
gtk_stack_set_visible_child_name (shell->stack_loading, "main");
- gtk_stack_set_visible_child_name (GTK_STACK (shell->stack_main), page_name[mode]);
+ if (mode == GS_SHELL_MODE_DETAILS) {
+ hdy_deck_set_visible_child_name (shell->details_deck, "details");
+ } else {
+ hdy_deck_set_visible_child_name (shell->details_deck, "main");
+ /* We only change the main deck when not reaching the details
+ * page to preserve the navigation history in the UI's state. */
+ hdy_deck_set_visible_child_name (shell->main_deck, mode_is_main ? "main" : "sub");
+ gtk_stack_set_visible_child_name (mode_is_main ? shell->stack_main : shell->stack_sub,
page_name[mode]);
+ }
/* do any mode-specific actions */
page = shell->pages[mode];
@@ -747,6 +761,12 @@ gs_shell_go_back (GsShell *shell)
free_back_entry (entry);
}
+static void
+gs_shell_details_back_button_cb (GtkWidget *widget, GsShell *shell)
+{
+ gs_shell_go_back (shell);
+}
+
static void
gs_shell_back_button_cb (GtkWidget *widget, GsShell *shell)
{
@@ -876,9 +896,6 @@ window_key_press_event (GtkWidget *win, GdkEventKey *event, GsShell *shell)
GdkModifierType state;
gboolean is_rtl;
- if (!gtk_widget_is_visible (shell->button_back) || !gtk_widget_is_sensitive (shell->button_back))
- return GDK_EVENT_PROPAGATE;
-
state = event->state;
keymap = gdk_keymap_get_for_display (gtk_widget_get_display (win));
gdk_keymap_add_virtual_modifiers (keymap, &state);
@@ -902,9 +919,6 @@ window_button_press_event (GtkWidget *win, GdkEventButton *event, GsShell *shell
if (event->button != 8)
return GDK_EVENT_PROPAGATE;
- if (!gtk_widget_is_visible (shell->button_back) || !gtk_widget_is_sensitive (shell->button_back))
- return GDK_EVENT_PROPAGATE;
-
gtk_widget_activate (shell->button_back);
return GDK_EVENT_STOP;
}
@@ -2163,7 +2177,13 @@ gs_shell_get_mode (GsShell *shell)
if (g_strcmp0 (gtk_stack_get_visible_child_name (shell->stack_loading), "loading") == 0)
return GS_SHELL_MODE_LOADING;
- name = gtk_stack_get_visible_child_name (shell->stack_main);
+ if (g_strcmp0 (hdy_deck_get_visible_child_name (shell->details_deck), "details") == 0)
+ return GS_SHELL_MODE_DETAILS;
+
+ if (g_strcmp0 (hdy_deck_get_visible_child_name (shell->main_deck), "main") == 0)
+ name = gtk_stack_get_visible_child_name (shell->stack_main);
+ else
+ name = gtk_stack_get_visible_child_name (shell->stack_sub);
for (gsize i = 0; i < G_N_ELEMENTS (page_name); i++)
if (g_strcmp0 (page_name[i], name) == 0)
@@ -2299,7 +2319,9 @@ gs_shell_dispose (GObject *object)
{
GsShell *shell = GS_SHELL (object);
+ g_clear_object (&shell->main_header_title_binding);
g_clear_object (&shell->application_details_header_binding);
+ g_clear_object (&shell->sub_page_header_title_binding);
if (shell->back_entry_stack != NULL) {
g_queue_free_full (shell->back_entry_stack, (GDestroyNotify) free_back_entry);
@@ -2351,13 +2373,14 @@ gs_shell_class_init (GsShellClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsShell, sidebar_box);
gtk_widget_class_bind_template_child (widget_class, GsShell, main_header);
+ gtk_widget_class_bind_template_child (widget_class, GsShell, main_deck);
gtk_widget_class_bind_template_child (widget_class, GsShell, main_leaflet);
+ gtk_widget_class_bind_template_child (widget_class, GsShell, details_deck);
gtk_widget_class_bind_template_child (widget_class, GsShell, stack_loading);
gtk_widget_class_bind_template_child (widget_class, GsShell, stack_main);
+ gtk_widget_class_bind_template_child (widget_class, GsShell, stack_sub);
gtk_widget_class_bind_template_child (widget_class, GsShell, sidebar);
gtk_widget_class_bind_template_child (widget_class, GsShell, metered_updates_bar);
- gtk_widget_class_bind_template_child (widget_class, GsShell, menu_button_main);
- gtk_widget_class_bind_template_child (widget_class, GsShell, menu_button_sidebar);
gtk_widget_class_bind_template_child (widget_class, GsShell, search_button_main);
gtk_widget_class_bind_template_child (widget_class, GsShell, search_button_sidebar);
gtk_widget_class_bind_template_child (widget_class, GsShell, entry_search);
@@ -2373,6 +2396,7 @@ gs_shell_class_init (GsShellClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsShell, label_events);
gtk_widget_class_bind_template_child (widget_class, GsShell, primary_menu);
gtk_widget_class_bind_template_child (widget_class, GsShell, application_details_header);
+ gtk_widget_class_bind_template_child (widget_class, GsShell, sub_page_header_title);
gtk_widget_class_bind_template_child_full (widget_class, "overview_page", FALSE, G_STRUCT_OFFSET
(GsShell, pages[GS_SHELL_MODE_OVERVIEW]));
gtk_widget_class_bind_template_child_full (widget_class, "updates_page", FALSE, G_STRUCT_OFFSET
(GsShell, pages[GS_SHELL_MODE_UPDATES]));
@@ -2390,6 +2414,7 @@ gs_shell_class_init (GsShellClass *klass)
gtk_widget_class_bind_template_callback (widget_class, window_key_press_event);
gtk_widget_class_bind_template_callback (widget_class, window_keypress_handler);
gtk_widget_class_bind_template_callback (widget_class, window_button_press_event);
+ gtk_widget_class_bind_template_callback (widget_class, gs_shell_details_back_button_cb);
gtk_widget_class_bind_template_callback (widget_class, gs_shell_back_button_cb);
gtk_widget_class_bind_template_callback (widget_class, gs_overview_page_button_cb);
gtk_widget_class_bind_template_callback (widget_class, updates_page_notify_counter_cb);
diff --git a/src/gs-shell.ui b/src/gs-shell.ui
index b0c1e69ee..5a3e942db 100644
--- a/src/gs-shell.ui
+++ b/src/gs-shell.ui
@@ -36,6 +36,12 @@
<object class="GtkBox">
<property name="visible">True</property>
<property name="orientation">vertical</property>
+ <child>
+ <object class="HdyDeck" id="details_header_deck">
+ <property name="visible">True</property>
+ <child>
+ <object class="HdyDeck" id="header_deck">
+ <property name="visible">True</property>
<child>
<object class="HdyLeaflet" id="header_leaflet">
<property name="visible">True</property>
@@ -47,7 +53,7 @@
<property name="transition-type" bind-source="main_leaflet" bind-property="transition-type"
bind-flags="bidirectional|sync-create"/>
<child>
<object class="HdyHeaderBar" id="sidebar_header">
- <property name="visible" bind-source="sidebar_box" bind-property="visible"
bind-flags="sync-create|bidirectional" />
+ <property name="visible">True</property>
<property name="can-focus">False</property>
<property name="show-close-button">True</property>
<property name="title" translatable="yes">Software</property>
@@ -127,31 +133,9 @@
<property name="can-focus">False</property>
<property name="hexpand">True</property>
<property name="show-close-button">True</property>
- <child>
- <object class="GtkButton" id="button_back">
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <signal name="clicked" handler="gs_shell_back_button_cb"/>
- <child internal-child="accessible">
- <object class="AtkObject" id="button_back_accessible">
- <property name="accessible-name" translatable="yes">Go back</property>
- </object>
- </child>
- <style>
- <class name="image-button"/>
- </style>
- <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>
- </child>
<child>
<object class="GtkToggleButton" id="search_button_main">
- <property name="visible">False</property>
+ <property name="visible" bind-source="main_leaflet" bind-property="folded"
bind-flags="sync-create"/>
<property name="can_focus">True</property>
<property name="active" bind-source="search_bar" bind-property="search-mode-enabled"
bind-flags="sync-create|bidirectional" />
<signal name="clicked" handler="search_button_clicked_cb"/>
@@ -178,19 +162,9 @@
<property name="pack-type">start</property>
</packing>
</child>
- <child type="title">
- <object class="GtkLabel" id="application_details_header">
- <property name="visible">True</property>
- <property name="selectable">False</property>
- <property name="ellipsize">end</property>
- <style>
- <class name="title"/>
- </style>
- </object>
- </child>
<child>
<object class="GtkMenuButton" id="menu_button_main">
- <property name="visible">False</property>
+ <property name="visible" bind-source="main_leaflet" bind-property="folded"
bind-flags="sync-create"/>
<property name="can_focus">True</property>
<property name="sensitive">True</property>
<property name="menu_model">primary_menu</property>
@@ -218,6 +192,90 @@
</child>
</object>
</child>
+ <child>
+ <object class="HdyHeaderBar" id="sub_header">
+ <property name="visible">True</property>
+ <property name="can-focus">False</property>
+ <property name="hexpand">True</property>
+ <property name="show-close-button">True</property>
+ <child>
+ <object class="GtkButton" id="button_back">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <signal name="clicked" handler="gs_shell_back_button_cb"/>
+ <child internal-child="accessible">
+ <object class="AtkObject">
+ <property name="accessible-name" translatable="yes">Go back</property>
+ </object>
+ </child>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <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>
+ </child>
+ <child type="title">
+ <object class="GtkLabel" id="sub_page_header_title">
+ <property name="visible">True</property>
+ <property name="selectable">False</property>
+ <property name="ellipsize">end</property>
+ <style>
+ <class name="title"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="HdyHeaderBar" id="details_header">
+ <property name="visible">True</property>
+ <property name="can-focus">False</property>
+ <property name="hexpand">True</property>
+ <property name="show-close-button">True</property>
+ <child>
+ <object class="GtkButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <signal name="clicked" handler="gs_shell_details_back_button_cb"/>
+ <child internal-child="accessible">
+ <object class="AtkObject">
+ <property name="accessible-name" translatable="yes">Go back</property>
+ </object>
+ </child>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon_name">go-previous-symbolic</property>
+ <property name="icon_size">1</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child type="title">
+ <object class="GtkLabel" id="application_details_header">
+ <property name="visible">True</property>
+ <property name="selectable">False</property>
+ <property name="ellipsize">end</property>
+ <style>
+ <class name="title"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
<child>
<object class="GtkOverlay" id="overlay">
@@ -325,6 +383,18 @@
</object>
</child>
+ <child>
+ <object class="HdyDeck" id="details_deck">
+ <property name="visible">True</property>
+ <signal name="notify::visible-child" handler="stack_notify_visible_child_cb"/>
+ <child>
+ <object class="HdyDeck" id="main_deck">
+ <property name="visible">True</property>
+ <signal name="notify::visible-child" handler="stack_notify_visible_child_cb"/>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
<child>
<object class="HdyLeaflet" id="main_leaflet">
<property name="visible">True</property>
@@ -488,14 +558,6 @@
<property name="icon-name">view-list-symbolic</property>
</packing>
</child>
- <child>
- <object class="GsModeratePage" id="moderate_page">
- <property name="visible">True</property>
- </object>
- <packing>
- <property name="name">moderate</property>
- </packing>
- </child>
<child>
<object class="GsSearchPage" id="search_page">
<property name="visible">True</property>
@@ -515,48 +577,77 @@
<property name="icon-name">view-refresh-symbolic</property>
</packing>
</child>
-
- <child>
- <object class="GsDetailsPage" id="details_page">
- <property name="visible">True</property>
- </object>
- <packing>
- <property name="name">details</property>
- </packing>
- </child>
-
- <child>
- <object class="GsCategoryPage" id="category_page">
- <property name="visible">True</property>
- <signal name="app-clicked" handler="category_page_app_clicked_cb"/>
- </object>
- <packing>
- <property name="name">category</property>
- </packing>
- </child>
- <child>
- <object class="GsExtrasPage" id="extras_page">
- <property name="visible">True</property>
- </object>
- <packing>
- <property name="name">extras</property>
- </packing>
- </child>
</object>
</child>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="HdyViewSwitcherBar" id="sidebar_switcher">
+ <property name="visible">True</property>
+ <property name="reveal" bind-source="header_leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="can-focus">True</property>
+ <property name="stack">stack_main</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">main</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkStack" id="stack_sub">
+ <property name="visible">True</property>
+ <property name="homogeneous">False</property>
+ <property name="transition-type">crossfade</property>
+ <signal name="notify::visible-child" handler="stack_notify_visible_child_cb"/>
+ <child>
+ <object class="GsModeratePage" id="moderate_page">
+ <property name="visible">True</property>
+ </object>
+ <packing>
+ <property name="name">moderate</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GsCategoryPage" id="category_page">
+ <property name="visible">True</property>
+ <signal name="app-clicked" handler="category_page_app_clicked_cb"/>
+ </object>
+ <packing>
+ <property name="name">category</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GsExtrasPage" id="extras_page">
+ <property name="visible">True</property>
+ </object>
+ <packing>
+ <property name="name">extras</property>
+ </packing>
+ </child>
+ </object>
+ <packing>
+ <property name="name">sub</property>
+ </packing>
+ </child>
</object>
+ <packing>
+ <property name="name">main</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GsDetailsPage" id="details_page">
+ <property name="visible">True</property>
+ </object>
+ <packing>
+ <property name="name">details</property>
+ </packing>
</child>
</object>
</child>
- <child>
- <object class="HdyViewSwitcherBar" id="sidebar_switcher">
- <property name="visible">True</property>
- <property name="reveal" bind-source="header_leaflet" bind-property="folded"
bind-flags="sync-create"/>
- <property name="can-focus">True</property>
- <property name="stack">stack_main</property>
</object>
</child>
</object>
@@ -594,6 +685,20 @@
</child>
</template>
+ <object class="HdySwipeGroup">
+ <swipeables>
+ <swipeable name="header_deck"/>
+ <swipeable name="main_deck"/>
+ </swipeables>
+ </object>
+
+ <object class="HdySwipeGroup">
+ <swipeables>
+ <swipeable name="details_header_deck"/>
+ <swipeable name="details_deck"/>
+ </swipeables>
+ </object>
+
<object class="HdyHeaderGroup">
<property name="decorate-all" bind-source="main_leaflet" bind-property="folded"
bind-flags="sync-create"/>
<headerbars>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
