gis-account-page: Add a proper edit button to customize the user avatar

The user avatar can be customized by clicking in the user avatar itself. However, this isn't obvious.

With this change, the user avatar now displays an edit button.

Fixes https://gitlab.gnome.org/GNOME/gnome-initial-setup/-/issues/174

4 files changed, 33 insertions, 7 deletions

diff --git a/gnome-initial-setup/pages/account/account.gresource.xml b/gnome-initial-setup/pages/account/account.gresource.xml
index d698ba9..9a42216 100644
--- a/gnome-initial-setup/pages/account/account.gresource.xml
+++ b/gnome-initial-setup/pages/account/account.gresource.xml
@@ -5,5 +5,6 @@
     <file preprocess="xml-stripblanks" alias="gis-account-page.ui">gis-account-page.ui</file>
     <file preprocess="xml-stripblanks" alias="gis-account-page-local.ui">gis-account-page-local.ui</file>
     <file preprocess="xml-stripblanks" alias="gis-account-page-enterprise.ui">gis-account-page-enterprise.ui</file>
+    <file alias="gis-account-page.css">gis-account-page.css</file>
   </gresource>
 </gresources>
diff --git a/gnome-initial-setup/pages/account/gis-account-page-local.ui b/gnome-initial-setup/pages/account/gis-account-page-local.ui
index 67aaf9a..b398f7a 100644
--- a/gnome-initial-setup/pages/account/gis-account-page-local.ui
+++ b/gnome-initial-setup/pages/account/gis-account-page-local.ui
@@ -7,21 +7,35 @@
         <property name="valign">fill</property>
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkMenuButton" id="avatar_button">
+          <object class="GtkOverlay">
             <property name="margin_top">24</property>
             <property name="halign">center</property>
-            <style>
-              <class name="flat"/>
-            </style>
-            <accessibility>
-              <property name="description" translatable="yes">Avatar image</property>
-            </accessibility>
             <child>
               <object class="GtkImage" id="avatar_image">
                 <property name="pixel_size">96</property>
                 <property name="icon_name">avatar-default-symbolic</property>
               </object>
             </child>
+            <child type="overlay">
+              <object class="AdwBin">
+                <style>
+                  <class name="cutout-button"/>
+                </style>
+                <property name="halign">end</property>
+                <property name="valign">end</property>
+                <child>
+                  <object class="GtkMenuButton" id="avatar_button">
+                    <property name="icon-name">document-edit-symbolic</property>
+                    <accessibility>
+                      <property name="label" translatable="yes">Edit avatar</property>
+                    </accessibility>
+                    <style>
+                      <class name="circular"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </child>
           </object>
         </child>
         <child>
diff --git a/gnome-initial-setup/pages/account/gis-account-page.c b/gnome-initial-setup/pages/account/gis-account-page.c
index 04a8e54..cbc77f9 100644
--- a/gnome-initial-setup/pages/account/gis-account-page.c
+++ b/gnome-initial-setup/pages/account/gis-account-page.c
@@ -301,6 +301,12 @@ gis_account_page_class_init (GisAccountPageClass *klass)
 static void
 gis_account_page_init (GisAccountPage *page)
 {
+  g_autoptr(GtkCssProvider) provider = NULL;
+  provider = gtk_css_provider_new ();
+  gtk_css_provider_load_from_resource (provider, "/org/gnome/initial-setup/gis-account-page.css");
+  gtk_style_context_add_provider_for_display (gdk_display_get_default (),
+                                              GTK_STYLE_PROVIDER (provider),
+                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
   g_resources_register (account_get_resource ());
   g_type_ensure (GIS_TYPE_ACCOUNT_PAGE_LOCAL);
   g_type_ensure (GIS_TYPE_ACCOUNT_PAGE_ENTERPRISE);
diff --git a/gnome-initial-setup/pages/account/gis-account-page.css b/gnome-initial-setup/pages/account/gis-account-page.css
new file mode 100644
index 0000000..485edaa
--- /dev/null
+++ b/gnome-initial-setup/pages/account/gis-account-page.css
@@ -0,0 +1,5 @@
+.cutout-button {
+  background-color: @window_bg_color;
+  border-radius: 9999px;
+  padding: 2px;
+}