[gnome-weather] Use the new Thermometer widget in the daily forecast view

[Vitaly Dyachkov <vitalydyachkov src gnome org>]

commit 0beb7ebd125f32dce347023758effbbe343f36fe
Author: Vitaly Dyachkov <obyknovenius me com>
Date:   Wed Oct 27 17:13:05 2021 +0200

    Use the new Thermometer widget in the daily forecast view

 data/day-entry.ui        | 27 +++------------------------
 src/app/dailyForecast.js | 33 ++++++++++++++++++++++-----------
 src/app/thermometer.js   | 38 ++++++++++++++++++++------------------
 3 files changed, 45 insertions(+), 53 deletions(-)
---
diff --git a/data/day-entry.ui b/data/day-entry.ui
index 2e126de..d6648be 100644
--- a/data/day-entry.ui
+++ b/data/day-entry.ui
@@ -352,37 +352,16 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="valign">start</property>
-        <property name="vexpand">True</property>
         <property name="pixel_size">32</property>
         <property name="icon_name">weather-showers-symbolic</property>
       </object>
     </child>
     <child>
-      <object class="GtkBox">
+      <object class="Gjs_Thermometer" id="thermometer">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
-        <property name="spacing">12</property>
-        <child>
-          <object class="GtkLabel" id="maxTemperatureLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">18°</property>
-            <style>
-              <class name="forecast-temperature-label"/>
-            </style>
-          </object>
-        </child>
-        <child>
-          <object class="GtkLabel" id="minTemperatureLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">9°</property>
-            <style>
-              <class name="forecast-low-temperature-label"/>
-            </style>
-          </object>
-        </child>
+        <property name="vexpand">True</property>
+        <property name="hexpand">True</property>
       </object>
     </child>
     <child>
diff --git a/src/app/dailyForecast.js b/src/app/dailyForecast.js
index 800669f..e3c71e8 100644
--- a/src/app/dailyForecast.js
+++ b/src/app/dailyForecast.js
@@ -22,6 +22,8 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const GWeather = imports.gi.GWeather;
 
