[gnome-software/1499-os-updates-listbox-papercuts] gs-upgrade-banner: Make it a GtkListBox, to inherit proper styling
- From: Milan Crha <mcrha src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software/1499-os-updates-listbox-papercuts] gs-upgrade-banner: Make it a GtkListBox, to inherit proper styling
- Date: Tue, 26 Oct 2021 13:56:34 +0000 (UTC)
commit 21cb75fddcc2d23170f8aa6fd5cabe348a877034
Author: Milan Crha <mcrha redhat com>
Date: Tue Oct 26 15:54:41 2021 +0200
gs-upgrade-banner: Make it a GtkListBox, to inherit proper styling
This makes the banner look like the other update sections in the Updates page.
Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1499
src/gs-upgrade-banner.ui | 316 ++++++++++++++++++++++++++---------------------
src/gtk-style.css | 20 ---
2 files changed, 172 insertions(+), 164 deletions(-)
---
diff --git a/src/gs-upgrade-banner.ui b/src/gs-upgrade-banner.ui
index a6e68ca67..4df3394ee 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -3,211 +3,230 @@
<!-- interface-requires gtk+ 3.10 -->
<template class="GsUpgradeBanner" parent="GtkWidget">
<child>
- <object class="GtkBox" id="vbox">
- <property name="orientation">vertical</property>
+ <object class="GtkListBox">
<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"/>
+ <class name="content"/>
</style>
<child>
- <object class="GtkBox" id="box_upgrades_info">
- <property name="orientation">vertical</property>
+ <object class="GtkListBoxRow">
<property name="hexpand">True</property>
<property name="vexpand">True</property>
<property name="valign">center</property>
+ <property name="activatable">False</property>
+ <property name="selectable">False</property>
<style>
<class name="upgrade-banner-background"/>
</style>
<child>
- <object class="GtkLabel" id="label_upgrades_title">
- <property name="margin-top">32</property>
- <property name="margin_bottom">6</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="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">32</property>
- <property name="halign">center</property>
- <property name="justify">center</property>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkBox">
- <property name="orientation">vertical</property>
- <property name="hexpand">True</property>
- <property name="vexpand">True</property>
- <style>
- <class name="upgrade-banner-bottom-box"/>
- </style>
-
- <child>
- <object class="GtkBox" id="box_upgrades_download">
+ <object class="GtkBox" id="box_upgrades_info">
<property name="orientation">vertical</property>
- <property name="halign">center</property>
- <property name="valign">end</property>
- <property name="spacing">12</property>
- <property name="margin-top">18</property>
- <property name="margin-bottom">18</property>
- <property name="margin-start">18</property>
- <property name="margin-end">18</property>
- <style>
- <class name="upgrade-buttons"/>
- </style>
-
+ <property name="hexpand">True</property>
+ <property name="vexpand">True</property>
+ <property name="valign">center</property>
<child>
- <object class="GtkButton" id="button_upgrades_download">
- <property name="label" translatable="yes">_Download</property>
- <property name="width_request">150</property>
- <property name="can_focus">True</property>
- <property name="use_underline">True</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <style>
- <class name="circular"/>
- <class name="suggested-action"/>
- </style>
+ <object class="GtkLabel" id="label_upgrades_title">
+ <property name="margin-top">32</property>
+ <property name="margin_bottom">6</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_download_info">
- <property name="label"></property> <!-- set in the code -->
+ <object class="GtkLabel" id="label_upgrades_summary">
+ <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">32</property>
<property name="halign">center</property>
<property name="justify">center</property>
- <attributes>
- <attribute name="scale" value="0.8"/>
- </attributes>
</object>
</child>
</object>
</child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkListBoxRow">
+ <property name="hexpand">True</property>
+ <property name="vexpand">True</property>
+ <property name="valign">center</property>
+ <property name="activatable">False</property>
+ <property name="selectable">False</property>
<child>
- <object class="GtkBox" id="box_upgrades_downloading">
- <property name="orientation">horizontal</property>
- <property name="halign">fill</property>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
<property name="hexpand">True</property>
- <property name="valign">end</property>
- <property name="spacing">12</property>
- <property name="margin-top">18</property>
- <property name="margin-bottom">18</property>
- <property name="margin-start">18</property>
- <property name="margin-end">18</property>
+ <property name="vexpand">True</property>
<style>
- <class name="upgrade-buttons"/>
+ <class name="upgrade-banner-bottom-box"/>
</style>
+
<child>
- <object class="GtkLabel" id="label_upgrades_downloading_spacer">
- <property name="label"></property> <!-- space-taker -->
- <property name="halign">start</property>
- </object>
- </child>
- <child>
- <object class="GtkBox" id="hbox_upgrades_downloading">
+ <object class="GtkBox" id="box_upgrades_download">
<property name="orientation">vertical</property>
- <property name="halign">fill</property>
- <property name="hexpand">True</property>
+ <property name="halign">center</property>
<property name="valign">center</property>
- <property name="spacing">8</property>
+ <property name="vexpand">True</property>
+ <property name="spacing">12</property>
+ <property name="margin-top">18</property>
+ <property name="margin-bottom">18</property>
+ <property name="margin-start">18</property>
+ <property name="margin-end">18</property>
<style>
<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="can_focus">True</property>
+ <property name="use_underline">True</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_upgrades_downloading">
+ <object class="GtkLabel" id="label_download_info">
<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>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="box_upgrades_downloading">
+ <property name="orientation">horizontal</property>
+ <property name="halign">fill</property>
+ <property name="hexpand">True</property>
+ <property name="valign">center</property>
+ <property name="vexpand">True</property>
+ <property name="spacing">12</property>
+ <property name="margin-top">18</property>
+ <property name="margin-bottom">18</property>
+ <property name="margin-start">18</property>
+ <property name="margin-end">18</property>
+ <style>
+ <class name="upgrade-buttons"/>
+ </style>
<child>
- <object class="GtkProgressBar" id="progressbar">
- <property name="halign">center</property>
+ <object class="GtkLabel" id="label_upgrades_downloading_spacer">
+ <property name="label"></property> <!-- space-taker -->
+ <property name="halign">start</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="hbox_upgrades_downloading">
+ <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="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="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>
</child>
- </object>
- </child>
- <child>
- <object class="GtkButton" id="button_upgrades_cancel">
- <property name="can_focus">True</property>
- <property name="use_underline">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">large</property>
+ <object class="GtkButton" id="button_upgrades_cancel">
+ <property name="can_focus">True</property>
+ <property name="use_underline">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">large</property>
+ </object>
+ </child>
</object>
</child>
</object>
</child>
- </object>
- </child>
- <child>
- <object class="GtkBox" id="box_upgrades_install">
- <property name="orientation">vertical</property>
- <property name="halign">center</property>
- <property name="valign">end</property>
- <property name="spacing">12</property>
- <property name="margin-top">18</property>
- <property name="margin-bottom">18</property>
- <property name="margin-start">18</property>
- <property name="margin-end">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>
- <property name="can_focus">True</property>
- <property name="use_underline">True</property>
+ <object class="GtkBox" id="box_upgrades_install">
+ <property name="orientation">vertical</property>
<property name="halign">center</property>
<property name="valign">center</property>
+ <property name="vexpand">True</property>
+ <property name="spacing">12</property>
+ <property name="margin-top">18</property>
+ <property name="margin-bottom">18</property>
+ <property name="margin-start">18</property>
+ <property name="margin-end">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="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="can_focus">True</property>
+ <property name="use_underline">True</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="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>
@@ -217,4 +236,13 @@
</object>
</child>
</template>
+
+ <object class="GtkSizeGroup">
+ <property name="mode">vertical</property>
+ <widgets>
+ <widget name="box_upgrades_download"/>
+ <widget name="box_upgrades_downloading"/>
+ <widget name="box_upgrades_install"/>
+ </widgets>
+ </object>
</interface>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index b15262566..e08ff3db6 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -520,29 +520,9 @@ star-image {
padding: 16px;
}
-.upgrade-banner {
- padding: 0px;
- border-radius: 8px;
- 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: 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 {
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
}
.upgrade-buttons #button_upgrades_install {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
