[gnome-clocks/bilelmoussaoui/redesign-timer] TimerRow: start implementing the new design

From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-clocks/bilelmoussaoui/redesign-timer] TimerRow: start implementing the new design
Date: Tue, 28 Jan 2020 03:27:37 +0000 (UTC)
commit 9009f433a2f9a9fddc5d5a4ec80b502d2b841d42
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Tue Jan 28 04:27:04 2020 +0100

    TimerRow: start implementing the new design

 data/css/gnome-clocks.css |   6 +
 data/ui/timer.ui          |   2 +-
 data/ui/timer_row.ui      | 359 ++++++++++++++++------------------------------
 3 files changed, 133 insertions(+), 234 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index ec51152..b627ca5 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -233,3 +233,9 @@ spinbutton.clocks-timer-label button {
   border-radius: 9999px;
   padding: 18px 24px;
 }
+.timer-countdown label {
+  font-size: 40pt;
+}
+.timer-countdown.timer-paused label {
+  color: #9E9DA1;
+}
diff --git a/data/ui/timer.ui b/data/ui/timer.ui
index ffaf337..7b66f77 100644
--- a/data/ui/timer.ui
+++ b/data/ui/timer.ui
@@ -6,7 +6,6 @@
   <template class="ClocksTimerFace" parent="GtkStack">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <signal name="notify::visible-child" handler="visible_child_changed" swapped="no"/>
     <child>
       <object class="HdyColumn">
         <property name="visible">True</property>
@@ -17,6 +16,7 @@
           <object class="GtkListBox" id="timers_list">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="valign">start</property>
             <property name="margin_left">24</property>
             <property name="margin_right">24</property>
             <property name="margin_top">24</property>
diff --git a/data/ui/timer_row.ui b/data/ui/timer_row.ui
index 519ffe3..678039c 100644
--- a/data/ui/timer_row.ui
+++ b/data/ui/timer_row.ui
@@ -2,204 +2,38 @@
 <!-- Generated with glade 3.22.1 -->
 <interface>
   <requires lib="gtk+" version="3.12"/>
-  <object class="GtkAdjustment" id="adjustment_hours">
-    <property name="upper">99</property>
-    <property name="step_increment">1</property>
-    <property name="page_increment">10</property>
-  </object>
-  <object class="GtkAdjustment" id="adjustment_minutes">
-    <property name="upper">59</property>
-    <property name="step_increment">1</property>
-    <property name="page_increment">10</property>
-  </object>
-  <object class="GtkAdjustment" id="adjustment_seconds">
-    <property name="upper">59</property>
-    <property name="step_increment">1</property>
-    <property name="page_increment">10</property>
-  </object>
   <template class="ClocksTimerRow" parent="GtkBox">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="valign">start</property>
+    <property name="border_width">24</property>
+    <property name="orientation">vertical</property>
+    <property name="spacing">18</property>
     <child>
-      <object class="GtkBox" id="timer_box">
+      <object class="GtkBox" id="countdown_container">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
+        <property name="halign">center</property>
+        <property name="valign">center</property>
+        <property name="margin_start">48</property>
+        <property name="margin_end">48</property>
         <child>
-          <object class="GtkStack" id="timer_stack">
+          <object class="GtkLabel" id="hours_label">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <child>
-              <object class="GtkBox" id="countdown_frame">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="margin_left">48</property>
-                <property name="margin_right">48</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>
-                <child>
-                  <object class="GtkGrid" id="grid_labels">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <child>
-                      <object class="GtkLabel" id="dummy_label3">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="hexpand">True</property>
-                      </object>
-                      <packing>
-                        <property name="left_attach">0</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkSpinButton" id="h_label">
-                        <property name="visible">True</property>
-                        <property name="sensitive">False</property>
-                        <property name="can_focus">True</property>
-                        <property name="max_length">2</property>
-                        <property name="invisible_char">●</property>
-                        <property name="width_chars">2</property>
-                        <property name="text" translatable="yes">0</property>
-                        <property name="xalign">0.5</property>
-                        <property name="input_purpose">number</property>
-                        <property name="orientation">vertical</property>
-                        <property name="adjustment">adjustment_hours</property>
-                        <property name="numeric">True</property>
-                        <property name="wrap">True</property>
-                        <signal name="changed" handler="update_start_button" swapped="no"/>
-                        <signal name="output" handler="show_leading_zeros" swapped="no"/>
-                        <style>
-                          <class name="clocks-timer-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="left_attach">1</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="colon_label3">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="label">∶</property>
-                        <style>
-                          <class name="clocks-timer-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="left_attach">2</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkSpinButton" id="m_label">
-                        <property name="visible">True</property>
-                        <property name="sensitive">False</property>
-                        <property name="can_focus">True</property>
-                        <property name="max_length">2</property>
-                        <property name="invisible_char">●</property>
-                        <property name="width_chars">2</property>
-                        <property name="text" translatable="yes">0</property>
-                        <property name="xalign">0.5</property>
-                        <property name="input_purpose">number</property>
-                        <property name="orientation">vertical</property>
-                        <property name="adjustment">adjustment_minutes</property>
-                        <property name="numeric">True</property>
-                        <property name="wrap">True</property>
-                        <signal name="changed" handler="update_start_button" swapped="no"/>
-                        <signal name="output" handler="show_leading_zeros" swapped="no"/>
-                        <style>
-                          <class name="clocks-timer-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="left_attach">3</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="colon_label4">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="label">∶</property>
-                        <style>
-                          <class name="clocks-timer-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="left_attach">4</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkSpinButton" id="s_label">
-                        <property name="visible">True</property>
-                        <property name="sensitive">False</property>
-                        <property name="can_focus">True</property>
-                        <property name="max_length">2</property>
-                        <property name="invisible_char">●</property>
-                        <property name="width_chars">2</property>
-                        <property name="text" translatable="yes">0</property>
-                        <property name="xalign">0.5</property>
-                        <property name="input_purpose">number</property>
-                        <property name="orientation">vertical</property>
-                        <property name="adjustment">adjustment_seconds</property>
-                        <property name="numeric">True</property>
-                        <property name="wrap">True</property>
-                        <signal name="changed" handler="update_start_button" swapped="no"/>
-                        <signal name="output" handler="show_leading_zeros" swapped="no"/>
-                        <style>
-                          <class name="clocks-timer-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="left_attach">5</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="dummy_label4">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="hexpand">True</property>
-                      </object>
-                      <packing>
-                        <property name="left_attach">6</property>
-                        <property name="top_attach">0</property>
-                      </packing>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">True</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
-              </object>
-              <packing>
-                <property name="position">1</property>
-              </packing>
-            </child>
+            <property name="label">00</property>
           </object>
           <packing>
