[gnome-software: 1/7] details-page: Make the review summary look like a card

[Philip Withnall <pwithnall src gnome org>]

commit 26a6ae4218cbbdba49694bcc174eacb1c75e08cb
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Fri Nov 19 11:44:19 2021 +0100

    details-page: Make the review summary look like a card
    
    As per the new designs.
    
    Fixes: #1362

 src/gs-details-page.c      | 11 +++++----
 src/gs-details-page.ui     | 60 ++++++++++++++++++++++++++++++++++------------
 src/gs-review-histogram.ui |  8 +++----
 3 files changed, 56 insertions(+), 23 deletions(-)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index 54bbb2052..df5d82a18 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -126,6 +126,7 @@ struct _GsDetailsPage
        GtkImage                *developer_verified_image;
        GtkWidget               *label_failed;
        GtkWidget               *list_box_addons;
+       GtkWidget               *list_box_reviews_summary;
        GtkWidget               *list_box_version_history;
        GtkWidget               *row_latest_version;
        GtkWidget               *version_history_button;
@@ -1940,8 +1941,7 @@ gs_details_page_review_response_cb (GtkDialog *dialog,
 }
 
 static void
-gs_details_page_write_review_cb (GtkButton *button,
-                                 GsDetailsPage *self)
+gs_details_page_write_review (GsDetailsPage *self)
 {
        GtkWidget *dialog;
        dialog = gs_review_dialog_new ();
@@ -2006,7 +2006,7 @@ gs_details_page_star_pressed_cb (GtkGestureClick *click,
                                  gdouble          y,
                                  GsDetailsPage   *self)
 {
-       gs_details_page_write_review_cb(GTK_BUTTON (self->button_review), self);
+       gs_details_page_write_review (self);
 }
 
 static gboolean
@@ -2238,6 +2238,7 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, developer_verified_image);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, label_failed);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, list_box_addons);
+       gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, list_box_reviews_summary);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, list_box_version_history);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, row_latest_version);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, version_history_button);
@@ -2260,7 +2261,6 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
        gtk_widget_class_bind_template_callback (widget_class, gs_details_page_link_row_activated_cb);
        gtk_widget_class_bind_template_callback (widget_class, 
gs_details_page_license_tile_get_involved_activated_cb);
        gtk_widget_class_bind_template_callback (widget_class, 
gs_details_page_translation_infobar_response_cb);
-       gtk_widget_class_bind_template_callback (widget_class, gs_details_page_write_review_cb);
        gtk_widget_class_bind_template_callback (widget_class, gs_details_page_star_pressed_cb);
        gtk_widget_class_bind_template_callback (widget_class, gs_details_page_app_install_button_cb);
        gtk_widget_class_bind_template_callback (widget_class, gs_details_page_app_update_button_cb);
@@ -2320,6 +2320,9 @@ gs_details_page_init (GsDetailsPage *self)
        g_signal_connect (self->list_box_version_history, "row-activated",
                          G_CALLBACK (version_history_list_row_activated_cb), self);
 
+       g_signal_connect_swapped (self->list_box_reviews_summary, "row-activated",
+                                 G_CALLBACK (gs_details_page_write_review), self);
+
        gs_page_set_header_end_widget (GS_PAGE (self), self->origin_box);
 
        gs_details_page_read_packaging_format_preference (self);
diff --git a/src/gs-details-page.ui b/src/gs-details-page.ui
index 72848a463..2484d3f59 100644
--- a/src/gs-details-page.ui
+++ b/src/gs-details-page.ui
@@ -799,28 +799,58 @@
                                       </object>
                                     </child>
                                     <child>
-                                      <object class="GsReviewHistogram" id="histogram">
-                                        <property name="visible">False</property>
-                                        <property name="halign">start</property>
-                                        <property name="valign">center</property>
-                                        <property name="margin_bottom">32</property>
-                                      </object>
-                                    </child>
-                                    <child>
-                                      <object class="GtkButton" id="button_review">
-                                        <property name="visible">False</property>
-                                        <property name="use_underline">True</property>
-                                        <property name="label" translatable="yes" comments="Translators: 
Button opening a dialog where the users can write and publish their opinions about the apps.">_Write a 
Review</property>
+                                      <object class="GtkListBox" id="list_box_reviews_summary">
                                         <property name="can_focus">True</property>
-                                        <property name="halign">start</property>
+                                        <property name="selection_mode">none</property>
                                         <property name="valign">start</property>
-                                        <property name="margin_bottom">18</property>
-                                        <signal name="clicked" handler="gs_details_page_write_review_cb"/>
+                                        <style>
+                                          <class name="boxed-list"/>
+                                        </style>
+                                        <child>
+                                          <object class="GtkListBoxRow">
+                                            <property name="activatable">False</property>
+                                            <child>
+                                              <object class="GsReviewHistogram" id="histogram">
+                                                <property name="visible">False</property>
+                                                <property name="halign">start</property>
+                                                <property name="valign">center</property>
+                                              </object>
+                                            </child>
+                                          </object>
+                                        </child>
+                                        <child>
+                                          <object class="GtkListBoxRow" id="button_review">
+                                            <property name="can_focus">True</property>
+                                            <child>
+                                              <object class="GtkBox">
+                                                <property name="orientation">horizontal</property>
+                                                <property name="halign">center</property>
+                                                <property name="margin_top">12</property>
+                                                <property name="margin_bottom">12</property>
+                                                <child>
+                                                  <object class="GtkLabel">
+                                                    <property name="xalign">0</property>
+                                                    <property name="yalign">0.5</property>
+                                                    <property name="use_underline">True</property>
+                                                    <property name="label" translatable="yes" 
comments="Translators: Button opening a dialog where the users can write and publish their opinions about the 
apps.">_Write Review</property>
+                                                  </object>
+                                                </child>
+                                                <child>
+                                                  <object class="GtkImage">
+                                                    <property name="icon-name">go-next-symbolic</property>
+                                                    <property name="margin_start">6</property>
+                                                  </object>
+                                                </child>
+                                              </object>
+                                            </child>
+                                          </object>
+                                        </child>
                                       </object>
                                     </child>
                                     <child>
                                       <object class="GtkListBox" id="list_box_reviews">
                                         <property name="can_focus">True</property>
+                                        <property name="margin_top">12</property>
                                         <property name="selection_mode">none</property>
                                         <property name="valign">start</property>
                                         <style>
diff --git a/src/gs-review-histogram.ui b/src/gs-review-histogram.ui
index fff8baf2b..e6644725e 100644
--- a/src/gs-review-histogram.ui
+++ b/src/gs-review-histogram.ui
@@ -6,10 +6,10 @@
       <object class="GtkGrid" id="grid1">
         <property name="row-spacing">6</property>
         <property name="column-spacing">6</property>
-        <property name="margin-top">6</property>
-        <property name="margin-bottom">6</property>
-        <property name="margin-start">6</property>
-        <property name="margin-end">6</property>
+        <property name="margin-top">12</property>
+        <property name="margin-bottom">12</property>
+        <property name="margin-start">12</property>
+        <property name="margin-end">12</property>
        <child>
           <object class="GtkLabel" id="label_value">
            <property name="halign">start</property>