datetime: Implement the new time-date editor dialog design

8 files changed, 346 insertions, 532 deletions

diff --git a/panels/datetime/big.ui b/panels/datetime/big.ui
deleted file mode 100644
index 48f77b5ff..000000000
--- a/panels/datetime/big.ui
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.18.3 -->
-<interface>
-  <requires lib="gtk+" version="3.12"/>
-  <object class="GtkGrid" id="date_grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">9</property>
-    <property name="column_spacing">6</property>
-    <property name="row_homogeneous">True</property>
-    <child>
-      <object class="GtkLabel" id="day_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Day</property>
-        <property name="mnemonic_widget">day_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="month_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Month</property>
-        <property name="mnemonic_widget">month_combobox</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="year_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Year</property>
-        <property name="mnemonic_widget">year_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="day_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">3</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkComboBox" id="month_combobox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkCellRendererText" id="cellrenderertext3"/>
-          <attributes>
-            <attribute name="text">0</attribute>
-          </attributes>
-        </child>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="year_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">5</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-  </object>
-</interface>
diff --git a/panels/datetime/cc-datetime-panel.c b/panels/datetime/cc-datetime-panel.c
index eb7e78bdc..33a975941 100644
--- a/panels/datetime/cc-datetime-panel.c
+++ b/panels/datetime/cc-datetime-panel.c
@@ -69,7 +69,6 @@ struct _CcDateTimePanel
 {
   CcPanel parent_instance;
 
-  GtkBuilder *builder;
   GtkWidget *map;
 
   GList *listboxes;
@@ -103,10 +102,13 @@ struct _CcDateTimePanel
   GtkWidget *listbox2;
   GtkWidget *listbox3;
   GtkLockButton *lock_button;
-  GtkWidget *month_combobox;
-  GtkListStore *month_liststore;
+  GtkLabel  *month_label;
+  GtkListBox *date_box;
+  GtkListBoxRow *day_row;
+  GtkListBoxRow *month_row;
+  GtkListBoxRow *year_row;
+  GtkPopover *month_popover;
   GtkWidget *network_time_switch;
-  GtkWidget *time_box;
   GtkWidget *time_editor;
   GtkWidget *timezone_button;
   GtkWidget *timezone_dialog;
@@ -122,6 +124,8 @@ struct _CcDateTimePanel
   GPermission *permission;
   GPermission *tz_permission;
   GSettings *location_settings;
+
+  int        month; /* index starts from 1 */
 };
 
 CC_PANEL_REGISTER (CcDateTimePanel, cc_date_time_panel)
@@ -145,7 +149,6 @@ cc_date_time_panel_dispose (GObject *object)
       panel->toplevels = NULL;
     }
 
-  g_clear_object (&panel->builder);
   g_clear_object (&panel->clock_tracker);
   g_clear_object (&panel->dtm);
   g_clear_object (&panel->permission);
@@ -240,6 +243,7 @@ static void
 update_time (CcDateTimePanel *self)
 {
   g_autofree gchar *label = NULL;
+  g_autofree gchar *month_label = NULL;
   gboolean use_ampm;
 
   if (self->clock_format == G_DESKTOP_CLOCK_FORMAT_12H)
@@ -263,6 +267,9 @@ update_time (CcDateTimePanel *self)
       label = g_date_time_format (self->date, _("%e %B %Y, %R"));
     }
 
+  self->month = g_date_time_get_month (self->date);
+  month_label = g_date_time_format (self->date, "%B");
+  gtk_label_set_text (self->month_label, month_label);
   gtk_label_set_text (GTK_LABEL (self->datetime_label), label);
 }
 
