[gnome-software: 2/5] gs-details-page: Rearrange the header to match the new designs

[Philip Withnall <pwithnall src gnome org>]

commit fab8470ba1ac7778334941acee392b6cc6e10690
Author: Philip Withnall <pwithnall endlessos org>
Date:   Thu Aug 5 17:28:49 2021 +0100

    gs-details-page: Rearrange the header to match the new designs
    
    Designs: 
https://gitlab.gnome.org/Teams/Design/software-mockups/-/raw/master/adaptive/app-page-adaptive.png
    
    This doesn’t implement changes to the buttons themselves, which are
    going to be handled in #1351.
    
    It moves the ratings below the app author, adjusts spacing, and moves
    the buttons into a new `GtkBox` with the title/author name. In future,
    this box should be easily replaced with an adaptible widget which could
    re-orient to displaying its children vertically when narrow. That should
    correctly handle the narrow version of the design. (Correctly and fully
    implementing that is out of scope for GNOME 41 though.)
    
    The indentation in the UI file will be fixed in a subsequent commit, to
    make this one easier to review.
    
    Signed-off-by: Philip Withnall <pwithnall endlessos org>
    
    Helps: #1350

 src/gs-details-page.ui | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)
---
diff --git a/src/gs-details-page.ui b/src/gs-details-page.ui
index 697a43446..ce8d32b31 100644
--- a/src/gs-details-page.ui
+++ b/src/gs-details-page.ui
@@ -77,6 +77,7 @@
                           <object class="GtkBox" id="box_details_header">
                             <property name="orientation">horizontal</property>
                             <property name="visible">True</property>
+                            <property name="spacing">32</property>
                             <child>
                               <object class="GtkImage" id="application_details_icon">
                                 <property name="visible">True</property>
@@ -88,21 +89,24 @@
                                 </style>
                               </object>
                             </child>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="orientation">horizontal</property>
+                                <property name="visible">True</property>
+                                <property name="spacing">10</property>
                             <child>
                               <object class="GtkBox" id="box_details_header2">
                                 <property name="orientation">vertical</property>
                                 <property name="visible">True</property>
                                 <property name="halign">fill</property>
-                                <property name="valign">start</property>
-                                <property name="margin_start">24</property>
-                                <property name="margin_end">24</property>
+                                <property name="valign">center</property>
+                                <property name="spacing">6</property>
                                 <child>
                                   <object class="GtkLabel" id="application_details_title">
                                     <property name="visible">True</property>
                                     <property name="halign">fill</property>
                                     <property name="valign">start</property>
                                     <property name="hexpand">True</property>
-                                    <property name="margin_bottom">4</property>
                                     <property name="xalign">0</property>
                                     <property name="selectable">True</property>
                                     <property name="wrap">True</property>
@@ -143,11 +147,9 @@
                                     </child>
                                   </object>
                                 </child>
-                              </object>
-                            </child>
-
                             <child>
                               <object class="GtkBox" id="star_box">
+                                <property name="margin-top">6</property>
                                 <property name="visible">True</property>
                                 <property name="valign">start</property>
                                 <child>
@@ -176,20 +178,12 @@
                                 </child>
                               </object>
                             </child>
+                              </object>
+                            </child>
 
-                          </object>
-                        </child>
-                      </object>
-                    </child>
-
-                    <child>
-                      <object class="GsFixedSizeBin">
-                        <property name="visible">True</property>
-                        <property name="preferred-width">860</property>
                         <child>
                           <object class="GtkBox" id="box_install_remove">
                             <property name="visible">True</property>
-                            <property name="margin_bottom">14</property>
                             <property name="spacing">9</property>
                             <child>
                               <object class="GtkButton" id="button_install">
@@ -200,7 +194,7 @@
                                 <property name="can_focus">True</property>
                                 <property name="receives_default">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">start</property>
+                                <property name="valign">center</property>
                                 <style>
                                   <class name="suggested-action"/>
                                 </style>
@@ -211,6 +205,7 @@
                                 <property name="visible">True</property>
                                 <property name="can_focus">True</property>
                                 <property name="use_underline">True</property>
+                                <property name="valign">center</property>
                                 <style>
                                   <class name="suggested-action"/>
                                 </style>
@@ -225,7 +220,7 @@
                                 <property name="can_focus">True</property>
                                 <property name="receives_default">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">start</property>
+                                <property name="valign">center</property>
                               </object>
                             </child>
                             <child>
@@ -284,6 +279,7 @@
                                 <property name="width_request">116</property>
                                 <property name="can_focus">True</property>
                                 <property name="receives_default">True</property>
+                                <property name="valign">center</property>
                               </object>
                             </child>
                             <child>
@@ -295,7 +291,7 @@
                                 <property name="can_focus">True</property>
                                 <property name="receives_default">True</property>
                                 <property name="halign">start</property>
-                                <property name="valign">start</property>
+                                <property name="valign">center</property>
                               </object>
                               <packing>
                                 <property name="pack-type">end</property>
@@ -307,6 +303,7 @@
                                 <property name="can_focus">True</property>
                                 <property name="use_underline">True</property>
                                 <property name="label" translatable="yes" comments="Translators: A label for 
a button to add a shortcut to the selected application.">_Add shortcut</property>
+                                <property name="valign">center</property>
                                 <style>
                                   <class name="suggested-action"/>
                                 </style>
@@ -321,12 +318,17 @@
                                 <property name="can_focus">True</property>
                                 <property name="use_underline">True</property>
                                 <property name="label" translatable="yes" comments="Translators: A label for 
a button to remove a shortcut to the selected application.">Re_move shortcut</property>
+                                <property name="valign">center</property>
                               </object>
                               <packing>
                                 <property name="pack-type">end</property>
                               </packing>
                             </child>
                           </object>
+                        </child>
+                              </object>
+                            </child>
+                          </object>
                         </child>
                       </object>
                     </child>