[gnome-software/1375-screenshots-next-prev-buttons-aren-t-circular: 17/17] gs-screenshot-carousel: Make prev/next buttons circular

[Milan Crha <mcrha src gnome org>]

commit ad6e01f3f2405964b2eb93f066553341953c622e
Author: Milan Crha <mcrha redhat com>
Date:   Tue Sep 7 15:55:56 2021 +0200

    gs-screenshot-carousel: Make prev/next buttons circular
    
    Tweak the .ui file to have the two buttons circular and look
    similar as those in the featured carousel.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1375

 src/gs-screenshot-carousel.c  | 31 +++++++++++++++++++++++++++++++
 src/gs-screenshot-carousel.ui | 20 ++++++++++++++------
 2 files changed, 45 insertions(+), 6 deletions(-)
---
diff --git a/src/gs-screenshot-carousel.c b/src/gs-screenshot-carousel.c
index f6b0da0df..a06037e2d 100644
--- a/src/gs-screenshot-carousel.c
+++ b/src/gs-screenshot-carousel.c
@@ -46,8 +46,10 @@ struct _GsScreenshotCarousel
        gboolean                 has_screenshots;
 
        GtkWidget               *button_next;
+       GtkWidget               *button_next_image;
        GtkWidget               *button_next_revealer;
        GtkWidget               *button_previous;
+       GtkWidget               *button_previous_image;
        GtkWidget               *button_previous_revealer;
        GtkWidget               *carousel;
        GtkWidget               *carousel_indicator;
@@ -233,6 +235,28 @@ gs_screenshot_carousel_button_next_clicked_cb (GsScreenshotCarousel *self)
                            HDY_NAVIGATION_DIRECTION_FORWARD);
 }
 
+static void
+gs_screenshot_carousel_navigate_button_direction_changed_cb (GtkWidget        *widget,
+                                                            GtkTextDirection  previous_direction,
+                                                            gpointer          user_data)
+{
+       const gchar *ltr_icon_name, *rtl_icon_name, *icon_name;
+
+       g_assert (g_strcmp0 (gtk_widget_get_name (widget), "previous") == 0 ||
+                 g_strcmp0 (gtk_widget_get_name (widget), "next") == 0);
+
+       if (g_strcmp0 (gtk_widget_get_name (widget), "previous") == 0) {
+               ltr_icon_name = "carousel-arrow-previous-symbolic";
+               rtl_icon_name = "carousel-arrow-next-symbolic";
+       } else {
+               ltr_icon_name = "carousel-arrow-next-symbolic";
+               rtl_icon_name = "carousel-arrow-previous-symbolic";
+       }
+
+       icon_name = (gtk_widget_get_direction (widget) == GTK_TEXT_DIR_RTL) ? rtl_icon_name : ltr_icon_name;
+       gtk_image_set_from_icon_name (GTK_IMAGE (widget), icon_name, GTK_ICON_SIZE_MENU);
+}
+
 static void
 gs_screenshot_carousel_get_property (GObject *object, guint prop_id, GValue *value, GParamSpec *pspec)
 {
@@ -299,8 +323,10 @@ gs_screenshot_carousel_class_init (GsScreenshotCarouselClass *klass)
        gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/Software/gs-screenshot-carousel.ui");
 
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_next);
+       gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_next_image);
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_next_revealer);
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_previous);
+       gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_previous_image);
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, button_previous_revealer);
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, carousel);
        gtk_widget_class_bind_template_child (widget_class, GsScreenshotCarousel, carousel_indicator);
@@ -309,6 +335,7 @@ gs_screenshot_carousel_class_init (GsScreenshotCarouselClass *klass)
        gtk_widget_class_bind_template_callback (widget_class, gs_screenshot_carousel_notify_position_cb);
        gtk_widget_class_bind_template_callback (widget_class, 
gs_screenshot_carousel_button_previous_clicked_cb);
        gtk_widget_class_bind_template_callback (widget_class, gs_screenshot_carousel_button_next_clicked_cb);
+       gtk_widget_class_bind_template_callback (widget_class, 
gs_screenshot_carousel_navigate_button_direction_changed_cb);
 
        gtk_widget_class_set_css_name (widget_class, "screenshot-carousel");
 }
@@ -318,6 +345,10 @@ gs_screenshot_carousel_init (GsScreenshotCarousel *self)
 {
        gtk_widget_init_template (GTK_WIDGET (self));
 
+       /* Ensure the arrow direction matches the text direction */
+       gs_screenshot_carousel_navigate_button_direction_changed_cb (GTK_WIDGET (self->button_next_image), 
GTK_TEXT_DIR_NONE, self);
+       gs_screenshot_carousel_navigate_button_direction_changed_cb (GTK_WIDGET 
(self->button_previous_image), GTK_TEXT_DIR_NONE, self);
+
 #if HDY_CHECK_VERSION(1, 3, 0)
        /* Disable scrolling through the carousel, as it’s typically used
         * in application pages which are themselves scrollable. */
diff --git a/src/gs-screenshot-carousel.ui b/src/gs-screenshot-carousel.ui
index d887b1128..2c9ec6f1d 100644
--- a/src/gs-screenshot-carousel.ui
+++ b/src/gs-screenshot-carousel.ui
@@ -31,6 +31,9 @@
                 <child>
                   <object class="GtkButton" id="button_previous">
                     <property name="visible">True</property>
+                    <property name="width-request">64</property>
+                    <property name="height-request">64</property>
+                    <property name="margin">9</property>
                     <signal name="clicked" handler="gs_screenshot_carousel_button_previous_clicked_cb" 
swapped="yes"/>
                     <child internal-child="accessible">
                       <object class="AtkObject">
@@ -40,16 +43,17 @@
                     </child>
                     <style>
                       <class name="circular"/>
-                      <class name="image-button"/>
                       <class name="osd"/>
                     </style>
                     <child>
-                      <object class="GtkImage">
+                      <object class="GtkImage" id="button_previous_image">
                         <property name="halign">center</property>
-                        <property name="icon-name">go-previous-symbolic</property>
+                        <property name="icon-name">carousel-arrow-previous-symbolic</property>
                         <property name="icon-size">1</property>
                         <property name="valign">center</property>
                         <property name="visible">True</property>
+                        <property name="name">previous</property>
+                        <signal name="direction-changed" 
handler="gs_screenshot_carousel_navigate_button_direction_changed_cb"/>
                       </object>
                     </child>
                   </object>
@@ -68,6 +72,9 @@
                 <child>
                   <object class="GtkButton" id="button_next">
                     <property name="visible">True</property>
+                    <property name="width-request">64</property>
+                    <property name="height-request">64</property>
+                    <property name="margin">9</property>
                     <signal name="clicked" handler="gs_screenshot_carousel_button_next_clicked_cb" 
swapped="yes"/>
                     <child internal-child="accessible">
                       <object class="AtkObject">
@@ -77,16 +84,17 @@
                     </child>
                     <style>
                       <class name="circular"/>
-                      <class name="image-button"/>
                       <class name="osd"/>
                     </style>
                     <child>
-                      <object class="GtkImage">
+                      <object class="GtkImage" id="button_next_image">
                         <property name="halign">center</property>
-                        <property name="icon-name">go-next-symbolic</property>
+                        <property name="icon-name">carousel-arrow-next-symbolic</property>
                         <property name="icon-size">1</property>
                         <property name="valign">center</property>
                         <property name="visible">True</property>
+                        <property name="name">next</property>
+                        <signal name="direction-changed" 
handler="gs_screenshot_carousel_navigate_button_direction_changed_cb"/>
                       </object>
                     </child>
                   </object>