[gnome-software/1754-improve-the-sources-dropdown: 1/6] gs-origin-popover-row: Change the way the information is shown
- From: Milan Crha <mcrha src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software/1754-improve-the-sources-dropdown: 1/6] gs-origin-popover-row: Change the way the information is shown
- Date: Thu, 4 Aug 2022 13:36:50 +0000 (UTC)
commit 3de58efe65a243c1a70ed8a47255bc979d05420b
Author: Milan Crha <mcrha redhat com>
Date: Wed Aug 3 16:01:16 2022 +0200
gs-origin-popover-row: Change the way the information is shown
This uses the design suggested in https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1754 ,
following commits will add some more data, to match the design better.
src/gs-details-page.c | 5 --
src/gs-origin-popover-row.c | 162 +++++++++++++++++++---------------
src/gs-origin-popover-row.h | 2 -
src/gs-origin-popover-row.ui | 205 +++++++++++++++++++++++--------------------
src/style.css | 15 ++++
5 files changed, 217 insertions(+), 172 deletions(-)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index e4308f606..160fa7fce 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -88,7 +88,6 @@ struct _GsDetailsPage
GsShell *shell;
gboolean show_all_reviews;
GSettings *settings;
- GtkSizeGroup *size_group_origin_popover;
GsOdrsProvider *odrs_provider; /* (nullable) (owned), NULL if reviews are disabled */
GAppInfoMonitor *app_info_monitor; /* (owned) */
GHashTable *packaging_format_preference; /* gchar * ~> gint */
@@ -717,8 +716,6 @@ gs_details_page_get_alternates_cb (GObject *source_object,
}
select_row = row;
}
- gs_origin_popover_row_set_size_group (GS_ORIGIN_POPOVER_ROW (row),
- self->size_group_origin_popover);
gtk_list_box_append (GTK_LIST_BOX (self->origin_popover_list_box), row);
if (origin_by_packaging_format) {
@@ -2307,7 +2304,6 @@ gs_details_page_dispose (GObject *object)
g_clear_object (&self->plugin_loader);
g_clear_object (&self->cancellable);
g_clear_object (&self->app_cancellable);
- g_clear_object (&self->size_group_origin_popover);
g_clear_object (&self->odrs_provider);
g_clear_object (&self->app_info_monitor);
g_clear_pointer (&self->last_developer_name, g_free);
@@ -2503,7 +2499,6 @@ gs_details_page_init (GsDetailsPage *self)
g_signal_connect_swapped (self->settings, "changed",
G_CALLBACK (settings_changed_cb),
self);
- self->size_group_origin_popover = gtk_size_group_new (GTK_SIZE_GROUP_HORIZONTAL);
self->app_info_monitor = g_app_info_monitor_get ();
g_signal_connect_object (self->app_info_monitor, "changed",
G_CALLBACK (gs_details_page_app_info_changed_cb), self, 0);
diff --git a/src/gs-origin-popover-row.c b/src/gs-origin-popover-row.c
index b23f7fb7e..23e919815 100644
--- a/src/gs-origin-popover-row.c
+++ b/src/gs-origin-popover-row.c
@@ -8,6 +8,8 @@
#include "config.h"
+#include "gs-common.h"
+
#include "gs-origin-popover-row.h"
#include <glib/gi18n.h>
@@ -15,19 +17,15 @@
typedef struct
{
GsApp *app;
+ GtkCssProvider *css_provider;
GtkWidget *name_label;
- GtkWidget *url_box;
- GtkWidget *url_title;
- GtkWidget *url_label;
- GtkWidget *installation_box;
- GtkWidget *installation_title;
- GtkWidget *installation_label;
- GtkWidget *branch_box;
- GtkWidget *branch_title;
- GtkWidget *branch_label;
- GtkWidget *version_box;
- GtkWidget *version_title;
- GtkWidget *version_label;
+ GtkWidget *info_label;
+ GtkWidget *installed_image;
+ GtkWidget *packaging_box;
+ GtkWidget *packaging_image;
+ GtkWidget *packaging_label;
+ GtkWidget *beta_box;
+ GtkWidget *user_scope_box;
GtkWidget *selected_image;
} GsOriginPopoverRowPrivate;
@@ -37,65 +35,106 @@ static void
refresh_ui (GsOriginPopoverRow *row)
{
GsOriginPopoverRowPrivate *priv = gs_origin_popover_row_get_instance_private (row);
+ const gchar *packaging_base_css_color, *packaging_icon;
+ g_autofree gchar *packaging_format = NULL;
+ g_autofree gchar *info = NULL;
+ g_autofree gchar *css = NULL;
g_autofree gchar *origin_ui = NULL;
g_autofree gchar *url = NULL;
g_assert (GS_IS_ORIGIN_POPOVER_ROW (row));
g_assert (GS_IS_APP (priv->app));
- origin_ui = gs_app_dup_origin_ui (priv->app, TRUE);
- if (origin_ui != NULL) {
+ origin_ui = gs_app_dup_origin_ui (priv->app, FALSE);
+ if (origin_ui != NULL)
gtk_label_set_text (GTK_LABEL (priv->name_label), origin_ui);
- }
if (gs_app_get_state (priv->app) == GS_APP_STATE_AVAILABLE_LOCAL) {
GFile *local_file = gs_app_get_local_file (priv->app);
url = g_file_get_basename (local_file);
- /* TRANSLATORS: This is followed by a file name, e.g. "Name: gedit.rpm" */
- gtk_label_set_text (GTK_LABEL (priv->url_title), _("Name"));
} else {
url = g_strdup (gs_app_get_origin_hostname (priv->app));
}
- if (url != NULL) {
- gtk_label_set_text (GTK_LABEL (priv->url_label), url);
- gtk_widget_show (priv->url_box);
+ if (gs_app_get_bundle_kind (priv->app) == AS_BUNDLE_KIND_SNAP) {
+ const gchar *branch = NULL, *version = NULL;
+ const gchar *order[3];
+ const gchar *items[7] = { NULL, };
+ guint index = 0;
+
+ branch = gs_app_get_branch (priv->app);
+ version = gs_app_get_version (priv->app);
+
+ if (gtk_widget_get_direction (GTK_WIDGET (row)) == GTK_TEXT_DIR_RTL) {
+ order[0] = version;
+ order[1] = branch;
+ order[2] = url;
+ } else {
+ order[0] = url;
+ order[1] = branch;
+ order[2] = version;
+ }
+
+ for (guint ii = 0; ii < G_N_ELEMENTS (order); ii++) {
+ const gchar *value = order[ii];
+
+ if (value != NULL) {
+ if (index > 0) {
+ items[index] = "•";
+ index++;
+ }
+ items[index] = value;
+ index++;
+ }
+ }
+
+ if (index > 0) {
+ g_assert (index + 1 < G_N_ELEMENTS (items));
+ items[index] = NULL;
+
+ info = g_strjoinv (" ", (gchar **) items);
+ }
} else {
- gtk_widget_hide (priv->url_box);
+ info = g_steal_pointer (&url);
}
+ if (info != NULL)
+ gtk_label_set_text (GTK_LABEL (priv->info_label), info);
+ else
+ gtk_label_set_text (GTK_LABEL (priv->info_label), _("Unknown source"));
+
+ gtk_widget_set_visible (priv->installed_image, gs_app_is_installed (priv->app));
+ gtk_widget_set_visible (priv->beta_box, gs_app_has_quirk (priv->app, GS_APP_QUIRK_BETA_SOURCE));
+
if (gs_app_get_bundle_kind (priv->app) == AS_BUNDLE_KIND_FLATPAK &&
gs_app_get_scope (priv->app) != AS_COMPONENT_SCOPE_UNKNOWN) {
AsComponentScope scope = gs_app_get_scope (priv->app);
- if (scope == AS_COMPONENT_SCOPE_SYSTEM) {
- /* TRANSLATORS: the installation location for flatpaks */
- gtk_label_set_text (GTK_LABEL (priv->installation_label), _("system"));
- } else if (scope == AS_COMPONENT_SCOPE_USER) {
- /* TRANSLATORS: the installation location for flatpaks */
- gtk_label_set_text (GTK_LABEL (priv->installation_label), _("user"));
- }
- gtk_widget_show (priv->installation_box);
+ gtk_widget_set_visible (priv->user_scope_box, scope == AS_COMPONENT_SCOPE_USER);
} else {
- gtk_widget_hide (priv->installation_box);
+ gtk_widget_hide (priv->user_scope_box);
}
- if (gs_app_get_branch (priv->app) != NULL) {
- gtk_label_set_text (GTK_LABEL (priv->branch_label), gs_app_get_branch (priv->app));
- gtk_widget_show (priv->branch_box);
- } else {
- gtk_widget_hide (priv->branch_box);
- }
+ packaging_base_css_color = gs_app_get_metadata_item (priv->app,
"GnomeSoftware::PackagingBaseCssColor");
+ packaging_icon = gs_app_get_metadata_item (priv->app, "GnomeSoftware::PackagingIcon");
+ packaging_format = gs_app_get_packaging_format (priv->app);
- if (gs_app_get_bundle_kind (priv->app) == AS_BUNDLE_KIND_SNAP) {
- /* TRANSLATORS: the title for Snap channels */
- gtk_label_set_text (GTK_LABEL (priv->branch_title), _("Channel"));
- gtk_label_set_text (GTK_LABEL (priv->version_label), gs_app_get_version (priv->app));
- gtk_widget_show (priv->version_box);
- } else {
- /* TRANSLATORS: the title for Flatpak branches */
- gtk_label_set_text (GTK_LABEL (priv->branch_title), _("Branch"));
- gtk_widget_hide (priv->version_box);
- }
+ gtk_label_set_text (GTK_LABEL (priv->packaging_label), packaging_format);
+
+ if (packaging_icon != NULL)
+ gtk_image_set_from_icon_name (GTK_IMAGE (priv->packaging_image), packaging_icon);
+ else
+ gtk_widget_hide (priv->packaging_image);
+
+ if (packaging_base_css_color == NULL)
+ packaging_base_css_color = "window_fg_color";
+
+ css = g_strdup_printf (
+ " color: @%s;\n"
+ " background-color: alpha(@%s, .15);\n",
+ packaging_base_css_color,
+ packaging_base_css_color);
+
+ gs_utils_widget_set_css (priv->packaging_box, &priv->css_provider, "packaging-color", css);
}
static void
@@ -124,17 +163,6 @@ gs_origin_popover_row_set_selected (GsOriginPopoverRow *row, gboolean selected)
gtk_widget_set_visible (priv->selected_image, selected);
}
-void
-gs_origin_popover_row_set_size_group (GsOriginPopoverRow *row, GtkSizeGroup *size_group)
-{
- GsOriginPopoverRowPrivate *priv = gs_origin_popover_row_get_instance_private (row);
-
- gtk_size_group_add_widget (size_group, priv->url_title);
- gtk_size_group_add_widget (size_group, priv->installation_title);
- gtk_size_group_add_widget (size_group, priv->branch_title);
- gtk_size_group_add_widget (size_group, priv->version_title);
-}
-
static void
gs_origin_popover_row_dispose (GObject *object)
{
@@ -142,6 +170,7 @@ gs_origin_popover_row_dispose (GObject *object)
GsOriginPopoverRowPrivate *priv = gs_origin_popover_row_get_instance_private (row);
g_clear_object (&priv->app);
+ g_clear_object (&priv->css_provider);
G_OBJECT_CLASS (gs_origin_popover_row_parent_class)->dispose (object);
}
@@ -163,18 +192,13 @@ gs_origin_popover_row_class_init (GsOriginPopoverRowClass *klass)
gtk_widget_class_set_template_from_resource (widget_class,
"/org/gnome/Software/gs-origin-popover-row.ui");
gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, name_label);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, url_box);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, url_title);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, url_label);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, installation_box);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, installation_title);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, installation_label);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, branch_box);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, branch_title);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, branch_label);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, version_box);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, version_title);
- gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, version_label);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, info_label);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, installed_image);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, packaging_box);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, packaging_image);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, packaging_label);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, beta_box);
+ gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, user_scope_box);
gtk_widget_class_bind_template_child_private (widget_class, GsOriginPopoverRow, selected_image);
}
diff --git a/src/gs-origin-popover-row.h b/src/gs-origin-popover-row.h
index 2368b04ee..be928ee7d 100644
--- a/src/gs-origin-popover-row.h
+++ b/src/gs-origin-popover-row.h
@@ -26,7 +26,5 @@ GtkWidget *gs_origin_popover_row_new (GsApp *app);
GsApp *gs_origin_popover_row_get_app (GsOriginPopoverRow *row);
void gs_origin_popover_row_set_selected (GsOriginPopoverRow *row,
gboolean selected);
-void gs_origin_popover_row_set_size_group (GsOriginPopoverRow *row,
- GtkSizeGroup *size_group);
G_END_DECLS
diff --git a/src/gs-origin-popover-row.ui b/src/gs-origin-popover-row.ui
index ddd720a78..787792a61 100644
--- a/src/gs-origin-popover-row.ui
+++ b/src/gs-origin-popover-row.ui
@@ -5,122 +5,135 @@
<object class="GtkBox">
<property name="margin-top">6</property>
<property name="margin-bottom">6</property>
- <property name="margin-start">6</property>
- <property name="margin-end">6</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
<property name="orientation">horizontal</property>
- <property name="spacing">16</property>
+ <property name="spacing">6</property>
<child>
<object class="GtkBox" id="vbox">
<property name="orientation">vertical</property>
- <property name="spacing">6</property>
+ <property name="spacing">3</property>
<child>
<object class="GtkLabel" id="name_label">
<property name="halign">start</property>
<property name="ellipsize">end</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ </attributes>
</object>
</child>
<child>
- <object class="GtkBox" id="url_box">
- <property name="orientation">horizontal</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel" id="url_title">
- <property name="halign">start</property>
- <property name="xalign">0</property>
- <property name="label" translatable="yes">URL</property>
- <style>
- <class name="app-row-origin-text"/>
- <class name="dim-label"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="url_label">
- <property name="halign">start</property>
- <property name="ellipsize">end</property>
- <style>
- <class name="app-row-origin-text"/>
- </style>
- </object>
- </child>
+ <object class="GtkLabel" id="info_label">
+ <property name="halign">start</property>
+ <property name="ellipsize">end</property>
+ <style>
+ <class name="app-row-origin-text"/>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkImage" id="installed_image">
+ <property name="visible">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">app-installed-symbolic</property>
+ <property name="margin-start">6</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="success"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="packaging_box">
+ <property name="orientation">horizontal</property>
+ <property name="spacing">4</property>
+ <property name="margin-start">6</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="origin-rounded-box"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="packaging_image">
+ <property name="pixel_size">16</property>
+ <property name="icon_name">flatpak-symbolic</property>
+ <property name="valign">center</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="packaging_label">
+ <property name="halign">start</property>
+ <property name="ellipsize">none</property>
+ <property name="margin-top">1</property>
+ <property name="margin-end">2</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ <attribute name="variant" value="all-small-caps"/>
+ </attributes>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="beta_box">
+ <property name="orientation">horizontal</property>
+ <property name="spacing">4</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="origin-rounded-box"/>
+ <class name="origin-beta"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="beta_image">
+ <property name="pixel_size">16</property>
+ <property name="icon_name">test-symbolic</property>
+ <property name="valign">center</property>
</object>
</child>
<child>
- <object class="GtkBox" id="installation_box">
- <property name="orientation">horizontal</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel" id="installation_title">
- <property name="halign">start</property>
- <property name="xalign">0</property>
- <property name="label" translatable="yes" comments="Translators: The installation
location for flatpaks, e.g. 'user' or 'system'">Installation</property>
- <style>
- <class name="app-row-origin-text"/>
- <class name="dim-label"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="installation_label">
- <property name="halign">start</property>
- <property name="ellipsize">end</property>
- <style>
- <class name="app-row-origin-text"/>
- </style>
- </object>
- </child>
+ <object class="GtkLabel" id="beta_label">
+ <property name="halign">start</property>
+ <property name="ellipsize">none</property>
+ <property name="label" translatable="yes" comments="Translators: It's like a beta version of
the software, a test version">Beta</property>
+ <property name="margin-top">1</property>
+ <property name="margin-end">2</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ <attribute name="variant" value="all-small-caps"/>
+ </attributes>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="user_scope_box">
+ <property name="orientation">horizontal</property>
+ <property name="spacing">4</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="origin-rounded-box"/>
+ <class name="origin-scope-user"/>
+ </style>
<child>
- <object class="GtkBox" id="branch_box">
- <property name="orientation">horizontal</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel" id="branch_title">
- <property name="halign">start</property>
- <property name="xalign">0</property>
- <property name="label" translatable="yes" comments="Translators: The branch, e.g.
'stable' or '3.32'">Branch</property>
- <style>
- <class name="app-row-origin-text"/>
- <class name="dim-label"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="branch_label">
- <property name="halign">start</property>
- <property name="ellipsize">end</property>
- <style>
- <class name="app-row-origin-text"/>
- </style>
- </object>
- </child>
+ <object class="GtkImage" id="user_scope_image">
+ <property name="pixel_size">16</property>
+ <property name="icon_name">avatar-default-symbolic</property>
+ <property name="valign">center</property>
</object>
</child>
<child>
- <object class="GtkBox" id="version_box">
- <property name="orientation">horizontal</property>
- <property name="spacing">12</property>
- <child>
- <object class="GtkLabel" id="version_title">
- <property name="halign">start</property>
- <property name="xalign">0</property>
- <property name="label" translatable="yes" comments="Translators: The available version
of an app">Version</property>
- <style>
- <class name="app-row-origin-text"/>
- <class name="dim-label"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="version_label">
- <property name="halign">start</property>
- <property name="ellipsize">end</property>
- <style>
- <class name="app-row-origin-text"/>
- </style>
- </object>
- </child>
+ <object class="GtkLabel" id="user_scope_label">
+ <property name="halign">start</property>
+ <property name="ellipsize">none</property>
+ <property name="label" translatable="yes" comments="Translators: It's an origin scope,
'User' or 'System' installation">User</property>
+ <property name="margin-top">1</property>
+ <property name="margin-end">2</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ <attribute name="variant" value="all-small-caps"/>
+ </attributes>
</object>
</child>
</object>
diff --git a/src/style.css b/src/style.css
index 6521aee6e..2b7ddf6a5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -34,6 +34,21 @@ screenshot-carousel button,
padding: 6px;
}
+.origin-rounded-box {
+ border-radius: 14px;
+ padding: 6px 8px;
+}
+
+.origin-beta {
+ color: @warning_bg_color;
+ background-color: alpha(@warning_bg_color, .15);
+}
+
+.origin-scope-user {
+ color: @window_fg_color;
+ background-color: alpha(@window_fg_color, .15);
+}
+
/* This mimicks the style of list and row from Adwaita, and of list.content from
* Libhandy. */
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
