[gnome-clocks/redesign/stopwatch: 6/7] stopwatch: redesign laps rows

From: Zander <zbrown src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-clocks/redesign/stopwatch: 6/7] stopwatch: redesign laps rows
Date: Fri, 31 Jan 2020 14:53:24 +0000 (UTC)
commit 9b2cbcc0adc36a7890851200e5cb4dc1cf4564bd
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Mon Jan 27 02:51:13 2020 +0100

    stopwatch: redesign laps rows

 data/css/gnome-clocks.css   |  29 ++++----
 data/ui/stopwatch.ui        | 103 +++++----------------------
 data/ui/stopwatchlapsrow.ui | 103 ++++++++++++++-------------
 src/stopwatch.vala          | 168 +++++++++++++++++++-------------------------
 4 files changed, 158 insertions(+), 245 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index e5dc2eb..8e1c707 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -230,49 +230,48 @@ spinbutton.clocks-timer-label button {
 
 /* Stopwatch */
 .large-button {
-  padding: 6px 32px;
+    padding: 6px 32px;
 }
-
-.lap-row label {
-  font-size: 16px;
-  font-weight: 400;
+.lap-time {
+    font-weight: bold;
 }
+
 .negative-lap {
-  color: #ED333B;
+    color: #ED333B;
 }
 .positive-lap {
-  color:green;
+    color: #428be5;
 }
 .stopped-stopwatch label,
 .running-stopwatch label,
 .paused-stopwatch label {
-  font-size: 80px;
-  color: grey;
-  font-weight: 200;
+    font-size: 70px;
+    color: grey;
+    font-weight: 200;
 }
 
 .stopped-stopwatch .seconds-label {
-  font-weight: 300;
+    font-weight: 300;
 }
 
 .running-stopwatch .seconds-label,
 .running-stopwatch .miliseconds-label {
-       color: #428be5;
+    color: #428be5;
 }
 .stopped-stopwatch .miliseconds-label,
 .running-stopwatch .miliseconds-label,
 .paused-stopwatch .miliseconds-label {
-  font-size: 50px;
+    font-size: 50px;
 }
 .running-stopwatch .seconds-label,
 .paused-stopwatch .seconds-label {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .stopped-stopwatch .seconds-label,
 .stopped-stopwatch .miliseconds-label,
 .paused-stopwatch .seconds-label,
 .paused-stopwatch .miliseconds-label {
-color:black;
+    color: black;
 }
 
diff --git a/data/ui/stopwatch.ui b/data/ui/stopwatch.ui
index b3272f8..0d39b31 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -11,14 +11,13 @@
       <object class="HdyColumn">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="maximum_width">700</property>
-        <property name="linear_growth_width">700</property>
+        <property name="maximum_width">600</property>
+        <property name="linear_growth_width">600</property>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="margin_top">48</property>
-            <property name="margin_bottom">48</property>
+            <property name="margin_top">36</property>
             <property name="orientation">vertical</property>
             <child>
               <object class="GtkBox" id="time_container">
@@ -136,7 +135,6 @@
                     <property name="yalign">0</property>
                     <attributes>
                       <attribute name="font-features" value="tnum=1"/>
-
                     </attributes>
                     <style>
                       <class name="miliseconds-label"/>
@@ -162,13 +160,15 @@
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="border_width">6</property>
+                <property name="border_width">12</property>
                 <child>
                   <object class="GtkButton" id="start_btn">
-                    <property name="label" translatable="yes">Start</property>
+                    <property name="label" translatable="yes">_Start</property>
+                    <property name="use-underline">True</property>
                     <property name="visible">True</property>
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
+                    <property name="width_request">120</property>
                     <signal name="clicked" handler="on_start_btn_clicked" swapped="no"/>
                     <style>
                       <class name="suggested-action"/>
@@ -188,6 +188,7 @@
                     <property name="can_focus">True</property>
                     <property name="receives_default">True</property>
                     <signal name="clicked" handler="on_clear_btn_clicked" swapped="no"/>
+                    <property name="width_request">120</property>
                     <style>
                       <class name="large-button"/>
                     </style>
@@ -203,7 +204,6 @@
               <packing>
                 <property name="expand">False</property>
                 <property name="fill">True</property>
-                <property name="padding">48</property>
                 <property name="position">1</property>
               </packing>
             </child>
@@ -213,92 +213,27 @@
                 <property name="can_focus">False</property>
                 <property name="transition_type">crossfade</property>
                 <child>
-                  <object class="GtkBox">
+                  <object class="GtkScrolledWindow">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="orientation">vertical</property>
+                    <property name="can_focus">True</property>
+                    <property name="margin">12</property>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkViewport">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="margin_bottom">6</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
-                            <property name="valign">center</property>
-                            <property name="label" translatable="yes">Lap</property>
-                          </object>
-                          <packing>
-                            <property name="expand">True</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="halign">center</property>
-                            <property name="valign">center</property>
-                            <property name="label" translatable="yes">Lap Duration</property>
-                          </object>
-                          <packing>
-                            <property name="expand">True</property>
-                            <property name="fill">True</property>
-                            <property name="position">1</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="halign">center</property>
-                            <property name="valign">center</property>
-                            <property name="label" translatable="yes">Difference</property>
-                          </object>
-                          <packing>
-                            <property name="expand">True</property>
-                            <property name="fill">True</property>
-                            <property name="position">2</property>
-                          </packing>
-                        </child>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkScrolledWindow">
-                        <property name="visible">True</property>
-                        <property name="can_focus">True</property>
+                        <property name="shadow_type">none</property>
                         <child>
-                          <object class="GtkViewport">
+                          <object class="GtkListBox" id="laps_list">
                             <property name="visible">True</property>
                             <property name="can_focus">False</property>
-                            <property name="shadow_type">none</property>
-                            <child>
-                              <object class="GtkListBox" id="laps_list">
-                                <property name="visible">True</property>
-                                <property name="can_focus">False</property>
-                                <property name="valign">start</property>
-                                <property name="selection_mode">none</property>
-                                <style>
-                                  <class name="frame"/>
-                                </style>
-                              </object>
-                            </child>
+                            <property name="valign">start</property>
+                            <property name="selection_mode">none</property>
+                            <style>
+                              <class name="frame"/>
+                            </style>
                           </object>
                         </child>
                       </object>
-                      <packing>
-                        <property name="expand">True</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
                     </child>
                   </object>
                 </child>
diff --git a/data/ui/stopwatchlapsrow.ui b/data/ui/stopwatchlapsrow.ui
index 32d1c2c..8319be9 100644
--- a/data/ui/stopwatchlapsrow.ui
+++ b/data/ui/stopwatchlapsrow.ui
@@ -7,62 +7,65 @@
     <property name="can_focus">False</property>
     <property name="activatable">False</property>
     <child>
-      <object class="GtkRevealer" id="slider">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
+        <property name="border_width">18</property>
         <child>
-          <object class="GtkBox">
+          <object class="GtkLabel" id="duration_label">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="border_width">18</property>
-            <child>
-              <object class="GtkLabel" id="index_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="width_chars">3</property>
-                <property name="xalign">0</property>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="duration_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <style>
-                  <class name="lap-time"/>
-                </style>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="padding">6</property>
-                <property name="position">1</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel" id="difference_label">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="xalign">0.5</property>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="padding">6</property>
-                <property name="position">2</property>
-              </packing>
-            </child>
+            <property name="tooltip_text" translatable="yes">Time</property>
+            <property name="halign">start</property>
+            <property name="valign">center</property>
+            <attributes>
+              <attribute name="font-features" value="tnum=1"/>
+            </attributes>
+            <style>
+              <class name="lap-time"/>
+            </style>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">6</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="difference_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="tooltip_text" translatable="yes">Difference</property>
+            <property name="halign">start</property>
+            <property name="valign">center</property>
+            <attributes>
+              <attribute name="font-features" value="tnum=1"/>
+            </attributes>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="padding">6</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="index_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="valign">center</property>
+            <property name="width_chars">3</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
         </child>
       </object>
     </child>
diff --git a/src/stopwatch.vala b/src/stopwatch.vala
index ef33d6f..2b88ffd 100644
--- a/src/stopwatch.vala
+++ b/src/stopwatch.vala
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2013  Paolo Borelli <pborelli gnome org>
+ * Copyright (C) 2020  Bilal Elmoussaoui <bil elmoussaoui gnome org>
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU General Public License
@@ -19,10 +20,29 @@
 namespace Clocks {
 namespace Stopwatch {
 
+private string render_duration (double duration) {
+    int h;
+    int m;
+    int s;
+    double r;
+    Utils.time_to_hms (Math.floor(duration * 100) / 100, out h, out m, out s, out r);
+    int cs = (int) (r * 10);
+    return "%02i\u200E∶%02i\u200E∶%02i.%i".printf (h.abs(), m.abs(), s.abs(), cs.abs());
+}
+
+public class Lap : GLib.Object {
+    public int index; // Starts at #1
+    public double duration;
+
+    public Lap (int index, double duration) {
+        this.index = index;
+        this.duration = duration;
+    }
+}
+
+
 [GtkTemplate (ui = "/org/gnome/clocks/ui/stopwatchlapsrow.ui")]
 private class LapsRow : Gtk.ListBoxRow {
-    [GtkChild]
-    private Gtk.Revealer slider;
     [GtkChild]
     private Gtk.Label index_label;
     [GtkChild]
@@ -36,79 +56,45 @@ private class LapsRow : Gtk.ListBoxRow {
     public LapsRow (Lap current, Lap? before) {
         this.current = current;
         this.before = before;
-        index_label.label = this.current.get_index();
-        duration_label.label = this.get_duration();
+        index_label.label = _("Lap %i").printf (this.current.index);
+        duration_label.label = this.get_duration_label ();
 
         if (this.before != null) {
-            difference_label.label = this.get_difference_duration();
-        } else {
-            difference_label.hide();
-        }
-        var difference = this.get_difference();
-        if (difference > 0) {
-            get_style_context().add_class("negative-lap");
-        } else if (difference < 0) {
-            get_style_context().add_class("positive-lap");
+            difference_label.label = this.get_delta_label ();
+
+            var difference = this.get_delta_duration ();
+            if (difference > 0) {
+                difference_label.get_style_context().add_class ("negative-lap");
+            } else if (difference < 0) {
+                difference_label.get_style_context().add_class ("positive-lap");
+            }
         }
     }
 
-    public string get_duration() {
-        int h;
-        int m;
-        int s;
-        double r;
-        Utils.time_to_hms (Math.floor(this.current.duration * 100) / 100, out h, out m, out s, out r);
-        int cs = (int) (r * 100);
-        return "%02i\u200E∶%02i\u200E∶%02i.%i".printf (h, m, s, cs);
+    private string get_duration_label () {
+        return render_duration (this.current.duration);
     }
 
-    public double get_difference() {
+    private double get_delta_duration () {
         if (this.before != null) {
             return this.current.duration - this.before.duration;
         }
         return 0;
     }
 
-    public string? get_difference_duration() {
+    private string? get_delta_label () {
         if (this.before != null) {
-            var difference = Math.floor((this.current.duration - this.before.duration) * 100) / 100;
-            int h;
-            int m;
-            int s;
-            double r;
-            Utils.time_to_hms (difference, out h, out m, out s, out r);
-            int cs = (int) (r * 100);
-            if (difference > 0) {
-                return "- %02i\u200E∶%02i\u200E∶%02i.%i".printf (h.abs(), m.abs(), s.abs(), cs.abs());
-            } else {
-                return "+ %02i\u200E∶%02i\u200E∶%02i.%i".printf (h.abs(), m.abs(), s.abs(), cs.abs());
+            var difference = this.current.duration - this.before.duration;
+            var delta_label = render_duration (difference);
+            string sign = "+";
+            if (difference < 0) {
+                sign = "-";
             }
+
+            return "%s%s".printf (sign, delta_label);
         }
         return null;
     }
-
-    public void slide_out() {
-        slider.reveal_child = false;
-    }
-
-    public void slide_in () {
-        slider.reveal_child = true;
-    }
-}
-
-
-public class Lap : GLib.Object {
-    private int index; // Starts at #1
-    public double duration;
-
-    public Lap(int index, double duration) {
-        this.index = index;
-        this.duration = duration;
-    }
-
-    public string get_index() {
-        return index.to_string();
-    }
 }
 
 [GtkTemplate (ui = "/org/gnome/clocks/ui/stopwatch.ui")]
@@ -144,7 +130,7 @@ public class Face : Gtk.Box, Clocks.Clock {
     private GLib.Timer timer;
     private uint tick_id;
     private int current_lap;
-    private double last_lap_time;
+
     [GtkChild]
     private Gtk.Label hours_label;
     [GtkChild]
@@ -169,27 +155,19 @@ public class Face : Gtk.Box, Clocks.Clock {
     construct {
         panel_id = STOPWATCH;
 
-        laps = new GLib.ListStore(typeof(Lap));
+        laps = new GLib.ListStore (typeof(Lap));
 
         timer = new GLib.Timer ();
         tick_id = 0;
 
-        laps_list.set_header_func((before, after) => {
-            if (after != null) {
-                var separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
-                separator.show();
-                before.set_header(separator);
-            }
-        });
-
-        laps_list.bind_model(laps, (lap) => {
-            var total_items = laps.get_n_items();
+        laps_list.set_header_func ((Gtk.ListBoxUpdateHeaderFunc) Hdy.list_box_separator_header);
+        laps_list.bind_model (laps, (lap) => {
+            var total_items = laps.get_n_items ();
             Lap? before = null;
             if (total_items > 1) {
-                before = (Lap)laps.get_item(total_items - 1); // Get the latest item
+                before = (Lap)laps.get_item (total_items - 1); // Get the latest item
             }
-            var lap_row = new LapsRow((Lap)lap, before);
-            lap_row.slide_in();
+            var lap_row = new LapsRow ((Lap)lap, before);
             return lap_row;
         });
 
@@ -244,18 +222,19 @@ public class Face : Gtk.Box, Clocks.Clock {
         } else {
             timer.continue ();
         }
+
         state = State.RUNNING;
         add_tick ();
         start_btn.set_label (_("Pause"));
-        start_btn.get_style_context ().remove_class ("destructive-action");
-        start_btn.get_style_context ().remove_class ("suggested-action");
+        start_btn.get_style_context().remove_class ("suggested-action");
+
         clear_btn.set_sensitive (true);
         clear_btn.set_label (_("Lap"));
-        clear_btn.get_style_context().remove_class("destructive-action");
+        clear_btn.get_style_context().remove_class ("destructive-action");
 
         time_container.get_style_context().add_class ("running-stopwatch");
         time_container.get_style_context().remove_class ("paused-stopwatch");
-        time_container.get_style_context().remove_class("stopped-stopwatch");
+        time_container.get_style_context().remove_class ("stopped-stopwatch");
     }
 
     private void stop () {
@@ -267,9 +246,9 @@ public class Face : Gtk.Box, Clocks.Clock {
         start_btn.get_style_context ().add_class ("suggested-action");
         clear_btn.set_sensitive (true);
         clear_btn.set_label (_("Clear"));
-        clear_btn.get_style_context().add_class("destructive-action");
+        clear_btn.get_style_context().add_class ("destructive-action");
 
-        time_container.get_style_context().add_class("paused-stopwatch");
+        time_container.get_style_context().add_class ("paused-stopwatch");
         time_container.get_style_context().remove_class ("running-stopwatch");
         time_container.get_style_context().remove_class ("stopped-stopwatch");
     }
@@ -281,25 +260,25 @@ public class Face : Gtk.Box, Clocks.Clock {
         state = State.RESET;
         remove_tick ();
         update_time_label ();
-        start_btn.set_label (_("Start"));
-        start_btn.get_style_context ().add_class ("suggested-action");
-        clear_btn.set_sensitive (false);
-        clear_btn.set_label(_("Lap"));
-        clear_btn.get_style_context().remove_class("destructive-action");
         current_lap = 0;
-        last_lap_time = 0;
 
+        start_btn.set_label (_("Start"));
+        start_btn.get_style_context().add_class ("suggested-action");
+
+        clear_btn.set_sensitive (false);
+        clear_btn.set_label (_("Lap"));
+        clear_btn.get_style_context().remove_class ("destructive-action");
 
         time_container.get_style_context().add_class ("stopped-stopwatch");
         time_container.get_style_context().remove_class ("paused-stopwatch");
-        time_container.get_style_context().remove_class("running-stopwatch");
-        laps.remove_all();
+        time_container.get_style_context().remove_class ("running-stopwatch");
+        laps.remove_all ();
     }
 
-    private double total_laps_duration() {
+    private double total_laps_duration () {
         double total = 0;
-        for(var i=0; i < laps.get_n_items(); i++) {
-            var lap = (Lap) laps.get_item(i);
+        for(var i=0; i < laps.get_n_items (); i++) {
+            var lap = (Lap) laps.get_item (i);
             total += lap.duration;
         }
         return total;
@@ -309,10 +288,7 @@ public class Face : Gtk.Box, Clocks.Clock {
         current_lap += 1;
         laps_revealer.reveal_child = current_lap >= 1;
         var e = timer.elapsed ();
-        print (e.to_string () + "\n");
         double lap_duration = e - this.total_laps_duration ();
-        print (lap_duration.to_string () + "\n");
-        print ("#####\n");
         var lap = new Lap (current_lap, lap_duration);
         laps.insert (0, lap);
     }
@@ -345,10 +321,10 @@ public class Face : Gtk.Box, Clocks.Clock {
 
         // Note that the format uses unicode RATIO character
         // We also prepend the LTR mark to make sure text is always in this direction
-        hours_label.set_text("%02i\u200E".printf(h));
-        minutes_label.set_text("%02i\u200E".printf(m));
-        seconds_label.set_text("%02i".printf(s));
-        miliseconds_label.set_text("%i".printf(ds));
+        hours_label.set_text ("%02i\u200E".printf (h));
+        minutes_label.set_text ("%02i\u200E".printf (m));
+        seconds_label.set_text ("%02i".printf (s));
+        miliseconds_label.set_text ("%i".printf (ds));
 
         return true;
     }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]