@@ -371,15 +378,14 @@ queue_set_timezone (CcDateTimePanel *self)
 static void
 change_date (CcDateTimePanel *self)
 {
-  guint mon, y, d;
+  guint y, d;
   g_autoptr(GDateTime) old_date = NULL;
 
-  mon = 1 + gtk_combo_box_get_active (GTK_COMBO_BOX (self->month_combobox));
   y = gtk_spin_button_get_value_as_int (GTK_SPIN_BUTTON (self->year_spinbutton));
   d = gtk_spin_button_get_value_as_int (GTK_SPIN_BUTTON (self->day_spinbutton));
 
   old_date = self->date;
-  self->date = g_date_time_new_local (y, mon, d,
+  self->date = g_date_time_new_local (y, self->month, d,
                                       g_date_time_get_hour (old_date),
                                       g_date_time_get_minute (old_date),
                                       g_date_time_get_second (old_date));
@@ -390,6 +396,17 @@ change_date (CcDateTimePanel *self)
   queue_set_datetime (self);
 }
 
+static void
+date_box_row_activated_cb (CcDateTimePanel *self,
+                           GtkListBoxRow   *row)
+{
+  g_assert (CC_IS_DATE_TIME_PANEL (self));
+  g_assert (GTK_IS_LIST_BOX_ROW (row));
+
+  if (row == self->month_row)
+    gtk_popover_popup (self->month_popover);
+}
+
 static gboolean
 city_changed_cb (CcDateTimePanel    *self,
                  GtkTreeModel       *model,
@@ -560,16 +577,15 @@ day_changed (CcDateTimePanel *panel)
 static void
 month_year_changed (CcDateTimePanel *self)
 {
-  guint mon, y;
+  guint y;
   guint num_days;
   GtkAdjustment *adj;
   GtkSpinButton *day_spin;
 
-  mon = 1 + gtk_combo_box_get_active (GTK_COMBO_BOX (self->month_combobox));
   y = gtk_spin_button_get_value_as_int (GTK_SPIN_BUTTON (self->year_spinbutton));
 
   /* Check the number of days in that month */
-  num_days = g_date_get_days_in_month (mon, y);
+  num_days = g_date_get_days_in_month (self->month, y);
 
   day_spin = GTK_SPIN_BUTTON (self->day_spinbutton);
   adj = GTK_ADJUSTMENT (gtk_spin_button_get_adjustment (day_spin));
@@ -582,6 +598,25 @@ month_year_changed (CcDateTimePanel *self)
 }
 
 static void
+month_row_activated_cb (CcDateTimePanel *self,
+                        GtkFlowBoxChild *child,
+                        GtkFlowBox      *box)
+{
+  int i;
+
+  g_assert (CC_IS_DATE_TIME_PANEL (self));
+  g_assert (GTK_IS_FLOW_BOX_CHILD (child));
+  g_assert (GTK_IS_FLOW_BOX (box));
+
+  i = gtk_flow_box_child_get_index (child);
+  g_assert (i >= 0 && i < 12);
+
+  self->month = i + 1;
+  month_year_changed (self);
+  gtk_popover_popdown (self->month_popover);
+}
+
+static void
 on_clock_changed (CcDateTimePanel *panel,
 		  GParamSpec      *pspec)
 {
@@ -868,6 +903,7 @@ setup_datetime_dialog (CcDateTimePanel *self)
   GtkAdjustment *adjustment;
   GdkScreen *screen;
   g_autoptr(GtkCssProvider) provider = NULL;
+  g_autofree char *month = NULL;
   guint num_days;
 
   /* Big time buttons */
@@ -886,10 +922,9 @@ setup_datetime_dialog (CcDateTimePanel *self)
                                              GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
 
   /* Month */
-  gtk_combo_box_set_active (GTK_COMBO_BOX (self->month_combobox),
-                            g_date_time_get_month (self->date) - 1);
-  g_signal_connect_object (G_OBJECT (self->month_combobox), "changed",
-                           G_CALLBACK (month_year_changed), self, G_CONNECT_SWAPPED);
+  self->month = g_date_time_get_month (self->date);
+  month = g_date_time_format (self->date, "%B");
+  gtk_label_set_text (self->month_label, month);
 
   /* Day */
   num_days = g_date_get_days_in_month (g_date_time_get_month (self->date),
@@ -911,6 +946,46 @@ setup_datetime_dialog (CcDateTimePanel *self)
                            G_CALLBACK (month_year_changed), self, G_CONNECT_SWAPPED);
 }
 
+static int
+sort_date_box (GtkListBoxRow   *a,
+               GtkListBoxRow   *b,
+               CcDateTimePanel *self)
+{
+  g_assert (CC_IS_DATE_TIME_PANEL (self));
+
+  switch (date_endian_get_default (FALSE)) {
+  case DATE_ENDIANESS_BIG:
+    /* year, month, day */
+    if (a == self->year_row || b == self->day_row)
+      return -1;
+    if (a == self->day_row || b == self->year_row)
+      return 1;
+
+  case DATE_ENDIANESS_LITTLE:
+    /* day, month, year */
+    if (a == self->day_row || b == self->year_row)
+      return -1;
+    if (a == self->year_row || b == self->day_row)
+      return 1;
+
+  case DATE_ENDIANESS_MIDDLE:
+    /* month, day, year */
+    if (a == self->month_row || b == self->year_row)
+      return -1;
+    if (a == self->year_row || b == self->month_row)
+      return 1;
+
+  case DATE_ENDIANESS_YDM:
+    /* year, day, month */
+    if (a == self->year_row || b == self->month_row)
+      return -1;
+    if (a == self->month_row || b == self->year_row)
+      return 1;
+  }
+
+  return 0;
+}
+
 static void
 cc_date_time_panel_class_init (CcDateTimePanelClass *klass)
 {
@@ -931,27 +1006,35 @@ cc_date_time_panel_class_init (CcDateTimePanelClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, auto_timezone_switch);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, city_liststore);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, city_modelsort);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, date_box);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, datetime_button);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, datetime_dialog);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, datetime_label);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, day_row);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, day_spinbutton);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, format_combobox);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, listbox1);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, listbox2);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, listbox3);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, lock_button);
-  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, month_liststore);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, month_label);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, month_popover);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, month_row);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, network_time_switch);
-  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, time_box);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, time_editor);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timezone_button);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timezone_dialog);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timezone_label);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timezone_searchentry);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, year_row);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, year_spinbutton);
 
   gtk_widget_class_bind_template_callback (widget_class, list_box_row_activated);
   gtk_widget_class_bind_template_callback (widget_class, keynav_failed);
   gtk_widget_class_bind_template_callback (widget_class, time_changed_cb);
   gtk_widget_class_bind_template_callback (widget_class, change_clock_settings);
