[gnome-software: 4/18] gs-details-page: Move link buttons into listbox
- From: Philip Withnall <pwithnall src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software: 4/18] gs-details-page: Move link buttons into listbox
- Date: Wed, 4 Aug 2021 14:14:22 +0000 (UTC)
commit 310158cded19598a16d9b14f038cba0cd7c55e70
Author: Philip Withnall <pwithnall endlessos org>
Date: Mon Jul 26 15:00:13 2021 +0100
gs-details-page: Move link buttons into listbox
This implements the list of links from the new details page design:
https://gitlab.gnome.org/Teams/Design/software-mockups/-/raw/master/adaptive/app-page-adaptive.png.
Signed-off-by: Philip Withnall <pwithnall endlessos org>
Helps: #1285
src/gs-details-page.c | 77 ++++++++---------
src/gs-details-page.ui | 222 ++++++++++++++++++++++++++++++++++++++++++++-----
src/gtk-style.css | 7 ++
3 files changed, 248 insertions(+), 58 deletions(-)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index 8f6a6d4ee..656b00f44 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -91,7 +91,6 @@ struct _GsDetailsPage
GtkWidget *box_details;
GtkWidget *box_details_description;
GtkWidget *label_webapp_warning;
- GtkWidget *box_details_support;
GtkWidget *box_progress;
GtkWidget *box_progress2;
GtkWidget *star;
@@ -100,8 +99,12 @@ struct _GsDetailsPage
GtkWidget *button_details_launch;
GtkWidget *button_details_add_shortcut;
GtkWidget *button_details_remove_shortcut;
- GtkWidget *button_details_website;
- GtkWidget *button_donate;
+ GtkStack *links_stack;
+ HdyActionRow *project_website_row;
+ HdyActionRow *donate_row;
+ HdyActionRow *translate_row;
+ HdyActionRow *report_an_issue_row;
+ HdyActionRow *help_row;
GtkWidget *button_install;
GtkWidget *button_update;
GtkWidget *button_remove;
@@ -558,16 +561,9 @@ gs_details_page_notify_state_changed_cb (GsApp *app,
}
static void
-gs_details_page_website_cb (GtkWidget *widget, GsDetailsPage *self)
+gs_details_page_link_row_activated_cb (HdyActionRow *row, GsDetailsPage *self)
{
- gs_shell_show_uri (self->shell,
- gs_app_get_url (self->app, AS_URL_KIND_HOMEPAGE));
-}
-
-static void
-gs_details_page_donate_cb (GtkWidget *widget, GsDetailsPage *self)
-{
- gs_shell_show_uri (self->shell, gs_app_get_url (self->app, AS_URL_KIND_DONATION));
+ gs_shell_show_uri (self->shell, hdy_action_row_get_subtitle (row));
}
static void
@@ -1014,6 +1010,19 @@ gs_details_page_refresh_buttons (GsDetailsPage *self)
}
}
+static gboolean
+update_action_row_from_link (HdyActionRow *row,
+ GsApp *app,
+ AsUrlKind url_kind)
+{
+ const gchar *url = gs_app_get_url (app, url_kind);
+ if (url != NULL)
+ hdy_action_row_set_subtitle (row, url);
+ gtk_widget_set_visible (GTK_WIDGET (row), url != NULL);
+
+ return (url != NULL);
+}
+
static void
gs_details_page_refresh_all (GsDetailsPage *self)
{
@@ -1025,10 +1034,10 @@ gs_details_page_refresh_all (GsDetailsPage *self)
guint64 kudos;
guint64 updated;
guint64 user_integration_bf;
- gboolean show_support_box = FALSE;
g_autofree gchar *origin = NULL;
g_autoptr(GPtrArray) version_history = NULL;
guint icon_size;
+ gboolean link_rows_visible;
/* change widgets */
tmp = gs_app_get_name (self->app);
@@ -1079,21 +1088,16 @@ gs_details_page_refresh_all (GsDetailsPage *self)
gtk_image_set_from_gicon (GTK_IMAGE (self->application_details_icon), icon,
GTK_ICON_SIZE_INVALID);
- tmp = gs_app_get_url (self->app, AS_URL_KIND_HOMEPAGE);
- if (tmp != NULL && tmp[0] != '\0') {
- gtk_widget_set_visible (self->button_details_website, TRUE);
- show_support_box = TRUE;
- } else {
- gtk_widget_set_visible (self->button_details_website, FALSE);
- }
- tmp = gs_app_get_url (self->app, AS_URL_KIND_DONATION);
- if (tmp != NULL && tmp[0] != '\0') {
- gtk_widget_set_visible (self->button_donate, TRUE);
- show_support_box = TRUE;
- } else {
- gtk_widget_set_visible (self->button_donate, FALSE);
- }
- gtk_widget_set_visible (self->box_details_support, show_support_box);
+ /* Set various external links. If none are visible, show a fallback
+ * message instead. */
+ link_rows_visible = FALSE;
+ link_rows_visible = link_rows_visible || update_action_row_from_link (self->project_website_row,
self->app, AS_URL_KIND_HOMEPAGE);
+ link_rows_visible = link_rows_visible || update_action_row_from_link (self->donate_row, self->app,
AS_URL_KIND_DONATION);
+ link_rows_visible = link_rows_visible || update_action_row_from_link (self->translate_row, self->app,
AS_URL_KIND_TRANSLATE);
+ link_rows_visible = link_rows_visible || update_action_row_from_link (self->report_an_issue_row,
self->app, AS_URL_KIND_BUGTRACKER);
+ link_rows_visible = link_rows_visible || update_action_row_from_link (self->help_row, self->app,
AS_URL_KIND_HELP);
+
+ gtk_stack_set_visible_child_name (self->links_stack, link_rows_visible ? "links" : "empty");
/* set the developer name, falling back to the project group */
tmp = gs_app_get_developer_name (self->app);
@@ -2246,12 +2250,6 @@ gs_details_page_setup (GsPage *page,
g_signal_connect (self->button_details_remove_shortcut, "clicked",
G_CALLBACK (gs_details_page_app_remove_shortcut_button_cb),
self);
- g_signal_connect (self->button_details_website, "clicked",
- G_CALLBACK (gs_details_page_website_cb),
- self);
- g_signal_connect (self->button_donate, "clicked",
- G_CALLBACK (gs_details_page_donate_cb),
- self);
gtk_list_box_set_sort_func (GTK_LIST_BOX (self->origin_popover_list_box),
origin_popover_list_sort_func,
@@ -2419,7 +2417,6 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_details);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_details_description);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, label_webapp_warning);
- gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_details_support);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_progress);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_progress2);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, star);
@@ -2428,8 +2425,12 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_details_launch);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_details_add_shortcut);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_details_remove_shortcut);
- gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_details_website);
- gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_donate);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, links_stack);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, project_website_row);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, donate_row);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, translate_row);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, report_an_issue_row);
+ gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, help_row);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_install);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_update);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, button_remove);
@@ -2481,6 +2482,8 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_popover_list_box);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_box);
gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_button_label);
+
+ gtk_widget_class_bind_template_callback (widget_class, gs_details_page_link_row_activated_cb);
}
static void
diff --git a/src/gs-details-page.ui b/src/gs-details-page.ui
index c7ec0a4df..e9873c754 100644
--- a/src/gs-details-page.ui
+++ b/src/gs-details-page.ui
@@ -545,26 +545,211 @@
<property name="visible">True</property>
<property name="preferred-width">860</property>
<child>
- <object class="GtkBox" id="box_details_support">
+ <object class="GtkBox">
<property name="visible">True</property>
- <property name="margin_bottom">26</property>
+ <property name="orientation">horizontal</property>
<property name="spacing">12</property>
+
<child>
- <object class="GtkButton" id="button_details_website">
- <property name="label" translatable="yes">_Website</property>
- <property name="width_request">150</property>
+ <object class="GtkStack" id="links_stack">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="use_underline">True</property>
- </object>
- </child>
- <child>
- <object class="GtkButton" id="button_donate">
- <property name="label" translatable="yes">_Donate</property>
- <property name="width_request">150</property>
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="use_underline">True</property>
+
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <style>
+ <class name="content-box"/>
+ </style>
+
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="spacing">8</property>
+ <property name="margin">14</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+
+ <child>
+ <object class="GtkImage">
+ <property name="icon-name">dialog-question-symbolic</property>
+ <property name="pixel-size">96</property>
+ <property name="visible">True</property>
+ <property name="margin-bottom">8</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">No Metadata</property>
+ <property name="visible">True</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ </attributes>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="justify">center</property>
+ <property name="label" translatable="yes">This app doesn’t
provide any links to a website, code repository or issue tracker.</property>
+ <property name="visible">True</property>
+ <property name="wrap">True</property>
+ <property name="xalign">0.5</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">empty</property>
+ </packing>
+ </child>
+
+ <child>
+ <object class="GtkListBox">
+ <property name="visible">True</property>
+ <property name="selection_mode">none</property>
+ <property name="halign">fill</property>
+ <property name="valign">start</property>
+ <style>
+ <class name="content"/>
+ </style>
+
+ <child>
+ <object class="HdyActionRow" id="project_website_row">
+ <property name="activatable">True</property>
+ <property name="visible">True</property>
+ <property name="title" translatable="yes">Project _Website</property>
+ <!-- This is a placeholder; the actual URI is set in code -->
+ <property name="subtitle">gnome.org</property>
+ <property name="use-underline">True</property>
+ <signal name="activated"
handler="gs_details_page_link_row_activated_cb"/>
+ <child type="prefix">
+ <!-- Provide the prefix icon as a widget rather than using the
icon-name property so we can set the size -->
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">web-browser-symbolic</property>
+ <property name="icon-size">4</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">external-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+
+ <child>
+ <object class="HdyActionRow" id="donate_row">
+ <property name="activatable">True</property>
+ <property name="visible">True</property>
+ <property name="title" translatable="yes">_Donate</property>
+ <!-- This is a placeholder; the actual URI is set in code -->
+ <property name="subtitle">gnome.org</property>
+ <property name="use-underline">True</property>
+ <signal name="activated"
handler="gs_details_page_link_row_activated_cb"/>
+ <child type="prefix">
+ <!-- Provide the prefix icon as a widget rather than using the
icon-name property so we can set the size -->
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">money-symbolic</property>
+ <property name="icon-size">4</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">external-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+
+ <child>
+ <object class="HdyActionRow" id="translate_row">
+ <property name="activatable">True</property>
+ <property name="visible">True</property>
+ <property name="title" translatable="yes">_Contribute
Translations</property>
+ <!-- This is a placeholder; the actual URI is set in code -->
+ <property name="subtitle">gnome.org</property>
+ <property name="use-underline">True</property>
+ <signal name="activated"
handler="gs_details_page_link_row_activated_cb"/>
+ <child type="prefix">
+ <!-- Provide the prefix icon as a widget rather than using the
icon-name property so we can set the size -->
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">flag-outline-thin-symbolic</property>
+ <property name="icon-size">4</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">external-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+
+ <child>
+ <object class="HdyActionRow" id="report_an_issue_row">
+ <property name="activatable">True</property>
+ <property name="visible">True</property>
+ <property name="title" translatable="yes">_Report an Issue</property>
+ <!-- This is a placeholder; the actual URI is set in code -->
+ <property name="subtitle">gnome.org</property>
+ <property name="use-underline">True</property>
+ <signal name="activated"
handler="gs_details_page_link_row_activated_cb"/>
+ <child type="prefix">
+ <!-- Provide the prefix icon as a widget rather than using the
icon-name property so we can set the size -->
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">computer-fail-symbolic</property>
+ <property name="icon-size">4</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">external-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+
+ <child>
+ <object class="HdyActionRow" id="help_row">
+ <property name="activatable">True</property>
+ <property name="visible">True</property>
+ <property name="title" translatable="yes">_Help</property>
+ <!-- This is a placeholder; the actual URI is set in code -->
+ <property name="subtitle">gnome.org</property>
+ <property name="use-underline">True</property>
+ <signal name="activated"
handler="gs_details_page_link_row_activated_cb"/>
+ <child type="prefix">
+ <!-- Provide the prefix icon as a widget rather than using the
icon-name property so we can set the size -->
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">help-browser-symbolic</property>
+ <property name="icon-size">4</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">external-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">links</property>
+ </packing>
+ </child>
</object>
</child>
</object>
@@ -996,11 +1181,6 @@
<widget name="button_details_launch"/>
</widgets>
</object>
- <object class="GtkSizeGroup" id="sizegroup_details_buttons">
- <widgets>
- <widget name="button_details_website"/>
- </widgets>
- </object>
<object class="GtkBox" id="origin_box">
<property name="visible">True</property>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index bfadc3f8a..4ccb27486 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -2,6 +2,13 @@
margin: 24px 0px;
}
+/* The equivalent of libhandy’s .content class, but applicable to a plain GtkBox */
+.content-box {
+ border-radius: 8px;
+ border: 1px solid shade(@theme_bg_color, 0.9);
+ background-color: @theme_base_color;
+}
+
.installed-overlay-box {
font-size: smaller;
background-color: @theme_selected_bg_color;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
