user-accounts: Animate the Carousel Arrow

https://bugzilla.gnome.org/show_bug.cgi?id=778405

2 files changed, 25 insertions, 4 deletions

diff --git a/panels/user-accounts/data/carousel.css b/panels/user-accounts/data/carousel.css
index 6dd847909..738562cee 100644
--- a/panels/user-accounts/data/carousel.css
+++ b/panels/user-accounts/data/carousel.css
@@ -12,6 +12,9 @@
 .carousel-arrow {
   border-bottom-color: @borders;
   margin-bottom: -1px;
+  animation-duration: 200ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
 }
 
 .carousel-inner-arrow {
diff --git a/panels/user-accounts/um-carousel.c b/panels/user-accounts/um-carousel.c
index 722d91036..6dc115f42 100644
--- a/panels/user-accounts/um-carousel.c
+++ b/panels/user-accounts/um-carousel.c
@@ -60,6 +60,7 @@ struct _UmCarousel {
         UmCarouselItem *selected_item;
         GtkWidget *last_box;
         GtkWidget *arrow;
+        gint arrow_start_x;
 
         /* Widgets */
         GtkStack *stack;
@@ -121,9 +122,13 @@ um_carousel_move_arrow (UmCarousel *self)
                 gtk_style_context_remove_provider (context, self->provider);
         g_clear_object (&self->provider);
 
-        css = g_strdup_printf ("* {\n"
-                               "  margin-left: %dpx;\n"
-                               "}\n", end_x);
+        css = g_strdup_printf ("@keyframes arrow_keyframes-%d {\n"
+                               "  from { margin-left: %dpx; }\n"
+                               "  to { margin-left: %dpx; }\n"
+                               "}\n"
+                               "* {\n"
+                               "  animation-name: arrow_keyframes-%d;\n"
+                               "}\n", end_x, self->arrow_start_x, end_x, end_x);
 
         self->provider = GTK_STYLE_PROVIDER (gtk_css_provider_new ());
         gtk_css_provider_load_from_data (GTK_CSS_PROVIDER (self->provider), css, -1, NULL);
@@ -187,6 +192,9 @@ on_item_toggled (UmCarouselItem *item,
 {
         UmCarousel *self = UM_CAROUSEL (user_data);
 
+        if (self->selected_item != NULL)
+                self->arrow_start_x = um_carousel_item_get_x (self->selected_item, self);
+
         self->selected_item = item;
 
         g_signal_emit (user_data, signals[ITEM_ACTIVATED], 0, item);
@@ -342,6 +350,16 @@ um_carousel_class_init (UmCarouselClass *klass)
 }
 
 static void
+on_size_allocate (UmCarousel *self)
+{
+       if (self->selected_item == NULL)
+               return;
+
+       self->arrow_start_x = um_carousel_item_get_x (self->selected_item, self);
+       um_carousel_move_arrow (self);
+}
+
+static void
 um_carousel_init (UmCarousel *self)
 {
         GtkStyleProvider *provider;
@@ -358,5 +376,5 @@ um_carousel_init (UmCarousel *self)
 
         g_object_unref (provider);
 
-        g_signal_connect_swapped (self->stack, "size-allocate", G_CALLBACK (um_carousel_move_arrow), self);
+        g_signal_connect_swapped (self->stack, "size-allocate", G_CALLBACK (on_size_allocate), self);
 }