[gnome-clocks/bilelmoussaoui/redesign-timer] TimerRow: use one label for the countdown

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 43f9b6fdbf061fb9a4e9729b9bdfd85fc9fbf4ef
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Tue Jan 28 12:18:47 2020 +0100

    TimerRow: use one label for the countdown

 data/css/gnome-clocks.css |  6 ++--
 data/ui/timer_row.ui      | 74 +++++------------------------------------------
 src/timer.vala            | 31 +++++++-------------
 3 files changed, 20 insertions(+), 91 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 88d9419..3ea5297 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -233,12 +233,12 @@ spinbutton.clocks-timer-label button {
   border-radius: 9999px;
   padding: 18px 24px;
 }
-.timer-countdown label {
+.timer-countdown {
   font-size: 40pt;
 }
-.timer-countdown.timer-paused label {
+.timer-countdown.timer-paused {
   color: #9E9DA1;
 }
-.timer-countdown.timer-running label {
+.timer-countdown.timer-running {
   color: #428be5;
 }
diff --git a/data/ui/timer_row.ui b/data/ui/timer_row.ui
index 5fd9eef..ed4b462 100644
--- a/data/ui/timer_row.ui
+++ b/data/ui/timer_row.ui
@@ -6,80 +6,20 @@
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="valign">start</property>
-    <property name="border_width">24</property>
+    <property name="margin_top">12</property>
+    <property name="margin_bottom">12</property>
     <property name="orientation">vertical</property>
     <property name="spacing">18</property>
     <child>
-      <object class="GtkBox" id="countdown_container">
+      <object class="GtkLabel" id="countdown_label">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="halign">center</property>
-        <property name="valign">center</property>
-        <property name="margin_start">48</property>
-        <property name="margin_end">48</property>
-        <child>
-          <object class="GtkLabel" id="hours_label">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">00</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">:</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel" id="minutes_label">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">00</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">:</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">3</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkLabel" id="seconds_label">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label">00</property>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">4</property>
-          </packing>
-        </child>
+        <property name="label">00:00:00</property>
+        <attributes>
+          <attribute name="font-features" value="tnum=1"/>
+        </attributes>
         <style>
           <class name="timer-countdown"/>
-          <class name="timer-paused"/>
         </style>
       </object>
       <packing>
diff --git a/src/timer.vala b/src/timer.vala
index 70e4581..5440107 100644
--- a/src/timer.vala
+++ b/src/timer.vala
@@ -229,7 +229,7 @@ public class Row : Gtk.Box {
     private GLib.Timer timer;
     private uint timeout_id;
     [GtkChild]
-    private Gtk.Box countdown_container;
+    private Gtk.Label countdown_label;
     [GtkChild]
     private Gtk.Stack start_stack;
 
@@ -238,13 +238,6 @@ public class Row : Gtk.Box {
     [GtkChild]
     private Gtk.Button delete_button;
 
-    [GtkChild]
-    private Gtk.Label hours_label;
-    [GtkChild]
-    private Gtk.Label minutes_label;
-    [GtkChild]
-    private Gtk.Label seconds_label;
-
     public Row (Item item) {
         Object(item: item);
         span = item.duration.get_total_seconds ();
@@ -296,22 +289,20 @@ public class Row : Gtk.Box {
         state = State.STOPPED;
         span = item.duration.get_total_seconds ();
 
-        hours_label.label = "%02i".printf(item.duration.hours);
-        minutes_label.label = "%02i".printf(item.duration.minutes);
-        seconds_label.label = "%02i".printf(item.duration.seconds);
+        update_countdown_label (item.duration.hours, item.duration.minutes, item.duration.seconds);
 
         reset_button.hide ();
         delete_button.show ();
 
         timer.reset ();
-        countdown_container.get_style_context ().add_class ("timer-paused");
-        countdown_container.get_style_context ().remove_class ("timer-running");
+        countdown_label.get_style_context ().add_class ("timer-paused");
+        countdown_label.get_style_context ().remove_class ("timer-running");
         start_stack.visible_child_name = "start";
     }
 
     private void start () {
-        countdown_container.get_style_context ().add_class ("timer-running");
-        countdown_container.get_style_context ().remove_class ("timer-paused");
+        countdown_label.get_style_context ().add_class ("timer-running");
+        countdown_label.get_style_context ().remove_class ("timer-paused");
 
         reset_button.hide ();
         delete_button.hide ();
@@ -337,8 +328,8 @@ public class Row : Gtk.Box {
     }
 
     private void pause () {
-        countdown_container.get_style_context ().add_class ("timer-paused");
-        countdown_container.get_style_context ().remove_class ("timer-running");
+        countdown_label.get_style_context ().add_class ("timer-paused");
+        countdown_label.get_style_context ().remove_class ("timer-running");
 
         reset_button.show ();
         delete_button.show ();
@@ -350,7 +341,7 @@ public class Row : Gtk.Box {
     }
 
     private void update_countdown (double elapsed) {
-        if (hours_label.get_mapped ()) {
+        if (countdown_label.get_mapped ()) {
             // Math.ceil() because we count backwards:
             // with 0.3 seconds we want to show 1 second remaining,
             // with 59.2 seconds we want to show 1 minute, etc
@@ -365,9 +356,7 @@ public class Row : Gtk.Box {
     }
 
     private void update_countdown_label (int h, int m, int s) {
-        hours_label.set_text ("%02i".printf(h));
-        minutes_label.set_text ("%02i".printf(m));
-        seconds_label.set_text ("%02i".printf(s));
+        countdown_label.set_text ("%02i:%02i:%02i".printf(h, m, s));
     }
 
     public override void grab_focus () {