[gnome-clocks] Use disguised spinbuttons in the timer countdown

[Paolo Borelli <pborelli src gnome org>]

commit 5749f467397eca5c0b76e90a51cce6bcc5642ee8
Author: Paolo Borelli <pborelli gnome org>
Date:   Fri Jul 11 11:28:33 2014 +0200

    Use disguised spinbuttons in the timer countdown
    
    Instead of a label use insensitive spinbuttons disguised to look as
    plain labels. In this way the numbers do not move around during the
    transition.
    However I think this may be a problem for accessibility... Let's try
    and see.

 data/css/gnome-clocks.css |   18 +++++-
 data/ui/timer.ui          |  150 +++++++++++++++++++++++++++++++++++++++++++--
 src/timer.vala            |   34 +++++-----
 3 files changed, 178 insertions(+), 24 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 2f97820..85383e5 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -142,12 +142,28 @@
     border-color: #d3d7cf;
 }
 
+/* disguise insensitive spinbuttons as normal labels */
+.spinbutton.clocks-timer-label,
+.spinbutton.clocks-timer-label .button {
+  border-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
+
+.spinbutton.clocks-timer-label {
+  color: @theme_fg_color;
+}
+
+.spinbutton.clocks-timer-label .button {
+  color: transparent;
+}
+
 @keyframes clocks-blink {
     0% { color: @theme_fg_color; }
     100% { color: @insensitive_fg_color; }
 }
 
-.clocks-blink {
+.clocks-paused .clocks-timer-label {
     animation-name: clocks-blink;
     animation-iteration-count: infinite;  
     animation-timing-function: cubic-bezier(1.0,0,0,1.0);
diff --git a/data/ui/timer.ui b/data/ui/timer.ui
index c784d9b..9ec8fc4 100644
--- a/data/ui/timer.ui
+++ b/data/ui/timer.ui
@@ -229,14 +229,152 @@
             <property name="vexpand">True</property>
             <property name="row_spacing">24</property>
             <child>
-              <object class="GtkLabel" id="countdown_label">
+              <object class="GtkGrid" id="grid_labels">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
-                <style>
-                  <class name="clocks-timer-label"/>
-                </style>
+                <child>
+                  <object class="GtkLabel" id="dummy_label3">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="hexpand">True</property>
+                    <property name="label"></property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSpinButton" id="h_label">
+                    <property name="visible">True</property>
+                    <property name="sensitive">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="max_length">2</property>
+                    <property name="invisible_char">●</property>
+                    <property name="xalign">0.5</property>
+                    <property name="invisible_char_set">True</property>
+                    <property name="input_purpose">number</property>
+                    <property name="orientation">vertical</property>
+                    <property name="adjustment">adjustment_hours</property>
+                    <property name="numeric">True</property>
+                    <property name="wrap">True</property>
+                    <signal name="output" handler="show_leading_zeros" swapped="no"/>
+                    <signal name="changed" handler="update_start_button" swapped="no"/>
+                    <style>
+                      <class name="clocks-timer-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="colon_label3">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="label">∶</property>
+                    <style>
+                      <class name="clocks-timer-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">2</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSpinButton" id="m_label">
+                    <property name="visible">True</property>
+                    <property name="sensitive">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="max_length">2</property>
+                    <property name="invisible_char">●</property>
+                    <property name="xalign">0.5</property>
+                    <property name="invisible_char_set">True</property>
+                    <property name="input_purpose">number</property>
+                    <property name="orientation">vertical</property>
+                    <property name="adjustment">adjustment_minutes</property>
+                    <property name="numeric">True</property>
+                    <property name="wrap">True</property>
+                    <signal name="output" handler="show_leading_zeros" swapped="no"/>
+                    <signal name="changed" handler="update_start_button" swapped="no"/>
+                    <style>
+                      <class name="clocks-timer-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">3</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="colon_label4">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="label">∶</property>
+                    <style>
+                      <class name="clocks-timer-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">4</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSpinButton" id="s_label">
+                    <property name="visible">True</property>
+                    <property name="sensitive">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="max_length">2</property>
+                    <property name="invisible_char">●</property>
+                    <property name="xalign">0.5</property>
+                    <property name="invisible_char_set">True</property>
+                    <property name="input_purpose">number</property>
+                    <property name="orientation">vertical</property>
+                    <property name="adjustment">adjustment_seconds</property>
+                    <property name="numeric">True</property>
+                    <property name="wrap">True</property>
+                    <signal name="output" handler="show_leading_zeros" swapped="no"/>
+                    <signal name="changed" handler="update_start_button" swapped="no"/>
+                    <style>
+                      <class name="clocks-timer-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">5</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="dummy_label4">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="hexpand">True</property>
+                    <property name="label"></property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">6</property>
+                    <property name="top_attach">0</property>
+                    <property name="width">1</property>
+                    <property name="height">1</property>
+                  </packing>
+                </child>
               </object>
               <packing>
                 <property name="left_attach">0</property>
@@ -305,7 +443,7 @@
     <widgets>
       <widget name="grid_spinbuttons"/>
       <widget name="start_button"/>
-      <widget name="countdown_label"/>
+      <widget name="grid_labels"/>
       <widget name="button_box"/>
     </widgets>
   </object>
@@ -313,7 +451,7 @@
     <property name="mode">vertical</property>
     <widgets>
       <widget name="grid_spinbuttons"/>
-      <widget name="countdown_label"/>
+      <widget name="grid_labels"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="sizegroup3">
diff --git a/src/timer.vala b/src/timer.vala
index c4c1c7b..45b13ae 100644
--- a/src/timer.vala
+++ b/src/timer.vala
@@ -99,7 +99,14 @@ public class MainPanel : Gtk.Stack, Clocks.Clock {
     [GtkChild]
     private CountdownFrame countdown_frame;
     [GtkChild]
-    private Gtk.Label countdown_label;
+    // We cheat and use spibuttons also when displaying the time
+    // making them insensitive and hiding the +/- via css
+    // this is needed to ensure the text does not move in the transition
+    private Gtk.SpinButton h_label;
+    [GtkChild]
+    private Gtk.SpinButton m_label;
+    [GtkChild]
+    private Gtk.SpinButton s_label;
     [GtkChild]
     private Gtk.Button left_button;
 
@@ -163,7 +170,7 @@ public class MainPanel : Gtk.Stack, Clocks.Clock {
             left_button.get_style_context ().add_class ("suggested-action");
             break;
         case State.PAUSED:
-            restart ();
+            start ();
             left_button.set_label (_("Pause"));
             left_button.get_style_context ().remove_class("suggested-action");
             break;
@@ -187,47 +194,40 @@ public class MainPanel : Gtk.Stack, Clocks.Clock {
         m_spinbutton.value = (int) span / 60;
         s_spinbutton.value = span % 60;
         left_button.get_style_context ().remove_class("clocks-go");
-        countdown_label.get_style_context ().remove_class ("clocks-blink");
+        countdown_frame.get_style_context ().remove_class ("clocks-paused");
         start_button.set_sensitive (span > 0);
         countdown_frame.reset ();
         visible_child = setup_frame;
     }
 
     private void start () {
+        countdown_frame.get_style_context ().remove_class ("clocks-paused");
+
         if (state == State.STOPPED && tick_id == 0) {
             var h = h_spinbutton.get_value_as_int ();
             var m = m_spinbutton.get_value_as_int ();
             var s = s_spinbutton.get_value_as_int ();
 
-            state = State.RUNNING;
             span = h * 3600 + m * 60 + s;
-
             settings.set_uint ("timer", (uint) span);
-
-            timer.start ();
-
             countdown_frame.span = span;
             visible_child = countdown_frame;
 
             update_countdown_label (h, m, s);
-            add_tick ();
         }
-    }
 
-    private void restart () {
         state = State.RUNNING;
         timer.start ();
         add_tick ();
-        countdown_label.get_style_context ().remove_class ("clocks-blink");
     }
 
     private void pause () {
         state = State.PAUSED;
         timer.stop ();
         span -= timer.elapsed ();
+        countdown_frame.get_style_context ().add_class ("clocks-paused");
         countdown_frame.pause ();
         remove_tick ();
-        countdown_label.get_style_context ().add_class ("clocks-blink");
     }
 
     private void add_tick () {
@@ -261,7 +261,7 @@ public class MainPanel : Gtk.Stack, Clocks.Clock {
     }
 
     private void update_countdown (double elapsed) {
-        if (countdown_label.get_mapped ()) {
+        if (h_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
@@ -277,9 +277,9 @@ public class MainPanel : Gtk.Stack, Clocks.Clock {
     }
 
     private void update_countdown_label (int h, int m, int s) {
-        // Note that the format uses unicode RATIO character
-        // We also prepend the LTR mark to make sure text is always in this direction
-        countdown_label.set_text ("%02i\xE2\x80\x8E∶%02i\xE2\x80\x8E∶%02i".printf (h, m, s));
+        h_label.set_value (h);
+        m_label.set_value (m);
+        s_label.set_value (s);
     }
 
     public override void grab_focus () {