[gnome-clocks/wip/analogstopwatchtimer: 5/6] Add analog progress to the stopwatch
- From: Paolo Borelli <pborelli src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks/wip/analogstopwatchtimer: 5/6] Add analog progress to the stopwatch
- Date: Thu, 15 Aug 2013 14:03:54 +0000 (UTC)
commit b95df5c17ce963f7827e4e273bca066c1a980886
Author: Paolo Borelli <pborelli gnome org>
Date: Thu Aug 15 11:59:50 2013 +0200
Add analog progress to the stopwatch
Add a circle showing the stopwatch activity.
This patch also ports the stopwatch to GtkListBox and changes the layout of the panel
to put the lap list on the side.
data/css/gnome-clocks.css | 38 ++------
data/gnome-clocks.gresource.xml | 1 +
data/ui/stopwatch.ui | 193 ++++++++++++++-------------------------
data/ui/stopwatchlapsrow.ui | 73 +++++++++++++++
src/stopwatch.vala | 100 +++++++++++++++++---
5 files changed, 240 insertions(+), 165 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 6e5dc7e..12f9de6 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -193,36 +193,18 @@
color: #2e3436;
}
-.view.clocks-laps {
- font-size: larger;
- background-color: @theme_bg_color;
- color: @theme_fg_color;
+.clocks-analog-frame.progress-fast {
+ color: #888a85;
}
-.frame.clocks-laps-scroll {
- border-style: solid;
- border-color: @borders;
- border-width: 1px 0 0 0;
- border-radius: 0;
-}
-
-.clocks-laps column-header.button,
-.clocks-laps column-header .button,
-.clocks-laps column-header.button:insensitive,
-.clocks-laps column-header .button:insensitive,
-.clocks-laps column-header.button:hover,
-.clocks-laps column-header .button:hover,
-.clocks-laps column-header.button:last-child,
-.clocks-laps column-header .button:last-child {
- border-image: none;
- border-style: solid;
- border-width: 0;
- border-radius: 0;
- box-shadow: none;
- background-color:shade(@theme_bg_color, 0.975);
+.clocks-laps-scroll {
+ border-width: 0 0 0 1px;
}
-.clocks-laps column-header.button:backdrop,
-.clocks-laps column-header .button:backdrop {
- background-color: @theme_bg_color;
+.clocks-stopwatch-laps-row {
+ font-size: larger;
+ border-width: 0 0 1px 0;
+ border-style: solid;
+ border-color: #d3d7cf;
}
+
diff --git a/data/gnome-clocks.gresource.xml b/data/gnome-clocks.gresource.xml
index 8c18b5d..231fc14 100644
--- a/data/gnome-clocks.gresource.xml
+++ b/data/gnome-clocks.gresource.xml
@@ -13,6 +13,7 @@
<file preprocess="xml-stripblanks">ui/alarm.ui</file>
<file preprocess="xml-stripblanks">ui/alarmsetupdialog.ui</file>
<file preprocess="xml-stripblanks">ui/stopwatch.ui</file>
+ <file preprocess="xml-stripblanks">ui/stopwatchlapsrow.ui</file>
<file preprocess="xml-stripblanks">ui/timer.ui</file>
</gresource>
</gresources>
diff --git a/data/ui/stopwatch.ui b/data/ui/stopwatch.ui
index ff99030..9002d16 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -1,81 +1,81 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<!-- interface-requires gtk+ 3.6 -->
- <object class="GtkListStore" id="laps_model">
- <columns>
- <!-- column-name lap_n -->
- <column type="gchararray"/>
- <!-- column-name split -->
- <column type="gchararray"/>
- <!-- column-name total -->
- <column type="gchararray"/>
- </columns>
- </object>
<object class="GtkGrid" id="stopwatch_panel">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="hexpand">True</property>
<child>
- <object class="GtkGrid" id="top_grid">
+ <object class="ClocksStopwatchFrame" id="analog_frame">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="margin_top">36</property>
- <property name="margin_bottom">60</property>
- <property name="row_spacing">24</property>
- <property name="column_spacing">24</property>
- <property name="column_homogeneous">True</property>
+ <property name="margin_left">48</property>
+ <property name="margin_right">48</property>
+ <property name="margin_top">48</property>
+ <property name="margin_bottom">48</property>
<child>
- <object class="GtkLabel" id="time_label">
+ <object class="GtkGrid" id="top_grid">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <style>
- <class name="clocks-time-label"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- <property name="width">2</property>
- <property name="height">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="left_button">
- <property name="label" translatable="yes">Start</property>
- <property name="width_request">200</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <style>
- <class name="clocks-button"/>
- <class name="clocks-go"/>
- </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>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="right_button">
- <property name="label" translatable="yes">Reset</property>
- <property name="width_request">200</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <style>
- <class name="clocks-button"/>
- </style>
+ <property name="halign">center</property>
+ <property name="hexpand">True</property>
+ <property name="valign">center</property>
+ <property name="row_spacing">24</property>
+ <property name="column_spacing">24</property>
+ <property name="column_homogeneous">True</property>
+ <child>
+ <object class="GtkLabel" id="time_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <style>
+ <class name="clocks-time-label"/>
+ </style>
+ </object>
+ <packing>
+ <property name="left_attach">0</property>
+ <property name="top_attach">0</property>
+ <property name="width">2</property>
+ <property name="height">1</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="left_button">
+ <property name="label" translatable="yes">Start</property>
+ <property name="width_request">200</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <style>
+ <class name="clocks-button"/>
+ <class name="clocks-go"/>
+ </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>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="right_button">
+ <property name="label" translatable="yes">Reset</property>
+ <property name="width_request">200</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <style>
+ <class name="clocks-button"/>
+ </style>
+ </object>
+ <packing>
+ <property name="left_attach">1</property>
+ <property name="top_attach">1</property>
+ <property name="width">1</property>
+ <property name="height">1</property>
+ </packing>
+ </child>
</object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">1</property>
- <property name="width">1</property>
- <property name="height">1</property>
- </packing>
</child>
</object>
<packing>
@@ -86,7 +86,7 @@
</packing>
</child>
<child>
- <object class="GtkScrolledWindow" id="scrolledwindow1">
+ <object class="GtkScrolledWindow" id="laps_scrollwin">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="hexpand">True</property>
@@ -96,68 +96,15 @@
<class name="clocks-laps-scroll"/>
</style>
<child>
- <object class="GtkTreeView" id="laps_view">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="model">laps_model</property>
- <property name="headers_clickable">False</property>
- <property name="enable_search">False</property>
- <style>
- <class name="clocks-laps"/>
- </style>
- <child internal-child="selection">
- <object class="GtkTreeSelection" id="treeview-selection"/>
- </child>
- <child>
- <object class="GtkTreeViewColumn" id="n_column">
- <property name="title" translatable="yes">Lap</property>
- <property name="alignment">1</property>
- <child>
- <object class="GtkCellRendererText" id="cellrenderertext1">
- <property name="xalign">1</property>
- </object>
- <attributes>
- <attribute name="markup">0</attribute>
- </attributes>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkTreeViewColumn" id="split_column">
- <property name="title" translatable="yes">Split</property>
- <property name="expand">True</property>
- <property name="alignment">1</property>
- <child>
- <object class="GtkCellRendererText" id="cellrenderertext2">
- <property name="xalign">1</property>
- </object>
- <attributes>
- <attribute name="text">1</attribute>
- </attributes>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkTreeViewColumn" id="tot_column">
- <property name="title" translatable="yes">Total</property>
- <property name="expand">True</property>
- <property name="alignment">1</property>
- <child>
- <object class="GtkCellRendererText" id="cellrenderertext3">
- <property name="xalign">1</property>
- </object>
- <attributes>
- <attribute name="text">2</attribute>
- </attributes>
- </child>
- </object>
- </child>
+ <object class="GtkListBox" id="laps_list">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
</object>
</child>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
+ <property name="left_attach">1</property>
+ <property name="top_attach">0</property>
<property name="width">1</property>
<property name="height">1</property>
</packing>
diff --git a/data/ui/stopwatchlapsrow.ui b/data/ui/stopwatchlapsrow.ui
new file mode 100644
index 0000000..be77fc0
--- /dev/null
+++ b/data/ui/stopwatchlapsrow.ui
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <!-- 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>
+ <property name="can_focus">False</property>
+ <property name="reveal_child">False</property>
+ <child>
+ <object class="GtkGrid" id="grid">
+ <property name="visible">True</property>
+ <property name="orientation">horizontal</property>
+ <property name="column_spacing">12</property>
+ <property name="margin">6</property>
+ <child>
+ <object class="GtkLabel" id="num_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>
+ <style>
+ <class name="dim-label"/>
+ </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>
+ </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="xalign">0.5</property>
+ </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>
+ <child>
+ <object class="GtkLabel" id="tot_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>
+ </object>
+ <packing>
+ <property name="left_attach">2</property>
+ <property name="top_attach">0</property>
+ <property name="width">1</property>
+ <property name="height">1</property>
+ </packing>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </template>
+</interface>
diff --git a/src/stopwatch.vala b/src/stopwatch.vala
index 417383a..be04cee 100644
--- a/src/stopwatch.vala
+++ b/src/stopwatch.vala
@@ -19,6 +19,76 @@
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;
+ }
+
+ 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 (Gtk.StateFlags.NORMAL);
+ 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 (Gtk.StateFlags.NORMAL);
+ 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]
+ private Gtk.Revealer slider;
+ [GtkChild]
+ private Gtk.Label num_label;
+ [GtkChild]
+ private Gtk.Label split_label;
+ [GtkChild]
+ private Gtk.Label tot_label;
+
+ public LapsRow (string n, string split, string tot) {
+ num_label.label = n;
+ split_label.label = split;
+ tot_label.label = tot;
+ }
+
+ public void slide_in () {
+ slider.reveal_child = true;
+ }
+}
+
public class MainPanel : Gtk.Box, Clocks.Clock {
private enum State {
RESET,
@@ -41,11 +111,12 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
private uint tick_id;
private int current_lap;
private double last_lap_time;
+ private Frame analog_frame;
private Gtk.Label time_label;
private Gtk.Button left_button;
private Gtk.Button right_button;
- private Gtk.ListStore laps_model;
- private Gtk.TreeView laps_view;
+ private Gtk.ScrolledWindow laps_scrollwin;
+ private Gtk.ListBox laps_list;
public MainPanel (HeaderBar header_bar) {
Object (label: _("Stopwatch"), header_bar: header_bar, panel_id: PanelId.STOPWATCH);
@@ -56,11 +127,12 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
var builder = Utils.load_ui ("stopwatch.ui");
var stopwatch_panel = builder.get_object ("stopwatch_panel") as Gtk.Widget;
+ analog_frame = builder.get_object ("analog_frame") as Frame;
time_label = builder.get_object ("time_label") as Gtk.Label;
left_button = builder.get_object ("left_button") as Gtk.Button;
right_button = builder.get_object ("right_button") as Gtk.Button;
- laps_model = builder.get_object ("laps_model") as Gtk.ListStore;
- laps_view = builder.get_object ("laps_view") as Gtk.TreeView;
+ laps_scrollwin = builder.get_object ("laps_scrollwin") as Gtk.ScrolledWindow;
+ laps_list = builder.get_object ("laps_list") as Gtk.ListBox;
left_button.clicked.connect (on_left_button_clicked);
right_button.clicked.connect (on_right_button_clicked);
@@ -146,7 +218,9 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
right_button.set_sensitive (false);
current_lap = 0;
last_lap_time = 0;
- laps_model.clear ();
+ foreach (var l in laps_list.get_children ()) {
+ laps_list.remove (l);
+ }
}
private void lap () {
@@ -168,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 = "<span color='dimgray'> %d </span>".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
@@ -187,14 +261,10 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
tot_label = "%02i\u200E∶%02i.%02i".printf (m, s, cs);
}
- Gtk.TreeIter i;
- laps_model.append (out i);
- laps_model.set (i,
- LapsColumn.LAP, n_label,
- LapsColumn.SPLIT, split_label,
- LapsColumn.TOTAL, tot_label);
- var p = laps_model.get_path (i);
- laps_view.scroll_to_cell (p, null, false, 0, 0);
+ 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 () {
@@ -231,6 +301,8 @@ public class MainPanel : Gtk.Box, Clocks.Clock {
time_label.set_text ("%02i\u200E∶%02i.%i".printf (m, s, ds));
}
+ analog_frame.update (s, r);
+
return true;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
