[gnome-software/1357-improve-presentation-of-os-upgrade-banners: 18/18] gs-upgrade-banner: Improve presentation of OS upgrade banners




commit 30c106b25dc0da8ccea8efd483cf8e21ace14350
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

 src/gs-updates-page.c    |  20 -----
 src/gs-upgrade-banner.c  | 219 +++++++++++++++++++++++----------------------
 src/gs-upgrade-banner.h  |   1 -
 src/gs-upgrade-banner.ui | 226 ++++++++++++++++++++++++++++++++++-------------
 src/gtk-style.css        |  22 +++--
 5 files changed, 288 insertions(+), 200 deletions(-)
---
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..6cf971ff7 100644
--- a/src/gs-upgrade-banner.c
+++ b/src/gs-upgrade-banner.c
@@ -19,14 +19,18 @@ 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_info;
+       GtkWidget       *label_upgrades_downloading_spacer;
+       GtkWidget       *label_upgrades_downloading;
        GtkWidget       *progressbar;
        guint            progress_pulse_id;
        GtkCssProvider  *banner_provider;  /* (owned) (nullable) */
@@ -37,7 +41,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,35 +73,20 @@ static void
 gs_upgrade_banner_refresh (GsUpgradeBanner *self)
 {
        GsUpgradeBannerPrivate *priv = gs_upgrade_banner_get_instance_private (self);
-       const gchar *uri;
-       g_autofree gchar *name_bold = NULL;
-       g_autofree gchar *version_bold = NULL;
+       const gchar *uri, *summary;
        g_autofree gchar *str = NULL;
        guint percentage;
 
        if (priv->app == NULL)
                return;
 
-       /* embolden */
-       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"), gs_app_get_name (priv->app), gs_app_get_version 
(priv->app));
+       gtk_label_set_markup (GTK_LABEL (priv->label_upgrades_title), str);
 
-       /* Refresh the title. Normally a distro upgrade state goes from
+       /* Normally a distro upgrade state goes from
         *
         * AVAILABLE (available to download) to
         * INSTALLING (downloading packages for later installation) to
@@ -106,45 +94,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 +117,28 @@ 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));
+       summary = gs_app_get_summary (priv->app);
+       if (summary != NULL)
+               gtk_label_set_text (GTK_LABEL (priv->label_upgrades_summary), summary);
 
-       /* 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;
-       }
-
-       /* 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 *link = NULL;
+               link = g_markup_printf_escaped ("<a href=\"%s\">%s</a>", uri, _("Learn more about the new 
version"));
+               gtk_label_set_markup (GTK_LABEL (priv->label_download_info), link);
+       } else if (gs_app_get_size_download (priv->app) != GS_APP_SIZE_UNKNOWABLE &&
+                  gs_app_get_size_download (priv->app) != 0) {
+               g_autofree gchar *tmp;
+               g_clear_pointer (&str, g_free);
+               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);
+               gtk_label_set_text (GTK_LABEL (priv->label_download_info), str);
+       }
 
        /* do a fill bar for the current progress */
        switch (gs_app_get_state (priv->app)) {
@@ -196,18 +148,35 @@ gs_upgrade_banner_refresh (GsUpgradeBanner *self)
                        if (priv->progress_pulse_id == 0)
                                priv->progress_pulse_id = g_timeout_add (50, _pulse_cb, self);
 
-                       gtk_widget_set_visible (priv->progressbar, TRUE);
+                       gtk_label_set_text (GTK_LABEL (priv->label_upgrades_downloading), _("Downloading…"));
                        break;
                } else if (percentage <= 100) {
                        stop_progress_pulsing (self);
                        gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (priv->progressbar),
                                                       (gdouble) percentage / 100.f);
-                       gtk_widget_set_visible (priv->progressbar, TRUE);
+                       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;
+                               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);
+                       } else {
+                               /* Translators: the '%u' is replaced with the actual percentage being already
+                                  downloaded, forming text like "13% downloaded" */
+                               str = g_strdup_printf (_("%u%% downloaded"), percentage);
+                       }
+                       gtk_label_set_text (GTK_LABEL (priv->label_upgrades_downloading), str);
                        break;
                }
                break;
        default:
-               gtk_widget_hide (priv->progressbar);
                stop_progress_pulsing (self);
                break;
        }