+  gtk_widget_class_bind_template_callback (widget_class, month_row_activated_cb);
+  gtk_widget_class_bind_template_callback (widget_class, date_box_row_activated_cb);
 
   bind_textdomain_codeset (GETTEXT_PACKAGE_TIMEZONES, "UTF-8");
 
@@ -962,8 +1045,6 @@ static void
 cc_date_time_panel_init (CcDateTimePanel *self)
 {
   g_autoptr(GError) error = NULL;
-  const char *date_grid_name;
-  g_autofree gchar *tmp = NULL;
 
   g_resources_register (cc_datetime_get_resource ());
 
@@ -982,33 +1063,10 @@ cc_date_time_panel_init (CcDateTimePanel *self)
         return;
   }
 
-  switch (date_endian_get_default (FALSE)) {
-  case DATE_ENDIANESS_BIG:
-    date_grid_name = "big";
-    break;
-  case DATE_ENDIANESS_LITTLE:
-    date_grid_name = "little";
-    break;
-  case DATE_ENDIANESS_MIDDLE:
-    date_grid_name = "middle";
-    break;
-  case DATE_ENDIANESS_YDM:
-    date_grid_name = "ydm";
-    break;
-  default:
-    g_assert_not_reached ();
-  }
-
-  self->builder = gtk_builder_new ();
-  tmp = g_strdup_printf ("/org/gnome/control-center/datetime/%s.ui", date_grid_name);
-  gtk_builder_add_from_resource (self->builder, tmp, NULL);
-  self->date_grid = GTK_WIDGET (gtk_builder_get_object (self->builder, "date_grid"));
-  self->day_spinbutton = GTK_WIDGET (gtk_builder_get_object (self->builder, "day_spinbutton"));
-  self->month_combobox = GTK_WIDGET (gtk_builder_get_object (self->builder, "month_combobox"));
-  gtk_combo_box_set_model (GTK_COMBO_BOX (self->month_combobox), GTK_TREE_MODEL (self->month_liststore));
-  self->year_spinbutton = GTK_WIDGET (gtk_builder_get_object (self->builder, "year_spinbutton"));
-
-  gtk_box_pack_end (GTK_BOX (self->time_box), self->date_grid, FALSE, TRUE, 0);
+  gtk_list_box_set_sort_func (self->date_box,
+                              (GtkListBoxSortFunc)sort_date_box,
+                              self, NULL);
+  gtk_list_box_invalidate_sort (self->date_box);
 
   /* add the lock button */
   self->permission = polkit_permission_new_sync (DATETIME_PERMISSION, NULL, NULL, NULL);
diff --git a/panels/datetime/cc-datetime-panel.ui b/panels/datetime/cc-datetime-panel.ui
index dc7519c18..b792a263d 100644
--- a/panels/datetime/cc-datetime-panel.ui
+++ b/panels/datetime/cc-datetime-panel.ui
@@ -16,54 +16,124 @@
   <object class="GtkTreeModelSort" id="city_modelsort">
     <property name="model">city_liststore</property>
   </object>
