[libhandy] avatar: Draw background for custom images

[Alexander Mikhaylenko <alexm src gnome org>]

commit 024fcfa18ff8649ee3d1fa842ea24c9624d42f80
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Oct 3 04:21:28 2020 +0500

    avatar: Draw background for custom images
    
    Instead, add a style class and remove it manually in the stylesheet.
    This will also help in GTK4 where we cannot disable the background.
    
    See https://twitter.com/DanielFore/status/1312142389033664512
    
    Fixes https://gitlab.gnome.org/GNOME/libhandy/-/issues/352

 src/hdy-avatar.c                   | 8 ++++++++
 src/themes/Adwaita-dark.css        | 8 +++++---
 src/themes/Adwaita.css             | 8 +++++---
 src/themes/HighContrast.css        | 8 +++++---
 src/themes/HighContrastInverse.css | 8 +++++---
 src/themes/_fallback-base.scss     | 2 ++
 src/themes/fallback.css            | 2 ++
 7 files changed, 32 insertions(+), 12 deletions(-)
---
diff --git a/src/hdy-avatar.c b/src/hdy-avatar.c
index 1311b738..97f2d620 100644
--- a/src/hdy-avatar.c
+++ b/src/hdy-avatar.c
@@ -146,6 +146,7 @@ update_custom_image (HdyAvatar *self)
   g_autoptr (GdkPixbuf) pixbuf = NULL;
   gint scale_factor;
   gint new_size;
+  GtkStyleContext *context = gtk_widget_get_style_context (GTK_WIDGET (self));
 
   scale_factor = gtk_widget_get_scale_factor (GTK_WIDGET (self));
   new_size = MIN (gtk_widget_get_allocated_width (GTK_WIDGET (self)),
@@ -164,6 +165,11 @@ update_custom_image (HdyAvatar *self)
       self->round_image_size = new_size;
     }
   }
+
+  if (self->round_image)
+    gtk_style_context_add_class (context, "image");
+  else
+    gtk_style_context_remove_class (context, "image");
 }
 
 static void
@@ -363,6 +369,8 @@ hdy_avatar_draw (GtkWidget *widget,
     cairo_set_source_surface (cr, self->round_image, x, y);
     cairo_paint (cr);
 
+    gtk_render_background (context, cr, x, y, size, size);
+
     return FALSE;
   }
 
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index cd5441d7..74fe5885 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -71,6 +71,8 @@ avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8
 
 avatar.contrasted { color: #fff; }
 
+avatar.image { background: none; }
+
 viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 /*************************** Check and Radio buttons * */
@@ -168,11 +170,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#353535, #2d2d2d, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#eeeeec, #2d2d2d, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#eeeeec, #2d2d2d, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#1b1b1b, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -182,7 +184,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index b7f09037..1e3ec685 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -71,6 +71,8 @@ avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8
 
 avatar.contrasted { color: #fff; }
 
+avatar.image { background: none; }
+
 viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 /*************************** Check and Radio buttons * */
@@ -168,11 +170,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#f6f5f4, #ffffff, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#2e3436, #ffffff, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#2e3436, #ffffff, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#cdc7c2, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -182,7 +184,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 20bf2281..2cadd949 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -71,6 +71,8 @@ avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8
 
 avatar.contrasted { color: #fff; }
 
+avatar.image { background: none; }
+
 viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 /*************************** Check and Radio buttons * */
@@ -168,11 +170,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#fdfdfc, #ffffff, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#272c2e, #ffffff, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#272c2e, #ffffff, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#877b6e, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -182,7 +184,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index ed846282..d1951f8a 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -71,6 +71,8 @@ avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8
 
 avatar.contrasted { color: #fff; }
 
+avatar.image { background: none; }
+
 viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 /*************************** Check and Radio buttons * */
@@ -168,11 +170,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#303030, #2d2d2d, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#f3f3f1, #2d2d2d, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#f3f3f1, #2d2d2d, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#686868, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -182,7 +184,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index b821d956..b0a93e7c 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -136,6 +136,8 @@ avatar {
   }
 
   &.contrasted { color: #fff; }
+
+  &.image { background: none; }
 }
 
 // HdyViewSwitcherTitle
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 8c1d89b1..94eda289 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -71,4 +71,6 @@ avatar.color14 { background-image: linear-gradient(#c0bfbc, #6e6d71); color: #d8
 
 avatar.contrasted { color: #fff; }
 
+avatar.image { background: none; }
+
 viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }