[gnome-software/1499-os-updates-listbox-papercuts: 6/6] 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: 6/6] gs-upgrade-banner: Make it a GtkListBox, to inherit proper styling
Date: Mon, 1 Nov 2021 16:35:22 +0000 (UTC)

commit c6832a03a8abf53c6a5fdd758a6695100a1edaf0
Author: Milan Crha <mcrha redhat com>
Date:   Mon Nov 1 17:28:42 2021 +0100

    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.c  |   6 +-
 src/gs-upgrade-banner.ui | 318 ++++++++++++++++++++++++++---------------------
 src/gtk-style.css        |  20 ---
 3 files changed, 176 insertions(+), 168 deletions(-)
---
diff --git a/src/gs-upgrade-banner.c b/src/gs-upgrade-banner.c
index 2a87cc580..98c227e2a 100644
--- a/src/gs-upgrade-banner.c
+++ b/src/gs-upgrade-banner.c
@@ -19,7 +19,7 @@ typedef struct
 {
        GsApp           *app;
 
-       GtkWidget       *box_upgrades_info;
+       GtkWidget       *box_upgrades_row;
        GtkWidget       *box_upgrades_download;
        GtkWidget       *box_upgrades_downloading;
        GtkWidget       *box_upgrades_install;
@@ -263,7 +263,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_info, &priv->banner_provider, "upgrade-banner-custom", 
modified_css);
+       gs_utils_widget_set_css (priv->box_upgrades_row, &priv->banner_provider, "upgrade-banner-custom", 
modified_css);
 
        gs_upgrade_banner_refresh (self);
 }
@@ -347,7 +347,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_set_layout_manager_type (widget_class, GTK_TYPE_BIN_LAYOUT);
 
-       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_row);
        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);
diff --git a/src/gs-upgrade-banner.ui b/src/gs-upgrade-banner.ui
index b7910397c..cf0393c10 100644
--- a/src/gs-upgrade-banner.ui
+++ b/src/gs-upgrade-banner.ui
@@ -3,132 +3,105 @@
   <!-- 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" id="box_upgrades_row">
             <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">
                 <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>
-                    <property name="vexpand">True</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="GtkLabel" id="label_upgrades_downloading">
+                      <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>
+                        <property name="vexpand">True</property>
+                        <style>
+                          <class name="circular"/>
+                          <class name="suggested-action"/>
+                        </style>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="label_download_info">
                         <property name="label"></property> <!-- set in the code -->
                         <property name="halign">center</property>
                         <property name="valign">center</property>
@@ -136,81 +109,127 @@
                         <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="GtkLabel" id="label_upgrades_downloading_spacer">
+                        <property name="label"></property> <!-- space-taker -->
+                        <property name="halign">start</property>
+                      </object>
+                    </child>
                     <child>
-                      <object class="GtkProgressBar" id="progressbar">
-                        <property name="halign">center</property>
+                      <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">normal</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">normal</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 &amp; 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 &amp; 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>
@@ -220,4 +239,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]