[gnome-software: 1/2] gs-upgrade-banner: Only show border on bottom half of banner
- From: Philip Withnall <pwithnall src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software: 1/2] gs-upgrade-banner: Only show border on bottom half of banner
- Date: Wed, 18 Aug 2021 14:31:20 +0000 (UTC)
commit aaa71b03d68db22c4035f5560055a388600f2add
Author: Philip Withnall <pwithnall endlessos org>
Date: Tue Aug 17 16:08:48 2021 +0100
gs-upgrade-banner: Only show border on bottom half of banner
Allow the background image from the distro to provide the border on the
upper half.
The main change in this commit is to split the banner in half
vertically, so that separate CSS can be applied to the top and bottom
halves.
The default CSS (if the distro doesn’t override it) for the top half
continues to set the border — but the override CSS provided by the
distro now unsets it.
This commit can be tested using `GS_SELF_TEST_DUMMY_ENABLE=1
gnome-software`.
Signed-off-by: Philip Withnall <pwithnall endlessos org>
Fixes: #1407
plugins/dummy/gs-plugin-dummy.c | 3 +-
.../gs-plugin-fedora-pkgdb-collections.c | 6 +-
src/gs-upgrade-banner.ui | 270 +++++++++++----------
src/gtk-style.css | 14 +-
4 files changed, 157 insertions(+), 136 deletions(-)
---
diff --git a/plugins/dummy/gs-plugin-dummy.c b/plugins/dummy/gs-plugin-dummy.c
index 249deae29..d8cfd7652 100644
--- a/plugins/dummy/gs-plugin-dummy.c
+++ b/plugins/dummy/gs-plugin-dummy.c
@@ -804,7 +804,8 @@ gs_plugin_add_distro_upgrades (GsPlugin *plugin,
gs_app_set_management_plugin (app, gs_plugin_get_name (plugin));
gs_app_set_metadata (app, "GnomeSoftware::UpgradeBanner-css",
"background: url('" DATADIR "/gnome-software/upgrade-bg.png');"
- "background-size: 100% 100%;");
+ "background-size: 100% 100%;"
+ "border-width: 0;");
gs_app_add_icon (app, ic);
gs_app_list_add (list, 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 b1d017dc9..648d4c10a 100644
--- a/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
+++ b/plugins/fedora-pkgdb-collections/gs-plugin-fedora-pkgdb-collections.c
@@ -326,13 +326,15 @@ _create_upgrade_from_info (GsPlugin *plugin, PkgdbItem *item)
item->version);
gs_app_set_url (app, AS_URL_KIND_HOMEPAGE, url);
- /* use a fancy background if possible */
+ /* use a fancy background if possible, and suppress the border which is
+ * shown by default; the background image is designed to be borderless */
background = _get_upgrade_css_background (item->version);
if (background != NULL) {
css = g_strdup_printf ("background: %s;"
"background-position: top;"
"background-size: 100%% 100%%;"
- "color: white;",
+ "color: white;"
+ "border-width: 0;",
background);
gs_app_set_metadata (app, "GnomeSoftware::UpgradeBanner-css", css);
}
diff --git a/src/gs-upgrade-banner.ui b/src/gs-upgrade-banner.ui
index 953f4e36e..92e1f1b4f 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -52,177 +52,189 @@
</object>
</child>
<child>
- <object class="GtkBox" id="box_upgrades_download">
+ <object class="GtkBox">
<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>
+ <property name="hexpand">True</property>
+ <property name="vexpand">True</property>
<style>
- <class name="upgrade-buttons"/>
+ <class name="upgrade-banner-bottom-box"/>
</style>
<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="box_upgrades_download">
<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">center</property>
- <property name="valign">center</property>
+ <property name="valign">end</property>
+ <property name="spacing">12</property>
+ <property name="margin">18</property>
<style>
- <class name="circular"/>
- <class name="suggested-action"/>
+ <class name="upgrade-buttons"/>
</style>
+
+ <child>
+ <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>
+ <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_download_info">
+ <property name="visible">True</property>
+ <property name="label"></property> <!-- set in the code -->
+ <property name="halign">center</property>
+ <property name="justify">center</property>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ </attributes>
+ </object>
+ </child>
</object>
</child>
<child>
- <object class="GtkLabel" id="label_download_info">
- <property name="visible">True</property>
- <property name="label"></property> <!-- set in the code -->
- <property name="halign">center</property>
- <property name="justify">center</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_upgrades_downloading_spacer">
- <property name="visible">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="GtkBox" id="hbox_upgrades_downloading">
+ <object class="GtkBox" id="box_upgrades_downloading">
<property name="visible">True</property>
- <property name="orientation">vertical</property>
+ <property name="orientation">horizontal</property>
<property name="halign">fill</property>
<property name="hexpand">True</property>
- <property name="valign">center</property>
- <property name="spacing">8</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_upgrades_downloading">
+ <object class="GtkLabel" id="label_upgrades_downloading_spacer">
<property name="visible">True</property>
- <property name="label"></property> <!-- set in the code -->
- <property name="halign">center</property>
- <property name="justify">center</property>
- <attributes>
- <attribute name="scale" value="0.8"/>
- <attribute name="font-features" value="tnum=1"/>
- </attributes>
+ <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="GtkProgressBar" id="progressbar">
+ <object class="GtkBox" id="hbox_upgrades_downloading">
<property name="visible">True</property>
- <property name="halign">center</property>
+ <property name="orientation">vertical</property>
+ <property name="halign">fill</property>
+ <property name="hexpand">True</property>
<property name="valign">center</property>
- <property name="fraction">0.3</property>
- <property name="width-request">340</property>
+ <property name="spacing">8</property>
<style>
- <class name="upgrade-progressbar"/>
+ <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>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ <attribute name="font-features" value="tnum=1"/>
+ </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>
- </object>
- <packing>
- <property name="expand">True</property>
- <property name="fill">True</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="button_upgrades_cancel">
- <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>
+ <object class="GtkButton" id="button_upgrades_cancel">
<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>
- <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" translatable="yes">_Restart & Upgrade</property>
- <property name="name">button_upgrades_install</property>
+ <object class="GtkBox" id="box_upgrades_install">
<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">center</property>
- <property name="valign">center</property>
+ <property name="valign">end</property>
+ <property name="spacing">12</property>
+ <property name="margin">18</property>
<style>
- <class name="circular"/>
- <class name="suggested-action"/>
+ <class name="upgrade-buttons"/>
</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>
- <attributes>
- <attribute name="scale" value="0.8"/>
- </attributes>
+ <child>
+ <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="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>
+ <attributes>
+ <attribute name="scale" value="0.8"/>
+ </attributes>
+ </object>
+ </child>
</object>
</child>
</object>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 6cba96143..2e618d2e4 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -526,15 +526,21 @@ star-image {
.upgrade-banner {
padding: 0px;
border-radius: 8px;
- border: 1px solid darker(@theme_bg_color);
+ border: none;
}
.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: 7px;
- border-top-right-radius: 7px;
- border-bottom: 1px solid darker(@theme_bg_color);
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ border: 1px solid darker(@theme_bg_color);
+}
+
+.upgrade-banner-bottom-box {
+ border: 1px solid darker(@theme_bg_color);
+ border-width: 0 1px 1px 1px;
+ border-radius: 0 0 8px 8px;
}
.upgrade-buttons {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
