[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 02:42:46 +0000 (UTC)
commit 950bbd5e9d6074600dfd21bb7df659ee65f1e537
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Mon Jan 27 02:51:13 2020 +0100
Redesign laps rows
data/css/gnome-clocks.css | 29 +++++----
data/ui/stopwatch.ui | 103 ++++++-------------------------
data/ui/stopwatchlapsrow.ui | 101 +++++++++++++++---------------
src/stopwatch.vala | 146 ++++++++++++++++++--------------------------
4 files changed, 145 insertions(+), 234 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..b777d1a 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>
<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..59750a8 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 * 100);
+ 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")]
@@ -139,7 +125,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]
@@ -164,19 +150,12 @@ 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.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 +163,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 +217,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,18 +255,18 @@ 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");
+ 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");
- time_container.get_style_context().remove_class("running-stopwatch");
+ time_container.get_style_context().remove_class ("running-stopwatch");
laps.remove_all();
}
@@ -302,14 +281,11 @@ public class Face : Gtk.Box, Clocks.Clock {
private void lap () {
current_lap += 1;
- laps_revealer.set_reveal_child(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);
+ var lap = new Lap (current_lap, lap_duration);
+ laps.insert (0, lap);
}
private void add_tick () {
@@ -340,10 +316,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]
