datetime: Display month in 2 columns

So that it fits better in smaller screens and the user
doesn't have to scroll to select some months.

This commit implements the updated design[0]

[0] https://gitlab.gnome.org/Teams/Design/settings-mockups/-/blob/master/time-date/time-date-adaptive.png

2 files changed, 93 insertions, 29 deletions

diff --git a/panels/datetime/cc-datetime-panel.c b/panels/datetime/cc-datetime-panel.c
index c1e6aaa04..0031ab53d 100644
--- a/panels/datetime/cc-datetime-panel.c
+++ b/panels/datetime/cc-datetime-panel.c
@@ -98,7 +98,9 @@ struct _CcDateTimePanel
   GtkLockButton *lock_button;
   GtkListBox *date_box;
   GtkListBoxRow *day_row;
-  AdwComboRow *month_row;
+  GtkSingleSelection *month_model;
+  GtkPopover  *month_popover;
+  GtkListBoxRow *month_row;
   GtkListBoxRow *year_row;
   GtkWidget *network_time_switch;
   GtkWidget *time_editor;
@@ -254,7 +256,7 @@ update_time (CcDateTimePanel *self)
     }
 
   self->month = g_date_time_get_month (self->date);
-  adw_combo_row_set_selected (self->month_row, self->month - 1);
+  gtk_single_selection_set_selected (self->month_model, self->month - 1);
   gtk_label_set_text (GTK_LABEL (self->datetime_label), label);
 }
 
@@ -578,20 +580,29 @@ month_year_changed (CcDateTimePanel *self)
 }
 
 static void
-on_month_row_selected_changed_cb (AdwComboRow     *month_row,
-                                  GParamSpec      *pspec,
-                                  CcDateTimePanel *self)
+on_date_box_row_activated_cb (CcDateTimePanel *self,
+                              GtkListBoxRow   *row)
+{
+  g_assert (CC_IS_DATE_TIME_PANEL (self));
+
+  if (row == self->month_row)
+    gtk_popover_popup (self->month_popover);
+}
+
+static void
+on_month_selection_changed_cb (CcDateTimePanel *self)
 {
-  unsigned int i;
+  guint i;
 
   g_assert (CC_IS_DATE_TIME_PANEL (self));
-  g_assert (ADW_IS_COMBO_ROW (month_row));
 
-  i = adw_combo_row_get_selected (month_row);
+  i = gtk_single_selection_get_selected (self->month_model);
   g_assert (i >= 0 && i < 12);
 
   self->month = i + 1;
   month_year_changed (self);
+
+  gtk_popover_popdown (self->month_popover);
 }
 
 static void
@@ -853,6 +864,9 @@ setup_datetime_dialog (CcDateTimePanel *self)
                                    ".gnome-control-center-datetime-setup-time>label {\n"
                                    "    font-size: 250%;\n"
                                    "}\n"
+                                   "gridview.month-grid > child {\n"
+                                   "  background: transparent;\n"
+                                   "}\n"
                                    ".gnome-control-center-datetime-setup-time>spinbutton>entry {\n"
                                    "    padding: 8px 13px;\n"
                                    "}", -1);
@@ -882,7 +896,7 @@ setup_datetime_dialog (CcDateTimePanel *self)
 
   /* Month */
   self->month = g_date_time_get_month (self->date);
-  adw_combo_row_set_selected (self->month_row, self->month - 1);
+  gtk_single_selection_set_selected (self->month_model, self->month - 1);
 }
 
 static int
@@ -956,6 +970,8 @@ cc_date_time_panel_class_init (CcDateTimePanelClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, day_spinbutton);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timeformat_row);
   gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, lock_button);
+  gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, month_model);
+  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_editor);
@@ -970,7 +986,8 @@ cc_date_time_panel_class_init (CcDateTimePanelClass *klass)
   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, format_clock_name_cb);
-  gtk_widget_class_bind_template_callback (widget_class, on_month_row_selected_changed_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_date_box_row_activated_cb);
+  gtk_widget_class_bind_template_callback (widget_class, on_month_selection_changed_cb);
 
   bind_textdomain_codeset (GETTEXT_PACKAGE_TIMEZONES, "UTF-8");
 
