[gnome-clocks] new-alarm-dialog: Port to GTK 4

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 0d61703603082f2ed260a6dca64fc759738da234
Author: Maximiliano Sandoval R <msandova gnome org>
Date:   Mon Dec 13 13:43:54 2021 +0100

    new-alarm-dialog: Port to GTK 4

 data/ui/alarm-day-picker-row.ui |   9 ++--
 data/ui/alarm-setup-dialog.ui   | 114 +++++++++++++---------------------------
 src/alarm-day-picker-row.vala   |   2 +-
 src/alarm-setup-dialog.vala     |  32 ++++++-----
 4 files changed, 60 insertions(+), 97 deletions(-)
---
diff --git a/data/ui/alarm-day-picker-row.ui b/data/ui/alarm-day-picker-row.ui
index 4b6f2c7c..9a2ceefd 100644
--- a/data/ui/alarm-day-picker-row.ui
+++ b/data/ui/alarm-day-picker-row.ui
@@ -8,16 +8,13 @@
     <child>
      <object class="GtkFlowBox" id="flow">
         <property name="valign">center</property>
-        <property name="halign">end</property>
         <property name="hexpand">True</property>
-        <property name="hhomogeneous">True</property>
-        <property name="vhomogeneous">True</property>
         <property name="selection-mode">none</property>
         <property name="activate-on-single-click">False</property>
+        <style>
+          <class name="repeats"/>
+        </style>
       </object>
     </child>
-    <style>
-      <class name="repeats"/>
-    </style>
   </template>
 </interface>
diff --git a/data/ui/alarm-setup-dialog.ui b/data/ui/alarm-setup-dialog.ui
index 46390bac..4709d601 100644
--- a/data/ui/alarm-setup-dialog.ui
+++ b/data/ui/alarm-setup-dialog.ui
@@ -1,25 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
-  <object class="GtkAdjustment" id="h_adjustment">
-    <property name="upper">100</property>
-    <property name="step_increment">1</property>
-    <property name="page_increment">10</property>
-  </object>
-  <object class="GtkAdjustment" id="m_adjustment">
-    <property name="upper">59</property>
-    <property name="step_increment">1</property>
-    <property name="page_increment">10</property>
-  </object>
   <template class="ClocksAlarmSetupDialog" parent="GtkDialog">
     <property name="modal">True</property>
-    <property name="window_position">center-on-parent</property>
     <property name="destroy_with_parent">True</property>
     <property name="default-height">350</property>
     <property name="height-request">350</property>
-    <property name="type_hint">dialog</property>
-    <property name="gravity">center</property>
     <property name="title" translatable="yes">New Alarm</property>
-    <child internal-child="vbox">
+    <child internal-child="content_area">
       <object class="GtkBox">
         <child>
           <object class="AdwClamp">
@@ -29,86 +16,63 @@
                 <property name="spacing">12</property>
                 <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkGrid" id="time_grid">
+                  <object class="GtkBox" id="time_box">
                     <property name="halign">center</property>
                     <property name="margin_top">12</property>
-                    <property name="column_spacing">6</property>
+                    <property name="spacing">6</property>
+                    <style>
+                      <class name="clocks-alarm-setup-time"/>
+                    </style>
                     <child>
-                      <object class="GtkLabel" id="dummy_label1">
-                        <property name="margin_start">6</property>
-                        <property name="margin_end">6</property>
-                        <layout>
-                          <property name="column">0</property>
-                          <property name="row">0</property>
-                        </layout>
+                      <object class="GtkSpinButton" id="h_spinbutton">
+                        <property name="text">0</property>
+                        <property name="xalign">0.5</property>
+                        <property name="orientation">vertical</property>
+                        <property name="numeric">True</property>
+                        <property name="wrap">True</property>
+                        <property name="width-request">60</property>
+                        <signal name="changed" handler="spinbuttons_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
+                        <signal name="output" handler="show_leading_zeros"/>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment">
+                            <property name="upper">23</property>
+                            <property name="step_increment">1</property>
+                            <property name="page_increment">10</property>
+                          </object>
+                        </property>
                       </object>
                     </child>
                     <child>
                       <object class="GtkLabel" id="label2">
                         <property name="label">∶</property>
