[gnome-builder/wip/gtk4-port: 258/736] libide/greeter: improve selection transitions

[Christian Hergert <chergert src gnome org>]

commit 8446539694bd624b34ece6ce85a4e08b5b10e96a
Author: Christian Hergert <chergert redhat com>
Date:   Thu Mar 31 00:17:23 2022 -0700

    libide/greeter: improve selection transitions

 src/libide/greeter/ide-greeter-row.c  | 16 ++++++++++++++--
 src/libide/greeter/ide-greeter-row.ui | 23 +++++++++++++++--------
 2 files changed, 29 insertions(+), 10 deletions(-)
---
diff --git a/src/libide/greeter/ide-greeter-row.c b/src/libide/greeter/ide-greeter-row.c
index 1152201ff..9a6ef2c70 100644
--- a/src/libide/greeter/ide-greeter-row.c
+++ b/src/libide/greeter/ide-greeter-row.c
@@ -23,9 +23,11 @@
 #include "config.h"
 
 #include <glib/gi18n.h>
-#include <libide-projects.h>
 #include <stdlib.h>
 
+#include <libide-gtk.h>
+#include <libide-projects.h>
+
 #include "ide-project-info-private.h"
 
 #include "ide-greeter-row.h"
@@ -36,6 +38,8 @@ typedef struct
 
   /* Template Widgets */
   GtkCheckButton *check_button;
+  GtkRevealer    *revealer;
+  GtkImage       *next_image;
   GtkLabel       *title;
   GtkLabel       *subtitle;
   GtkImage       *image;
@@ -171,6 +175,8 @@ ide_greeter_row_class_init (IdeGreeterRowClass *klass)
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/libide-greeter/ide-greeter-row.ui");
   gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, check_button);
   gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, image);
+  gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, next_image);
+  gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, revealer);
   gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, subtitle);
   gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, tags);
   gtk_widget_class_bind_template_child_private (widget_class, IdeGreeterRow, title);
@@ -366,5 +372,11 @@ ide_greeter_row_set_selection_mode (IdeGreeterRow *self,
 
   g_return_if_fail (IDE_IS_GREETER_ROW (self));
 
-  gtk_widget_set_visible (GTK_WIDGET (priv->check_button), selection_mode);
+  gtk_revealer_set_reveal_child (priv->revealer, selection_mode);
+  ide_object_animate (priv->next_image,
+                      IDE_ANIMATION_EASE_OUT_CUBIC,
+                      300,
+                      NULL,
+                      "opacity", selection_mode ? 0.0 : 1.0,
+                      NULL);
 }
diff --git a/src/libide/greeter/ide-greeter-row.ui b/src/libide/greeter/ide-greeter-row.ui
index 76f287ade..4a225e9b1 100644
--- a/src/libide/greeter/ide-greeter-row.ui
+++ b/src/libide/greeter/ide-greeter-row.ui
@@ -9,16 +9,22 @@
         <property name="margin-start">18</property>
         <property name="margin-end">18</property>
         <property name="orientation">horizontal</property>
-        <property name="spacing">12</property>
         <child>
-          <object class="GtkCheckButton" id="check_button">
-            <property name="margin-end">6</property>
-            <property name="valign">center</property>
-            <property name="visible">false</property>
+          <object class="GtkRevealer" id="revealer">
+            <property name="reveal-child">false</property>
+            <property name="transition-type">slide-right</property>
+            <child>
+              <object class="GtkCheckButton" id="check_button">
+                <property name="margin-end">12</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
           </object>
         </child>
         <child>
           <object class="GtkImage" id="image">
+            <property name="visible">false</property>
+            <property name="margin-end">18</property>
             <style>
               <class name="lowres-icon"/>
             </style>
@@ -51,14 +57,15 @@
         </child>
         <child>
           <object class="GtkBox" id="tags">
-            <property name="spacing">6</property>
+            <property name="margin-start">6</property>
+            <property name="spacing">3</property>
             <property name="valign">center</property>
           </object>
         </child>
         <child>
-          <object class="GtkImage">
+          <object class="GtkImage" id="next_image">
             <property name="icon-name">go-next-symbolic</property>
-            <property name="margin-start">6</property>
+            <property name="margin-start">12</property>
           </object>
         </child>
       </object>