-            <property name="expand">True</property>
+            <property name="expand">False</property>
             <property name="fill">True</property>
             <property name="position">0</property>
           </packing>
         </child>
         <child>
-          <object class="GtkEntry">
+          <object class="GtkLabel">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="placeholder_text" translatable="yes">Title...</property>
+            <property name="can_focus">False</property>
+            <property name="label">:</property>
           </object>
           <packing>
             <property name="expand">False</property>
@@ -207,6 +41,46 @@
             <property name="position">1</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkLabel" id="minutes_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label">00</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label">:</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="seconds_label">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label">00</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">4</property>
+          </packing>
+        </child>
+        <style>
+          <class name="timer-countdown"/>
+          <class name="timer-paused"/>
+        </style>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -214,11 +88,75 @@
         <property name="position">0</property>
       </packing>
     </child>
+    <child>
+      <object class="GtkStack">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkEntry">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="halign">center</property>
+            <property name="width_chars">26</property>
+            <property name="placeholder_text" translatable="yes">Title...</property>
+          </object>
+          <packing>
+            <property name="name">page0</property>
+            <property name="title" translatable="yes">page0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="timer_name">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">center</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
+          </object>
+          <packing>
+            <property name="name">page1</property>
+            <property name="title" translatable="yes">page1</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
     <child>
       <object class="GtkBox" id="actions_box">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkButton" id="reset_button">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="relief">none</property>
+            <signal name="clicked" handler="on_reset_button_clicked" swapped="no"/>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="icon_name">view-refresh-symbolic</property>
+              </object>
+            </child>
+            <style>
+              <class name="round-button"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
         <child>
           <object class="GtkStack" id="start_stack">
             <property name="visible">True</property>
@@ -234,6 +172,7 @@
                 <property name="receives_default">True</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
+                <property name="relief">none</property>
                 <signal name="clicked" handler="on_pause_button_clicked" swapped="no"/>
                 <child>
                   <object class="GtkImage">
@@ -243,7 +182,7 @@
                   </object>
                 </child>
                 <style>
-                  <class name="flat"/>
+                  <class name="round-button"/>
                 </style>
               </object>
               <packing>
@@ -257,6 +196,7 @@
                 <property name="receives_default">True</property>
                 <property name="halign">center</property>
                 <property name="valign">center</property>
+                <property name="relief">none</property>
                 <signal name="clicked" handler="on_start_button_clicked" swapped="no"/>
                 <child>
                   <object class="GtkImage">
@@ -266,7 +206,8 @@
                   </object>
                 </child>
                 <style>
-                  <class name="flat"/>
+                  <class name="round-button"/>
+                  <class name="suggested-action"/>
                 </style>
               </object>
               <packing>
@@ -275,31 +216,6 @@
               </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkButton" id="reset_button">
-            <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <signal name="clicked" handler="on_reset_button_clicked" swapped="no"/>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">view-refresh-symbolic</property>
-              </object>
-            </child>
-            <style>
-              <class name="flat"/>
-            </style>
-          </object>
           <packing>
             <property name="expand">True</property>
             <property name="fill">True</property>
@@ -313,6 +229,7 @@
             <property name="receives_default">True</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
+            <property name="relief">none</property>
             <child>
               <object class="GtkImage">
                 <property name="visible">True</property>
@@ -321,7 +238,7 @@
               </object>
             </child>
             <style>
-              <class name="flat"/>
+              <class name="round-button"/>
             </style>
           </object>
           <packing>
@@ -331,18 +248,6 @@
           </packing>
         </child>
       </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="pack_type">end</property>
-        <property name="position">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSeparator">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-      </object>
       <packing>
         <property name="expand">False</property>
         <property name="fill">True</property>
@@ -351,16 +256,4 @@
       </packing>
     </child>
   </template>
-  <object class="GtkSizeGroup" id="sizegroup2">
-    <property name="mode">vertical</property>
-    <widgets>
-      <widget name="grid_spinbuttons"/>
-      <widget name="grid_labels"/>
-    </widgets>
-  </object>
-  <object class="GtkSizeGroup" id="sizegroup1"/>
-  <object class="GtkSizeGroup" id="sizegroup3">
-    <property name="mode">vertical</property>
-  </object>
 </interface>
-
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]