[gnome-clocks/zbrown/world-clocks] alarms: New dialog design



commit dcffb6e5df817929766397095ef3571722d1b1ff
Author: Zander Brown <zbrown gnome org>
Date:   Tue Aug 6 14:00:12 2019 +0100

    alarms: New dialog design

 data/css/gnome-clocks.css              |  24 ++++
 data/css/gnome-clocks.highcontrast.css |   3 +
 data/ui/alarm.ui                       |  40 +++++-
 data/ui/alarmsetupdialog.ui            | 251 +++++++++++++++++----------------
 src/alarm.vala                         |  26 +++-
 src/widgets.vala                       |   1 -
 6 files changed, 217 insertions(+), 128 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 7c1424b..0aad925 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -8,6 +8,30 @@ window > stack:backdrop {
     box-shadow: none;
 }
 
+label.destructive-action {
+    color: #e01b24;
+}
+
+/* content view */
+
+.tile {
+    padding: 12px;
+    background-color: transparent;
+}
+
+.tile .tile-label {
+    font-size: 32pt;
+}
+
+.tile .name-label {
+    padding-top: 0.5em;
+}
+
+.tile .name-icon {
+    padding-top: 0.5em;
+    padding-right: 8px;
+}
+
 /* alarms */
 
 row.snoozing {
diff --git a/data/css/gnome-clocks.highcontrast.css b/data/css/gnome-clocks.highcontrast.css
index 565a874..3f9fc2d 100644
--- a/data/css/gnome-clocks.highcontrast.css
+++ b/data/css/gnome-clocks.highcontrast.css
@@ -8,6 +8,9 @@ window > stack:backdrop {
     box-shadow: none;
 }
 
+label.destructive-action {
+    color: #e01b24;
+}
 
 /* alarms */
 
diff --git a/data/ui/alarm.ui b/data/ui/alarm.ui
index b947f1c..5b84659 100644
--- a/data/ui/alarm.ui
+++ b/data/ui/alarm.ui
@@ -51,11 +51,45 @@
             <property name="visible">True</property>
             <property name="maximum-width">500</property>
             <child>
-              <object class="GtkListBox" id="listbox">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="selection-mode">none</property>
-                <property name="valign">start</property>
                 <property name="margin">24</property>
+                <property name="valign">start</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkListBox" id="listbox">
+                    <property name="visible">True</property>
+                    <property name="selection-mode">none</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="visible">True</property>
+                    <property name="orientation">horizontal</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkListBox">
+                    <property name="visible">True</property>
+                    <property name="selection-mode">none</property>
+                    <signal name="row-activated" handler="create_alarm" swapped="no"/>
+                    <child>
+                      <object class="GtkListBoxRow">
+                        <property name="visible">True</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="label">Add a new Alarm…</property>
+                            <property name="margin-start">12</property>
+                            <property name="margin-end">12</property>
+                            <property name="margin-top">18</property>
+                            <property name="margin-bottom">18</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
                 <style>
                   <class name="frame"/>
                 </style>
diff --git a/data/ui/alarmsetupdialog.ui b/data/ui/alarmsetupdialog.ui
index f598929..9845f67 100644
--- a/data/ui/alarmsetupdialog.ui
+++ b/data/ui/alarmsetupdialog.ui
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.16.0 -->
+<!-- Generated with glade 3.22.1 -->
 <interface>
-  <requires lib="gtk+" version="3.10"/>
+  <requires lib="gtk+" version="3.20"/>
+  <requires lib="libhandy" version="0.0"/>
   <object class="GtkAdjustment" id="h_adjustment">
     <property name="upper">100</property>
     <property name="step_increment">1</property>
@@ -12,35 +13,30 @@
     <property name="step_increment">1</property>
     <property name="page_increment">10</property>
   </object>
-  <template class="ClocksAlarmSetupDialog" parent="GtkDialog">
+  <template class="ClocksAlarmSetupDialog" parent="HdyDialog">
     <property name="can_focus">False</property>
-    <property name="resizable">False</property>
     <property name="modal">True</property>
     <property name="window_position">center-on-parent</property>
     <property name="destroy_with_parent">True</property>
     <property name="type_hint">dialog</property>
     <property name="gravity">center</property>
-    <property name="use_header_bar">1</property>
-    <child internal-child="headerbar">
+    <child type="titlebar">
       <object class="GtkHeaderBar" id="dialog-header-bar">
         <property name="visible">True</property>
+        <property name="can_focus">False</property>
         <property name="title" translatable="yes">Add a New World Clock</property>
-        <property name="show_close_button">False</property>
         <child>
           <object class="GtkButton" id="button1">
             <property name="label" translatable="yes">_Cancel</property>
             <property name="visible">True</property>
             <property name="can_focus">True</property>
             <property name="receives_default">True</property>
-            <property name="use_underline">True</property>
             <property name="valign">center</property>
+            <property name="use_underline">True</property>
             <style>
               <class name="text-button"/>
             </style>
           </object>
-          <packing>
-            <property name="pack_type">start</property>
-          </packing>
         </child>
         <child>
           <object class="GtkButton" id="button2">
@@ -50,8 +46,8 @@
             <property name="can_default">True</property>
             <property name="has_default">True</property>
             <property name="receives_default">True</property>
-            <property name="use_underline">True</property>
             <property name="valign">center</property>
+            <property name="use_underline">True</property>
             <style>
               <class name="text-button"/>
               <class name="suggested-action"/>
@@ -59,6 +55,7 @@
           </object>
           <packing>
             <property name="pack_type">end</property>
+            <property name="position">1</property>
           </packing>
         </child>
       </object>
@@ -69,6 +66,16 @@
         <property name="valign">start</property>
         <property name="orientation">vertical</property>
         <property name="spacing">2</property>
+        <child internal-child="action_area">
+          <object class="GtkButtonBox">
+            <property name="can_focus">False</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">False</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
         <child>
           <object class="GtkGrid" id="setup_dialog_content">
             <property name="visible">True</property>
@@ -82,9 +89,6 @@
                 <property name="margin_top">12</property>
                 <property name="hexpand">True</property>
                 <property name="column_spacing">6</property>
-                <style>
-                  <class name="clocks-alarm-setup-time"/>
-                </style>
                 <child>
                   <object class="GtkLabel" id="dummy_label1">
                     <property name="visible">True</property>
@@ -95,8 +99,6 @@
                   <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>
@@ -108,8 +110,6 @@
                   <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>
                 <child>
@@ -132,8 +132,6 @@
                   <packing>
                     <property name="left_attach">3</property>
                     <property name="top_attach">0</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
                   </packing>
                 </child>
                 <child>
@@ -152,8 +150,6 @@
                   <packing>
                     <property name="left_attach">4</property>
                     <property name="top_attach">0</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
                   </packing>
                 </child>
                 <child>
@@ -176,16 +172,15 @@
                   <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>
+                <style>
+                  <class name="clocks-alarm-setup-time"/>
+                </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>
@@ -203,125 +198,135 @@
               <packing>
                 <property name="left_attach">0</property>
                 <property name="top_attach">2</property>
-                <property name="width">1</property>
-                <property name="height">1</property>
               </packing>
             </child>
             <child>
-              <object class="GtkGrid" id="grid2">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
+                <property name="margin">6</property>
+                <property name="valign">start</property>
+                <property name="orientation">vertical</property>
                 <property name="halign">center</property>
-                <property name="margin_start">24</property>
-                <property name="margin_end">24</property>
-                <property name="margin_top">12</property>
-                <property name="margin_bottom">12</property>
-                <property name="row_spacing">9</property>
-                <property name="column_spacing">6</property>
-                <property name="row_homogeneous">True</property>
                 <child>
-                  <object class="GtkLabel" id="name_label">
+                  <object class="GtkListBox" id="listbox">
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="xalign">1</property>
-                    <property name="label" translatable="yes">Name</property>
-                  </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="repeat_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="xalign">1</property>
-                    <property name="label" translatable="yes">Repeat Every</property>
-                  </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="GtkEntry" id="name_entry">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="invisible_char">●</property>
-                    <property name="activates_default">True</property>
-                    <signal name="changed" handler="entry_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
-                  </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="GtkBox" id="day_buttons_box">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="homogeneous">True</property>
-                    <style>
-                      <class name="linked"/>
-                    </style>
+                    <property name="selection_mode">none</property>
                     <child>
-                      <placeholder/>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="activatable_widget">name_entry</property>
+                        <property name="title" translatable="yes">Name</property>
+                        <child type="action">
+                          <object class="GtkEntry" id="name_entry">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="valign">center</property>
+                            <property name="hexpand">True</property>
+                            <property name="activates_default">True</property>
+                            <signal name="changed" handler="entry_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
+                          </object>
+                        </child>
+                      </object>
                     </child>
                     <child>
-                      <placeholder/>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="title" translatable="yes">Repeat</property>
+                        <child>
+                          <object class="GtkBox" id="day_buttons_box">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="halign">end</property>
+                            <property name="valign">center</property>
+                            <property name="margin-end">12</property>
+                            <property name="margin-start">12</property>
+                            <property name="margin-bottom">12</property>
+                            <child>
+                              <placeholder/>
+                            </child>
+                            <child>
+                              <placeholder/>
+                            </child>
+                            <child>
+                              <placeholder/>
+                            </child>
+                            <style>
+                              <class name="linked"/>
+                            </style>
+                          </object>
+                        </child>
+                      </object>
                     </child>
                     <child>
-                      <placeholder/>
+                      <object class="HdyActionRow">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="activatable_widget">active_switch</property>
+                        <property name="title" translatable="yes">Active</property>
+                        <child type="action">
+                          <object class="GtkSwitch" id="active_switch">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="halign">start</property>
+                            <property name="valign">center</property>
+                            <signal name="notify::active" handler="active_changed" 
object="ClocksAlarmSetupDialog" swapped="no"/>
+                          </object>
+                        </child>
+                      </object>
                     </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>
-                <child>
-                  <object class="GtkLabel" id="active_label">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="xalign">1</property>
-                    <property name="label" translatable="yes">Active</property>
-                  </object>
-                  <packing>
-                    <property name="left_attach">0</property>
-                    <property name="top_attach">2</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
-                  </packing>
                 </child>
                 <child>
-                  <object class="GtkSwitch" id="active_switch">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="halign">start</property>
-                    <property name="valign">center</property>
-                    <signal name="notify::active" handler="active_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
+                  <object class="GtkBox" id="delete_area">
+                    <property name="visible">False</property>
+                    <property name="no-show-all">True</property>
+                    <property name="orientation">vertical</property>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="orientation">horizontal</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkListBox">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="selection_mode">none</property>
+                        <signal name="row-activated" handler="delete_alarm" swapped="no"/>
+                        <child>
+                          <object class="GtkListBoxRow">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="margin_left">12</property>
+                                <property name="margin_right">12</property>
+                                <property name="margin_top">18</property>
+                                <property name="margin_bottom">18</property>
+                                <property name="label" translatable="yes">Delete Alarm</property>
+                                <style>
+                                  <class name="destructive-action"/>
+                                </style>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
                   </object>
-                  <packing>
-                    <property name="left_attach">1</property>
-                    <property name="top_attach">2</property>
-                    <property name="width">1</property>
-                    <property name="height">1</property>
-                  </packing>
                 </child>
+                <style>
+                  <class name="frame"/>
+                </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>
           </object>
diff --git a/src/alarm.vala b/src/alarm.vala
index 4f21ce1..a8b3f28 100644
--- a/src/alarm.vala
+++ b/src/alarm.vala
@@ -279,10 +279,14 @@ private class Row : Hdy.ActionRow {
     public Item alarm { get; construct set; }
     public Face face { get; construct set; }
 
+    [GtkChild]
+    private Gtk.Switch toggle;
+
     public Row (Item alarm, Face face) {
         Object (alarm: alarm, face: face);
 
         alarm.bind_property ("name", this, "subtitle", BindingFlags.DEFAULT | BindingFlags.SYNC_CREATE);
+        alarm.bind_property ("active", toggle, "active", BindingFlags.DEFAULT | BindingFlags.SYNC_CREATE);
 
         alarm.notify["active"].connect (update);
         alarm.notify["state"].connect (update);
@@ -325,7 +329,7 @@ private class Row : Hdy.ActionRow {
 }
 
 [GtkTemplate (ui = "/org/gnome/clocks/ui/alarmsetupdialog.ui")]
-private class SetupDialog : Gtk.Dialog {
+private class SetupDialog : Hdy.Dialog {
     private Utils.WallClock.Format format;
     [GtkChild]
     private Gtk.Grid time_grid;
@@ -345,11 +349,18 @@ private class SetupDialog : Gtk.Dialog {
     private Gtk.Stack am_pm_stack;
     [GtkChild]
     private Gtk.Revealer label_revealer;
+    [GtkChild]
+    private Gtk.ListBox listbox;
+    [GtkChild]
+    private Gtk.Box delete_area;
     private List<Item> other_alarms;
 
     public SetupDialog (Gtk.Window parent, Item? alarm, ListModel all_alarms) {
         Object (transient_for: parent, title: alarm != null ? _("Edit Alarm") : _("New Alarm"), 
use_header_bar: 1);
 
+        delete_area.visible = alarm != null;
+        listbox.set_header_func((Gtk.ListBoxUpdateHeaderFunc) Hdy.list_box_separator_header);
+
         other_alarms = new List<Item> ();
         var n = all_alarms.get_n_items ();
         for (int i = 0; i < n; i++) {
@@ -521,6 +532,11 @@ private class SetupDialog : Gtk.Dialog {
         spin_button.set_text ("%02i".printf (spin_button.get_value_as_int ()));
         return true;
     }
+
+    [GtkCallback]
+    private void delete_alarm () {
+        response(2);
+    }
 }
 
 [GtkTemplate (ui = "/org/gnome/clocks/ui/alarmringing.ui")]
@@ -682,6 +698,11 @@ public class Face : Gtk.Stack, Clocks.Clock {
         }
     }
 
+    [GtkCallback]
+    private void create_alarm () {
+        activate_new();
+    }
+
     private void load () {
         alarms.deserialize (settings.get_value ("alarms"), Item.deserialize);
     }
@@ -701,6 +722,9 @@ public class Face : Gtk.Stack, Clocks.Clock {
             if (response == 1) {
                 ((SetupDialog) dialog).apply_to_alarm (alarm);
                 save ();
+            } else if (response == 2) {
+                alarms.delete_item (alarm);
+                save ();
             } else {
                 alarm.active = saved_active;
             }
diff --git a/src/widgets.vala b/src/widgets.vala
index 3e1c095..3d1f3b0 100644
--- a/src/widgets.vala
+++ b/src/widgets.vala
@@ -144,7 +144,6 @@ public class ContentStore : GLib.Object, GLib.ListModel {
         }
     }
 
-
     public void delete_selected () {
         // remove everything and readd the ones not selected
         uint n_deleted = 0;


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