[gnome-weather] Add corner radius to forecast frame

[Vitaly Dyachkov <vitalydyachkov src gnome org>]

commit 3db280aea7152bc47bc55844af531263eddaf41c
Author: Vitaly Dyachkov <obyknovenius me com>
Date:   Wed Mar 10 17:27:17 2021 +0100

    Add corner radius to forecast frame

 data/application.css |  4 ++++
 src/app/city.js      | 28 +++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)
---
diff --git a/data/application.css b/data/application.css
index c738dd8..4e7fdf7 100644
--- a/data/application.css
+++ b/data/application.css
@@ -42,6 +42,10 @@
     background-color: @theme_base_color;
 }
 
+#forecast-frame > border {
+    border-radius: 8px;
+}
+
 .forecast-temperature-label {
     font-weight: bold;
     color: #c89009;
diff --git a/src/app/city.js b/src/app/city.js
index 43e0cfe..7e9fa74 100644
--- a/src/app/city.js
+++ b/src/app/city.js
@@ -20,6 +20,7 @@ const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
 const Gnome = imports.gi.GnomeDesktop;
 const GObject = imports.gi.GObject;
+const Gdk = imports.gi.Gdk;
 const Gtk = imports.gi.Gtk;
 const GWeather = imports.gi.GWeather;
 
@@ -39,7 +40,8 @@ var WeatherWidget = GObject.registerClass({
     InternalChildren: ['contentFrame', 'outerBox',
                        'conditionsImage', 'placesButton', 'placesLabel',
                        'temperatureLabel', 'apparentLabel',
-                       'forecastStack', 'leftButton', 'rightButton',
+                       'forecastFrame', 'forecastStack',
+                       'leftButton', 'rightButton',
                        'forecast-hourly', 'forecast-hourly-viewport',
                        'forecast-daily', 'forecast-daily-viewport',
                        'updatedTimeLabel', 'attributionLabel'],
@@ -109,6 +111,30 @@ var WeatherWidget = GObject.registerClass({
             this._beginScrollAnimation(target);
         });
 
+        this._forecastFrame.connect('draw', (frame, cr) => {
+            const width = frame.get_allocated_width();
+            const height = frame.get_allocated_height();
+
+            const borderRadius = 8;
+
+            const arc0 = 0.0;
+            const arc1 = Math.PI * 0.5
+            const arc2 = Math.PI;
+            const arc3 = Math.PI * 1.5
+
+            cr.newSubPath();
+            cr.arc(width - borderRadius, borderRadius, borderRadius, arc3, arc0);
+            cr.arc(width - borderRadius, height - borderRadius, borderRadius, arc0, arc1);
+            cr.arc(borderRadius, height - borderRadius, borderRadius, arc1, arc2);
+            cr.arc(borderRadius, borderRadius, borderRadius, arc2, arc3);
+            cr.closePath();
+
+            cr.clip();
+            cr.fill();
+
+            return false;
+        });
+
         this._updatedTime = null;
         this._updatedTimeTimeoutId = 0;