-                        <layout>
-                          <property name="column">2</property>
-                          <property name="row">0</property>
-                        </layout>
                       </object>
                     </child>
                     <child>
                       <object class="GtkSpinButton" id="m_spinbutton">
-                        <!-- TODO GTK 4 -->
-                        <!-- <property name="max_length">2</property> -->
-                        <property name="activates_default">False</property>
                         <property name="text">0</property>
                         <property name="xalign">0.5</property>
                         <property name="orientation">vertical</property>
-                        <property name="adjustment">m_adjustment</property>
                         <property name="numeric">True</property>
                         <property name="wrap">True</property>
                         <property name="width-request">60</property>
-                        <signal name="changed" handler="spinbuttons_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
-                        <signal name="output" handler="show_leading_zeros" object="ClocksAlarmSetupDialog" 
swapped="no"/>
-                        <layout>
-                          <property name="column">3</property>
-                          <property name="row">0</property>
-                        </layout>
+                        <signal name="output" handler="show_leading_zeros"/>
+                        <signal name="changed" handler="spinbuttons_changed"/>
+                        <property name="adjustment">
+                          <object class="GtkAdjustment">
+                            <property name="upper">59</property>
+                            <property name="step_increment">1</property>
+                            <property name="page_increment">10</property>
+                          </object>
+                        </property>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkStack" id="am_pm_stack">
+                      <object class="AdwBin" id="am_pm_bin">
+                        <property name="visible">False</property>
                         <property name="margin_start">6</property>
                         <property name="margin_end">6</property>
-                        <child>
-                          <object class="GtkLabel" id="dummy_label2">
-                          </object>
-                        </child>
-                        <layout>
-                          <property name="column">4</property>
-                          <property name="row">0</property>
-                        </layout>
-                      </object>
-                    </child>
-                    <child>
-                      <object class="GtkSpinButton" id="h_spinbutton">
-                        <!-- TODO GTK 4 -->
-                        <!-- <property name="max_length">2</property> -->
-                        <property name="activates_default">False</property>
-                        <property name="text">0</property>
-                        <property name="xalign">0.5</property>
-                        <property name="orientation">vertical</property>
-                        <property name="adjustment">h_adjustment</property>
-                        <property name="numeric">True</property>
-                        <property name="wrap">True</property>
-                        <property name="width-request">60</property>
-                        <signal name="changed" handler="spinbuttons_changed" object="ClocksAlarmSetupDialog" 
swapped="no"/>
-                        <signal name="output" handler="show_leading_zeros" object="ClocksAlarmSetupDialog" 
swapped="no"/>
-                        <layout>
-                          <property name="column">1</property>
-                          <property name="row">0</property>
-                        </layout>
                       </object>
                     </child>
-                    <style>
-                      <class name="clocks-alarm-setup-time"/>
-                    </style>
                   </object>
                 </child>
                 <child>
@@ -129,7 +93,6 @@
                           <object class="GtkEntry" id="name_entry">
                             <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>
@@ -159,7 +122,10 @@
                   <object class="GtkButton" id="delete_button">
                     <property name="label" translatable="yes">R_emove Alarm</property>
                     <property name="use-underline">True</property>
-                    <property name="margin">6</property>
+                    <property name="margin-top">6</property>
+                    <property name="margin-bottom">6</property>
+                    <property name="margin-start">6</property>
+                    <property name="margin-top">6</property>
                     <property name="halign">start</property>
                     <signal name="clicked" handler="delete" swapped="no" />
                     <style>
@@ -183,10 +149,4 @@
       </object>
     </child>
   </template>
-  <object class="GtkSizeGroup" id="am_pm_sizegroup">
-    <widgets>
-      <widget name="dummy_label1"/>
-      <widget name="am_pm_stack"/>
-    </widgets>
-  </object>
 </interface>
