[gnome-usage] speedometer: Refactor animation css serialization

[Felipe Borges <felipeborges src gnome org>]

commit 4266f757f2c79590e76600ce78d187f34f4a9e7f
Author: Felipe Borges <felipeborges gnome org>
Date:   Sat Nov 25 14:41:50 2017 +0100

    speedometer: Refactor animation css serialization

 src/speedometer.vala | 42 ++++++++++++++----------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)
---
diff --git a/src/speedometer.vala b/src/speedometer.vala
index a7cc11a..2ffb864 100644
--- a/src/speedometer.vala
+++ b/src/speedometer.vala
@@ -63,39 +63,25 @@ namespace Usage
 
             old_angle = 90 + (360 * (old_value/100.0));
             new_angle = 90 + (360 * (new_value/100.0));
+            var filling_color = "@theme_base_color";
 
-            var css = """
-                @keyframes speedometer_keyframes-%d {
-            """.printf(new_value);
-
-            if (new_value < 50)
+            if (new_value > 50)
             {
-                css += """
-                  from {
-                    background: linear-gradient(%ddeg, transparent 50%, @theme_base_color 50%),
-                                linear-gradient(90deg, @theme_base_color 50%, transparent 50%);
-                  }
-                  to {
-                    background: linear-gradient(%ddeg, transparent 50%, @theme_base_color 50%),
-                                linear-gradient(90deg, @theme_base_color 50%, transparent 50%);
-                  }""".printf((int)old_angle, (int)new_angle);
+                old_angle -= 180;
+                new_angle -= 180;
+                filling_color = "@theme_selected_bg_color";
             }
-            else
-            {
-                css += """
-                  from {
-                    background: linear-gradient(%ddeg, transparent 50%, @theme_selected_bg_color 50%),
+
+            var css =
+            @"@keyframes speedometer_keyframes-$(old_value)-$(new_value) {
+                from {
+                    background: linear-gradient($(old_angle)deg, transparent 50%, $filling_color 50%),
                                 linear-gradient(90deg, @theme_base_color 50%, transparent 50%);
-                  }
-                  to {
-                    background: linear-gradient(%ddeg, transparent 50%, @theme_selected_bg_color 50%),
+                } to {
+                    background: linear-gradient($(new_angle)deg, transparent 50%, $filling_color 50%),
                                 linear-gradient(90deg, @theme_base_color 50%, transparent 50%);
-                  }""".printf((int)old_angle-180, (int)new_angle-180);
-            }
-
-            css += """
-            } .speedometer-inner { animation-name: speedometer_keyframes-%d; }
-            """.printf(new_value);
+                  }
+            } .speedometer-inner { animation-name: speedometer_keyframes-$(old_value)-$(new_value); }";
 
             try
             {