@@ -249,15 +218,47 @@ 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);
+       GsUpgradeBanner *self = user_data;
+       GsUpgradeBannerPrivate *priv = gs_upgrade_banner_get_instance_private (self);
+       gint size = allocation->width;
+
+       /* Make sure it's a square button, thus looks like a circle */
+       if (allocation->width != allocation->height) {
+               size = MAX (allocation->width, allocation->height);
+               gtk_widget_set_size_request (widget, size, size);
+       }
+
+       /* Also let the spacer be of the same size, to have the progress bar centered */
+       size += gtk_widget_get_margin_start (widget) + gtk_widget_get_margin_end (widget);
+       gtk_widget_set_size_request (priv->label_upgrades_downloading_spacer, size, -1);
+
+       return FALSE;
+}
+
+static gboolean
+box_upgrades_download_size_allocate_cb (GtkWidget *widget,
+                                       GdkRectangle *allocation,
+                                       gpointer user_data)
+{
+       GsUpgradeBanner *self = user_data;
+       GsUpgradeBannerPrivate *priv = gs_upgrade_banner_get_instance_private (self);
+       gint size = allocation->height;
+
+       /* Make them all the same height, ruled by the first box shown */
+       gtk_widget_set_size_request (priv->box_upgrades_downloading, -1, size);
+       gtk_widget_set_size_request (priv->box_upgrades_install, -1, 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,13 @@ 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), self);
+       g_signal_connect (priv->box_upgrades_download, "size-allocate",
+                         G_CALLBACK (box_upgrades_download_size_allocate_cb), self);
 }
 
 static void
@@ -382,24 +384,21 @@ 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_info);
+       gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, 
label_upgrades_downloading);
+       gtk_widget_class_bind_template_child_private (widget_class, GsUpgradeBanner, 
label_upgrades_downloading_spacer);
        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..c04916378 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -3,128 +3,228 @@
   <!-- 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>
+                <property name="label" translatable="yes">A major upgrade, with new features and added 
polish.</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_info">
                 <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">fill</property>
+            <property name="hexpand">True</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="GtkLabel" id="label_upgrades_downloading_spacer">
                 <property name="visible">True</property>
-                <property name="label"></property>
-                <property name="vexpand">True</property>
-                <property name="hexpand">True</property>
+                <property name="label"></property> <!-- space-taker -->
+                <property name="halign">start</property>
               </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">False</property>
+              </packing>
             </child>
-
             <child>
-              <object class="GtkButton" id="button_upgrades_download">
-                <property name="label" translatable="yes">_Download</property>
-                <property name="width_request">150</property>
+              <object class="GtkBox" id="hbox_upgrades_downloading">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="use_underline">True</property>
-                <property name="relief">normal</property>
+                <property name="orientation">vertical</property>
+                <property name="halign">fill</property>
+                <property name="hexpand">True</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">center</property>
+                    <property name="valign">center</property>
+                    <property name="fraction">0.3</property>
+                    <property name="width-request">340</property>
+                    <style>
+                      <class name="upgrade-progressbar"/>
+                    </style>
+                  </object>
+                </child>
               </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+              </packing>
             </child>
+
             <child>
               <object class="GtkButton" id="button_upgrades_cancel">
-                <property name="label" translatable="yes">_Cancel</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>
+                <property name="always-show-image">True</property>
+                <property name="halign">end</property>
+                <property name="hexpand">False</property>
+                <property name="valign">center</property>
+                <property name="margin-start">2</property>
+                <property name="margin-end">2</property>
+                <style>
+                  <class name="circular"/>
+                </style>
+                <child>
+                  <object class="GtkImage" id="button_upgrades_cancel_image">
+                    <property name="icon-name">window-close-symbolic</property>
+                    <property name="icon-size">4</property>
+                    <property name="visible">True</property>
+                  </object>
+                </child>
               </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">False</property>
+              </packing>
             </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_install">
-                <property name="label">_Install</property><!-- Set in code -->
-                <property name="width_request">150</property>
+                <property name="label" translatable="yes">_Restart &amp; 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="GtkLabel" id="label_upgrade_warning">
+                <property name="visible">True</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 5572d5ef1..a8fefc326 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -524,17 +524,27 @@ 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;
+       border-bottom: 1px solid darker(@theme_bg_color);
 }
 
 .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]