Fix masked image

Author: danirabbit

data/application.css

@@ -64,6 +64,10 @@ window,
     animation: urgent 1.25s ease-in-out;
 }
 
+masked-image {
+    margin: 5px 4px 3px;
+}
+
 @keyframes urgent {
     0% { -gtk-icon-transform: scale(1) rotate(0deg); }
     10% { -gtk-icon-transform: scale(0.8) rotate(30deg); }

src/Widgets/MaskedImage.vala

@@ -19,42 +19,29 @@
 */
 
 public class Notifications.MaskedImage : Granite.Bin {
-    private const int ICON_SIZE = 48;
-
     public Gdk.Pixbuf pixbuf { get; construct; }
 
+    private const int ICON_SIZE = 40;
+
     public MaskedImage (Gdk.Pixbuf pixbuf) {
         Object (pixbuf: pixbuf);
     }
 
-    construct {
-        var image = new Gtk.Image ();
-        image.gicon = mask_pixbuf (pixbuf, scale_factor);
-        image.pixel_size = ICON_SIZE;
-
-        child = image;
+    class construct {
+        set_css_name ("masked-image");
     }
 
-    private static Gdk.Pixbuf? mask_pixbuf (Gdk.Pixbuf pixbuf, int scale) {
-        var size = ICON_SIZE * scale;
-        var mask_offset = 4 * scale;
-        var mask_size_offset = mask_offset * 2;
-        var mask_size = ICON_SIZE * scale;
-        var offset_x = mask_offset;
-        var offset_y = mask_offset + scale;
-        size = size - mask_size_offset;
-
-        var input = pixbuf.scale_simple (size, size, Gdk.InterpType.BILINEAR);
-        var surface = new Cairo.ImageSurface (Cairo.Format.ARGB32, mask_size, mask_size);
-        var cr = new Cairo.Context (surface);
-
-        // FIXME: Do it in CSS
-        // Granite.Drawing.Utilities.cairo_rounded_rectangle (cr, offset_x, offset_y, size, size, mask_offset);
-        // cr.clip ();
+    construct {
+        var image = new Gtk.Image () {
+            paintable = Gdk.Texture.for_pixbuf (pixbuf),
+            pixel_size = ICON_SIZE
+        };
 
-        Gdk.cairo_set_source_pixbuf (cr, input, offset_x, offset_y);
-        cr.paint ();
+        add_css_class (Granite.STYLE_CLASS_CARD);
+        add_css_class (Granite.STYLE_CLASS_CHECKERBOARD);
+        add_css_class (Granite.STYLE_CLASS_ROUNDED);
+        overflow = HIDDEN;
 
-        return Gdk.pixbuf_get_from_surface (surface, 0, 0, mask_size, mask_size);
+        child = image;
     }
 }