+const Thermometer = imports.app.thermometer;
+
 const Util = imports.misc.util;
 
 var DailyForecastBox = GObject.registerClass(class DailyForecastBox extends Gtk.Box {
@@ -80,9 +82,19 @@ var DailyForecastBox = GObject.registerClass(class DailyForecastBox extends Gtk.
         let weekInfos = this._preprocess(forecasts);
 
         if (weekInfos.length > 0) {
+            let weekHighestTemp = -Infinity;
+            let weekLowestTemp = Infinity;
+
+            weekInfos.map(dayInfos => dayInfos.infos).flat().forEach(info => {
+                const temp = Util.getTemp(info);
+
+                weekHighestTemp = Math.max(weekHighestTemp, temp);
+                weekLowestTemp = Math.min(weekLowestTemp, temp);
+            });
+
             for (let i = 0; i < weekInfos.length; i++) {
                 let dayInfos = weekInfos[i];
-                this._addDayEntry(dayInfos);
+                this._addDayEntry(dayInfos, weekHighestTemp, weekLowestTemp);
 
                 if (i < weekInfos.length - 1)
                     this._addSeparator();
@@ -95,7 +107,7 @@ var DailyForecastBox = GObject.registerClass(class DailyForecastBox extends Gtk.
         }
     }
 
-    _addDayEntry({day, infos}) {
+    _addDayEntry({day, infos}, weekHighestTemp, weekLowestTemp) {
         let maxInfo;
         let maxTemp = -Infinity;
 
@@ -179,8 +191,11 @@ var DailyForecastBox = GObject.registerClass(class DailyForecastBox extends Gtk.
 
         dayEntry.image.iconName = dayInfo.get_icon_name() + '-small';
 
-        dayEntry.maxTemperatureLabel.label = Util.getTempString(maxInfo);
-        dayEntry.minTemperatureLabel.label = Util.getTempString(minInfo);
+        const adjustment = Gtk.Adjustment.new(minTemp,
+                                              weekLowestTemp, weekHighestTemp,
+                                              0, 0,
+                                              maxTemp - minTemp);
+        dayEntry.thermometer.adjustment = adjustment;
 
         dayEntry.nightTemperatureLabel.label = Util.getTempString(nightInfo);
         dayEntry.nightImage.iconName = nightInfo.get_icon_name() + '-small';
@@ -229,7 +244,7 @@ var DailyForecastBox = GObject.registerClass(class DailyForecastBox extends Gtk.
 var DayEntry = GObject.registerClass({
     Template: 'resource:///org/gnome/Weather/day-entry.ui',
     InternalChildren: ['nameLabel', 'dateLabel', 'image',
-                       'maxTemperatureLabel', 'minTemperatureLabel',
+                       'thermometer',
                        'nightTemperatureLabel', 'nightImage',
                        'nightHumidity', 'nightWind',
                        'morningTemperatureLabel', 'morningImage',
@@ -256,12 +271,8 @@ var DayEntry = GObject.registerClass({
         return this._image;
     }
 
-    get maxTemperatureLabel() {
-        return this._maxTemperatureLabel;
-    }
-
-    get minTemperatureLabel() {
-        return this._minTemperatureLabel;
+    get thermometer() {
+        return this._thermometer;
     }
 
     get nightTemperatureLabel() {
diff --git a/src/app/thermometer.js b/src/app/thermometer.js
index 725c528..8356ea4 100644
--- a/src/app/thermometer.js
+++ b/src/app/thermometer.js
@@ -55,8 +55,8 @@ const Thermometer = GObject.registerClass({
       return context;
     }
 
-    this._highContext = createStyleContext('high');
-    this._lowContext = createStyleContext('low');
+    this._highStyleContext = createStyleContext('high');
+    this._lowStyleContext = createStyleContext('low');
 
     this._radius = 12;
     this._margin = 12;
@@ -73,19 +73,19 @@ const Thermometer = GObject.registerClass({
   }
 
   vfunc_get_preferred_width() {
-    const [ highWidth ] = this._highLayout.get_pixel_size();
-    const [ lowWidth ] = this._lowLayout.get_pixel_size();
+    const [highWidth] = this._highLayout.get_pixel_size();
+    const [lowWidth] = this._lowLayout.get_pixel_size();
 
     const width = Math.max(this._radius, highWidth, lowWidth);
-    return [ width, width ];
+    return [width, width];
   }
 
   vfunc_get_preferred_height() {
-    const [ , highHeight ] = this._highLayout.get_pixel_size();
-    const [ , lowHeight ] = this._lowLayout.get_pixel_size();
+    const [, highHeight] = this._highLayout.get_pixel_size();
+    const [, lowHeight] = this._lowLayout.get_pixel_size();
 
     const height = highHeight + this._maring + lowHeight;
-    return [ height, height ];
+    return [height, height];
   }
 
   _updatePangoLayouts(adjustment) {
@@ -93,10 +93,10 @@ const Thermometer = GObject.registerClass({
     const pageSize = adjustment.get_page_size();
 
     const highLabel = Math.round(value + pageSize) + "°";
-    this._highLayout = this._createPangoLayout(this._highContext, highLabel);
+    this._highLayout = this._createPangoLayout(this._highStyleContext, highLabel);
 
     const lowLabel = Math.round(value) + "°";
-    this._lowLayout = this._createPangoLayout(this._lowContext, lowLabel);
+    this._lowLayout = this._createPangoLayout(this._lowStyleContext, lowLabel);
   }
 
   _createPangoLayout(styleContext, text) {
@@ -127,8 +127,8 @@ const Thermometer = GObject.registerClass({
     const width = this.get_allocated_width();
     const height = this.get_allocated_height();
 
-    const [ highWidth, highHeight ] = this._highLayout.get_pixel_size();
-    const [ lowWidth, lowHeight ] = this._lowLayout.get_pixel_size();
+    const [highWidth, highHeight] = this._highLayout.get_pixel_size();
+    const [lowWidth, lowHeight] = this._lowLayout.get_pixel_size();
 
     const radius = this._radius;
     const margin = this._margin;
@@ -151,11 +151,11 @@ const Thermometer = GObject.registerClass({
       lowY = scaleY + scaleHeight + radius + margin;
     }
 
-    Gtk.render_layout(this._highContext, cr,
+    Gtk.render_layout(this._highStyleContext, cr,
                       width / 2 - highWidth / 2, highY,
                       this._highLayout);
 
-    Gtk.render_layout(this._lowContext, cr,
+    Gtk.render_layout(this._lowStyleContext, cr,
                       width / 2 - lowWidth / 2, lowY,
                       this._lowLayout);
 
@@ -178,11 +178,13 @@ const Thermometer = GObject.registerClass({
   _createGradient(start, end) {
     const pattern = new Cairo.LinearGradient(0, start, 0, end);
 
-    const highColor = this._highContext.get_color(this._highContext.get_state());
-    pattern.addColorStopRGB(0.0, 246/255, 211/255, 45/255);
+    const styleContext = this.get_style_context();
+
+    const [, warmColor] = styleContext.lookup_color('thermometer_warm_color');
+    pattern.addColorStopRGB(0.0, warmColor.red, warmColor.green, warmColor.blue);
 
-    const lowColor = this._lowContext.get_color(this._lowContext.get_state());
-    pattern.addColorStopRGB(1.0, 28/255, 113/255, 216/255);
+    const [, coldColor] = styleContext.lookup_color('thermometer_cold_color');
+    pattern.addColorStopRGB(1.0, coldColor.red, coldColor.green, coldColor.blue);
 
     return pattern;
   }