[nautilus/wip/csoriano/konami] toolbar: Konamy shine toolbar when new operation happens

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit 31719167d59996492a6151b2e20d0ee9667a8382
Author: Carlos Soriano <csoriano gnome org>
Date:   Fri Nov 13 14:10:55 2015 +0100

    toolbar: Konamy shine toolbar when new operation happens
    
    We had few reports explaining that the operations button is not
    noticeable enough when it appears.
    In an effort to make more evident that the operations button
    appeared, shine the whole toolbar with a delicate Konami effect.

 src/nautilus-toolbar.c        |   53 +++++++++++++++++++++++++++++++++++++++-
 src/resources/css/Adwaita.css |   21 +++++++++++----
 2 files changed, 66 insertions(+), 8 deletions(-)
---
diff --git a/src/nautilus-toolbar.c b/src/nautilus-toolbar.c
index 6e2a74a..8826a0a 100644
--- a/src/nautilus-toolbar.c
+++ b/src/nautilus-toolbar.c
@@ -41,7 +41,8 @@
 #include <math.h>
 
 #define OPERATION_MINIMUM_TIME 2 //s
-#define NEEDS_ATTENTION_ANIMATION_TIMEOUT 2000 //ms
+#define OPERATIONS_BUTTON_NEEDS_ATTENTION_ANIMATION_TIMEOUT 2000 //ms
+#define TOOLBAR_NEEDS_ATTENTION_ANIMATION_TIMEOUT 600 //ms
 #define REMOVE_FINISHED_OPERATIONS_TIEMOUT 3 //s
 
 typedef enum {
@@ -64,6 +65,7 @@ struct _NautilusToolbarPrivate {
         guint start_operations_timeout_id;
         guint remove_finished_operations_timeout_id;
         guint operations_button_attention_timeout_id;
+        guint toolbar_attention_timeout_id;
 
        GtkWidget *operations_button;
        GtkWidget *view_button;
@@ -469,11 +471,56 @@ add_operations_button_attention_style (NautilusToolbar *self)
 
         gtk_style_context_add_class (style_context,
                                      "nautilus-operations-button-needs-attention");
-        self->priv->operations_button_attention_timeout_id = g_timeout_add 
(NEEDS_ATTENTION_ANIMATION_TIMEOUT,
+        self->priv->operations_button_attention_timeout_id = g_timeout_add 
(OPERATIONS_BUTTON_NEEDS_ATTENTION_ANIMATION_TIMEOUT,
                                                                             (GSourceFunc) 
on_remove_operations_button_attention_style_timeout,
                                                                             self);
 }
 
+static void
+remove_toolbar_attention_style (NautilusToolbar *self)
+{
+        GtkStyleContext *style_context;
+
+        style_context = gtk_widget_get_style_context (GTK_WIDGET (self));
+        gtk_style_context_remove_class (style_context,
+                                        "nautilus-toolbar-needs-attention");
+}
+
+static gboolean
+on_remove_toolbar_attention_style_timeout (NautilusToolbar *self)
+{
+        remove_toolbar_attention_style (self);
+        self->priv->toolbar_attention_timeout_id = 0;
+
+        return G_SOURCE_REMOVE;
+}
+
+static void
+unschedule_toolbar_attention_style (NautilusToolbar *self)
+{
+        if (self->priv->toolbar_attention_timeout_id!= 0) {
+                g_source_remove (self->priv->toolbar_attention_timeout_id);
+                self->priv->toolbar_attention_timeout_id = 0;
+        }
+}
+
+static void
+add_toolbar_attention_style (NautilusToolbar *self)
+{
+        GtkStyleContext *style_context;
+
+        style_context = gtk_widget_get_style_context (GTK_WIDGET (self));
+
+        unschedule_toolbar_attention_style (self);
+        remove_toolbar_attention_style (self);
+
+        gtk_style_context_add_class (style_context,
+                                     "nautilus-toolbar-needs-attention");
+        self->priv->toolbar_attention_timeout_id = g_timeout_add (TOOLBAR_NEEDS_ATTENTION_ANIMATION_TIMEOUT,
+                                                                            (GSourceFunc) 
on_remove_toolbar_attention_style_timeout,
+                                                                            self);
+}
+
 /* It's not the most beautiful solution, but we need to check wheter all windows
  * have it's button inactive, so the toolbar can schedule to remove the operations
  * only in that case to avoid other windows to show an empty popover in the oposite
@@ -605,6 +652,7 @@ update_operations (NautilusToolbar *self)
         if (should_show_progress_button &&
             !gtk_revealer_get_reveal_child (GTK_REVEALER (self->priv->operations_revealer))) {
                 add_operations_button_attention_style (self);
+                add_toolbar_attention_style (self);
                 gtk_revealer_set_reveal_child (GTK_REVEALER (self->priv->operations_revealer),
                                                TRUE);
                 gtk_widget_queue_draw (self->priv->operations_icon);
@@ -848,6 +896,7 @@ nautilus_toolbar_finalize (GObject *obj)
         unschedule_remove_finished_operations (self);
         unschedule_operations_start (self);
         unschedule_operations_button_attention_style (self);
+        unschedule_toolbar_attention_style (self);
 
         g_signal_handlers_disconnect_by_data (self->priv->progress_manager, self);
         g_clear_object (&self->priv->progress_manager);
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 4abe735..b39f80d 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -44,19 +44,28 @@
 
 /* Here we use the .button background-image colors from Adwaita, but ligthen them,
  * since is not possible to use lighten () in common css. */
- keyframes needs_attention_keyframes {
+ keyframes button_needs_attention_keyframes {
     0% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
     /* can't do animation-direction, so holding the color on two keyframes */
     30% {background-image: linear-gradient(to bottom, @theme_base_color); border-color: @theme_fg_color; } 
     90% {background-image: linear-gradient(to bottom, @theme_base_color); border-color: @theme_fg_color; }
     100% {background-image: linear-gradient(to bottom, #fafafa, #ededed 40%,  #e0e0e0); border-color: 
@borders; }
 }
-.nautilus-operations-button-needs-attention {
-  animation: needs_attention_keyframes 2s ease-in-out;
+
+ keyframes toolbar_needs_attention_keyframes {
+    0% {background-position: -30%; }
+    100% {background-position: 130%; }
+}
+
+.nautilus-toolbar-needs-attention {
+  background-image: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 45%, 
rgba(255,255,255,1) 55%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, #fff 2%, #f7f7f7 2%, #ededed 
98%, #d9d9d9 100%);
+  background-size: 200px;
+  background-repeat: no-repeat, repeat-x;
+  animation: toolbar_needs_attention_keyframes 600ms ease-in-out;
 }
-.nautilus-operations-button-needs-attention-multiple {
-  animation: needs_attention_keyframes 3s ease-in-out;
-  animation-iteration-count: 3;
+
+.nautilus-operations-button-needs-attention {
+  animation: button_needs_attention_keyframes 2s ease-in-out;
 }
 
 /* Floating status bar */