[gnome-boxes/paint-thumbs-with-css] style, views: Paint thumbnails with CSS

[Felipe Borges <felipeborges src gnome org>]

commit 93d22ac0bff9ba6b66e1abf80bbd525d3dc778a7
Author: Felipe Borges <felipeborges gnome org>
Date:   Tue Jan 22 11:48:03 2019 +0100

    style, views: Paint thumbnails with CSS
    
    This way we don't hardcode the thumbnails background color and
    instead rely on the user theme to paint them.

 data/gtk-style.css           |  5 +++++
 data/ui/icon-view-child.ui   |  3 +++
 data/ui/list-view-row.ui     |  3 +++
 src/list-view-row.vala       |  3 +--
 src/machine-thumbnailer.vala |  5 ++---
 src/machine.vala             |  5 +----
 src/util-app.vala            | 37 +------------------------------------
 7 files changed, 16 insertions(+), 45 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 72e80d7b..9ac774c4 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -38,6 +38,11 @@
     animation-duration: 2s;
 }
 
+.thumbnail {
+    background: @boxes_bg2_color;
+    border: 1px solid @theme_bg_color;
+}
+
 /******************
  * New Box Wizard *
  ******************/
diff --git a/data/ui/icon-view-child.ui b/data/ui/icon-view-child.ui
index 42764b64..34eeb12d 100644
--- a/data/ui/icon-view-child.ui
+++ b/data/ui/icon-view-child.ui
@@ -44,6 +44,9 @@
             <child>
               <object class="GtkImage" id="thumbnail">
                 <property name="visible">True</property>
+                <style>
+                  <class name="thumbnail"/>
+                </style>
               </object>
 
               <packing>
diff --git a/data/ui/list-view-row.ui b/data/ui/list-view-row.ui
index 7affca93..0d0cb6e8 100644
--- a/data/ui/list-view-row.ui
+++ b/data/ui/list-view-row.ui
@@ -27,6 +27,9 @@
         <child>
           <object class="GtkImage" id="thumbnail">
             <property name="visible">True</property>
+            <style>
+              <class name="thumbnail"/>
+            </style>
           </object>
 
           <packing>
