[gnome-control-center/wip/feborges/user-accounts-ui-improvements: 1/4] user-accounts: Make the full_name_entry and editable widget

[Felipe Borges <felipeborges src gnome org>]

commit f560613b48f806a05b09f30d17e3058b6b2cfd19
Author: Felipe Borges <felipeborges gnome org>
Date:   Mon Jan 13 12:34:22 2020 +0100

    user-accounts: Make the full_name_entry and editable widget
    
    According to the mockups at
    https://gitlab.gnome.org/Teams/Design/settings-mockups/blob/master/users/users.png
    
    Fixes #771

 panels/user-accounts/cc-user-panel.c  | 66 ++++++++++++++++++++++++++++-------
 panels/user-accounts/cc-user-panel.ui | 56 +++++++++++++++++++++++++----
 2 files changed, 103 insertions(+), 19 deletions(-)
---
diff --git a/panels/user-accounts/cc-user-panel.c b/panels/user-accounts/cc-user-panel.c
index 157e1d492..248920e96 100644
--- a/panels/user-accounts/cc-user-panel.c
+++ b/panels/user-accounts/cc-user-panel.c
@@ -76,6 +76,9 @@ struct _CcUserPanel {
         CcCarousel      *carousel;
         GtkButton       *fingerprint_button;
         GtkLabel        *fingerprint_label;
+        GtkStack        *full_name_stack;
+        GtkLabel        *full_name_label;
+        GtkToggleButton *full_name_edit_button;
         GtkEntry        *full_name_entry;
         GtkButton       *language_button;
         GtkLabel        *language_button_label;
@@ -792,6 +795,7 @@ get_autologin_possible (ActUser *user)
 }
 
 static void on_permission_changed (CcUserPanel *self);
+static void full_name_edit_button_toggled (CcUserPanel *self);
 
 static void
 show_user (ActUser *user, CcUserPanel *self)
@@ -807,8 +811,14 @@ show_user (ActUser *user, CcUserPanel *self)
 
         cc_avatar_chooser_set_user (self->avatar_chooser, user);
 
+        gtk_label_set_label (self->full_name_label, act_user_get_real_name (user));
         gtk_entry_set_text (self->full_name_entry, act_user_get_real_name (user));
-        gtk_widget_set_tooltip_text (GTK_WIDGET (self->full_name_entry), act_user_get_user_name (user));
+        gtk_widget_set_tooltip_text (GTK_WIDGET (self->full_name_label), act_user_get_user_name (user));
+
+        g_signal_handlers_block_by_func (self->full_name_edit_button, full_name_edit_button_toggled, self);
+        gtk_stack_set_visible_child (self->full_name_stack, GTK_WIDGET (self->full_name_label));
+        gtk_toggle_button_set_active (self->full_name_edit_button, FALSE);
+        g_signal_handlers_unblock_by_func (self->full_name_edit_button, full_name_edit_button_toggled, self);
 
         if (act_user_get_account_type (user) == ACT_USER_ACCOUNT_TYPE_ADMINISTRATOR)
                 gtk_toggle_button_set_active (GTK_TOGGLE_BUTTON (self->account_type_admin_button), TRUE);
@@ -881,24 +891,50 @@ show_user (ActUser *user, CcUserPanel *self)
 }
 
 static void
-change_name_done (CcUserPanel *self)
+full_name_entry_activate (CcUserPanel *self)
 {
         const gchar *text;
         ActUser *user;
 
         user = get_selected_user (self);
-
         text = gtk_entry_get_text (self->full_name_entry);
         if (g_strcmp0 (text, act_user_get_real_name (user)) != 0 &&
             is_valid_name (text)) {
                 act_user_set_real_name (user, text);
         }
+
+        gtk_toggle_button_set_active (self->full_name_edit_button, FALSE);
 }
 
 static void
-change_name_focus_out (CcUserPanel *self)
+full_name_edit_button_toggled (CcUserPanel *self)
+{
+        if (gtk_stack_get_visible_child (self->full_name_stack) == GTK_WIDGET (self->full_name_label)) {
+                gtk_stack_set_visible_child (self->full_name_stack, GTK_WIDGET (self->full_name_entry));
+
+                gtk_widget_grab_focus (GTK_WIDGET (self->full_name_entry));
+        } else {
+                gtk_stack_set_visible_child (self->full_name_stack, GTK_WIDGET (self->full_name_label));
+
+                full_name_entry_activate (self);
+        }
+}
+
+static gboolean
+full_name_entry_key_press_cb (CcUserPanel *self,
+                        GdkEvent    *event)
 {
-        change_name_done (self);
+        GdkEventKey *key = (GdkEventKey *)event;
+
+        if (key->keyval == GDK_KEY_Escape) {
+                gtk_entry_set_text (self->full_name_entry, act_user_get_real_name (self->selected_user));
+
+                full_name_entry_activate (self);
+
+                return TRUE;
+        }
+
+        return FALSE;
 }
 
 static void
