[baobab/wip/grid-layout] Use CSS to style the progress cell renderer

[Stefano Facchini <sfacchini src gnome org>]

commit b9c9c2c28b591887ce541081d7f4da91fc089c4a
Author: Stefano Facchini <stefano facchini gmail com>
Date:   Thu Apr 26 00:51:39 2012 +0200

    Use CSS to style the progress cell renderer

 src/baobab-cellrenderers.vala |   34 ++++++++++++++++++----------------
 src/baobab.css                |    8 ++++++++
 2 files changed, 26 insertions(+), 16 deletions(-)
---
diff --git a/src/baobab-cellrenderers.vala b/src/baobab-cellrenderers.vala
index 0fe987c..416feea 100644
--- a/src/baobab-cellrenderers.vala
+++ b/src/baobab-cellrenderers.vala
@@ -62,32 +62,32 @@ namespace Baobab {
             int ypad;
             get_padding (out xpad, out ypad);
 
-            // fill entire drawing area with black
             var x = cell_area.x + xpad;
             var y = cell_area.y + ypad;
             var w = cell_area.width - xpad * 2;
             var h = cell_area.height - ypad * 2;
-            cr.rectangle (x, y, w, h);
-            cr.set_source_rgb (0, 0, 0);
-            cr.fill ();
 
-            // draw a smaller white rectangle on top, leaving a black outline
-            var style = widget.get_style ();
-            x += style.xthickness;
-            y += style.xthickness;
-            w -= style.xthickness * 2;
-            h -= style.xthickness * 2;
-            cr.rectangle (x, y, w, h);
-            cr.set_source_rgb (1, 1, 1);
-            cr.fill ();
+            var context = widget.get_style_context ();
+
+            context.save ();
+            context.add_class ("progress-cell");
+
+            context.render_background (cr, x, y, w, h);
+            context.render_frame (cr, x, y, w, h);
+
+            var border = context.get_border (Gtk.StateFlags.NORMAL);
+            x += border.left;
+            y += border.top;
+            w -= border.left + border.right;
+            h -= border.top + border.bottom;
 
-            // fill in remaining area according to percentage value
             var percent = value;
             var perc_w = (w * percent) / 100;
+            var x_bar = x;
             if (widget.get_direction () == Gtk.TextDirection.RTL) {
-                x += w - perc_w;
+                x_bar += w - perc_w;
             }
-            cr.rectangle (x, y, perc_w, h);
+            cr.rectangle (x_bar, y, perc_w, h);
             if (percent <= 33) {
                 cr.set_source_rgb (0x73 / 255.0, 0xd2 / 255.0, 0x16 / 255.0);
             } else if (percent <= 66) {
@@ -96,6 +96,8 @@ namespace Baobab {
                 cr.set_source_rgb (0xcc / 255.0, 0x00 / 255.0, 0x00 / 255.0);
             }
             cr.fill ();
+
+            context.restore ();
         }
     }
 }
diff --git a/src/baobab.css b/src/baobab.css
index c2ed98c..56c2f91 100644
--- a/src/baobab.css
+++ b/src/baobab.css
@@ -2,6 +2,14 @@
 @define-color location_bg_b alpha(shade(@theme_base_color, 0.9), 0.8);
 @define-color location_bg_c alpha(shade(@theme_base_color, 0.98), 0.8);
 
+.progress-cell {
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+
+    background-color: white;
+}
+
 #baobab-location-scrolled-window {
     border-width: 1px 0 0 0;
 }