[gnome-software/1357-improve-presentation-of-os-upgrade-banners] gs-upgrade-banner: Improve presentation of OS upgrade banners
- From: Milan Crha <mcrha src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software/1357-improve-presentation-of-os-upgrade-banners] gs-upgrade-banner: Improve presentation of OS upgrade banners
- Date: Mon, 9 Aug 2021 13:44:38 +0000 (UTC)
commit 4a6b8c45fff93fac06c06bdc46e8aeb16d1656fd
Author: Milan Crha <mcrha redhat com>
Date: Mon Aug 9 15:41:22 2021 +0200
gs-upgrade-banner: Improve presentation of OS upgrade banners
Follow the new design:
https://gitlab.gnome.org/Teams/Design/software-mockups/-/blob/master/upgrade-banners.png
Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1357
plugins/eos-updater/gs-plugin-eos-updater.c | 5 +-
.../gs-plugin-fedora-pkgdb-collections.c | 6 +-
src/gs-updates-page.c | 20 ---
src/gs-upgrade-banner.c | 197 ++++++++++----------
src/gs-upgrade-banner.h | 1 -
src/gs-upgrade-banner.ui | 200 ++++++++++++++-------
src/gtk-style.css | 21 ++-
7 files changed, 257 insertions(+), 193 deletions(-)
---
diff --git a/plugins/eos-updater/gs-plugin-eos-updater.c b/plugins/eos-updater/gs-plugin-eos-updater.c
index 17d91a373..84c3c72fc 100644
--- a/plugins/eos-updater/gs-plugin-eos-updater.c
+++ b/plugins/eos-updater/gs-plugin-eos-updater.c
@@ -559,8 +559,9 @@ gs_plugin_setup (GsPlugin *plugin,
/* TRANSLATORS: ‘Endless OS’ is a brand name; https://endlessos.com/ */
gs_app_set_name (app, GS_APP_QUALITY_LOWEST, _("Endless OS"));
gs_app_set_summary (app, GS_APP_QUALITY_NORMAL,
- /* TRANSLATORS: ‘Endless OS’ is a brand name; https://endlessos.com/ */
- _("An Endless OS update with new features and fixes."));
+ /* TRANSLATORS: ‘Endless OS’ is a brand name; https://endlessos.com/ ; do not
include a dot
+ at the end, it'll cosntruct a sentence: "An Endless OS update with new
features and fixes - learn more." */
+ _("An Endless OS update with new features and fixes"));
/* ensure that the version doesn't appear as (NULL) in the banner, it
* should be changed to the right value when it changes in the eos-updater */
gs_app_set_version (app, "");
diff --git a/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
b/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
index 68ee7b9fe..911f7c3b1 100644
--- a/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
+++ b/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
@@ -280,8 +280,10 @@ _create_upgrade_from_info (GsPlugin *plugin, PkgdbItem *item)
gs_app_set_bundle_kind (app, AS_BUNDLE_KIND_PACKAGE);
gs_app_set_name (app, GS_APP_QUALITY_LOWEST, item->name);
gs_app_set_summary (app, GS_APP_QUALITY_LOWEST,
- /* TRANSLATORS: this is a title for Fedora distro upgrades */
- _("Upgrade for the latest features, performance and stability improvements."));
+ /* TRANSLATORS: this is a title for Fedora distro upgrades; do not include a dot
at the end,
+ it'll construct a sentence: "Upgrade for the latest features, performance and
stability
+ improvements - learn more." */
+ _("Upgrade for the latest features, performance and stability improvements"));
gs_app_set_version (app, app_version);
gs_app_set_size_installed (app, 1024 * 1024 * 1024); /* estimate */
gs_app_set_size_download (app, 2L * 1024L * 1024L * 1024L); /* estimate */
diff --git a/src/gs-updates-page.c b/src/gs-updates-page.c
index 4e42ec8ef..9c03196ea 100644
--- a/src/gs-updates-page.c
+++ b/src/gs-updates-page.c
@@ -1095,24 +1095,6 @@ gs_updates_page_upgrade_install_cb (GsUpgradeBanner *upgrade_banner,
gs_shell_modal_dialog_present (self->shell, GTK_WINDOW (dialog));
}
-static void
-gs_updates_page_upgrade_help_cb (GsUpgradeBanner *upgrade_banner,
- GsUpdatesPage *self)
-{
- GsApp *app;
- const gchar *uri;
-
- app = gs_upgrade_banner_get_app (upgrade_banner);
- if (app == NULL) {
- g_warning ("no upgrade available to launch");
- return;
- }
-
- /* open the link */
- uri = gs_app_get_url (app, AS_URL_KIND_HOMEPAGE);
- gs_shell_show_uri (self->shell, uri);
-}
-
static void
gs_updates_page_invalidate_downloaded_upgrade (GsUpdatesPage *self)
{
@@ -1264,8 +1246,6 @@ gs_updates_page_setup (GsPage *page,
G_CALLBACK (gs_updates_page_upgrade_install_cb), self);
g_signal_connect (self->upgrade_banner, "cancel-clicked",
G_CALLBACK (gs_updates_page_upgrade_cancel_cb), self);
- g_signal_connect (self->upgrade_banner, "help-clicked",
- G_CALLBACK (gs_updates_page_upgrade_help_cb), self);
self->header_end_box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_widget_set_visible (self->header_end_box, TRUE);
diff --git a/src/gs-upgrade-banner.c b/src/gs-upgrade-banner.c
index 70a19d029..aeca1fb0c 100644
--- a/src/gs-upgrade-banner.c
+++ b/src/gs-upgrade-banner.c
@@ -19,14 +19,17 @@ typedef struct
{
GsApp *app;
- GtkWidget *box_upgrades;
+ GtkWidget *box_upgrades_info;
+ GtkWidget *box_upgrades_download;
+ GtkWidget *box_upgrades_downloading;
+ GtkWidget *box_upgrades_install;
GtkWidget *button_upgrades_download;
GtkWidget *button_upgrades_install;
- GtkWidget *button_upgrades_help;
GtkWidget *button_upgrades_cancel;
GtkWidget *label_upgrades_summary;
GtkWidget *label_upgrades_title;
- GtkWidget *label_upgrades_warning;
+ GtkWidget *label_download_size;
+ GtkWidget *label_upgrades_downloading;
GtkWidget *progressbar;
guint progress_pulse_id;
GtkCssProvider *banner_provider; /* (owned) (nullable) */
@@ -37,7 +40,6 @@ G_DEFINE_TYPE_WITH_PRIVATE (GsUpgradeBanner, gs_upgrade_banner, GTK_TYPE_BIN)
enum {
SIGNAL_DOWNLOAD_CLICKED,
SIGNAL_INSTALL_CLICKED,
- SIGNAL_HELP_CLICKED,
SIGNAL_CANCEL_CLICKED,
SIGNAL_LAST
};
@@ -70,7 +72,7 @@ static void
gs_upgrade_banner_refresh (GsUpgradeBanner *self)
{
GsUpgradeBannerPrivate *priv = gs_upgrade_banner_get_instance_private (self);
- const gchar *uri;
+ const gchar *uri, *summary;
g_autofree gchar *name_bold = NULL;
g_autofree gchar *version_bold = NULL;
g_autofree gchar *str = NULL;
@@ -83,22 +85,26 @@ gs_upgrade_banner_refresh (GsUpgradeBanner *self)
name_bold = g_strdup_printf ("<b>%s</b>", gs_app_get_name (priv->app));
version_bold = g_strdup_printf ("<b>%s</b>", gs_app_get_version (priv->app));
- /* Distributions that need to reboot to deploy the upgrade show the "Install" button */
- if (gs_app_has_quirk (priv->app, GS_APP_QUIRK_NEEDS_REBOOT)) {
- gtk_button_set_label (GTK_BUTTON (priv->button_upgrades_install),
- _("_Install"));
- gtk_label_set_text (GTK_LABEL (priv->label_upgrades_warning),
- _("It is recommended that you back up your "
- "data and files before upgrading."));
- } else {
- gtk_button_set_label (GTK_BUTTON (priv->button_upgrades_install),
- _("_Restart Now"));
- gtk_label_set_text (GTK_LABEL (priv->label_upgrades_warning),
- _("Updates will be applied when the "
- "computer is restarted."));
+ /* TRANSLATORS: This is the text displayed when a distro
+ * upgrade is available. The first %s is the distro name
+ * and the 2nd %s is the version, e.g. "Fedora 35 Available" */
+ str = g_strdup_printf (_("%s %s Available"), name_bold, version_bold);
+ gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
+
+ g_clear_pointer (&str, g_free);
+
+ if (gs_app_get_size_download (priv->app) != GS_APP_SIZE_UNKNOWABLE &&
+ gs_app_get_size_download (priv->app) != 0) {
+ g_autofree gchar *tmp = NULL;
+
+ tmp = g_format_size (gs_app_get_size_download (priv->app));
+ /* Translators: the '%s' is replaced with the download size, forming text like "2 GB
download" */
+ str = g_strdup_printf ("%s download", tmp);
}
- /* Refresh the title. Normally a distro upgrade state goes from
+ gtk_label_set_text (GTK_LABEL (priv->label_download_size), str);
+
+ /* Normally a distro upgrade state goes from
*
* AVAILABLE (available to download) to
* INSTALLING (downloading packages for later installation) to
@@ -106,45 +112,20 @@ gs_upgrade_banner_refresh (GsUpgradeBanner *self)
*/
switch (gs_app_get_state (priv->app)) {
case GS_APP_STATE_AVAILABLE:
- /* TRANSLATORS: This is the text displayed when a distro
- * upgrade is available. First %s is the distro name and the
- * 2nd %s is the version, e.g. "Fedora 23 Now Available" */
- str = g_strdup_printf (_("%s %s Now Available"),
- name_bold, version_bold);
- gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
- gtk_widget_set_visible (priv->label_upgrades_warning, FALSE);
- gtk_widget_set_visible (priv->button_upgrades_cancel, FALSE);
- break;
case GS_APP_STATE_QUEUED_FOR_INSTALL:
- /* TRANSLATORS: This is the text displayed while waiting to
- * download a distro upgrade. First %s is the distro name and
- * the 2nd %s is the version, e.g. "Waiting to Download Fedora 23" */
- str = g_strdup_printf (_("Waiting to Download %s %s"),
- name_bold, version_bold);
- gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
- gtk_widget_set_visible (priv->label_upgrades_warning, FALSE);
- gtk_widget_set_visible (priv->button_upgrades_cancel, TRUE);
+ gtk_widget_show (priv->box_upgrades_download);
+ gtk_widget_hide (priv->box_upgrades_downloading);
+ gtk_widget_hide (priv->box_upgrades_install);
break;
case GS_APP_STATE_INSTALLING:
- /* TRANSLATORS: This is the text displayed while downloading a
- * distro upgrade. First %s is the distro name and the 2nd %s
- * is the version, e.g. "Downloading Fedora 23" */
- str = g_strdup_printf (_("Downloading %s %s"),
- name_bold, version_bold);
- gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
- gtk_widget_set_visible (priv->label_upgrades_warning, FALSE);
- gtk_widget_set_visible (priv->button_upgrades_cancel, TRUE);
+ gtk_widget_hide (priv->box_upgrades_download);
+ gtk_widget_show (priv->box_upgrades_downloading);
+ gtk_widget_hide (priv->box_upgrades_install);
break;
case GS_APP_STATE_UPDATABLE:
- /* TRANSLATORS: This is the text displayed when a distro
- * upgrade has been downloaded and is ready to be installed.
- * First %s is the distro name and the 2nd %s is the version,
- * e.g. "Fedora 23 Ready to be Installed" */
- str = g_strdup_printf (_("%s %s Ready to be Installed"),
- name_bold, version_bold);
- gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
- gtk_widget_set_visible (priv->label_upgrades_warning, TRUE);
- gtk_widget_set_visible (priv->button_upgrades_cancel, FALSE);
+ gtk_widget_hide (priv->box_upgrades_download);
+ gtk_widget_hide (priv->box_upgrades_downloading);
+ gtk_widget_show (priv->box_upgrades_install);
break;
default:
g_critical ("Unexpected app state ‘%s’ of app ‘%s’",
@@ -154,39 +135,35 @@ gs_upgrade_banner_refresh (GsUpgradeBanner *self)
}
/* Hide the upgrade box until the app state is known. */
- gtk_widget_set_visible (priv->box_upgrades,
+ gtk_widget_set_visible (GTK_WIDGET (self),
(gs_app_get_state (priv->app) != GS_APP_STATE_UNKNOWN));
/* Refresh the summary if we got anything better than the default blurb */
- if (gs_app_get_summary (priv->app) != NULL)
- gtk_label_set_text (GTK_LABEL (priv->label_upgrades_summary),
- gs_app_get_summary (priv->app));
-
- /* Show the right buttons for the current state */
- switch (gs_app_get_state (priv->app)) {
- case GS_APP_STATE_AVAILABLE:
- gtk_widget_show (priv->button_upgrades_download);
- gtk_widget_hide (priv->button_upgrades_install);
- break;
- case GS_APP_STATE_QUEUED_FOR_INSTALL:
- case GS_APP_STATE_INSTALLING:
- gtk_widget_hide (priv->button_upgrades_download);
- gtk_widget_hide (priv->button_upgrades_install);
- break;
- case GS_APP_STATE_UPDATABLE:
- gtk_widget_hide (priv->button_upgrades_download);
- gtk_widget_show (priv->button_upgrades_install);
- break;
- default:
- g_critical ("Unexpected app state ‘%s’ of app ‘%s’",
- gs_app_state_to_string (gs_app_get_state (priv->app)),
- gs_app_get_unique_id (priv->app));
- break;
+ summary = gs_app_get_summary (priv->app);
+ if (summary == NULL) {
+ /* Translators: Do not add a dot at the end, it will construct a sentence:
+ "A major upgrade, with new features and added polish - learn more." */
+ summary = _("A major upgrade, with new features and added polish");
}
- /* only show help when we have a URL */
uri = gs_app_get_url (priv->app, AS_URL_KIND_HOMEPAGE);
- gtk_widget_set_visible (priv->button_upgrades_help, uri != NULL);
+ if (uri != NULL) {
+ g_autofree gchar *tmp = NULL;
+ g_autofree gchar *link = NULL;
+ /* Translators: This is part of a sentence: "A major upgrade, with new features
+ and added polish - learn more." */
+ link = g_markup_printf_escaped ("<a href=\"%s\">%s</a>", uri, _("learn more"));
+ /* Translators: This constructs a sentence like "A major upgrade, with new features
+ and added polish - learn more." */
+ tmp = g_strdup_printf (C_("UpgradeBanner", "%s – %s."), summary, link);
+ gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_summary), tmp);
+ } else {
+ g_autofree gchar *tmp = NULL;
+ /* Translators: This adds a dot at the end of a sentence, forming text like "A major upgrade,
+ with new features and added polish." */
+ tmp = g_strdup_printf (C_("UpgradeBanner", "%s."), summary);
+ gtk_label_set_text (GTK_LABEL (priv->label_upgrades_summary), tmp);
+ }
/* do a fill bar for the current progress */
switch (gs_app_get_state (priv->app)) {
@@ -203,6 +180,22 @@ gs_upgrade_banner_refresh (GsUpgradeBanner *self)
gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (priv->progressbar),
(gdouble) percentage / 100.f);
gtk_widget_set_visible (priv->progressbar, TRUE);
+ if (gs_app_get_size_download (priv->app) != GS_APP_SIZE_UNKNOWABLE &&
+ gs_app_get_size_download (priv->app) != 0) {
+ g_autofree gchar *tmp = NULL;
+ g_autofree gchar *downloaded_tmp = NULL;
+ guint64 downloaded;
+
+ downloaded = gs_app_get_size_download (priv->app) * percentage / 100.0;
+ downloaded_tmp = g_format_size (downloaded);
+ tmp = g_format_size (gs_app_get_size_download (priv->app));
+ /* Translators: the first '%s' is replaced with the downloaded size, the
second '%s'
+ with the total download size, forming text like "135 MB of 2 GB
downloaded" */
+ str = g_strdup_printf (_("%s of %s downloaded"), downloaded_tmp, tmp);
+ gtk_label_set_text (GTK_LABEL (priv->label_upgrades_downloading), str);
+ } else {
+ gtk_label_set_text (GTK_LABEL (priv->label_upgrades_downloading),
_("Downloading…"));
+ }
break;
}
break;
@@ -249,15 +242,23 @@ install_button_cb (GtkWidget *widget, GsUpgradeBanner *self)
}
static void
-learn_more_button_cb (GtkWidget *widget, GsUpgradeBanner *self)
+cancel_button_cb (GtkWidget *widget, GsUpgradeBanner *self)
{
- g_signal_emit (self, signals[SIGNAL_HELP_CLICKED], 0);
+ g_signal_emit (self, signals[SIGNAL_CANCEL_CLICKED], 0);
}
-static void
-cancel_button_cb (GtkWidget *widget, GsUpgradeBanner *self)
+static gboolean
+cancel_button_size_allocate_cb (GtkWidget *widget,
+ GdkRectangle *allocation,
+ gpointer user_data)
{
- g_signal_emit (self, signals[SIGNAL_CANCEL_CLICKED], 0);
+ /* Make sure it's a square button, thus looks like a circle */
+ if (allocation->width != allocation->height) {
+ gint size = MAX (allocation->width, allocation->height);
+ gtk_widget_set_size_request (widget, size, size);
+ }
+
+ return FALSE;
}
void
@@ -287,7 +288,7 @@ gs_upgrade_banner_set_app (GsUpgradeBanner *self, GsApp *app)
/* perhaps set custom css */
css = gs_app_get_metadata_item (app, "GnomeSoftware::UpgradeBanner-css");
modified_css = gs_utils_set_key_colors_in_css (css, app);
- gs_utils_widget_set_css (priv->box_upgrades, &priv->banner_provider, "upgrade-banner-custom",
modified_css);
+ gs_utils_widget_set_css (priv->box_upgrades_info, &priv->banner_provider, "upgrade-banner-custom",
modified_css);
gs_upgrade_banner_refresh (self);
}
@@ -344,12 +345,14 @@ gs_upgrade_banner_init (GsUpgradeBanner *self)
g_signal_connect (priv->button_upgrades_install, "clicked",
G_CALLBACK (install_button_cb),
self);
- g_signal_connect (priv->button_upgrades_help, "clicked",
- G_CALLBACK (learn_more_button_cb),
- self);
g_signal_connect (priv->button_upgrades_cancel, "clicked",
G_CALLBACK (cancel_button_cb),
self);
+ g_signal_connect (priv->button_upgrades_cancel, "size-allocate",
+ G_CALLBACK (cancel_button_size_allocate_cb), NULL);
+
+ gtk_button_set_image (GTK_BUTTON (priv->button_upgrades_cancel),
+ gtk_image_new_from_icon_name ("window-close-symbolic", GTK_ICON_SIZE_BUTTON));
}
static void
@@ -382,24 +385,20 @@ gs_upgrade_banner_class_init (GsUpgradeBannerClass *klass)
NULL, NULL, g_cclosure_marshal_VOID__VOID,
G_TYPE_NONE, 0);
- signals [SIGNAL_HELP_CLICKED] =
- g_signal_new ("help-clicked",
- G_TYPE_FROM_CLASS (object_class), G_SIGNAL_RUN_LAST,
- G_STRUCT_OFFSET (GsUpgradeBannerClass, help_clicked),
- NULL, NULL, g_cclosure_marshal_VOID__VOID,
- G_TYPE_NONE, 0);
-
gtk_widget_class_set_template_from_resource (widget_class,
"/org/gnome/Software/gs-upgrade-banner.ui");
- gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, box_upgrades);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, box_upgrades_info);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, box_upgrades_download);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner,
box_upgrades_downloading);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, box_upgrades_install);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner,
button_upgrades_download);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, button_upgrades_install);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, button_upgrades_cancel);
- gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, button_upgrades_help);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, label_upgrades_summary);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, label_upgrades_title);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, label_download_size);
+ gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner,
label_upgrades_downloading);
gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, progressbar);
- gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, label_upgrades_warning);
}
GtkWidget *
diff --git a/src/gs-upgrade-banner.h b/src/gs-upgrade-banner.h
index c8c2bf841..51380b9b7 100644
--- a/src/gs-upgrade-banner.h
+++ b/src/gs-upgrade-banner.h
@@ -25,7 +25,6 @@ struct _GsUpgradeBannerClass
void (*download_clicked) (GsUpgradeBanner *self);
void (*install_clicked) (GsUpgradeBanner *self);
void (*cancel_clicked) (GsUpgradeBanner *self);
- void (*help_clicked) (GsUpgradeBanner *self);
};
GtkWidget *gs_upgrade_banner_new (void);
diff --git a/src/gs-upgrade-banner.ui b/src/gs-upgrade-banner.ui
index 3e53a2578..416e62117 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -3,128 +3,202 @@
<!-- interface-requires gtk+ 3.10 -->
<template class="GsUpgradeBanner" parent="GtkBin">
<child>
- <object class="GtkBox" id="box_upgrades">
+ <object class="GtkBox" id="vbox">
<property name="visible">True</property>
<property name="orientation">vertical</property>
<property name="hexpand">True</property>
<property name="vexpand">True</property>
<property name="valign">center</property>
+ <property name="margin-top">12</property>
<style>
+ <class name="view"/>
<class name="upgrade-banner"/>
</style>
<child>
- <object class="GtkLabel" id="label_upgrades_title">
+ <object class="GtkBox" id="box_upgrades_info">
<property name="visible">True</property>
- <property name="margin-top">66</property>
- <property name="margin_bottom">26</property>
- <!-- Just a placeholder; actual label text is set in code -->
- <property name="label">GNOME 3.20 Now Available</property>
- <attributes>
- <attribute name="scale" value="1.8"/>
- </attributes>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="label_upgrades_summary">
- <property name="visible">True</property>
- <property name="label" translatable="yes">A major upgrade, with new features and added
polish.</property>
- <attributes>
- <attribute name="scale" value="1.2"/>
- </attributes>
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="vexpand">True</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="upgrade-banner-background"/>
+ </style>
+ <child>
+ <object class="GtkLabel" id="label_upgrades_title">
+ <property name="visible">True</property>
+ <property name="margin-top">40</property>
+ <property name="margin_bottom">12</property>
+ <!-- Just a placeholder; actual label text is set in code -->
+ <property name="label">GNOME 3.20 Now Available</property>
+ <attributes>
+ <attribute name="scale" value="2.0"/>
+ <attribute name="weight" value="ultrabold"/>
+ </attributes>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="label_upgrades_summary">
+ <property name="visible">True</property>
+ <!-- Just a placeholder text, will be set in the code -->
+ <property name="label">A major upgrade, with new features and added polish - learn
more.</property>
+ <property name="wrap">True</property>
+ <property name="width-chars">40</property>
+ <property name="max-width-chars">48</property>
+ <property name="margin-bottom">40</property>
+ <property name="halign">center</property>
+ <property name="justify">center</property>
+ </object>
+ </child>
</object>
</child>
<child>
- <object class="GtkBox" id="box_upgrades_buttons">
+ <object class="GtkBox" id="box_upgrades_download">
<property name="visible">True</property>
- <property name="orientation">horizontal</property>
- <property name="halign">fill</property>
+ <property name="orientation">vertical</property>
+ <property name="halign">center</property>
<property name="valign">end</property>
<property name="spacing">12</property>
- <property name="margin_top">48</property>
+ <property name="margin">18</property>
<style>
- <class name="osd"/>
<class name="upgrade-buttons"/>
</style>
+
<child>
- <object class="GtkButton" id="button_upgrades_help">
- <property name="label" translatable="yes">_Learn More</property>
+ <object class="GtkButton" id="button_upgrades_download">
+ <property name="label" translatable="yes">_Download</property>
<property name="width_request">150</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="use_underline">True</property>
<property name="relief">normal</property>
- </object>
- </child>
-
- <child>
- <object class="GtkLabel" id="label_dummy1">
- <property name="visible">True</property>
- <property name="label"></property>
- <property name="vexpand">True</property>
- <property name="hexpand">True</property>
- </object>
- </child>
-
- <child>
- <object class="GtkProgressBar" id="progressbar">
- <property name="visible">True</property>
- <property name="width_request">400</property>
<property name="halign">center</property>
<property name="valign">center</property>
- <property name="fraction">0.3</property>
- <property name="margin_top">8</property>
<style>
- <class name="upgrade-progressbar"/>
+ <class name="circular"/>
+ <class name="suggested-action"/>
</style>
</object>
</child>
-
<child>
- <object class="GtkLabel" id="label_upgrades_warning">
+ <object class="GtkLabel" id="label_download_size">
<property name="visible">True</property>
- <property name="label"></property><!-- Set in code -->
+ <property name="label"></property> <!-- set in the code -->
+ <property name="halign">center</property>
<property name="justify">center</property>
<property name="wrap">True</property>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ </attributes>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="box_upgrades_downloading">
+ <property name="visible">True</property>
+ <property name="orientation">horizontal</property>
+ <property name="halign">center</property>
+ <property name="valign">end</property>
+ <property name="spacing">12</property>
+ <property name="margin">18</property>
+ <style>
+ <class name="upgrade-buttons"/>
+ </style>
<child>
- <object class="GtkLabel" id="label_dummy2">
+ <object class="GtkBox" id="hbox_upgrades_downloading">
<property name="visible">True</property>
- <property name="label"></property>
- <property name="vexpand">True</property>
- <property name="hexpand">True</property>
+ <property name="orientation">vertical</property>
+ <property name="halign">fill</property>
+ <property name="valign">center</property>
+ <property name="spacing">8</property>
+ <style>
+ <class name="upgrade-buttons"/>
+ </style>
+ <child>
+ <object class="GtkLabel" id="label_upgrades_downloading">
+ <property name="visible">True</property>
+ <property name="label"></property> <!-- set in the code -->
+ <property name="halign">center</property>
+ <property name="justify">center</property>
+ <property name="wrap">True</property>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ </attributes>
+ </object>
+ </child>
+ <child>
+ <object class="GtkProgressBar" id="progressbar">
+ <property name="visible">True</property>
+ <property name="halign">fill</property>
+ <property name="valign">center</property>
+ <property name="fraction">0.3</property>
+ <property name="width-request">300</property>
+ <property name="margin-start">24</property>
+ <style>
+ <class name="upgrade-progressbar"/>
+ </style>
+ </object>
+ </child>
</object>
</child>
<child>
- <object class="GtkButton" id="button_upgrades_download">
- <property name="label" translatable="yes">_Download</property>
- <property name="width_request">150</property>
+ <object class="GtkButton" id="button_upgrades_cancel">
+ <property name="label"></property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="use_underline">True</property>
<property name="relief">normal</property>
+ <property name="always-show-image">True</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <property name="margin-start">24</property>
+ <style>
+ <class name="circular"/>
+ </style>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="box_upgrades_install">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="halign">center</property>
+ <property name="valign">end</property>
+ <property name="spacing">12</property>
+ <property name="margin">18</property>
+ <style>
+ <class name="upgrade-buttons"/>
+ </style>
<child>
- <object class="GtkButton" id="button_upgrades_cancel">
- <property name="label" translatable="yes">_Cancel</property>
- <property name="width_request">150</property>
+ <object class="GtkButton" id="button_upgrades_install">
+ <property name="label" translatable="yes">_Restart & Upgrade</property>
+ <property name="name">button_upgrades_install</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="use_underline">True</property>
<property name="relief">normal</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="circular"/>
+ <class name="suggested-action"/>
+ </style>
</object>
</child>
<child>
- <object class="GtkButton" id="button_upgrades_install">
- <property name="label">_Install</property><!-- Set in code -->
- <property name="width_request">150</property>
+ <object class="GtkLabel" id="label_upgrade_warning">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="use_underline">True</property>
- <property name="relief">normal</property>
+ <property name="label" translatable="yes">Remember to back up data and files before
upgrading.</property>
+ <property name="halign">center</property>
+ <property name="justify">center</property>
+ <property name="wrap">True</property>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ </attributes>
</object>
</child>
</object>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index ed894bfe6..27a60f27a 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -514,17 +514,26 @@ star-image {
}
.upgrade-banner {
- background-color: #1c5288;
padding: 0px;
- border-radius: 4px;
+ border-radius: 8px;
border: 1px solid darker(@theme_bg_color);
- color: @theme_selected_fg_color;
+}
+
+.upgrade-banner-background {
+ background: linear-gradient(180deg, shade(@theme_bg_color, 1.0) 0%, shade(@theme_bg_color, 0.9) 100%);
+ color: @theme_fg_color;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
}
.upgrade-buttons {
- padding: 18px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+}
+
+.upgrade-buttons #button_upgrades_install {
+ padding-left: 16px;
+ padding-right: 16px;
}
.upgrade-progressbar {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
