From 0f2d408c1a3ec818f3f59fce5a04aeae88f2ef6c Mon Sep 17 00:00:00 2001
From: Niels De Graef <nielsdegraef@gmail.com>
Date: Mon, 20 Feb 2023 22:44:34 +0100
Subject: 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
---
 data/contacts.gresource.xml         |  1 +
 data/ui/contacts-editable-avatar.ui | 47 +++++++++++++++++++++++++++++++++++++
 data/ui/style.css                   |  6 +++--
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 data/ui/contacts-editable-avatar.ui

(limited to 'data')

diff --git a/data/contacts.gresource.xml b/data/contacts.gresource.xml
index 3d46685..e9158c1 100644
--- a/data/contacts.gresource.xml
+++ b/data/contacts.gresource.xml
@@ -18,6 +18,7 @@
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-avatar-selector.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-contact-pane.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-crop-dialog.ui</file>
+    <file compressed="true" preprocess="xml-stripblanks">ui/contacts-editable-avatar.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-editor-menu.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-link-suggestion-grid.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/contacts-main-window.ui</file>
diff --git a/data/ui/contacts-editable-avatar.ui b/data/ui/contacts-editable-avatar.ui
new file mode 100644
index 0000000..1f2261f
--- /dev/null
+++ b/data/ui/contacts-editable-avatar.ui
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="ContactsEditableAvatar" parent="GtkWidget">
+    <child>
+      <object class="GtkOverlay" id="overlay">
+        <child type="overlay">
+          <object class="AdwBin">
+            <property name="halign">end</property>
+            <property name="valign">start</property>
+            <style>
+              <class name="contacts-cutout-button"/>
+            </style>
+            <child>
+              <object class="GtkButton">
+                <property name="action-name">edit-avatar</property>
+                <property name="icon-name">document-edit-symbolic</property>
+                <property name="tooltip-text" translatable="yes">Change Avatar</property>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child type="overlay">
+          <object class="AdwBin">
+            <property name="halign">end</property>
+            <property name="valign">end</property>
+            <style>
+              <class name="contacts-cutout-button"/>
+            </style>
+            <child>
+              <object class="GtkButton">
+                <property name="action-name">delete-avatar</property>
+                <property name="icon-name">user-trash-symbolic</property>
+                <property name="tooltip-text" translatable="yes">Remove Avatar</property>
+                <style>
+                  <class name="circular"/>
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/data/ui/style.css b/data/ui/style.css
index f33ee8d..6593344 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -31,9 +31,11 @@
   font-size: 20px;
 }
 
-flowboxchild.circular {
-  padding: 4px;
+/* Used to provide a little cutout around an overlayed circular button */
+.contacts-cutout-button {
+  background-color: @window_bg_color;
   border-radius: 9999px;
+  padding: 2px;
 }
 
 /* Contact Sheet/Editor common */
-- 
cgit v1.2.1