Merge branch 'user-avatar-button' into 'master'

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

Closes #174

See merge request GNOME/gnome-initial-setup!182

5 files changed, 33 insertions, 8 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;
+}
diff --git a/gnome-initial-setup/pages/goa/goa.gresource.xml b/gnome-initial-setup/pages/goa/goa.gresource.xml
index 045858c..3bd0267 100644
--- a/gnome-initial-setup/pages/goa/goa.gresource.xml
+++ b/gnome-initial-setup/pages/goa/goa.gresource.xml
@@ -5,4 +5,3 @@
     <file alias="gis-goa-page.css">gis-goa-page.css</file>
   </gresource>
 </gresources>
-