Merge lp:~elementary-pantheon/pantheon-greeter/shake-css into lp:~elementary-pantheon/pantheon-greeter/trunk

[Danielle Foré]

Use Gtk.CSS to do shake animation instead of Clutter

Tada

[lp:~elementary-pantheon/pantheon-greeter/shake-css]

457. By Danielle Foré on 2016-06-14

reduce timeout duration

[Adam Bieńkowski (donadigo)]

Looks & works well.

review: Approve (code / testing)

=== modified file 'src/CredentialsAreaActor.vala'
--- src/CredentialsAreaActor.vala	2016-06-09 23:38:29 +0000
+++ src/CredentialsAreaActor.vala	2016-06-14 16:52:43 +0000
@@ -22,6 +22,20 @@
     CredentialsArea credentials;
     public string current_session { get; set; }
 
+    const string SHAKE_STYLE_CSS = """
+        @keyframes shake {
+	        0% { padding-left: 0 }
+	        25% { padding-left: 64px }
+	        50% { padding-left: 0 }
+	        75% { padding-left: 32px }
+	        100% { padding-left: 0}
+        }
+
+        .shake {
+	        animation: shake 0.4s ease-in-out 1;
+        }
+    """;
+
     /**
      * Fired when the user has replied to a prompt (aka: password,
      * login-button was pressed). Should get forwarded to the
@@ -49,6 +63,14 @@
         height = 188;
         credentials = null;
 
+        var provider = new Gtk.CssProvider ();
+        try {
+            provider.load_from_data (SHAKE_STYLE_CSS, SHAKE_STYLE_CSS.length);
+            Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        } catch (Error e) {
+            warning (e.message);
+        }        
+
         var login_name_label = new Gtk.Label (login_option.get_markup ());
         login_name_label.get_style_context ().add_class ("h2");
         login_name_label.set_xalign (0);
@@ -127,6 +149,14 @@
         }
     }
 
+    public void shake () {
+        revealer.get_style_context ().add_class ("shake");
+        Timeout.add (450, () => {
+            revealer.get_style_context ().remove_class ("shake");
+            return false;
+        });
+    }
+
     public void remove_credentials () {
         if (credentials != null) {
             grid.remove (credentials);

=== modified file 'src/LoginBox.vala'
--- src/LoginBox.vala	2016-06-09 23:38:58 +0000
+++ src/LoginBox.vala	2016-06-14 16:52:43 +0000
@@ -42,7 +42,6 @@
     public LoginBox (LoginOption user) {
         this.user = user;
         this.reactive = true;
-        this.pivot_point = Clutter.Point.alloc ().init (0.5f, 0.5f);
 
         create_credentials ();
 
@@ -94,32 +93,10 @@
         credentials_actor.pass_focus ();
     }
 
-    /* The relative positions to the previous one the shake function should
-     * use. The values get smaller because the shaking should fade out to
-     * look smooth.
-     */
-    float[] shake_positions = {50, -80, 60, -30, 50, -80, 30};
-
-    /**
-     * Shakes the LoginBox and then sets selected back to true.
-     */
-    void shake (int num = 0) {
-        if (num >= shake_positions.length) {
-            start_login ();
-            return;
-        }
-        var transition = new Clutter.PropertyTransition ("x");
-        transition.animatable = this;
-        transition.set_duration (60);
-        transition.set_progress_mode (Clutter.AnimationMode.EASE_IN_OUT_CIRC);
-        transition.set_from_value (this.x);
-        transition.set_to_value (this.x + shake_positions[num]);
-        transition.remove_on_complete = true;
-        transition.auto_reverse = false;
-        transition.completed.connect (() => {
-            shake (num + 1);
-        });
-        this.add_transition ("shake" + num.to_string (), transition);
+    void shake () {
+        credentials_actor.shake ();
+        start_login ();
+        return;
     }
 
     /* LoginMask interface */