[gnome-clocks/redesign/stopwatch] Redesign laps rows
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks/redesign/stopwatch] Redesign laps rows
- Date: Mon, 27 Jan 2020 01:53:40 +0000 (UTC)
commit 7760d3b589805265ab049ab24eb6d749cb429eb4
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Mon Jan 27 02:51:13 2020 +0100
Redesign laps rows
data/css/gnome-clocks.css | 13 +++--
data/ui/stopwatch.ui | 94 +++++------------------------------
data/ui/stopwatchlapsrow.ui | 101 +++++++++++++++++++-------------------
src/stopwatch.vala | 116 ++++++++++++++++----------------------------
src/utils.vala | 10 ++++
5 files changed, 122 insertions(+), 212 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index e5dc2eb..dd82a7c 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -232,21 +232,20 @@ spinbutton.clocks-timer-label button {
.large-button {
padding: 6px 32px;
}
-
-.lap-row label {
- font-size: 16px;
- font-weight: 400;
+.lap-time {
+ font-weight: bold;
}
+
.negative-lap {
color: #ED333B;
}
.positive-lap {
- color:green;
+ color: #428be5;
}
.stopped-stopwatch label,
.running-stopwatch label,
.paused-stopwatch label {
- font-size: 80px;
+ font-size: 70px;
color: grey;
font-weight: 200;
}
@@ -273,6 +272,6 @@ spinbutton.clocks-timer-label button {
.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..8dc49f9 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -17,8 +17,7 @@
<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,7 +160,7 @@
<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>
@@ -203,7 +201,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 +210,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>
<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="margin">12</property>
<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..ac271f4 100644
--- a/data/ui/stopwatchlapsrow.ui
+++ b/data/ui/stopwatchlapsrow.ui
@@ -7,62 +7,63 @@
<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="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="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 d9d722e..7ac5fad 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,20 @@
namespace Clocks {
namespace Stopwatch {
+
+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 +47,46 @@ 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 Utils.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 = Utils.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")]
@@ -139,7 +117,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,14 +147,7 @@ public class Face : Gtk.Box, Clocks.Clock {
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.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;
@@ -184,7 +155,6 @@ public class Face : Gtk.Box, Clocks.Clock {
before = (Lap)laps.get_item(total_items - 1); // Get the latest item
}
var lap_row = new LapsRow((Lap)lap, before);
- lap_row.slide_in();
return lap_row;
});
@@ -239,11 +209,12 @@ 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");
+
clear_btn.set_sensitive (true);
clear_btn.set_label (_("Lap"));
clear_btn.get_style_context().remove_class("destructive-action");
@@ -276,14 +247,14 @@ public class Face : Gtk.Box, Clocks.Clock {
state = State.RESET;
remove_tick ();
update_time_label ();
+ current_lap = 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");
- current_lap = 0;
- last_lap_time = 0;
-
time_container.get_style_context().add_class ("stopped-stopwatch");
time_container.get_style_context().remove_class ("paused-stopwatch");
@@ -304,10 +275,7 @@ public class Face : Gtk.Box, Clocks.Clock {
current_lap += 1;
laps_revealer.set_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);
}
diff --git a/src/utils.vala b/src/utils.vala
index 84af1b8..a0f536b 100644
--- a/src/utils.vala
+++ b/src/utils.vala
@@ -65,6 +65,16 @@ public void time_to_hms (double t, out int h, out int m, out int s, out double r
remainder = t - s;
}
+public string render_duration(double duration) {
+ int h;
+ int m;
+ int s;
+ double r;
+ time_to_hms (Math.floor(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.abs());
+}
+
// TODO: For now we are wrapping Gnome's clock, but we should probably
// implement our own class, maybe using gnome-datetime-source
// Especially if we want to try to use CLOCK_REALTIME_ALARM
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
