[gnome-clocks] Rework stopwatch style

[Paolo Borelli <pborelli src gnome org>]

commit c0ec5104409a14333acabc10a18f790eb53e220b
Author: Paolo Borelli <pborelli gnome org>
Date:   Fri Jul 11 22:25:53 2014 +0200

    Rework stopwatch style
    
    Based on a patch by Lapo Calamandrei

 data/css/gnome-clocks.css   |   41 ++++++++++++++++++++++++++++++++---------
 data/ui/stopwatch.ui        |   19 +++++++++++--------
 data/ui/stopwatchlapsrow.ui |    8 ++++----
 src/stopwatch.vala          |    8 +++++++-
 4 files changed, 54 insertions(+), 22 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 25d8ddb..bb12484 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -149,27 +149,50 @@ ClocksWindow > .frame:backdrop {
     border: 0;
 }
 
-.clocks-stopwatch-laps-row {
+.clocks-laps-panel > .frame {
+    border-image: linear-gradient(to bottom,
+                                  mix(@borders,@theme_bg_color,0.5))
+                  0 0 0 1 / 20px 0px 20px 1px stretch;
+}
+
+.clocks-laps-panel .list,
+.clocks-laps-panel .list-row {
+    background-color: transparent;
+}
+
+.clocks-laps-panel .list-row {
+    padding-left: 20px;
+    padding-right: 20px;
     font-size: 14px;
-    border-width: 0 0 1px 0;
-    border-style: solid;
-    border-color: #d3d7cf;
+    border-image: linear-gradient(to bottom,
+                                  mix(@borders,@theme_bg_color,0.5))
+                  0 0 1 0 / 0 20px 1px 20px stretch;
+}
+
+.clocks-laps-panel .first-lap-row {
+    border-image: none;
+    border-color: transparent;
+}
+
+.clocks-laps-panel .lap-time {
+    font-weight: bold;
+    padding-right: 20px;
 }
 
 /* disguise insensitive spinbuttons as normal labels */
 .spinbutton.clocks-timer-label,
 .spinbutton.clocks-timer-label .button {
-  border-color: transparent;
-  background-image: none;
-  box-shadow: none;
+    border-color: transparent;
+    background-image: none;
+    box-shadow: none;
 }
 
 .spinbutton.clocks-timer-label {
-  color: @theme_fg_color;
+    color: @theme_fg_color;
 }
 
 .spinbutton.clocks-timer-label .button {
-  color: transparent;
+    color: transparent;
 }
 
 @keyframes clocks-blink {
diff --git a/data/ui/stopwatch.ui b/data/ui/stopwatch.ui
index 0280c00..7ea320c 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -8,16 +8,16 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="hexpand">True</property>
-        <property name="valign">center</property>
-        <property name="margin_start">48</property>
-        <property name="margin_end">48</property>
-        <property name="margin_top">48</property>
-        <property name="margin_bottom">48</property>
-        <property name="column_spacing">48</property>
+        <property name="valign">fill</property>
+        <property name="column_spacing">0</property>
         <child>
           <object class="ClocksStopwatchFrame" id="analog_frame">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="hexpand">True</property>
+            <property name="halign">end</property>
+            <property name="margin_start">48</property>
+            <property name="margin_end">48</property>
             <child>
               <object class="GtkGrid" id="top_grid">
                 <property name="visible">True</property>
@@ -106,22 +106,25 @@
           <object class="GtkFrame" id="laps_panel">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="halign">end</property>
             <style>
               <class name="clocks-laps-panel"/>
             </style>
             <child>
               <object class="GtkScrolledWindow" id="laps_scrollwin">
-                <property name="width_request">250</property>
+                <property name="width_request">320</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
                 <property name="shadow_type">in</property>
+                <property name="hscrollbar_policy">never</property>
                 <child>
                   <object class="GtkListBox" id="laps_list">
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
-                    <property name="vexpand">True</property>
+                    <property name="vexpand">False</property>
+                    <property name="valign">center</property>
                     <property name="selection_mode">none</property>
                   </object>
                 </child>
diff --git a/data/ui/stopwatchlapsrow.ui b/data/ui/stopwatchlapsrow.ui
index 85027e4..896287b 100644
--- a/data/ui/stopwatchlapsrow.ui
+++ b/data/ui/stopwatchlapsrow.ui
@@ -3,9 +3,6 @@
   <!-- interface-requires gtk+ 3.0 -->
   <template class="ClocksStopwatchLapsRow" parent="GtkListBoxRow">
     <property name="visible">True</property>
-    <style>
-      <class name="clocks-stopwatch-laps-row"/>
-    </style>
     <child>
       <object class="GtkRevealer" id="slider">
         <property name="visible">True</property>
@@ -16,6 +13,7 @@
             <property name="visible">True</property>
             <property name="orientation">horizontal</property>
             <property name="column_spacing">12</property>
+            <property name="halign">start</property>
             <property name="margin">6</property>
             <child>
               <object class="GtkLabel" id="num_label">
@@ -42,7 +40,9 @@
                 <property name="can_focus">False</property>
                 <property name="halign">center</property>
                 <property name="hexpand">True</property>
-                <property name="xalign">0.5</property>
+                <style>
+                  <class name="lap-time"/>
+                </style>
               </object>
               <packing>
                 <property name="left_attach">1</property>
diff --git a/src/stopwatch.vala b/src/stopwatch.vala
index 969b299..077ad64 100644
--- a/src/stopwatch.vala
+++ b/src/stopwatch.vala
@@ -242,7 +242,7 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
         Utils.time_to_hms (split, out split_h, out split_m, out split_s, out r);
         int split_cs = (int) (r * 100);
 
-        var n_label = "%d".printf (current_lap);
+        var n_label = "#%d".printf (current_lap);
 
         // Note that the format uses unicode RATIO character
         // We also prepend the LTR mark to make sure text is always in this direction
@@ -262,6 +262,12 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
         }
 
         var row = new LapsRow (n_label, split_label, tot_label);
+
+        // FIXME: we can remove this if ListBox gains support for :first-child
+        if (current_lap == 1) {
+            row.get_style_context ().add_class ("first-lap-row");
+        }
+
         laps_list.prepend (row);
         row.slide_in ();
         laps_scrollwin.vadjustment.value = laps_scrollwin.vadjustment.lower;