[gnome-weather/wip/christopherdavis/style-updates: 5/6] styling: Add border radius to forecast box

[Vitaly Dyachkov <vitalydyachkov src gnome org>]

commit 97d9fb5fc612aee13338e13399f8b54f9b195221
Author: Christopher Davis <brainblasted disroot org>
Date:   Tue Sep 29 13:09:39 2020 -0700

    styling: Add border radius to forecast box
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-weather/-/issues/118

 data/application.css      | 13 +++++++++++++
 src/app/hourlyForecast.js | 22 +++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)
---
diff --git a/data/application.css b/data/application.css
index dc0d46a..9821e96 100644
--- a/data/application.css
+++ b/data/application.css
@@ -60,6 +60,19 @@
 
 #daily-forecast-frame {
     background-color: @temp_chart_background_color;
+    border-radius: 9px;
+}
+
+#daily-forecast-frame > border {
+    border-radius: 9px;
+}
+
+#hourly-forecast-frame {
+    border-radius: 9px;
+}
+
+#hourly-forecast-frame > border {
+    border-radius: 9px;
 }
 
 #updated-time-label {
diff --git a/src/app/hourlyForecast.js b/src/app/hourlyForecast.js
index 7eea1c2..f7d6f3d 100644
--- a/src/app/hourlyForecast.js
+++ b/src/app/hourlyForecast.js
@@ -142,7 +142,7 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
         const frameWidth = this.get_allocated_width();
         const frameHeight = this.get_allocated_height();
 
-        const entryWidth = 75;
+        const entryWidth = 75 ;
         const separatorWidth = 1;
 
         const frameBorderWidth = 1;
@@ -153,10 +153,30 @@ var HourlyForecastFrame = GObject.registerClass(class ForecastFrame extends Gtk.
 
         const spacing = 18;
 
+        const borderRadius = 9;
+
         const graphMinY = frameBorderWidth + lineWidth / 2 + entryImageY + entryImageHeight + spacing;
         const graphMaxY = frameHeight - frameBorderWidth - lineWidth / 2 - spacing - 
entryTemperatureLabelHeight - spacing;
         const graphHeight = graphMaxY - graphMinY;
 
+        const arc0 = 0.0;
+        const arc1 = Math.PI * 0.5
+        const arc2 = Math.PI;
+        const arc3 = Math.PI * 1.5
+
+        let frameX = 0;
+        let frameY = 0;
+
+        cr.newSubPath();
+        cr.arc(frameX + frameWidth - borderRadius, frameY + borderRadius, borderRadius, arc3, arc0);
+        cr.arc(frameX + frameWidth - borderRadius, frameY + frameHeight - borderRadius, borderRadius, arc0, 
arc1);
+        cr.arc(frameX + borderRadius, frameY + frameHeight - borderRadius, borderRadius, arc1, arc2);
+        cr.arc(frameX + borderRadius, frameY + borderRadius, borderRadius, arc2, arc3);
+        cr.closePath();
+
+        cr.clip();
+        cr.fill();
+
         let [, backgroundColor] = this.get_style_context().lookup_color('temp_chart_background_color');
         Gdk.cairo_set_source_rgba(cr, backgroundColor);