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

[Felipe Borges <felipeborges src gnome org>]

commit 77cc6bdaa8a125284692fbdf63188ec0a1a049b3
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  | 33 +++++++++++++++++-----
 panels/user-accounts/cc-user-panel.ui | 53 +++++++++++++++++++++++++++++++----
 2 files changed, 73 insertions(+), 13 deletions(-)
---
diff --git a/panels/user-accounts/cc-user-panel.c b/panels/user-accounts/cc-user-panel.c
index 157e1d492..bc3ec8cc4 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;
@@ -807,8 +810,9 @@ 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_edit_button), act_user_get_user_name 
(user));
 
         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);
@@ -892,6 +896,7 @@ change_name_done (CcUserPanel *self)
         if (g_strcmp0 (text, act_user_get_real_name (user)) != 0 &&
             is_valid_name (text)) {
                 act_user_set_real_name (user, text);
+                gtk_label_set_label (self->full_name_label, text);
         }
 }
 
@@ -901,6 +906,16 @@ change_name_focus_out (CcUserPanel *self)
         change_name_done (self);
 }
 
+static void
+full_name_edit_button_clicked (CcUserPanel *self)
+{
+        if (gtk_stack_get_visible_child (self->full_name_stack) == (GtkWidget*)self->full_name_label) {
+            gtk_stack_set_visible_child (self->full_name_stack, GTK_WIDGET (self->full_name_entry));
+        } else {
+            gtk_stack_set_visible_child (self->full_name_stack, GTK_WIDGET (self->full_name_label));
+        }
+}
+
 static void
 account_type_changed (CcUserPanel *self)
 {
@@ -1264,16 +1279,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 +1481,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);
@@ -1496,6 +1514,7 @@ cc_user_panel_class_init (CcUserPanelClass *klass)
         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);
+        gtk_widget_class_bind_template_callback (widget_class, full_name_edit_button_clicked);
         gtk_widget_class_bind_template_callback (widget_class, restart_now);
         gtk_widget_class_bind_template_callback (widget_class, set_selected_user);
         gtk_widget_class_bind_template_callback (widget_class, show_history);
diff --git a/panels/user-accounts/cc-user-panel.ui b/panels/user-accounts/cc-user-panel.ui
index 8aa64cd72..5f3644e8b 100644
--- a/panels/user-accounts/cc-user-panel.ui
+++ b/panels/user-accounts/cc-user-panel.ui
@@ -181,14 +181,55 @@
                       </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>
+                                <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="change_name_done" object="CcUserPanel" 
swapped="yes"/>
+                                <signal name="focus-out-event" handler="change_name_focus_out" 
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_clicked" 
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>