[gnome-clocks/wip/analogstopwatchtimer] Experiment with smaller analog frames

[Paolo Borelli <pborelli src gnome org>]

commit aca02c4074fcb6c25368adbca8736e2c175b3387
Author: Paolo Borelli <pborelli gnome org>
Date:   Thu Aug 15 16:00:18 2013 +0200

    Experiment with smaller analog frames
    
    Try smaller fonts and padding, linked buttons to save space.

 data/css/gnome-clocks.css |   32 +++++++++++++++++++-
 data/ui/stopwatch.ui      |   69 +++++++++++++++++++++++++++-----------------
 data/ui/timer.ui          |   51 ++++++++++++++++-----------------
 3 files changed, 97 insertions(+), 55 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 12f9de6..064393b 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -99,7 +99,7 @@
 }
 
 .clocks-time-label {
-    font-size: 64px;
+    font-size: 48px;
 }
 
 .clocks-secondary-time-label {
@@ -115,7 +115,7 @@
 }
 
 .clocks-spinbutton {
-    font-size: 64px;
+    font-size: 48px;
 }
 
 .clocks-go {
@@ -174,6 +174,34 @@
     border-image: url("button-border-stop-active.svg") 3 3 4 3 / 3 3 4 3 stretch;
 }
 
+.linked .clocks-go:first-child,
+.linked .clocks-stop:first-child,
+.linked .clocks-go:active:first-child,
+.linked .clocks-stop:active:first-child,
+.linked .clocks-go:active:hover:first-child,
+.linked .clocks-stop:active:hover:first-child,
+.linked .clocks-go:insensitive:first-child,
+.linked .clocks-stop:insensitive:first-child {
+    border-right-width: 0;
+    border-image-width: 3px 0 4px 3px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.linked .clocks-go:last-child,
+.linked .clocks-stop:last-child,
+.linked .clocks-go:active:last-child,
+.linked .clocks-stop:active:last-child,
+.linked .clocks-go:active:hover:last-child,
+.linked .clocks-stop:active:hover:last-child,
+.linked .clocks-go:insensitive:last-child,
+.linked .clocks-stop:insensitive:last-child {
+    border-left-width: 0;
+    border-image-width: 3px 3px 4px 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
 .clocks-selection-bar {
     border-width: 1px 0 0;
     border-style: solid;
diff --git a/data/ui/stopwatch.ui b/data/ui/stopwatch.ui
index 9002d16..9479fbf 100644
--- a/data/ui/stopwatch.ui
+++ b/data/ui/stopwatch.ui
@@ -21,7 +21,6 @@
             <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">
@@ -34,42 +33,57 @@
               <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>
+              <object class="GtkBox" id="button_box">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="receives_default">True</property>
+                <property name="can_focus">False</property>
+                <property name="hexpand">True</property>
+                <property name="homogeneous">True</property>
                 <style>
-                  <class name="clocks-button"/>
+                  <class name="linked"/>
                 </style>
+                <child>
+                  <object class="GtkButton" id="left_button">
+                    <property name="label" translatable="yes">Start</property>
+                    <property name="width_request">160</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="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">160</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="expand">True</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
               </object>
               <packing>
-                <property name="left_attach">1</property>
+                <property name="left_attach">0</property>
                 <property name="top_attach">1</property>
                 <property name="width">1</property>
                 <property name="height">1</property>
@@ -87,6 +101,7 @@
     </child>
     <child>
       <object class="GtkScrolledWindow" id="laps_scrollwin">
+        <property name="width_request">200</property>
         <property name="visible">True</property>
         <property name="can_focus">True</property>
         <property name="hexpand">True</property>
diff --git a/data/ui/timer.ui b/data/ui/timer.ui
index ed99b5f..9f589b9 100644
--- a/data/ui/timer.ui
+++ b/data/ui/timer.ui
@@ -31,7 +31,7 @@
         <property name="valign">center</property>
         <property name="hexpand">True</property>
         <property name="vexpand">True</property>
-        <property name="row_spacing">48</property>
+        <property name="row_spacing">24</property>
         <child>
           <object class="GtkGrid" id="grid_spinbuttons">
             <property name="visible">True</property>
@@ -111,11 +111,10 @@
               <object class="GtkLabel" id="colon_label1">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="hexpand">True</property>
                 <property name="label">∶</property>
-                <attributes>
-                  <attribute name="font-desc" value="64"/>
-                </attributes>
+                <style>
+                  <class name="clocks-time-label"/>
+                </style>
               </object>
               <packing>
                 <property name="left_attach">1</property>
@@ -128,11 +127,10 @@
               <object class="GtkLabel" id="colon_label2">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="hexpand">True</property>
                 <property name="label">∶</property>
-                <attributes>
-                  <attribute name="font-desc" value="64"/>
-                </attributes>
+                <style>
+                  <class name="clocks-time-label"/>
+                </style>
               </object>
               <packing>
                 <property name="left_attach">3</property>
@@ -152,7 +150,7 @@
         <child>
           <object class="GtkButton" id="start_button">
             <property name="label" translatable="yes">Start</property>
-            <property name="width_request">200</property>
+            <property name="width_request">320</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
@@ -185,8 +183,7 @@
         <property name="valign">center</property>
         <property name="hexpand">True</property>
         <property name="vexpand">True</property>
-        <property name="row_spacing">48</property>
-        <property name="column_spacing">24</property>
+        <property name="row_spacing">24</property>
         <child>
           <object class="GtkLabel" id="countdown_label">
             <property name="visible">True</property>
@@ -205,14 +202,18 @@
           </packing>
         </child>
         <child>
-          <object class="GtkGrid" id="button_grid">
+          <object class="GtkBox" id="button_box">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="column_spacing">24</property>
+            <property name="hexpand">True</property>
+            <property name="homogeneous">True</property>
+            <style>
+              <class name="linked"/>
+            </style>
             <child>
               <object class="GtkButton" id="left_button">
                 <property name="label" translatable="yes">Pause</property>
-                <property name="width_request">200</property>
+                <property name="width_request">160</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -221,16 +222,15 @@
                 </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">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">200</property>
+                <property name="width_request">160</property>
                 <property name="visible">True</property>
                 <property name="can_focus">True</property>
                 <property name="receives_default">True</property>
@@ -239,10 +239,9 @@
                 </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">True</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
               </packing>
             </child>
           </object>
@@ -261,7 +260,7 @@
       <widget name="grid_spinbuttons"/>
       <widget name="start_button"/>
       <widget name="countdown_label"/>
-      <widget name="button_grid"/>
+      <widget name="button_box"/>
     </widgets>
   </object>
   <object class="GtkSizeGroup" id="sizegroup2">
@@ -275,7 +274,7 @@
     <property name="mode">vertical</property>
     <widgets>
       <widget name="start_button"/>
-      <widget name="button_grid"/>
+      <widget name="button_box"/>
     </widgets>
   </object>
 </interface>