toolbar: Konamy shine toolbar when new operation happenswip/csoriano/konami

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.

2 files changed, 66 insertions, 8 deletions

diff --git a/src/nautilus-toolbar.c b/src/nautilus-toolbar.c
index 6e2a74afe..8826a0ac1 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 4abe735e1..b39f80d1e 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 */