diff --git a/panels/datetime/cc-datetime-panel.ui b/panels/datetime/cc-datetime-panel.ui
index fa5a6c961..0a8118cd4 100644
--- a/panels/datetime/cc-datetime-panel.ui
+++ b/panels/datetime/cc-datetime-panel.ui
@@ -40,6 +40,7 @@
               <object class="GtkListBox" id="date_box">
                 <property name="width-request">320</property>
                 <property name="selection-mode">none</property>
+                <signal name="row-activated" handler="on_date_box_row_activated_cb" swapped="yes"/>
                 <style>
                   <class name="boxed-list"/>
                 </style>
@@ -62,27 +63,28 @@
 
                 <!-- Month row -->
                 <child>
-                  <object class="AdwComboRow" id="month_row">
+                  <object class="CcListRow" id="month_row">
                     <property name="title" translatable="yes">Month</property>
-                    <signal name="notify::selected" handler="on_month_row_selected_changed_cb" object="CcDateTimePanel" swapped="no" />
-                    <property name="model">
-                      <object class="GtkStringList">
-                        <items>
-                          <item translatable="yes">January</item>
-                          <item translatable="yes">February</item>
-                          <item translatable="yes">March</item>
-                          <item translatable="yes">April</item>
-                          <item translatable="yes">May</item>
-                          <item translatable="yes">June</item>
-                          <item translatable="yes">July</item>
-                          <item translatable="yes">August</item>
-                          <item translatable="yes">September</item>
-                          <item translatable="yes">October</item>
-                          <item translatable="yes">November</item>
-                          <item translatable="yes">December</item>
-                        </items>
+                    <binding name="secondary-label">
+                      <lookup name="string" type="GtkStringObject">
+                        <lookup name="selected-item">month_model</lookup>
+                      </lookup>
+                    </binding>
+                    <child type="suffix">
+                      <object class="GtkBox">
+                        <property name="valign">center</property>
+                        <child>
+                          <object class="GtkImage">
+                            <property name="icon-name">pan-down-symbolic</property>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkPopover" id="month_popover">
+                            <property name="child">month_grid</property>
+                          </object>
+                        </child>
                       </object>
-                    </property>
+                    </child>
                   </object>
                 </child>
 
@@ -260,4 +262,49 @@
       </object>
     </child>
   </template>
+
+  <object class="GtkGridView" id="month_grid">
+    <property name="halign">start</property>
+    <property name="margin-start">3</property>
+    <property name="margin-end">3</property>
+    <property name="margin-top">3</property>
+    <property name="margin-bottom">3</property>
+    <property name="orientation">horizontal</property>
+    <property name="max-columns">6</property>
+    <property name="min-columns">6</property>
+    <property name="enable-rubberband">False</property>
+    <style>
+      <class name="month-grid"/>
+    </style>
+    <property name="factory">
+      <object class="GtkBuilderListItemFactory">
+        <property name="resource">/org/gnome/control-center/datetime/cc-month-row.ui</property>
+      </object>
+    </property>
+    <property name="model">
+      <object class="GtkSingleSelection" id="month_model">
+        <property name="autoselect">False</property>
+        <signal name="selection-changed" handler="on_month_selection_changed_cb" swapped="yes"/>
+        <property name="model">
+          <object class="GtkStringList">
+            <items>
+              <item translatable="yes">January</item>
+              <item translatable="yes">February</item>
+              <item translatable="yes">March</item>
+              <item translatable="yes">April</item>
+              <item translatable="yes">May</item>
+              <item translatable="yes">June</item>
+              <item translatable="yes">July</item>
+              <item translatable="yes">August</item>
+              <item translatable="yes">September</item>
+              <item translatable="yes">October</item>
+              <item translatable="yes">November</item>
+              <item translatable="yes">December</item>
+            </items>
+          </object>
+        </property>
+      </object>
+    </property>
+  </object>
+
 </interface>