@@ -1264,16 +1300,16 @@ on_permission_changed (CcUserPanel *self)
 
         /* The full name entry: insensitive if remote or not authorized and not self */
         if (!act_user_is_local_account (user)) {
-                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_entry), FALSE);
-                remove_unlock_tooltip (GTK_WIDGET (self->full_name_entry));
+                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_edit_button), FALSE);
+                remove_unlock_tooltip (GTK_WIDGET (self->full_name_stack));
 
         } else if (is_authorized || self_selected) {
-                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_entry), TRUE);
-                remove_unlock_tooltip (GTK_WIDGET (self->full_name_entry));
+                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_edit_button), TRUE);
+                remove_unlock_tooltip (GTK_WIDGET (self->full_name_stack));
 
         } else {
-                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_entry), FALSE);
-                add_unlock_tooltip (GTK_WIDGET (self->full_name_entry));
+                gtk_widget_set_sensitive (GTK_WIDGET (self->full_name_edit_button), FALSE);
+                add_unlock_tooltip (GTK_WIDGET (self->full_name_stack));
         }
 
         if (is_authorized || self_selected) {
@@ -1466,6 +1502,9 @@ cc_user_panel_class_init (CcUserPanelClass *klass)
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, carousel);
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, fingerprint_button);
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, fingerprint_label);
+        gtk_widget_class_bind_template_child (widget_class, CcUserPanel, full_name_stack);
+        gtk_widget_class_bind_template_child (widget_class, CcUserPanel, full_name_label);
+        gtk_widget_class_bind_template_child (widget_class, CcUserPanel, full_name_edit_button);
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, full_name_entry);
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, language_button);
         gtk_widget_class_bind_template_child (widget_class, CcUserPanel, language_button_label);
@@ -1491,8 +1530,9 @@ cc_user_panel_class_init (CcUserPanelClass *klass)
         gtk_widget_class_bind_template_callback (widget_class, autologin_changed);
         gtk_widget_class_bind_template_callback (widget_class, change_fingerprint);
         gtk_widget_class_bind_template_callback (widget_class, change_language);
-        gtk_widget_class_bind_template_callback (widget_class, change_name_done);
-        gtk_widget_class_bind_template_callback (widget_class, change_name_focus_out);
+        gtk_widget_class_bind_template_callback (widget_class, full_name_edit_button_toggled);
+        gtk_widget_class_bind_template_callback (widget_class, full_name_entry_activate);
+        gtk_widget_class_bind_template_callback (widget_class, full_name_entry_key_press_cb);
         gtk_widget_class_bind_template_callback (widget_class, change_password);
         gtk_widget_class_bind_template_callback (widget_class, delete_user);
         gtk_widget_class_bind_template_callback (widget_class, dismiss_notification);
diff --git a/panels/user-accounts/cc-user-panel.ui b/panels/user-accounts/cc-user-panel.ui
index 8aa64cd72..e9fa0ccf8 100644
--- a/panels/user-accounts/cc-user-panel.ui
+++ b/panels/user-accounts/cc-user-panel.ui
@@ -181,14 +181,58 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkEntry" id="full_name_entry">
+                      <object class="GtkBox">
                         <property name="visible">True</property>
-                        <property name="max-length">255</property>
-                        <property name="width-chars">18</property>
-                        <property name="max-width-chars">30</property>
                         <property name="valign">GTK_ALIGN_CENTER</property>
-                        <signal name="activate" handler="change_name_done" object="CcUserPanel" 
swapped="yes"/>
-                        <signal name="focus-out-event" handler="change_name_focus_out" object="CcUserPanel" 
swapped="yes"/>
+                        <property name="spacing">10</property>
+                        <child>
+                          <object class="GtkStack" id="full_name_stack">
+                            <property name="visible">True</property>
+                            <child>
+                              <object class="GtkLabel" id="full_name_label">
+                                <property name="visible">True</property>
+                                <property name="halign">GTK_ALIGN_START</property>
+                                <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+                                <property name="width-chars">18</property>
+                                <property name="max-width-chars">30</property>
+                                <attributes>
+                                  <attribute name="scale" value="1.2"/>
+                                  <attribute name="weight" value="bold"/>
+                                </attributes>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkEntry" id="full_name_entry">
+                                <property name="visible">True</property>
+                                <property name="max-length">255</property>
+                                <property name="width-chars">18</property>
+                                <property name="max-width-chars">30</property>
+                                <property name="valign">GTK_ALIGN_CENTER</property>
+                                <signal name="activate" handler="full_name_entry_activate" 
object="CcUserPanel" swapped="yes"/>
+                                <signal name="key-press-event" handler="full_name_entry_key_press_cb" 
object="CcUserPanel" swapped="yes"/>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton" id="full_name_edit_button">
+                            <property name="visible">True</property>
+                            <signal name="toggled" handler="full_name_edit_button_toggled" 
object="CcUserPanel" swapped="yes"/>
+                            <style>
+                              <class name="circular"/>
+                            </style>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="visible">True</property>
+                                <property name="margin">5</property>
+                                <property name="icon-name">document-edit-symbolic</property>
+                              </object>
+                            </child>
+                          </object>
+                          <packing>
+                            <property name="pack_type">end</property>
+                          </packing>
+                        </child>
                       </object>
                       <packing>
                         <property name="left_attach">1</property>