-  <object class="GtkListStore" id="month_liststore">
-    <columns>
-      <!-- column-name gchararray1 -->
-      <column type="gchararray"/>
-    </columns>
-    <data>
-      <row>
-        <col id="0" translatable="yes">January</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">February</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">March</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">April</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">May</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">June</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">July</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">August</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">September</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">October</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">November</col>
-      </row>
-      <row>
-        <col id="0" translatable="yes">December</col>
-      </row>
-    </data>
+  <object class="GtkPopover" id="month_popover">
+    <property name="visible">False</property>
+    <property name="relative-to">month_icon</property>
+    <child>
+      <object class="GtkFlowBox">
+        <property name="visible">True</property>
+        <property name="margin">12</property>
+        <property name="orientation">vertical</property>
+        <property name="max-children-per-line">6</property>
+        <property name="min-children-per-line">4</property>
+        <property name="homogeneous">True</property>
+        <property name="row-spacing">12</property>
+        <property name="column-spacing">12</property>
+        <property name="selection-mode">none</property>
+        <signal name="child-activated" handler="month_row_activated_cb" swapped="yes"/>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">January</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">February</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">March</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">April</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">May</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">June</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">July</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">August</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">September</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">October</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">November</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">December</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+
+      </object>
+    </child>
   </object>
   <object class="GtkDialog" id="datetime_dialog">
     <property name="can_focus">False</property>
     <property name="title" translatable="yes">Date &amp; Time</property>
-    <property name="resizable">False</property>
     <property name="type_hint">dialog</property>
     <property name="use_header_bar">1</property>
     <signal name="delete-event" handler="gtk_widget_hide_on_delete"/>
@@ -72,27 +142,141 @@
         <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
         <property name="spacing">2</property>
+        <property name="margin_top">28</property>
+        <property name="margin_bottom">28</property>
+        <property name="margin_start">12</property>
+        <property name="margin_end">12</property>
+        <property name="spacing">18</property>
         <child>
-          <object class="GtkBox" id="time_box">
+          <object class="CcTimeEditor" id="time_editor">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="margin_start">28</property>
-            <property name="margin_end">40</property>
-            <property name="margin_top">28</property>
-            <property name="margin_bottom">28</property>
-            <property name="spacing">24</property>
+            <property name="halign">center</property>
+            <signal name="time-changed" handler="time_changed_cb" swapped="yes"/>
+          </object>
+        </child>
+
+        <child>
+          <object class="HdyClamp">
+            <property name="visible">True</property>
+            <property name="maximum-size">600</property>
+
             <child>
-              <object class="CcTimeEditor" id="time_editor">
+              <object class="GtkListBox" id="date_box">
                 <property name="visible">True</property>
-                <signal name="time-changed" handler="time_changed_cb" swapped="yes"/>
+                <property name="width-request">320</property>
+                <property name="selection-mode">none</property>
+                <signal name="row-activated" handler="date_box_row_activated_cb" swapped="yes"/>
+                <style>
+                  <class name="frame"/>
+                </style>
+
+                <!-- Year row -->
+                <child>
+                  <object class="GtkListBoxRow" id="year_row">
+                    <property name="visible">True</property>
+                    <property name="activatable">False</property>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="halign">start</property>
+                            <property name="label" translatable="yes">Year</property>
+                            <property name="mnemonic-widget">year_spinbutton</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkSpinButton" id="year_spinbutton">
+                            <property name="visible">True</property>
+                            <property name="width-chars">4</property>
+                            <property name="numeric">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <!-- Month row -->
+                <child>
+                  <object class="GtkListBoxRow" id="month_row">
+                    <property name="visible">True</property>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">6</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="halign">start</property>
+                            <property name="label" translatable="yes">Month</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel" id="month_label">
+                            <property name="visible">True</property>
+                            <property name="halign">end</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkImage" id="month_icon">
+                            <property name="visible">True</property>
+                            <property name="icon-name">pan-down-symbolic</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <!-- Day row -->
+                <child>
+                  <object class="GtkListBoxRow" id="day_row">
+                    <property name="visible">True</property>
+                    <property name="activatable">False</property>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="halign">start</property>
+                            <property name="label" translatable="yes">Day</property>
+                            <property name="mnemonic-widget">day_spinbutton</property>
+                            <style>
+                              <class name="dim-label"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkSpinButton" id="day_spinbutton">
+                            <property name="visible">True</property>
+                            <property name="width-chars">3</property>
+                            <property name="numeric">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
               </object>
             </child>
+
           </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/panels/datetime/datetime.gresource.xml b/panels/datetime/datetime.gresource.xml
