[gnome-weather/wip/christopherdavis/style-updates: 1/2] styling: Add border radius to forecast box
- From: Christopher Davis <christopherdavis src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-weather/wip/christopherdavis/style-updates: 1/2] styling: Add border radius to forecast box
- Date: Tue, 29 Sep 2020 20:40:16 +0000 (UTC)
commit 7e83ea2945092cd501b33f64e13226cdec74d0fc
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..b8e3837 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);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]