[gnome-clocks/bilelmoussaoui/redesign-timer] Timer: a bit of design tweaks

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 846bbe7b31eecba78522054e6c24322aadcf1775
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Tue Jan 28 15:31:05 2020 +0100

    Timer: a bit of design tweaks

 data/css/gnome-clocks.css |   4 +-
 data/ui/timer.ui          |   1 +
 data/ui/timer_row.ui      | 117 +++++++++++++++++++++++++++++++---------------
 src/timer.vala            |  30 ++++++++----
 4 files changed, 105 insertions(+), 47 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 3ea5297..3cbaaa5 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -231,7 +231,9 @@ spinbutton.clocks-timer-label button {
 
 .round-button {
   border-radius: 9999px;
-  padding: 18px 24px;
+}
+.large-button {
+  padding: 12px 18px;
 }
 .timer-countdown {
   font-size: 40pt;
diff --git a/data/ui/timer.ui b/data/ui/timer.ui
index 7b66f77..c5a3700 100644
--- a/data/ui/timer.ui
+++ b/data/ui/timer.ui
@@ -61,6 +61,7 @@
             </child>
             <style>
               <class name="round-button"/>
+              <class name="large-button"/>
               <class name="suggested-action"/>
             </style>
           </object>
diff --git a/data/ui/timer_row.ui b/data/ui/timer_row.ui
index eb06842..be1dee6 100644
--- a/data/ui/timer_row.ui
+++ b/data/ui/timer_row.ui
@@ -7,6 +7,7 @@
     <property name="can_focus">False</property>
     <child>
       <object class="GtkBox">
+        <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="valign">start</property>
         <property name="margin_top">12</property>
@@ -70,37 +71,11 @@
         </child>
         <child>
           <object class="GtkGrid">
-            <property name="width_request">300</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="halign">center</property>
-            <property name="row_homogeneous">True</property>
+            <property name="column_spacing">18</property>
             <property name="column_homogeneous">True</property>
-            <child>
-              <object class="GtkButton" id="reset_button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="relief">none</property>
-                <signal name="clicked" handler="on_reset_button_clicked" swapped="no"/>
-                <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">view-refresh-symbolic</property>
-                  </object>
-                </child>
-                <style>
-                  <class name="round-button"/>
-                </style>
-              </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-              </packing>
-            </child>
             <child>
               <object class="GtkStack" id="start_stack">
                 <property name="visible">True</property>
@@ -127,6 +102,7 @@
                     </child>
                     <style>
                       <class name="round-button"/>
+                      <class name="large-button"/>
                     </style>
                   </object>
                   <packing>
@@ -151,6 +127,7 @@
                     </child>
                     <style>
                       <class name="round-button"/>
+                      <class name="large-button"/>
                       <class name="suggested-action"/>
                     </style>
                   </object>
@@ -166,23 +143,87 @@
               </packing>
             </child>
             <child>
-              <object class="GtkButton" id="delete_button">
+              <object class="GtkStack" id="reset_stack">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="relief">none</property>
+                <property name="can_focus">False</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkButton" id="reset_button">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="relief">none</property>
+                    <signal name="clicked" handler="on_reset_button_clicked" swapped="no"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">view-refresh-symbolic</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="round-button"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="name">button</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="icon_name">edit-delete-symbolic</property>
                   </object>
+                  <packing>
+                    <property name="name">empty</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="left_attach">0</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkStack" id="delete_stack">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <child>
+                  <object class="GtkButton" id="delete_button">
+                    <property name="visible">True</property>
+                    <property name="can_focus">True</property>
+                    <property name="receives_default">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="relief">none</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">edit-delete-symbolic</property>
+                      </object>
+                    </child>
+                    <style>
+                      <class name="round-button"/>
+                      <class name="round-button"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="name">button</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                  </object>
+                  <packing>
+                    <property name="name">empty</property>
+                    <property name="position">1</property>
+                  </packing>
                 </child>
-                <style>
-                  <class name="round-button"/>
-                </style>
               </object>
               <packing>
                 <property name="left_attach">2</property>
diff --git a/src/timer.vala b/src/timer.vala
index fdc9123..49781f3 100644
--- a/src/timer.vala
+++ b/src/timer.vala
@@ -242,8 +242,6 @@ public class Row : Gtk.ListBoxRow {
     private uint timeout_id;
     [GtkChild]
     private Gtk.Label countdown_label;
-    [GtkChild]
-    private Gtk.Stack start_stack;
 
     [GtkChild]
     private Gtk.Label timer_name;
@@ -251,10 +249,21 @@ public class Row : Gtk.ListBoxRow {
     [GtkChild]
     private Gtk.Stack name_stack;
 
+    [GtkChild]
+    private Gtk.Stack start_stack;
+    [GtkChild]
+    private Gtk.Stack reset_stack;
+    [GtkChild]
+    private Gtk.Stack delete_stack;
+
     [GtkChild]
     private Gtk.Button reset_button;
     [GtkChild]
     private Gtk.Button delete_button;
+    [GtkChild]
+    private Gtk.Button pause_button;
+    [GtkChild]
+    private Gtk.Button start_button;
 
     [GtkChild]
     private Gtk.Entry title;
@@ -276,6 +285,11 @@ public class Row : Gtk.ListBoxRow {
             }
         });
         delete_button.clicked.connect (() => deleted ());
+        // Not sure why I keep getting the flat class locally.
+        reset_button.get_style_context ().remove_class ("flat");
+        delete_button.get_style_context ().remove_class ("flat");
+        start_button.get_style_context ().remove_class ("flat");
+        pause_button.get_style_context ().remove_class ("flat");
 
         reset ();
     }
@@ -315,8 +329,8 @@ public class Row : Gtk.ListBoxRow {
 
         update_countdown_label (item.duration.hours, item.duration.minutes, item.duration.seconds);
 
-        reset_button.hide ();
-        delete_button.show ();
+        reset_stack.visible_child_name = "empty";
+        delete_stack.visible_child_name = "button";
 
         timer.reset ();
         countdown_label.get_style_context ().add_class ("timer-paused");
@@ -330,8 +344,8 @@ public class Row : Gtk.ListBoxRow {
         countdown_label.get_style_context ().add_class ("timer-running");
         countdown_label.get_style_context ().remove_class ("timer-paused");
 
-        reset_button.hide ();
-        delete_button.hide ();
+        reset_stack.visible_child_name = "empty";
+        delete_stack.visible_child_name = "empty";
 
         start_stack.visible_child_name = "pause";
         name_stack.visible_child_name = "display";
@@ -358,8 +372,8 @@ public class Row : Gtk.ListBoxRow {
         countdown_label.get_style_context ().add_class ("timer-paused");
         countdown_label.get_style_context ().remove_class ("timer-running");
 
-        reset_button.show ();
-        delete_button.show ();
+        reset_stack.visible_child_name = "button";
+        delete_stack.visible_child_name = "button";
 
         state = State.PAUSED;
         timer.stop ();