[gnome-software: 6/14] gs-details-page: Rework sizing of install/cancel buttons

[Philip Withnall <pwithnall src gnome org>]

commit 817039e56de27d7ce6f3f66e299c2f3f6c95c95a
Author: Philip Withnall <pwithnall endlessos org>
Date:   Thu Aug 12 11:58:16 2021 +0100

    gs-details-page: Rework sizing of install/cancel buttons
    
    Ensure that the cancel button is the same width as the other buttons
    (even if they’re hidden, otherwise the transition from one button to
    another being visible is jarring), and align it vertically with the
    other buttons even though it’s got progress labels beneath it.
    
    See the new designs: 
https://gitlab.gnome.org/Teams/Design/software-mockups/-/blob/master/adaptive/app-page-install-flow.png
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>
    
    Fixes: #1351

 src/gs-details-page.ui | 17 ++++++++++++-----
 src/gtk-style.css      |  2 ++
 2 files changed, 14 insertions(+), 5 deletions(-)
---
diff --git a/src/gs-details-page.ui b/src/gs-details-page.ui
index f845d73f6..28cc0d405 100644
--- a/src/gs-details-page.ui
+++ b/src/gs-details-page.ui
@@ -284,9 +284,8 @@
                                             <property name="visible" bind-source="button_cancel" 
bind-property="visible" bind-flags="sync-create"/>
                                             <property name="spacing">3</property>
                                             <property name="orientation">vertical</property>
-                                            <property name="hexpand">True</property>
-                                            <property name="valign">center</property>
-                                            <child>
+                                            <property name="valign">fill</property>
+                                            <child type="center">
                                               <object class="GsProgressButton" id="button_cancel">
                                                 <property name="visible">False</property>
                                                 <property name="use_underline">True</property>
@@ -298,9 +297,15 @@
                                             </child>
                                             <child>
                                               <object class="GtkBox">
-                                                <property name="visible">True</property>
+                                                <property name="visible" bind-source="label_progress_status" 
bind-property="visible" bind-flags="sync-create"/>
                                                 <property name="spacing">3</property>
                                                 <property name="halign">center</property>
+                                                <property name="valign">start</property>
+                                                <property name="vexpand">True</property>
+                                                <style>
+                                                  <class name="dim-label"/>
+                                                  <class name="install-progress-label"/>
+                                                </style>
                                                 <child>
                                                   <object class="GtkLabel" id="label_progress_status">
                                                     <property name="visible">True</property>
@@ -316,6 +321,9 @@
                                                   </object>
                                                 </child>
                                               </object>
+                                              <packing>
+                                                <property name="pack-type">end</property>
+                                              </packing>
                                             </child>
                                           </object>
                                         </child>
@@ -1004,7 +1012,6 @@
     </child>
   </template>
   <object class="GtkSizeGroup" id="sizegroup_install_remove">
-    <property name="ignore_hidden">True</property>
     <widgets>
       <widget name="button_install"/>
       <widget name="button_cancel"/>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index e0108f7d4..6ba409220 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -778,3 +778,5 @@ app-context-bar .context-tile-description { font-size: smaller }
 window.toolbox button.titlebutton:not(:hover) {
   background: @theme_bg_color;
 }
+
+.install-progress-label { font-size: smaller }