[gnome-control-center/wip/feborges/new-users-panel: 8/8] user-accounts: Animate UmCarousel arrow

[Felipe Borges <felipeborges src gnome org>]

commit 5520e49183847847b968ab38ae0c5956bc1f22d2
Author: Felipe Borges <felipeborges gnome org>
Date:   Tue Dec 20 19:48:07 2016 +0100

    user-accounts: Animate UmCarousel arrow

 panels/user-accounts/data/carousel.css |    3 +++
 panels/user-accounts/um-carousel.c     |   19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)
---
diff --git a/panels/user-accounts/data/carousel.css b/panels/user-accounts/data/carousel.css
index ac74c8c..ae000bc 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: 0.3s;
+/*  animation-timing-function: linear;*/
+  animation-fill-mode: forwards;
 }
 
 .carousel-inner-arrow {
diff --git a/panels/user-accounts/um-carousel.c b/panels/user-accounts/um-carousel.c
index c07dc39..9a85b01 100644
--- a/panels/user-accounts/um-carousel.c
+++ b/panels/user-accounts/um-carousel.c
@@ -57,6 +57,7 @@ struct _UmCarousel {
         UmCarouselItem *selected_item;
         GtkWidget *last_box;
         GtkWidget *arrow;
+        gint arrow_start_x;
 
         /* Widgets */
         GtkStack *stack;
@@ -118,9 +119,14 @@ 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);
@@ -183,6 +189,9 @@ on_item_toggled (UmCarouselItem *item,
 {
         UmCarousel *self = UM_CAROUSEL (user_data);
 
+        if (self->selected_item != NULL && self->arrow_start_x > 0)
+                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);
@@ -227,6 +236,8 @@ um_carousel_goto_previous_page (GtkWidget *button,
         if (self->visible_page < 0)
                 self->visible_page = 0;
 
+        self->arrow_start_x = 0;
+
         /* Select first item of the page */
         um_carousel_select_item_at_index (self, self->visible_page * ITEMS_PER_PAGE);
 }
@@ -244,6 +255,8 @@ um_carousel_goto_next_page (GtkWidget *button,
         if (self->visible_page > last_page)
                 self->visible_page = last_page;
 
+        self->arrow_start_x = 0;
+
         /* Select first item of the page */
         um_carousel_select_item_at_index (self, self->visible_page * ITEMS_PER_PAGE);
 }