[gnome-clocks/bilelmoussaoui/empty-views: 2/2] Make the empty views consistent



commit 0a8c537c8e01019e8dfcec3fb207f70635b8cbf6
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date:   Sat Jul 11 19:40:19 2020 +0200

    Make the empty views consistent
    
    world: add a button/larger image
    alarm: larger button
    stopwatch: center if empty
    
    Fixes #121

 data/css/gnome-clocks.css |   9 +-
 data/ui/alarm-face.ui     |   6 +-
 data/ui/stopwatch-face.ui | 375 +++++++++++++++++++++++-----------------------
 data/ui/world-face.ui     |  33 ++--
 src/stopwatch-face.vala   |  13 ++
 5 files changed, 224 insertions(+), 212 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index d650fe1..f38ef4d 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -18,6 +18,10 @@ label.destructive-action {
        margin: 18px 6px;
 }
 
+.large-button {
+       padding: 6px 32px;
+}
+
 .pill-button {
        border-radius: 9999px;
        -gtk-outline-radius: 9999px;
@@ -138,11 +142,6 @@ spinbutton.clocks-timer-label button {
 }
 
 /* Stopwatch Panel */
-
-.stopwatch-panel .large-button {
-       padding: 6px 32px;
-}
-
 .lap-time {
        font-weight: bold;
 }
diff --git a/data/ui/alarm-face.ui b/data/ui/alarm-face.ui
index d873469..1c9432f 100644
--- a/data/ui/alarm-face.ui
+++ b/data/ui/alarm-face.ui
@@ -10,10 +10,10 @@
         <property name="visible">True</property>
         <property name="halign">center</property>
         <property name="valign">center</property>
-        <property name="spacing">24</property>
+        <property name="spacing">36</property>
         <property name="orientation">vertical</property>
         <child>
-          <object class="GtkImage" id="image1">
+          <object class="GtkImage">
             <property name="visible">True</property>
             <property name="icon_name">alarm-symbolic</property>
             <property name="pixel-size">128</property>
@@ -31,6 +31,8 @@
             <property name="halign">center</property>
             <style>
               <class name="suggested-action"/>
+              <class name="large-button"/>
+              <class name="pill-button"/>
             </style>
           </object>
         </child>
diff --git a/data/ui/stopwatch-face.ui b/data/ui/stopwatch-face.ui
index 330f7c3..15c2bb2 100644
--- a/data/ui/stopwatch-face.ui
+++ b/data/ui/stopwatch-face.ui
@@ -13,151 +13,34 @@
         <property name="can_focus">True</property>
         <property name="min_content_width">300</property>
         <child>
-          <object class="GtkViewport">
+          <object class="HdyClamp">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="shadow_type">none</property>
+            <property name="maximum_size">380</property>
             <child>
-              <object class="HdyClamp">
+              <object class="GtkBox" id="container">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="maximum_size">380</property>
+                <property name="valign">center</property>
+                <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkBox">
+                  <object class="GtkBox" id="time_container">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="margin_top">36</property>
-                    <property name="orientation">vertical</property>
+                    <property name="halign">center</property>
+                    <property name="margin_bottom">18</property>
                     <child>
-                      <object class="GtkBox" id="time_container">
+                      <object class="GtkLabel" id="hours_label">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="halign">center</property>
-                        <property name="margin_bottom">18</property>
-                        <child>
-                          <object class="GtkLabel" id="hours_label">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="label">00</property>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</property>
-                            <attributes>
-                              <attribute name="font-features" value="tnum=1"/>
-                            </attributes>
-                            <style>
-                              <class name="hours-label"/>
-                            </style>
-                          </object>
-                          <packing>
-                            <property name="expand">False</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="label">∶</property>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <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>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</property>
-                            <attributes>
-                              <attribute name="font-features" value="tnum=1"/>
-                            </attributes>
-                            <style>
-                              <class name="minutes-label"/>
-                            </style>
-                          </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>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</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>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</property>
-                            <attributes>
-                              <attribute name="font-features" value="tnum=1"/>
-                            </attributes>
-                            <style>
-                              <class name="seconds-label"/>
-                            </style>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">4</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="label">.</property>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</property>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">5</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="miliseconds_label">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="valign">end</property>
-                            <property name="ypad">6</property>
-                            <property name="label">0</property>
-                            <property name="xalign">0</property>
-                            <property name="yalign">0</property>
-                            <attributes>
-                              <attribute name="font-features" value="tnum=1"/>
-                            </attributes>
-                            <style>
-                              <class name="miliseconds-label"/>
-                            </style>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">6</property>
-                          </packing>
-                        </child>
+                        <property name="label">00</property>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</property>
+                        <attributes>
+                          <attribute name="font-features" value="tnum=1"/>
+                        </attributes>
                         <style>
-                          <class name="stopped-stopwatch"/>
+                          <class name="hours-label"/>
                         </style>
                       </object>
                       <packing>
@@ -167,51 +50,10 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkLabel">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="border_width">12</property>
-                        <child>
-                          <object class="GtkButton" id="start_btn">
-                            <property name="label" translatable="yes">_Start</property>
-                            <property name="width_request">120</property>
-                            <property name="visible">True</property>
-                            <property name="can_focus">True</property>
-                            <property name="receives_default">True</property>
-                            <property name="use_underline">True</property>
-                            <signal name="clicked" handler="on_start_btn_clicked" swapped="no"/>
-                            <style>
-                              <class name="suggested-action"/>
-                              <class name="large-button"/>
-                              <class name="pill-button"/>
-                            </style>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkButton" id="clear_btn">
-                            <property name="label" translatable="yes">Clear</property>
-                            <property name="width_request">120</property>
-                            <property name="visible">True</property>
-                            <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"/>
-                              <class name="pill-button"/>
-                            </style>
-                          </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>
+                        <property name="label">∶</property>
                       </object>
                       <packing>
                         <property name="expand">False</property>
@@ -220,30 +62,181 @@
                       </packing>
                     </child>
                     <child>
-                      <object class="GtkRevealer" id="laps_revealer">
+                      <object class="GtkLabel" id="minutes_label">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="transition_type">crossfade</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="preferences"/>
-                              <class name="clocks-list"/>
-                            </style>
-                          </object>
-                        </child>
+                        <property name="label">00</property>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</property>
+                        <attributes>
+                          <attribute name="font-features" value="tnum=1"/>
+                        </attributes>
+                        <style>
+                          <class name="minutes-label"/>
+                        </style>
                       </object>
                       <packing>
-                        <property name="expand">True</property>
+                        <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>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</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>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</property>
+                        <attributes>
+                          <attribute name="font-features" value="tnum=1"/>
+                        </attributes>
+                        <style>
+                          <class name="seconds-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">4</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label">.</property>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</property>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">5</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="miliseconds_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="valign">end</property>
+                        <property name="ypad">6</property>
+                        <property name="label">0</property>
+                        <property name="xalign">0</property>
+                        <property name="yalign">0</property>
+                        <attributes>
+                          <attribute name="font-features" value="tnum=1"/>
+                        </attributes>
+                        <style>
+                          <class name="miliseconds-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">6</property>
+                      </packing>
+                    </child>
+                    <style>
+                      <class name="stopped-stopwatch"/>
+                    </style>
+                  </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">12</property>
+                    <child>
+                      <object class="GtkButton" id="start_btn">
+                        <property name="label" translatable="yes">_Start</property>
+                        <property name="width_request">120</property>
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="receives_default">True</property>
+                        <property name="use_underline">True</property>
+                        <signal name="clicked" handler="on_start_btn_clicked" swapped="no"/>
+                        <style>
+                          <class name="suggested-action"/>
+                          <class name="large-button"/>
+                          <class name="pill-button"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="expand">False</property>
+                        <property name="fill">True</property>
+                        <property name="position">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="clear_btn">
+                        <property name="label" translatable="yes">Clear</property>
+                        <property name="width_request">120</property>
+                        <property name="visible">True</property>
+                        <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"/>
+                          <class name="pill-button"/>
+                        </style>
+                      </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>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                    <property name="position">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkRevealer" id="laps_revealer">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="transition_type">crossfade</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="preferences"/>
+                          <class name="clocks-list"/>
+                        </style>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="expand">True</property>
+                    <property name="fill">True</property>
+                    <property name="position">2</property>
+                  </packing>
                 </child>
               </object>
             </child>
diff --git a/data/ui/world-face.ui b/data/ui/world-face.ui
index 5b973e6..a1d9279 100644
--- a/data/ui/world-face.ui
+++ b/data/ui/world-face.ui
@@ -6,38 +6,43 @@
     <property name="can_focus">False</property>
     <property name="homogeneous">False</property>
     <child>
-      <object class="GtkGrid" id="empty_view">
+      <object class="GtkBox" id="empty_view">
         <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="row_spacing">6</property>
+        <property name="spacing">36</property>
         <child>
-          <object class="GtkImage" id="image1">
+          <object class="GtkImage">
             <property name="visible">True</property>
             <property name="sensitive">False</property>
             <property name="can_focus">False</property>
-            <property name="icon_name">document-open-recent-symbolic</property>
-            <property name="icon-size">6</property>
+            <property name="icon_name">globe-symbolic</property>
+            <property name="pixel_size">128</property>
+            <style>
+              <class name="dim-label"/>
+            </style>
           </object>
           <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">0</property>
+            <property name="position">0</property>
           </packing>
         </child>
         <child>
-          <object class="GtkLabel" id="label1">
+          <object class="GtkButton">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="label" translatable="yes">Select &lt;b&gt;New&lt;/b&gt; to add a world 
clock</property>
-            <property name="use_markup">True</property>
+            <property name="action-name">win.new</property>
+            <property name="label" translatable="yes">Add World Clock</property>
+            <property name="use-underline">True</property>
+            <property name="halign">center</property>
             <style>
-              <class name="dim-label"/>
+              <class name="suggested-action"/>
+              <class name="large-button"/>
+              <class name="pill-button"/>
             </style>
           </object>
           <packing>
-            <property name="left_attach">0</property>
-            <property name="top_attach">1</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>
diff --git a/src/stopwatch-face.vala b/src/stopwatch-face.vala
index a98799e..fd73d69 100644
--- a/src/stopwatch-face.vala
+++ b/src/stopwatch-face.vala
@@ -63,6 +63,9 @@ public class Face : Gtk.Box, Clocks.Clock {
     [GtkChild]
     private Gtk.Revealer laps_revealer;
 
+    [GtkChild]
+    private Gtk.Box container;
+
     [GtkChild]
     private Gtk.Button start_btn;
     [GtkChild]
@@ -88,6 +91,16 @@ public class Face : Gtk.Box, Clocks.Clock {
             return lap_row;
         });
 
+        laps.items_changed.connect (() => {
+            if (laps.get_n_items () == 0) {
+                this.container.valign = CENTER;
+                this.container.margin_top = 0;
+            } else {
+                this.container.valign = FILL;
+                this.container.margin_top = 36;
+            }
+        });
+
         map.connect ((w) => {
             if (state == State.RUNNING) {
                 update_time_label ();


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]