diff --git a/src/alarm-day-picker-row.vala b/src/alarm-day-picker-row.vala
index 65883caf..3f68ec2a 100644
--- a/src/alarm-day-picker-row.vala
+++ b/src/alarm-day-picker-row.vala
@@ -126,7 +126,7 @@ public class DayPickerRow : Adw.ActionRow {
             buttons[i] = new Gtk.ToggleButton.with_label (day.symbol ());
             buttons[i].action_name = "repeats.day-%i".printf (i);
             buttons[i].tooltip_text = day.name ();
-            buttons[i].get_style_context ().add_class ("circular");
+            buttons[i].add_css_class ("circular");
             buttons[i].show ();
         }
 
diff --git a/src/alarm-setup-dialog.vala b/src/alarm-setup-dialog.vala
index b53543a4..30163f3e 100644
--- a/src/alarm-setup-dialog.vala
+++ b/src/alarm-setup-dialog.vala
@@ -76,7 +76,7 @@ private class DurationModel : ListModel, Object {
 private class SetupDialog : Gtk.Dialog {
     private Utils.WallClock.Format format;
     [GtkChild]
-    private unowned Gtk.Grid time_grid;
+    private unowned Gtk.Box time_box;
     [GtkChild]
     private unowned Gtk.SpinButton h_spinbutton;
     [GtkChild]
@@ -91,7 +91,7 @@ private class SetupDialog : Gtk.Dialog {
     [GtkChild]
     private unowned DayPickerRow repeats;
     [GtkChild]
-    private unowned Gtk.Stack am_pm_stack;
+    private unowned Adw.Bin am_pm_bin;
     [GtkChild]
     private unowned Gtk.Revealer label_revealer;
     [GtkChild]
@@ -101,6 +101,7 @@ private class SetupDialog : Gtk.Dialog {
 
     static construct {
         typeof (DayPickerRow).ensure ();
+        typeof (Duration).ensure ();
     }
 
     public SetupDialog (Gtk.Window parent, Item? alarm, ListModel all_alarms) {
@@ -129,19 +130,19 @@ private class SetupDialog : Gtk.Dialog {
 
         duration_model = new DurationModel ();
 
-        ring_duration.set_model (duration_model);
-        snooze_duration.set_model (duration_model);
+        var expression = new Gtk.CClosureExpression (typeof (string),
+                                                     null, {},
+                                                     (Callback) duration_label,
+                                                     null, null);
 
-        // ring_duration.bind_name_model (duration_model, (item) => {
-        //     return ((Duration) item).label;
-        // });
+        snooze_duration.set_expression (expression);
+        snooze_duration.set_model (duration_model);
 
-        // snooze_duration.bind_name_model (duration_model, (item) => {
-        //     return ((Duration) item).label;
-        // });
+        ring_duration.set_expression (expression);
+        ring_duration.set_model (duration_model);
 
         // Force LTR since we do not want to reverse [hh] : [mm]
-        time_grid.set_direction (Gtk.TextDirection.LTR);
+        time_box.set_direction (Gtk.TextDirection.LTR);
 
         format = Utils.WallClock.get_default ().format;
         am_pm_button = new AmPmToggleButton ();
@@ -151,19 +152,24 @@ private class SetupDialog : Gtk.Dialog {
 
         if (format == Utils.WallClock.Format.TWENTYFOUR) {
             h_spinbutton.set_range (0, 23);
+            am_pm_bin.hide ();
         } else {
             h_spinbutton.set_range (1, 12);
             am_pm_button.hexpand = false;
             am_pm_button.vexpand = false;
             am_pm_button.halign = Gtk.Align.CENTER;
             am_pm_button.valign = Gtk.Align.CENTER;
-            am_pm_stack.add_child (am_pm_button);
-            am_pm_stack.visible_child = am_pm_button;
+            am_pm_bin.show ();
+            am_pm_bin.set_child (am_pm_button);
         }
 
         set_from_alarm (alarm);
     }
 
+    private static string duration_label (Duration item) {
+        return item.label;
+    }
+
     // Sets up the dialog to show the values of alarm.
     public void set_from_alarm (Item? alarm) {
         string? name;