diff --git a/src/list-view-row.vala b/src/list-view-row.vala
index 2a4e2def..4f919250 100644
--- a/src/list-view-row.vala
+++ b/src/list-view-row.vala
@@ -60,8 +60,7 @@ public ListViewRow (CollectionItem item) {
 
         thumbnailer = new Boxes.MachineThumbnailer (machine,
                                                     SCREENSHOT_WIDTH, SCREENSHOT_HEIGHT,
-                                                    CENTERED_EMBLEM_SIZE, EMBLEM_SIZE,
-                                                    FRAME_BORDER_COLOR, FRAME_BACKGROUND_COLOR);
+                                                    CENTERED_EMBLEM_SIZE, EMBLEM_SIZE);
         thumbnailer.favorite_emblem_enabled = false;
         thumbnailer.notify["thumbnail"].connect (() => {
             thumbnail.set_from_pixbuf (thumbnailer.thumbnail);
diff --git a/src/machine-thumbnailer.vala b/src/machine-thumbnailer.vala
index c22bd7e3..ceaa97f0 100644
--- a/src/machine-thumbnailer.vala
+++ b/src/machine-thumbnailer.vala
@@ -23,8 +23,7 @@
 
     public MachineThumbnailer (Machine machine,
                                int width, int height,
-                               int centred_emblem_size, int emblem_size,
-                               Gdk.RGBA border_color, Gdk.RGBA background_color) {
+                               int centred_emblem_size, int emblem_size) {
         this.machine = machine;
         this.width = width;
         this.height = height;
@@ -78,7 +77,7 @@ else if (machine.pixbuf != null)
         if (empty_thumbnail != null)
             return empty_thumbnail;
 
-        empty_thumbnail = paint_empty_frame (width, height, FRAME_RADIUS, border_color, background_color);
+        empty_thumbnail = paint_empty_frame (width, height);
 
         return empty_thumbnail;
     }
diff --git a/src/machine.vala b/src/machine.vala
index 7588356f..77ec6c10 100644
--- a/src/machine.vala
+++ b/src/machine.vala
@@ -86,8 +86,6 @@
     public const int SCREENSHOT_HEIGHT = 134;
     public const int CENTERED_EMBLEM_SIZE = 32;
     public const int EMBLEM_SIZE = 16;
-    public const Gdk.RGBA FRAME_BORDER_COLOR = { 0x3b / 255.0, 0x3c / 255.0, 0x38 / 255.0, 1.0 };
-    public const Gdk.RGBA FRAME_BACKGROUND_COLOR = { 0x2d / 255.0, 0x2d / 255.0, 0x2d / 255.0, 1.0 };
     private static Cairo.Surface grid_surface;
     private bool updating_screenshot;
     private string username;
@@ -274,8 +272,7 @@ public Machine (Boxes.CollectionSource source, string name, string? uuid = null)
         // This needs to be set after the 'config' prop has been set.
         thumbnailer = new MachineThumbnailer (this,
                                               SCREENSHOT_WIDTH, SCREENSHOT_HEIGHT,
-                                              CENTERED_EMBLEM_SIZE, EMBLEM_SIZE,
-                                              FRAME_BORDER_COLOR, FRAME_BACKGROUND_COLOR);
+                                              CENTERED_EMBLEM_SIZE, EMBLEM_SIZE);
 
         notify["under-construction"].connect (() => {
             if (under_construction) {
diff --git a/src/util-app.vala b/src/util-app.vala
index 253d1b74..88a9a1d3 100644
--- a/src/util-app.vala
+++ b/src/util-app.vala
@@ -643,44 +643,9 @@ private async void move_config_from_cache (string config_name) {
         }
     }
 
-    public Gdk.Pixbuf? paint_empty_frame (int width, int height, double radius, Gdk.RGBA border_color, 
Gdk.RGBA? bg_color) {
+    public Gdk.Pixbuf? paint_empty_frame (int width, int height) {
         var surface = new Cairo.ImageSurface (Cairo.Format.ARGB32, width, height);
-        var cr = new Cairo.Context (surface);
-
-        if (bg_color != null) {
-            cr.set_source_rgba (bg_color.red, bg_color.green, bg_color.blue, bg_color.alpha);
-            paint_frame_background (cr, width, height, radius);
-        }
-
-        cr.set_source_rgba (border_color.red, border_color.green, border_color.blue, border_color.alpha);
-        paint_frame_border (cr, width, height, radius);
 
         return Gdk.pixbuf_get_from_surface (surface, 0, 0, width, height);
     }
-
-    private void paint_frame_background (Cairo.Context cr, int width, int height, double radius) {
-        rounded_rectangle (cr, 0.5, 0.5, width - 1, height - 1, radius);
-        cr.fill ();
-    }
-
-    private void paint_frame_border (Cairo.Context cr, int width, int height, double radius) {
-        cr.set_line_width (1.0);
-        // The rectangle is reduced by 0.5px on each side to allow drawing a sharp 1px line and not between 
two pixels.
-        rounded_rectangle (cr, 0.5, 0.5, width - 1, height - 1, radius);
-        cr.stroke ();
-    }
-
-    private void rounded_rectangle (Cairo.Context cr, double x, double y, double width, double height, 
double radius) {
-        const double ARC_0 = 0;
-        const double ARC_1 = Math.PI * 0.5;
-        const double ARC_2 = Math.PI;
-        const double ARC_3 = Math.PI * 1.5;
-
-        cr.new_sub_path ();
-        cr.arc (x + width - radius, y + radius,          radius, ARC_3, ARC_0);
-        cr.arc (x + width - radius, y + height - radius, radius, ARC_0, ARC_1);
-        cr.arc (x + radius,         y + height - radius, radius, ARC_1, ARC_2);
-        cr.arc (x + radius,         y + radius,          radius, ARC_2, ARC_3);
-        cr.close_path ();
-    }
 }