Add EditableAvatar custom widget

Rather than awkwardly shoehorning an `AdwAvatar` into a button, let's be
a bit more helpful and just overlay 2 buttons, one for editing and one
for deleting the avatar.

Fixes: https://gitlab.gnome.org/GNOME/gnome-contacts/-/issues/217
Fixes: https://gitlab.gnome.org/GNOME/gnome-contacts/-/issues/26

4 files changed, 83 insertions, 24 deletions

diff --git a/src/contacts-avatar-selector.vala b/src/contacts-avatar-selector.vala
index e9740c8..b6da6ff 100644
--- a/src/contacts-avatar-selector.vala
+++ b/src/contacts-avatar-selector.vala
@@ -70,8 +70,6 @@ private class Contacts.Thumbnail : Gtk.FlowBoxChild {
 [GtkTemplate (ui = "/org/gnome/Contacts/ui/contacts-avatar-selector.ui")]
 public class Contacts.AvatarSelector : Gtk.Window {
 
-  const string AVATAR_BUTTON_CSS_NAME = "avatar-button";
-
   public unowned Contact contact { get; construct set; }
 
   [GtkChild]
diff --git a/src/contacts-contact-editor.vala b/src/contacts-contact-editor.vala
index 26c5730..3383472 100644
--- a/src/contacts-contact-editor.vala
+++ b/src/contacts-contact-editor.vala
@@ -31,7 +31,6 @@ public class Contacts.ContactEditor : Gtk.Widget {
   private GenericArray<Persona?> personas = new GenericArray<Persona?> ();
 
   private unowned Gtk.Entry name_entry;
-  private unowned Avatar avatar;
 
   construct {
     var box_layout = new Gtk.BoxLayout (Gtk.Orientation.VERTICAL);
@@ -44,8 +43,8 @@ public class Contacts.ContactEditor : Gtk.Widget {
   public ContactEditor (Contact contact) {
     Object (contact: contact);
 
-    var header = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6);
-    header.append (create_widget_for_avatar (contact));
+    var header = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 12);
+    header.append (new EditableAvatar (contact, PROFILE_SIZE));
     header.append (create_name_entry (contact));
     header.set_parent (this);
 
@@ -88,25 +87,6 @@ public class Contacts.ContactEditor : Gtk.Widget {
     // they're still editing
   }
 
-  // Creates the contact's current avatar in a big button on top of the Editor
-  private Gtk.Widget create_widget_for_avatar (Contact contact) {
-    var avatar = new Avatar.for_contact (PROFILE_SIZE, contact);
-    this.avatar = avatar;
-
-    var button = new Gtk.Button ();
-    button.tooltip_text = _("Change avatar");
-    button.set_child (this.avatar);
-    button.clicked.connect (on_avatar_button_clicked);
-
-    return button;
-  }
-
-  // Show the avatar popover when the avatar is clicked
-  private void on_avatar_button_clicked (Gtk.Button avatar_button) {
-    var avatar_selector = new AvatarSelector (this.contact, get_root () as Gtk.Window);
-    avatar_selector.present ();
-  }
-
   // Creates the big name entry on the top
   private Gtk.Widget create_name_entry (Contact contact) {
     var entry = new Gtk.Entry ();
diff --git a/src/contacts-editable-avatar.vala b/src/contacts-editable-avatar.vala
new file mode 100644
index 0000000..4469ce8
--- /dev/null
+++ b/src/contacts-editable-avatar.vala
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2023 Niels De Graef <nielsdegraef@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+using Folks;
+
+/**
+ * The EditableAvatar is a custom widget that allows changing or unsetting a
+ * {@link Contact}'s avatar.
+ */
+[GtkTemplate (ui = "/org/gnome/Contacts/ui/contacts-editable-avatar.ui")]
+public class Contacts.EditableAvatar : Gtk.Widget {
+
+  [GtkChild]
+  private unowned Gtk.Overlay overlay;
+
+  public Contact contact { get; construct; }
+
+  public int avatar_size { get; set; }
+
+  static construct {
+    set_layout_manager_type (typeof (Gtk.BinLayout));
+
+    install_action ("edit-avatar", null, (Gtk.WidgetActionActivateFunc) on_edit_avatar);
+    install_action ("delete-avatar", null, (Gtk.WidgetActionActivateFunc) on_delete_avatar);
+  }
+
+  construct {
+    var avatar = new Avatar.for_contact (this.avatar_size, this.contact);
+    this.bind_property ("avatar-size", avatar, "avatar-size");
+    this.overlay.child = avatar;
+
+    var chunk = this.contact.get_most_relevant_chunk ("avatar", true);
+    if (chunk == null)
+      chunk = this.contact.create_chunk ("avatar", null);
+    unowned var avatar_chunk = (AvatarChunk) chunk;
+    action_set_enabled ("delete-avatar", avatar_chunk.avatar != null);
+    avatar_chunk.notify["avatar"].connect (on_avatar_chunk_notify);
+  }
+
+  public EditableAvatar (Contact contact, int size) {
+    Object (contact: contact, avatar_size: size);
+  }
+
+  public override void dispose () {
+    this.overlay.unparent ();
+    base.dispose ();
+  }
+
+  private void on_avatar_chunk_notify (Object object, ParamSpec pspec) {
+    unowned var avatar_chunk = (AvatarChunk) object;
+    action_set_enabled ("delete-avatar", avatar_chunk.avatar != null);
+  }
+
+  private void on_edit_avatar (string action_name, Variant? param) {
+    var selector = new AvatarSelector (this.contact,
+                                       get_root () as Gtk.Window);
+    selector.present ();
+  }
+
+  private void on_delete_avatar (string action_name, Variant? param) {
+    var avatar_chunk = this.contact.get_most_relevant_chunk ("avatar", true);
+    if (avatar_chunk == null)
+      avatar_chunk = this.contact.create_chunk ("avatar", null);
+    ((AvatarChunk) avatar_chunk).avatar = null;
+  }
+}
diff --git a/src/meson.build b/src/meson.build
index 821f240..dea4fa3 100644
--- a/src/meson.build
+++ b/src/meson.build
@@ -92,6 +92,7 @@ contacts_vala_sources = files(
   'contacts-contact-pane.vala',
   'contacts-contact-sheet.vala',
   'contacts-crop-dialog.vala',
+  'contacts-editable-avatar.vala',
   'contacts-link-suggestion-grid.vala',
   'contacts-main-window.vala',
   'contacts-qr-code-dialog.vala',