[gnome-clocks] Rework digital clock renderer to use CSS

[Paolo Borelli <pborelli src gnome org>]

commit b18472c04af01982101f072cd3f3c855d73b0a4c
Author: Paolo Borelli <pborelli gnome org>
Date:   Sat Dec 1 21:38:35 2012 +0100

    Rework digital clock renderer to use CSS
    
    Also merge with the ToggleRenderer since we need to make sure the
    checkbox is drawn over the time label

 data/gtk-style.css     |   22 +++++++++
 gnomeclocks/alarm.py   |    6 +--
 gnomeclocks/widgets.py |  114 ++++++++++++++++++++----------------------------
 gnomeclocks/world.py   |    6 +--
 4 files changed, 73 insertions(+), 75 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index c498f41..06f088e 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -14,6 +14,28 @@
     border-width: 1px 0;
 }
 
+.clocks-digital-renderer {
+    border-radius: 9px;
+}
+
+.clocks-digital-renderer.light {
+    background-color: rgba(255, 255, 255, 0.7);
+    color: black;
+}
+
+.clocks-digital-renderer.light:prelight {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.clocks-digital-renderer.dark {
+    background-color: rgba(255, 255, 255, 0.3);
+    color: white;
+}
+
+.clocks-digital-renderer.dark:prelight {
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
 .clocks-go {
     background-image: linear-gradient(to bottom,
                                       @clocks_go_color_a,
diff --git a/gnomeclocks/alarm.py b/gnomeclocks/alarm.py
index 9ba2fc3..42b11e9 100644
--- a/gnomeclocks/alarm.py
+++ b/gnomeclocks/alarm.py
@@ -423,12 +423,10 @@ class Alarm(Clock):
         cell.subtext = alarm.get_alarm_repeat_string()
         if alarm.get_is_light():
             cell.props.pixbuf = self.daypixbuf
-            cell.foreground = Gdk.RGBA(0.0, 0.0, 0.0, 1.0)
-            cell.background = Gdk.RGBA(1.0, 1.0, 1.0, 0.7)
+            cell.css_class = "light"
         else:
             cell.props.pixbuf = self.nightpixbuf
-            cell.foreground = Gdk.RGBA(1.0, 1.0, 1.0, 1.0)
-            cell.background = Gdk.RGBA(1.0, 1.0, 1.0, 0.3)
+            cell.css_class = "dark"
 
     def set_mode(self, mode):
         self.mode = mode
diff --git a/gnomeclocks/widgets.py b/gnomeclocks/widgets.py
index c5ec34f..4f39a3b 100644
--- a/gnomeclocks/widgets.py
+++ b/gnomeclocks/widgets.py
@@ -57,11 +57,10 @@ class EmptyPlaceholder(Gtk.Box):
         self.show_all()
 
 
-# Python version of the gd-toggle-pixbuf-renderer of gnome-documents
-# we should use those widgets directly at some point, but for now
-# it is easier to just reimplement this renderer than include and build
-# a C library
-class TogglePixbufRenderer(Gtk.CellRendererPixbuf):
+class DigitalClockRenderer(Gtk.CellRendererPixbuf):
+    css_class = GObject.Property(type=str)
+    text = GObject.Property(type=str)
+    subtext = GObject.Property(type=str)
     active = GObject.Property(type=bool, default=False)
     toggle_visible = GObject.Property(type=bool, default=False)
 
@@ -75,59 +74,23 @@ class TogglePixbufRenderer(Gtk.CellRendererPixbuf):
     def do_render(self, cr, widget, background_area, cell_area, flags):
         Gtk.CellRendererPixbuf.do_render(self, cr, widget, background_area, cell_area, flags)
 
-        if not self.toggle_visible:
-            return
-
-        xpad, ypad = self.get_padding()
-        direction = widget.get_direction()
-
-        if direction == Gtk.TextDirection.RTL:
-            x_offset = xpad
-        else:
-            x_offset = cell_area.width - self.icon_size - xpad
-
-        check_x = cell_area.x + x_offset
-        check_y = cell_area.y + cell_area.height - self.icon_size - ypad
-
         context = widget.get_style_context()
         context.save()
-        context.add_class(Gtk.STYLE_CLASS_CHECK)
-
-        if self.active:
-            context.set_state(Gtk.StateFlags.ACTIVE)
-
-        Gtk.render_check(context, cr, check_x, check_y, self.icon_size, self.icon_size)
-
-        context.restore()
-
-    def do_get_size(self, widget, cell_area):
-        x_offset, y_offset, width, height = Gtk.CellRendererPixbuf.do_get_size(self, widget, cell_area)
-        width += self.icon_size // 4
-        height += self.icon_size // 4
-        return (x_offset, y_offset, width, height)
-
-
-class DigitalClockRenderer(TogglePixbufRenderer):
-    foreground = GObject.Property(type=Gdk.RGBA)
-    background = GObject.Property(type=Gdk.RGBA)
-    text = GObject.Property(type=str)
-    subtext = GObject.Property(type=str)
-
-    def __init__(self):
-        TogglePixbufRenderer.__init__(self)
-
-    def do_render(self, cr, widget, background_area, cell_area, flags):
-        TogglePixbufRenderer.do_render(self, cr, widget, background_area, cell_area, flags)
+        context.add_class("clocks-digital-renderer")
+        context.add_class(self.css_class)
 
         cr.save()
         Gdk.cairo_rectangle(cr, cell_area)
         cr.clip()
         cr.translate(cell_area.x, cell_area.y)
 
-        margin = 12
-        x = margin
+        # for now the space around the digital clock is hardcoded,
+        # we need to know the width to create the pango layouts
+        margin = 16
+        padding = 12
         w = cell_area.width - 2 * margin
 
+        # create the layouts so that we can measure them
         layout = widget.create_pango_layout("")
         layout.set_markup(
             "<span size='xx-large'><b>%s</b></span>" % self.text, -1)
@@ -150,33 +113,50 @@ class DigitalClockRenderer(TogglePixbufRenderer):
         else:
             subtext_w, subtext_h, subtext_pad = 0, 0, 0
 
-        # draw inner rectangle background
-        Gdk.cairo_set_source_rgba(cr, self.background)
-
-        pad = 12
-        h = 2 * pad + text_h + subtext_h + subtext_pad
+        # measure the actual height and coordinates (xpad is ignored for now)
+        h = 2 * padding + text_h + subtext_h + subtext_pad
+        x = margin
         y = (cell_area.height - h) / 2
-        r = 10
 
-        cr.move_to(x, y)
-        cr.arc(x + w - r, y + r, r, - PI / 2, 0)
-        cr.arc(x + w - r, y + h - r, r, 0, PI / 2)
-        cr.arc(x + r, y + h - r, r, PI / 2, PI)
-        cr.arc(x + r, y + r, r, PI, - PI / 2)
-        cr.close_path()
-        cr.fill()
+        # draw inner rectangle background
+        Gtk.render_frame(context, cr, x, y, w, h)
+        Gtk.render_background(context, cr, x, y, w, h)
 
         # draw text
-        Gdk.cairo_set_source_rgba(cr, self.foreground)
+        Gtk.render_layout(context, cr, x, y + padding, layout)
+        if self.subtext:
+            Gtk.render_layout(context, cr, x, y + padding + text_h + subtext_pad,
+                              layout_subtext)
 
-        cr.move_to(x, y + pad)
-        PangoCairo.show_layout(cr, layout)
+        # draw the overlayed checkbox
+        if self.toggle_visible:
+            context.add_class(Gtk.STYLE_CLASS_CHECK)
 
-        if self.subtext:
-            cr.move_to(x, y + pad + text_h + subtext_pad)
-            PangoCairo.show_layout(cr, layout_subtext)
+            xpad, ypad = self.get_padding()
+            direction = widget.get_direction()
+
+            if direction == Gtk.TextDirection.RTL:
+                x_offset = xpad
+            else:
+                x_offset = cell_area.width - self.icon_size - xpad
+
+            check_x = x_offset
+            check_y = cell_area.height - self.icon_size - ypad
+
+            if self.active:
+                context.set_state(Gtk.StateFlags.ACTIVE)
+
+            Gtk.render_check(context, cr, check_x, check_y, self.icon_size, self.icon_size)
 
         cr.restore()
+        context.restore()
+
+
+    def do_get_size(self, widget, cell_area):
+        x_offset, y_offset, width, height = Gtk.CellRendererPixbuf.do_get_size(self, widget, cell_area)
+        width += self.icon_size // 4
+        height += self.icon_size // 4
+        return (x_offset, y_offset, width, height)
 
 
 class SelectableIconView(Gtk.IconView):
diff --git a/gnomeclocks/world.py b/gnomeclocks/world.py
index 3e7a249..494c939 100644
--- a/gnomeclocks/world.py
+++ b/gnomeclocks/world.py
@@ -328,12 +328,10 @@ class World(Clock):
         cell.subtext = clock.get_day_as_string()
         if clock.get_is_light():
             cell.props.pixbuf = self.daypixbuf
-            cell.foreground = Gdk.RGBA(0.0, 0.0, 0.0, 1.0)
-            cell.background = Gdk.RGBA(1.0, 1.0, 1.0, 0.7)
+            cell.css_class = "light"
         else:
             cell.props.pixbuf = self.nightpixbuf
-            cell.foreground = Gdk.RGBA(1.0, 1.0, 1.0, 1.0)
-            cell.background = Gdk.RGBA(1.0, 1.0, 1.0, 0.3)
+            cell.css_class = "dark"
 
     def set_mode(self, mode):
         self.mode = mode