[gnome-clocks/redesign/stopwatch] Stopwatch: implement the new mockup
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks/redesign/stopwatch] Stopwatch: implement the new mockup
- Date: Wed, 4 Dec 2019 21:08:57 +0000 (UTC)
commit e323e15cf281b5c3e438a7e541b29c9db1c27adc
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Wed Dec 4 22:07:18 2019 +0100
Stopwatch: implement the new mockup
data/css/gnome-clocks.css | 6 +-
data/ui/stopwatch.ui | 185 +++++++++++++++++++++-----------------------
data/ui/stopwatchlapsrow.ui | 66 ++++++++--------
src/stopwatch.vala | 112 +++++++--------------------
4 files changed, 154 insertions(+), 215 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 883bbed..9cd776f 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -143,7 +143,6 @@ window > stack:backdrop {
font-size: 48pt;
}
-.clocks-stopwatch-label,
.clocks-timer-label {
font-size: 48pt;
}
@@ -228,3 +227,8 @@ spinbutton.clocks-timer-label button {
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 1s;
}
+
+/* Stopwatch */
+.large-button {
+ padding: 12px 24px;
+}
diff --git a/data/ui/stopwatch.ui b/data/ui/stopwatch.ui
index 005ef27..8a852e2 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -1,138 +1,127 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
<interface>
- <!-- interface-requires gtk+ 3.6 -->
+ <requires lib="gtk+" version="3.12"/>
+ <requires lib="libhandy" version="0.0"/>
<template class="ClocksStopwatchFace" parent="GtkBox">
<property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="orientation">vertical</property>
<child>
- <object class="GtkGrid" id="stopwatch_panel">
+ <object class="HdyColumn">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hexpand">True</property>
- <property name="valign">fill</property>
- <property name="column_spacing">0</property>
+ <property name="maximum_width">700</property>
+ <property name="linear_growth_width">700</property>
<child>
- <object class="ClocksStopwatchFrame" id="analog_frame">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hexpand">True</property>
- <property name="halign">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="orientation">vertical</property>
<child>
- <object class="GtkGrid" id="top_grid">
+ <object class="GtkLabel" id="time_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="row_spacing">24</property>
- <property name="column_homogeneous">True</property>
+ <property name="label">00:00:00</property>
+ <attributes>
+ <attribute name="weight" value="light"/>
+ <attribute name="scale" value="5"/>
+ </attributes>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="border_width">6</property>
<child>
- <object class="GtkLabel" id="time_label">
+ <object class="GtkButton" id="start_btn">
+ <property name="label" translatable="yes">Start</property>
<property name="visible">True</property>
- <property name="can_focus">False</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <signal name="clicked" handler="on_start_btn_clicked" swapped="no"/>
<style>
- <class name="clocks-stopwatch-label"/>
+ <class name="suggested-action"/>
+ <class name="large-button"/>
</style>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
</packing>
</child>
<child>
- <object class="GtkBox" id="button_box">
+ <object class="GtkButton" id="clear_btn">
+ <property name="label" translatable="yes">Clear</property>
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="hexpand">True</property>
- <property name="homogeneous">True</property>
- <property name="spacing">16</property>
- <property name="height_request">40</property>
- <child>
- <object class="GtkButton" id="left_button">
- <property name="label" translatable="yes">Start</property>
- <property name="width_request">132</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <signal name="clicked" handler="on_left_button_clicked" swapped="no"/>
- <style>
- <class name="clocks-button"/>
- </style>
- </object>
- <packing>
- <property name="expand">True</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="right_button">
- <property name="label" translatable="yes">Reset</property>
- <property name="width_request">132</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <signal name="clicked" handler="on_right_button_clicked" swapped="no"/>
- <style>
- <class name="clocks-button"/>
- </style>
- </object>
- <packing>
- <property name="expand">True</property>
- <property name="fill">True</property>
- <property name="position">1</property>
- </packing>
- </child>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <signal name="clicked" handler="on_clear_btn_clicked" swapped="no"/>
+ <style>
+ <class name="large-button"/>
+ </style>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- <property name="width">1</property>
- <property name="height">1</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">1</property>
</packing>
</child>
</object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="padding">48</property>
+ <property name="position">1</property>
+ </packing>
</child>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkScrolledWindow" id="laps_scrollwin">
- <property name="width_request">320</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="hexpand">False</property>
- <property name="vexpand">True</property>
- <property name="shadow_type">in</property>
- <property name="hscrollbar_policy">never</property>
- <style>
- <class name="clocks-laps-panel"/>
- </style>
<child>
- <object class="GtkListBox" id="laps_list">
+ <object class="GtkScrolledWindow">
<property name="visible">True</property>
<property name="can_focus">True</property>
- <property name="vexpand">False</property>
- <property name="valign">center</property>
- <property name="selection_mode">none</property>
+ <child>
+ <object class="GtkViewport">
+ <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>
+ </object>
+ </child>
</object>
+ <packing>
+ <property name="expand">True</property>
+ <property name="fill">True</property>
+ <property name="position">2</property>
+ </packing>
</child>
</object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
- </packing>
</child>
</object>
+ <packing>
+ <property name="expand">True</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
</child>
</template>
</interface>
diff --git a/data/ui/stopwatchlapsrow.ui b/data/ui/stopwatchlapsrow.ui
index d4db2f9..0094f14 100644
--- a/data/ui/stopwatchlapsrow.ui
+++ b/data/ui/stopwatchlapsrow.ui
@@ -1,70 +1,72 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
<interface>
- <!-- interface-requires gtk+ 3.0 -->
+ <requires lib="gtk+" version="3.14"/>
<template class="ClocksStopwatchLapsRow" parent="GtkListBoxRow">
<property name="visible">True</property>
+ <property name="can_focus">False</property>
<property name="activatable">False</property>
<child>
<object class="GtkRevealer" id="slider">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="reveal_child">False</property>
<child>
- <object class="GtkGrid" id="grid">
+ <object class="GtkBox">
<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>
+ <property name="can_focus">False</property>
+ <property name="border_width">18</property>
<child>
- <object class="GtkLabel" id="num_label">
+ <object class="GtkLabel" id="tot_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
- <property name="hexpand">False</property>
- <property name="xalign">0</property>
- <property name="width_chars">3</property>
- <style>
- <class name="dim-label"/>
- </style>
+ <property name="valign">center</property>
+ <property name="xalign">0.5</property>
+ <attributes>
+ <attribute name="weight" value="bold"/>
+ </attributes>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
+ <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="split_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="hexpand">True</property>
+ <property name="halign">start</property>
+ <property name="valign">center</property>
<style>
<class name="lap-time"/>
</style>
</object>
<packing>
- <property name="left_attach">1</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
+ <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="tot_label">
+ <object class="GtkLabel" id="num_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="hexpand">True</property>
- <property name="xalign">0.5</property>
+ <property name="halign">start</property>
+ <property name="valign">center</property>
+ <property name="width_chars">3</property>
+ <property name="xalign">0</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
</object>
<packing>
- <property name="left_attach">2</property>
- <property name="top_attach">0</property>
- <property name="width">1</property>
- <property name="height">1</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">2</property>
</packing>
</child>
</object>
diff --git a/src/stopwatch.vala b/src/stopwatch.vala
index fca93bb..7c8fad2 100644
--- a/src/stopwatch.vala
+++ b/src/stopwatch.vala
@@ -19,63 +19,6 @@
namespace Clocks {
namespace Stopwatch {
-public class Frame : AnalogFrame {
- private int seconds;
- private double millisecs;
-
- public void update (int s, double ms) {
- seconds = s;
- millisecs = ms;
- queue_draw ();
- }
-
- public void reset () {
- update (0, 0);
- }
-
- public override void draw_progress (Cairo.Context cr, int center_x, int center_y, int radius) {
- var context = get_style_context ();
-
- context.save ();
- context.add_class ("progress");
-
- cr.set_line_width (LINE_WIDTH);
- cr.set_line_cap (Cairo.LineCap.ROUND);
-
- var color = context.get_color (context.get_state ());
- var progress = ((double) seconds + millisecs) / 60;
- if (progress > 0) {
- cr.arc (center_x,
- center_y,
- radius - LINE_WIDTH / 2,
- 1.5 * Math.PI,
- (1.5 + progress * 2 ) * Math.PI);
- Gdk.cairo_set_source_rgba (cr, color);
- cr.stroke ();
- }
-
- context.restore ();
-
- context.save ();
- context.add_class ("progress-fast");
-
- cr.set_line_width (LINE_WIDTH - 2);
- color = context.get_color (context.get_state ());
- progress = millisecs;
- if (progress > 0) {
- cr.arc (center_x,
- center_y,
- radius - LINE_WIDTH / 2,
- (1.5 + progress * 2 ) * Math.PI - 0.1,
- (1.5 + progress * 2 ) * Math.PI + 0.1);
- Gdk.cairo_set_source_rgba (cr, color);
- cr.stroke ();
- }
-
- context.restore ();
- }
-}
-
[GtkTemplate (ui = "/org/gnome/clocks/ui/stopwatchlapsrow.ui")]
private class LapsRow : Gtk.ListBoxRow {
[GtkChild]
@@ -124,15 +67,11 @@ public class Face : Gtk.Box, Clocks.Clock {
private int current_lap;
private double last_lap_time;
[GtkChild]
- private Frame analog_frame;
- [GtkChild]
private Gtk.Label time_label;
[GtkChild]
- private Gtk.Button left_button;
- [GtkChild]
- private Gtk.Button right_button;
+ private Gtk.Button start_btn;
[GtkChild]
- private Gtk.ScrolledWindow laps_scrollwin;
+ private Gtk.Button clear_btn;
[GtkChild]
private Gtk.ListBox laps_list;
@@ -145,6 +84,14 @@ 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);
+ }
+ });
+
map.connect ((w) => {
if (state == State.RUNNING) {
update_time_label ();
@@ -162,7 +109,7 @@ public class Face : Gtk.Box, Clocks.Clock {
}
[GtkCallback]
- private void on_left_button_clicked (Gtk.Button button) {
+ private void on_start_btn_clicked (Gtk.Button button) {
switch (state) {
case State.RESET:
case State.STOPPED:
@@ -177,7 +124,7 @@ public class Face : Gtk.Box, Clocks.Clock {
}
[GtkCallback]
- private void on_right_button_clicked (Gtk.Button button) {
+ private void on_clear_btn_clicked (Gtk.Button button) {
switch (state) {
case State.STOPPED:
reset ();
@@ -198,21 +145,21 @@ public class Face : Gtk.Box, Clocks.Clock {
}
state = State.RUNNING;
add_tick ();
- left_button.set_label (_("Stop"));
- left_button.get_style_context ().add_class ("destructive-action");
- right_button.set_sensitive (true);
- right_button.set_label (_("Lap"));
+ start_btn.set_label (_("Stop"));
+ start_btn.get_style_context ().add_class ("destructive-action");
+ clear_btn.set_sensitive (true);
+ clear_btn.set_label (_("Lap"));
}
private void stop () {
timer.stop ();
state = State.STOPPED;
remove_tick ();
- left_button.set_label (_("Continue"));
- left_button.get_style_context ().remove_class ("destructive-action");
- left_button.get_style_context ().add_class ("suggested-action");
- right_button.set_sensitive (true);
- right_button.set_label (_("Reset"));
+ start_btn.set_label (_("Continue"));
+ start_btn.get_style_context ().remove_class ("destructive-action");
+ start_btn.get_style_context ().add_class ("suggested-action");
+ clear_btn.set_sensitive (true);
+ clear_btn.set_label (_("Reset"));
}
private void reset () {
@@ -220,9 +167,9 @@ public class Face : Gtk.Box, Clocks.Clock {
state = State.RESET;
remove_tick ();
update_time_label ();
- left_button.set_label (_("Start"));
- left_button.get_style_context ().add_class ("suggested-action");
- right_button.set_sensitive (false);
+ start_btn.set_label (_("Start"));
+ start_btn.get_style_context ().add_class ("suggested-action");
+ clear_btn.set_sensitive (false);
current_lap = 0;
last_lap_time = 0;
foreach (var l in laps_list.get_children ()) {
@@ -255,7 +202,7 @@ public class Face : 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 = "Lap %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
@@ -277,7 +224,6 @@ public class Face : Gtk.Box, Clocks.Clock {
var row = new LapsRow (n_label, split_label, tot_label);
laps_list.prepend (row);
row.slide_in ();
- laps_scrollwin.vadjustment.value = laps_scrollwin.vadjustment.lower;
}
private void add_tick () {
@@ -309,18 +255,16 @@ 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
if (h > 0) {
- time_label.set_text ("%i\u200E∶%02i\u200E∶%02i.%i".printf (h, m, s, ds));
+ time_label.set_text ("%i\u200E∶%02i\u200E∶%02i.%02i".printf (h, m, s, ds));
} else {
- time_label.set_text ("%02i\u200E∶%02i.%i".printf (m, s, ds));
+ time_label.set_text ("%02i\u200E∶%02i.%02i".printf (m, s, ds));
}
- analog_frame.update (s, r);
-
return true;
}
public override void grab_focus () {
- left_button.grab_focus ();
+ start_btn.grab_focus ();
}
public bool escape_pressed () {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