index 13099d530..742b1f9e2 100644
--- a/panels/datetime/datetime.gresource.xml
+++ b/panels/datetime/datetime.gresource.xml
@@ -2,10 +2,6 @@
 <gresources>
   <gresource prefix="/org/gnome/control-center/datetime">
     <file preprocess="xml-stripblanks">cc-datetime-panel.ui</file>
-    <file preprocess="xml-stripblanks">little.ui</file>
-    <file preprocess="xml-stripblanks">big.ui</file>
-    <file preprocess="xml-stripblanks">middle.ui</file>
-    <file preprocess="xml-stripblanks">ydm.ui</file>
     <file>backward</file>
     <file alias="bg.png">data/bg.png</file>
     <file alias="bg_dim.png">data/bg_dim.png</file>
diff --git a/panels/datetime/little.ui b/panels/datetime/little.ui
deleted file mode 100644
index 3a4115710..000000000
--- a/panels/datetime/little.ui
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.18.3 -->
-<interface>
-  <requires lib="gtk+" version="3.12"/>
-  <object class="GtkGrid" id="date_grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">9</property>
-    <property name="column_spacing">6</property>
-    <property name="row_homogeneous">True</property>
-    <child>
-      <object class="GtkLabel" id="day_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Day</property>
-        <property name="mnemonic_widget">day_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="month_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Month</property>
-        <property name="mnemonic_widget">month_combobox</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="year_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Year</property>
-        <property name="mnemonic_widget">year_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="day_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">3</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkComboBox" id="month_combobox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkCellRendererText" id="cellrenderertext3"/>
-          <attributes>
-            <attribute name="text">0</attribute>
-          </attributes>
-        </child>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="year_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">5</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-  </object>
-</interface>
diff --git a/panels/datetime/meson.build b/panels/datetime/meson.build
index ec735f34b..65683941f 100644
--- a/panels/datetime/meson.build
+++ b/panels/datetime/meson.build
@@ -112,11 +112,7 @@ resource_data = files(
   'data/timezone_-9.png',
   'data/timezone_9.png',
   'backward',
-  'big.ui',
   'cc-datetime-panel.ui',
-  'little.ui',
-  'middle.ui',
-  'ydm.ui'
 )
 
 resources = gnome.compile_resources(
diff --git a/panels/datetime/middle.ui b/panels/datetime/middle.ui
deleted file mode 100644
index 621cfc44c..000000000
--- a/panels/datetime/middle.ui
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.18.3 -->
-<interface>
-  <requires lib="gtk+" version="3.12"/>
-  <object class="GtkGrid" id="date_grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">9</property>
-    <property name="column_spacing">6</property>
-    <property name="row_homogeneous">True</property>
-    <child>
-      <object class="GtkLabel" id="day_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Day</property>
-        <property name="mnemonic_widget">day_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="month_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Month</property>
-        <property name="mnemonic_widget">month_combobox</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="year_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Year</property>
-        <property name="mnemonic_widget">year_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="day_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">3</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkComboBox" id="month_combobox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkCellRendererText" id="cellrenderertext3"/>
-          <attributes>
-            <attribute name="text">0</attribute>
-          </attributes>
-        </child>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="year_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">5</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-  </object>
-</interface>
diff --git a/panels/datetime/ydm.ui b/panels/datetime/ydm.ui
deleted file mode 100644
index 85b883310..000000000
--- a/panels/datetime/ydm.ui
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.18.3 -->
-<interface>
-  <requires lib="gtk+" version="3.12"/>
-  <object class="GtkGrid" id="date_grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">9</property>
-    <property name="column_spacing">6</property>
-    <property name="row_homogeneous">True</property>
-    <child>
-      <object class="GtkLabel" id="day_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Day</property>
-        <property name="mnemonic_widget">day_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="month_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Month</property>
-        <property name="mnemonic_widget">month_combobox</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="year_label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="label" translatable="yes">Year</property>
-        <property name="mnemonic_widget">year_spinbutton</property>
-        <property name="xalign">1</property>
-        <style>
-          <class name="dim-label"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="day_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">3</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkComboBox" id="month_combobox">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <child>
-          <object class="GtkCellRendererText" id="cellrenderertext3"/>
-          <attributes>
-            <attribute name="text">0</attribute>
-          </attributes>
-        </child>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkSpinButton" id="year_spinbutton">
-        <property name="visible">True</property>
-        <property name="can_focus">True</property>
-        <property name="invisible_char">•</property>
-        <property name="width_chars">5</property>
-        <property name="numeric">True</property>
-        <property name="wrap">True</property>
-      </object>
-      <packing>
-        <property name="left_attach">1</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-  </object>
-</interface>