[gnome-software/gnome-3-20] Use the new distro-themed graphical upgrade UI
- From: Richard Hughes <rhughes src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software/gnome-3-20] Use the new distro-themed graphical upgrade UI
- Date: Mon, 25 Apr 2016 14:20:56 +0000 (UTC)
commit ca8eff43d4baf4586ea3fe4e5b9a0d366bc8aee7
Author: Richard Hughes <richard hughsie com>
Date: Mon Apr 25 14:15:58 2016 +0100
Use the new distro-themed graphical upgrade UI
I guess this is technically a UI freeze break, but given we've not actually
shown any of the upgrade UI to the user before Allan decided it would be best
to backport the latest design.
data/Makefile.am | 1 +
data/upgrade-bg.png | Bin 0 -> 308691 bytes
src/gs-shell-updates.c | 1 +
src/gs-upgrade-banner.c | 10 ++
src/gs-upgrade-banner.ui | 113 ++++++++++++++----------
src/gs-utils.c | 60 +++++++++++++
src/gs-utils.h | 2 +
src/gtk-style.css | 13 +---
src/plugins/gs-plugin-dummy.c | 3 +
src/plugins/gs-plugin-fedora-distro-upgrades.c | 9 ++
10 files changed, 153 insertions(+), 59 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 4158c3c..49fd479 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -5,6 +5,7 @@ SUBDIRS = \
resourcesdir = $(datadir)/gnome-software
dist_resources_DATA = \
+ upgrade-bg.png \
featured-ardour.png \
featured-ardour-bg.png \
featured-blender.png \
diff --git a/data/upgrade-bg.png b/data/upgrade-bg.png
new file mode 100644
index 0000000..1e92fa6
Binary files /dev/null and b/data/upgrade-bg.png differ
diff --git a/src/gs-shell-updates.c b/src/gs-shell-updates.c
index 8bc514d..1e3156a 100644
--- a/src/gs-shell-updates.c
+++ b/src/gs-shell-updates.c
@@ -1254,6 +1254,7 @@ gs_shell_updates_setup (GsShellUpdates *self,
gs_page_set_header_end_widget (GS_PAGE (self), self->header_end_box);
self->button_update_all = gtk_button_new_with_mnemonic (_("Restart & _Install"));
+ gtk_widget_set_valign (self->button_update_all, GTK_ALIGN_CENTER);
gtk_widget_set_visible (self->button_update_all, TRUE);
gtk_style_context_add_class (gtk_widget_get_style_context (self->button_update_all),
"suggested-action");
gtk_container_add (GTK_CONTAINER (self->header_end_box), self->button_update_all);
diff --git a/src/gs-upgrade-banner.c b/src/gs-upgrade-banner.c
index acf8327..6ab29dd 100644
--- a/src/gs-upgrade-banner.c
+++ b/src/gs-upgrade-banner.c
@@ -1,6 +1,7 @@
/* -*- Mode: C; tab-width: 8; indent-tabs-mode: t; c-basic-offset: 8 -*-
*
* Copyright (C) 2016 Kalev Lember <klember redhat com>
+ * Copyright (C) 2016 Richard Hughes <richard hughsie com>
*
* Licensed under the GNU General Public License Version 2
*
@@ -26,11 +27,13 @@
#include <stdlib.h>
#include "gs-upgrade-banner.h"
+#include "gs-utils.h"
typedef struct
{
GsApp *app;
+ GtkWidget *box_upgrades;
GtkWidget *button_upgrades_download;
GtkWidget *button_upgrades_install;
GtkWidget *button_upgrades_help;
@@ -205,6 +208,7 @@ void
gs_upgrade_banner_set_app (GsUpgradeBanner *self, GsApp *app)
{
GsUpgradeBannerPrivate *priv = gs_upgrade_banner_get_instance_private (self);
+ const gchar *css;
g_return_if_fail (GS_IS_UPGRADE_BANNER (self));
g_return_if_fail (GS_IS_APP (app) || app == NULL);
@@ -223,6 +227,11 @@ gs_upgrade_banner_set_app (GsUpgradeBanner *self, GsApp *app)
g_signal_connect (priv->app, "notify::progress",
G_CALLBACK (app_progress_changed), self);
+ /* set custom css */
+ css = gs_app_get_metadata_item (app, "GnomeSoftware::UpgradeBanner-css");
+ if (css != NULL)
+ gs_utils_widget_set_custom_css (priv->box_upgrades, css);
+
gs_upgrade_banner_refresh (self);
}
@@ -311,6 +320,7 @@ gs_upgrade_banner_class_init (GsUpgradeBannerClass *klass)
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,
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);
diff --git a/src/gs-upgrade-banner.ui b/src/gs-upgrade-banner.ui
index 4159e49..0e27335 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -8,6 +8,10 @@
<property name="orientation">vertical</property>
<property name="hexpand">True</property>
<property name="vexpand">True</property>
+ <property name="margin-top">48</property>
+ <property name="margin-bottom">48</property>
+ <property name="height-request">300</property>
+ <property name="valign">center</property>
<style>
<class name="upgrade-banner"/>
</style>
@@ -15,8 +19,8 @@
<object class="GtkLabel" id="label_upgrades_title">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="margin_top">42</property>
- <property name="margin_bottom">8</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>
@@ -29,36 +33,22 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">A major upgrade, with new features and added
polish.</property>
- <property name="margin_bottom">12</property>
<attributes>
<attribute name="scale" value="1.2"/>
</attributes>
</object>
</child>
<child>
- <object class="GtkProgressBar" id="progressbar">
- <property name="visible">True</property>
- <property name="width_request">480</property>
- <property name="halign">center</property>
- <property name="fraction">0.3</property>
- <property name="margin_top">8</property>
- <style>
- <class name="upgrade-progressbar"/>
- </style>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- </packing>
- </child>
- <child>
<object class="GtkBox" id="box_upgrades_buttons">
<property name="visible">True</property>
<property name="orientation">horizontal</property>
- <property name="halign">center</property>
+ <property name="halign">fill</property>
+ <property name="valign">end</property>
<property name="spacing">12</property>
<property name="margin_top">16</property>
- <property name="margin_bottom">28</property>
+ <style>
+ <class name="osd"/>
+ </style>
<child>
<object class="GtkButton" id="button_upgrades_help">
<property name="label" translatable="yes">_Learn More</property>
@@ -67,16 +57,61 @@
<property name="can_focus">True</property>
<property name="receives_default">False</property>
<property name="use_underline">True</property>
- <property name="relief">none</property>
+ <property name="relief">normal</property>
+ <property name="margin">18</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">False</property>
+ </packing>
+ </child>
+
+ <child>
+ <object class="GtkLabel" id="label_dummy1">
+ <property name="visible">True</property>
+ <property name="can_focus">False</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-button"/>
+ <class name="upgrade-progressbar"/>
</style>
</object>
<packing>
<property name="expand">False</property>
- <property name="fill">False</property>
+ <property name="fill">True</property>
</packing>
</child>
+
+ <child>
+ <object class="GtkLabel" id="label_upgrades_warning">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="label" translatable="yes">It is recommended that you back up your data and
files before upgrading.</property>
+ </object>
+ </child>
+
+ <child>
+ <object class="GtkLabel" id="label_dummy2">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="label"></property>
+ <property name="vexpand">True</property>
+ <property name="hexpand">True</property>
+ </object>
+ </child>
+
<child>
<object class="GtkButton" id="button_upgrades_download">
<property name="label" translatable="yes">_Download</property>
@@ -85,10 +120,8 @@
<property name="can_focus">True</property>
<property name="receives_default">False</property>
<property name="use_underline">True</property>
- <property name="relief">none</property>
- <style>
- <class name="upgrade-button"/>
- </style>
+ <property name="relief">normal</property>
+ <property name="margin">18</property>
</object>
<packing>
<property name="expand">False</property>
@@ -103,10 +136,8 @@
<property name="can_focus">True</property>
<property name="receives_default">False</property>
<property name="use_underline">True</property>
- <property name="relief">none</property>
- <style>
- <class name="upgrade-button"/>
- </style>
+ <property name="relief">normal</property>
+ <property name="margin">18</property>
</object>
<packing>
<property name="expand">False</property>
@@ -121,10 +152,8 @@
<property name="can_focus">True</property>
<property name="receives_default">False</property>
<property name="use_underline">True</property>
- <property name="relief">none</property>
- <style>
- <class name="upgrade-button"/>
- </style>
+ <property name="relief">normal</property>
+ <property name="margin">18</property>
</object>
<packing>
<property name="expand">False</property>
@@ -133,18 +162,6 @@
</child>
</object>
</child>
- <child>
- <object class="GtkLabel" id="label_upgrades_warning">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="label" translatable="yes">It is recommended that you back up your data and files
before upgrading.</property>
- <property name="margin_top">8</property>
- <property name="margin_bottom">24</property>
- <attributes>
- <attribute name="scale" value="0.9"/>
- </attributes>
- </object>
- </child>
</object>
</child>
</template>
diff --git a/src/gs-utils.c b/src/gs-utils.c
index e7b1fbe..956a721 100644
--- a/src/gs-utils.c
+++ b/src/gs-utils.c
@@ -563,4 +563,64 @@ gs_utils_is_current_desktop (const gchar *name)
return g_strv_contains ((const gchar * const *) names, name);
}
+/**
+ * gs_utils_widget_css_parsing_error_cb:
+ */
+static void
+gs_utils_widget_css_parsing_error_cb (GtkCssProvider *provider,
+ GtkCssSection *section,
+ GError *error,
+ gpointer user_data)
+{
+ g_warning ("CSS parse error %i:%i: %s",
+ gtk_css_section_get_start_line (section),
+ gtk_css_section_get_start_position (section),
+ error->message);
+}
+
+/**
+ * gs_utils_widget_set_custom_css:
+ **/
+void
+gs_utils_widget_set_custom_css (GtkWidget *widget, const gchar *css)
+{
+ GString *str = g_string_sized_new (1024);
+ GtkStyleContext *context;
+ g_autofree gchar *class_name = NULL;
+ g_autoptr(GtkCssProvider) provider = NULL;
+
+ /* invalid */
+ if (css == NULL)
+ return;
+
+ /* make into a proper CSS class */
+ class_name = g_strdup_printf ("themed-widget_%p", widget);
+ g_string_append_printf (str, ".%s {\n", class_name);
+ g_string_append_printf (str, "%s\n", css);
+ g_string_append (str, "}");
+
+ g_string_append_printf (str, ".%s:hover {\n", class_name);
+ g_string_append (str, " opacity: 0.9;\n");
+ g_string_append (str, "}\n");
+
+ g_debug ("using custom CSS %s", str->str);
+
+ /* set the custom CSS class */
+ context = gtk_widget_get_style_context (widget);
+ gtk_style_context_add_class (context, class_name);
+
+ /* set up custom provider and store on the widget */
+ provider = gtk_css_provider_new ();
+ g_signal_connect (provider, "parsing-error",
+ G_CALLBACK (gs_utils_widget_css_parsing_error_cb), NULL);
+ gtk_style_context_add_provider_for_screen (gdk_screen_get_default (),
+ GTK_STYLE_PROVIDER (provider),
+ GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
+ gtk_css_provider_load_from_data (provider, str->str, -1, NULL);
+ g_object_set_data_full (G_OBJECT (widget),
+ "GnomeSoftware::provider",
+ g_object_ref (provider),
+ g_object_unref);
+}
+
/* vim: set noexpandtab: */
diff --git a/src/gs-utils.h b/src/gs-utils.h
index e743f17..89d9abf 100644
--- a/src/gs-utils.h
+++ b/src/gs-utils.h
@@ -67,6 +67,8 @@ GPermission *gs_utils_get_permission (const gchar *id);
gboolean gs_utils_is_current_desktop (const gchar *name);
gboolean gs_utils_is_current_desktop (const gchar *name);
+void gs_utils_widget_set_custom_css (GtkWidget *widget,
+ const gchar *css);
G_END_DECLS
diff --git a/src/gtk-style.css b/src/gtk-style.css
index ed3912c..c915295 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -174,9 +174,7 @@
}
.fake-header-bar {
- background-color: white;
- background-image: none;
- border-radius: 0;
+ all: unset;
}
.header-label {
@@ -270,17 +268,10 @@ button.star, .button.star {
.upgrade-banner {
background-color: #1c5288;
+ padding: 0px;
color: @theme_selected_fg_color;
}
-.upgrade-button {
- background-image: none;
- background-color: #5899dc;
- box-shadow: none;
- color: @theme_selected_fg_color;
- border-color: @theme_selected_bg_color;
-}
-
.upgrade-progressbar {
box-shadow: none
}
diff --git a/src/plugins/gs-plugin-dummy.c b/src/plugins/gs-plugin-dummy.c
index 93ce13a..059e590 100644
--- a/src/plugins/gs-plugin-dummy.c
+++ b/src/plugins/gs-plugin-dummy.c
@@ -453,6 +453,9 @@ gs_plugin_add_distro_upgrades (GsPlugin *plugin,
gs_app_set_license (app, GS_APP_QUALITY_LOWEST, "LicenseRef-free");
gs_app_set_origin_ui (app, "Dummy");
gs_app_set_management_plugin (app, plugin->name);
+ gs_app_set_metadata (app, "GnomeSoftware::UpgradeBanner-css",
+ "background: url('" DATADIR "/gnome-software/upgrade-bg.png');"
+ "background-size: 100% 100%;");
gs_app_set_icon (app, ic);
gs_plugin_add_app (list, app);
return TRUE;
diff --git a/src/plugins/gs-plugin-fedora-distro-upgrades.c b/src/plugins/gs-plugin-fedora-distro-upgrades.c
index ed69205..af43ca8 100644
--- a/src/plugins/gs-plugin-fedora-distro-upgrades.c
+++ b/src/plugins/gs-plugin-fedora-distro-upgrades.c
@@ -296,6 +296,7 @@ gs_plugin_add_distro_upgrades (GsPlugin *plugin,
g_autofree gchar *app_id = NULL;
g_autofree gchar *app_version = NULL;
g_autofree gchar *url = NULL;
+ g_autofree gchar *css = NULL;
g_autoptr(GsApp) app = NULL;
g_autoptr(AsIcon) ic = NULL;
@@ -350,6 +351,14 @@ gs_plugin_add_distro_upgrades (GsPlugin *plugin,
distro_info->version);
gs_app_set_url (app, AS_URL_KIND_HOMEPAGE, url);
+ /* use a fancy background */
+ css = g_strdup_printf ("background:
url('/usr/share/backgrounds/f%i/default/standard/f%i.png');"
+ "background-position: center;"
+ "background-size: cover;",
+ distro_info->version,
+ distro_info->version);
+ gs_app_set_metadata (app, "GnomeSoftware::UpgradeBanner-css", css);
+
gs_plugin_add_app (list, app);
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
