[gnome-weather] Draw temperature chart before calling super class method draw()

[Michael Catanzaro <mcatanzaro src gnome org>]

commit 1d003ecdfa6804b5c17effa030d78f9431d84e3e
Author: Vitaly Dyachkov <obyknovenius me com>
Date:   Fri Sep 4 17:30:56 2020 +0200

    Draw temperature chart before calling super class method draw()
    
    This also requires to draw char's background programmatically instead of
    just setting it using CSS property background-color.

 data/application.css      | 13 +++++++------
 src/app/dailyForecast.js  |  2 --
 src/app/hourlyForecast.js | 24 +++++++++++++-----------
 3 files changed, 20 insertions(+), 19 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 1069748..99d39fb 100644
--- a/data/application.css
+++ b/data/application.css
@@ -49,17 +49,18 @@
     border: 1px solid @borders;
 }
 
-.forecast-frame {
-    background-color: white;
-}
-
 .forecast-temperature-label {
     font-weight: bold;
     color: #c89009;
 }
 
-@define-color temp_graph_border_color rgba(246, 211, 45, 1.0);
-@define-color temp_graph_background_color rgba(248, 228, 92, 0.5);
+@define-color temp_chart_background_color white;
+@define-color temp_chart_fill_color rgba(248, 228, 92, 0.5);
+@define-color temp_chart_stroke_color rgba(246, 211, 45, 1.0);
+
+#daily-forecast-frame {
+    background-color: @temp_chart_background_color;
+}
 
 #updated-time-label {
     font-size: 9pt;
diff --git a/src/app/dailyForecast.js b/src/app/dailyForecast.js
index 89b16a2..8b9cc6d 100644
--- a/src/app/dailyForecast.js
+++ b/src/app/dailyForecast.js
@@ -33,8 +33,6 @@ var DailyForecastFrame = GObject.registerClass(class DailyForecastFrame extends
 
         this.get_accessible().accessible_name = _('Daily Forecast');
 
-        this.get_style_context().add_class("forecast-frame");
-
         this._box = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
                                   spacing: 0});
         this.add(this._box);
diff --git a/src/app/hourlyForecast.js b/src/app/hourlyForecast.js
index 0ae7ddc..7eea1c2 100644
--- a/src/app/hourlyForecast.js
+++ b/src/app/hourlyForecast.js
@@ -38,8 +38,6 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
 
         this.get_accessible().accessible_name = _('Hourly Forecast');
 
-        this.get_style_context().add_class("forecast-frame");
-
         this._settings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
 
         this._box = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
@@ -134,8 +132,6 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
     }
 
     vfunc_draw(cr) {
-        super.vfunc_draw(cr);
-
         const temps = this._hourlyInfo.map(info => Math.round(Util.getTemp(info)));
 
         const maxTemp = Math.max(...temps);
@@ -161,6 +157,15 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
         const graphMaxY = frameHeight - frameBorderWidth - lineWidth / 2 - spacing - 
entryTemperatureLabelHeight - spacing;
         const graphHeight = graphMaxY - graphMinY;
 
+        let [, backgroundColor] = this.get_style_context().lookup_color('temp_chart_background_color');
+        Gdk.cairo_set_source_rgba(cr, backgroundColor);
+
+        cr.rectangle(0, 0, frameWidth, frameHeight);
+        cr.fill();
+
+        let [, strokeColor] = this.get_style_context().lookup_color('temp_chart_stroke_color');
+        Gdk.cairo_set_source_rgba(cr, strokeColor);
+
         let x = 0;
         cr.moveTo (x, graphMinY + ((1 - values[0]) * graphHeight));
 
@@ -174,20 +179,17 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
 
         cr.lineTo(frameWidth, graphMinY + ((1 - values[values.length - 1]) * graphHeight));
 
-        let [, borderColor] = this.get_style_context().lookup_color('temp_graph_border_color');
-        Gdk.cairo_set_source_rgba(cr, borderColor);
-
         cr.setLineWidth(lineWidth);
         cr.strokePreserve();
 
+        let [, fillColor] = this.get_style_context().lookup_color('temp_chart_fill_color');
+        Gdk.cairo_set_source_rgba(cr, fillColor);
+
         cr.lineTo(frameWidth, frameHeight);
         cr.lineTo(0, frameHeight);
-
-        let [, backgroundColor] = this.get_style_context().lookup_color('temp_graph_background_color');
-        Gdk.cairo_set_source_rgba(cr, backgroundColor);
-
         cr.fill();
 
+        super.vfunc_draw(cr);
         cr.$dispose();
 
         return Gdk.EVENT_PROPAGATE;