[gnome-control-center] fingerprint-dialog: Wiggle the enroll status label on retry events

[Robert Ancell <rancell src gnome org>]

commit 29add4ed511ce6bb8c0488b9b578f7c7db9031cd
Author: Marco Trevisan (Treviño) <mail 3v1n0 net>
Date:   Tue Apr 14 20:50:51 2020 +0200

    fingerprint-dialog: Wiggle the enroll status label on retry events
    
    When a retry event happens we need to wiggle the label, unfortunately we
    can't just use translate operations via CSS so we need to simulate it using
    padding.
    
    Also we have to manually reset the retry class once the animation is done
    otherwise gtk won't re-animate again once the class is added (in the same
    paint cycle).

 panels/user-accounts/cc-fingerprint-dialog.c       | 13 ++++++++++---
 panels/user-accounts/cc-fingerprint-dialog.ui      |  3 ++-
 .../user-accounts/data/cc-fingerprint-dialog.css   | 22 ++++++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
---
diff --git a/panels/user-accounts/cc-fingerprint-dialog.c b/panels/user-accounts/cc-fingerprint-dialog.c
index f3f5229c8..6a6036036 100644
--- a/panels/user-accounts/cc-fingerprint-dialog.c
+++ b/panels/user-accounts/cc-fingerprint-dialog.c
@@ -116,6 +116,7 @@ const char * FINGER_IDS[] = {
 
 typedef enum {
   ENROLL_STATE_NORMAL,
+  ENROLL_STATE_RETRY,
   ENROLL_STATE_SUCCESS,
   ENROLL_STATE_WARNING,
   ENROLL_STATE_ERROR,
@@ -125,6 +126,7 @@ typedef enum {
 
 const char * ENROLL_STATE_CLASSES[N_ENROLL_STATES] = {
   "",
+  "retry",
   "success",
   "warning",
   "error",
@@ -310,7 +312,7 @@ fingerprint_icon_new (const char *icon_name,
 
   box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 10);
   gtk_widget_set_name (box, "fingerprint-box");
-  gtk_widget_set_halign (box, GTK_ALIGN_CENTER);
+  gtk_widget_set_hexpand (box, TRUE);
 
   image = gtk_image_new_from_icon_name (icon_name, GTK_ICON_SIZE_DND);
 
@@ -632,8 +634,10 @@ static gboolean
 stage_passed_timeout_cb (gpointer user_data)
 {
   CcFingerprintDialog *self = user_data;
+  const char *current_message;
 
-  set_enroll_result_message (self, ENROLL_STATE_NORMAL, NULL);
+  current_message = gtk_label_get_label (self->enroll_result_message);
+  set_enroll_result_message (self, ENROLL_STATE_NORMAL, current_message);
   self->enroll_stage_passed_id = 0;
 
   return FALSE;
@@ -699,7 +703,10 @@ handle_enroll_signal (CcFingerprintDialog *self,
       is_swipe = g_str_equal (scan_type, "swipe");
 
       message = TR (enroll_result_str_to_msg (result, is_swipe));
-      set_enroll_result_message (self, ENROLL_STATE_NORMAL, message);
+      set_enroll_result_message (self, ENROLL_STATE_RETRY, message);
+
+      self->enroll_stage_passed_id =
+        g_timeout_add (850, stage_passed_timeout_cb, self);
     }
 
   if (done)
diff --git a/panels/user-accounts/cc-fingerprint-dialog.ui b/panels/user-accounts/cc-fingerprint-dialog.ui
index 076625740..2613d5edc 100644
--- a/panels/user-accounts/cc-fingerprint-dialog.ui
+++ b/panels/user-accounts/cc-fingerprint-dialog.ui
@@ -387,10 +387,11 @@
                         <property name="halign">fill</property>
                         <property name="valign">center</property>
                         <property name="vexpand">True</property>
+                        <property name="hexpand">True</property>
                         <property name="orientation">vertical</property>
                         <child>
                           <object class="GtkBox" id="enroll_print_bin">
-                            <property name="halign">center</property>
+                            <property name="hexpand">True</property>
                             <property name="visible">True</property>
                           </object>
                         </child>
diff --git a/panels/user-accounts/data/cc-fingerprint-dialog.css 
b/panels/user-accounts/data/cc-fingerprint-dialog.css
index 9f8ea1770..800d6582c 100644
--- a/panels/user-accounts/data/cc-fingerprint-dialog.css
+++ b/panels/user-accounts/data/cc-fingerprint-dialog.css
@@ -59,3 +59,25 @@
 .fingerprint-icon.enroll-status.error label:not(:backdrop) {
   color: @error_color;
 }
+
+@keyframes wiggle {
+  /* Unfortunately we can't use translation or xalign, so here's the workaround */
+  0% { padding-left: 0; padding-right: 0; }
+  10% { padding-left: 0; padding-right: 2px; }
+  20% { padding-left: 4px; padding-right: 0; }
+  30% { padding-left: 0; padding-right: 8px; }
+  40% { padding-left: 8px; padding-right: 0; }
+  50% { padding-left: 0; padding-right: 8px; }
+  60% { padding-left: 8px; padding-right: 0; }
+  70% { padding-left: 0; padding-right: 8px; }
+  80% { padding-left: 4px; padding-right: 0; }
+  90% { padding-left: 0; padding-right: 2px; }
+  100% { padding-left: 0; padding-right: 0; }
+}
+
+.fingerprint-icon.enroll-status.retry label {
+  animation-name: wiggle;
+  animation-duration: 850ms;
+  animation-timing-function: ease-in;
+  animation-iteration-count: 1;
+}