applications/gnome-control-center
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

datetime: Display month in 2 columns

Browse source 
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
This commit is contained in:
Mohammed Sadiq 2022-11-13 20:12:22 +05:30 • committed by Robert Ancell
parent e23ff1befc
commit 1885b2c4f3
2 changed files with 93 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
panels/datetime/cc-datetime-panel.c
View file

@ -98,7 +98,9 @@ struct _CcDateTimePanel
GtkLockButton *lock_button; GtkLockButton *lock_button;
GtkListBox *date_box; GtkListBox *date_box;
GtkListBoxRow *day_row; GtkListBoxRow *day_row;
AdwComboRow *month_row; GtkSingleSelection *month_model;
GtkPopover *month_popover;
GtkListBoxRow *month_row;
GtkListBoxRow *year_row; GtkListBoxRow *year_row;
GtkWidget *network_time_switch; GtkWidget *network_time_switch;
GtkWidget *time_editor; GtkWidget *time_editor;
@ -254,7 +256,7 @@ update_time (CcDateTimePanel *self)
} }
self->month = g_date_time_get_month (self->date); 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); gtk_label_set_text (GTK_LABEL (self->datetime_label), label);
} }
@ -578,20 +580,29 @@ month_year_changed (CcDateTimePanel *self)
} }
static void static void
on_month_row_selected_changed_cb (AdwComboRow *month_row, on_date_box_row_activated_cb (CcDateTimePanel *self,
GParamSpec *pspec, GtkListBoxRow *row)
CcDateTimePanel *self)
{ {
unsigned int i; 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)
{
guint i;
g_assert (CC_IS_DATE_TIME_PANEL (self)); 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); g_assert (i >= 0 && i < 12);
self->month = i + 1; self->month = i + 1;
month_year_changed (self); month_year_changed (self);
gtk_popover_popdown (self->month_popover);
} }
static void static void
@ -853,6 +864,9 @@ setup_datetime_dialog (CcDateTimePanel *self)
".gnome-control-center-datetime-setup-time>label {\n" ".gnome-control-center-datetime-setup-time>label {\n"
" font-size: 250%;\n" " font-size: 250%;\n"
"}\n" "}\n"
"gridview.month-grid > child {\n"
" background: transparent;\n"
"}\n"
".gnome-control-center-datetime-setup-time>spinbutton>entry {\n" ".gnome-control-center-datetime-setup-time>spinbutton>entry {\n"
" padding: 8px 13px;\n" " padding: 8px 13px;\n"
"}", -1); "}", -1);
@ -882,7 +896,7 @@ setup_datetime_dialog (CcDateTimePanel *self)
/* Month */ /* Month */
self->month = g_date_time_get_month (self->date); 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 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, day_spinbutton);
gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, timeformat_row); 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, 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, month_row);
gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, network_time_switch); gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, network_time_switch);
gtk_widget_class_bind_template_child (widget_class, CcDateTimePanel, time_editor); 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, time_changed_cb);
gtk_widget_class_bind_template_callback (widget_class, change_clock_settings); 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, 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"); bind_textdomain_codeset (GETTEXT_PACKAGE_TIMEZONES, "UTF-8");

85
panels/datetime/cc-datetime-panel.ui
View file

@ -40,6 +40,7 @@
<object class="GtkListBox" id="date_box"> <object class="GtkListBox" id="date_box">
<property name="width-request">320</property> <property name="width-request">320</property>
<property name="selection-mode">none</property> <property name="selection-mode">none</property>
<signal name="row-activated" handler="on_date_box_row_activated_cb" swapped="yes"/>
<style> <style>
<class name="boxed-list"/> <class name="boxed-list"/>
</style> </style>
@ -62,27 +63,28 @@
<!-- Month row --> <!-- Month row -->
<child> <child>
<object class="AdwComboRow" id="month_row"> <object class="CcListRow" id="month_row">
<property name="title" translatable="yes">Month</property> <property name="title" translatable="yes">Month</property>
<signal name="notify::selected" handler="on_month_row_selected_changed_cb" object="CcDateTimePanel" swapped="no" /> <binding name="secondary-label">
<property name="model"> <lookup name="string" type="GtkStringObject">
<object class="GtkStringList"> <lookup name="selected-item">month_model</lookup>
<items> </lookup>
<item translatable="yes">January</item> </binding>
<item translatable="yes">February</item> <child type="suffix">
<item translatable="yes">March</item> <object class="GtkBox">
<item translatable="yes">April</item> <property name="valign">center</property>
<item translatable="yes">May</item> <child>
<item translatable="yes">June</item> <object class="GtkImage">
<item translatable="yes">July</item> <property name="icon-name">pan-down-symbolic</property>
<item translatable="yes">August</item> </object>
<item translatable="yes">September</item> </child>
<item translatable="yes">October</item> <child>
<item translatable="yes">November</item> <object class="GtkPopover" id="month_popover">
<item translatable="yes">December</item> <property name="child">month_grid</property>
</items> </object>
</child>
</object> </object>
</property> </child>
</object> </object>
</child> </child>
@ -260,4 +262,49 @@
</object> </object>
</child> </child>
</template> </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> </interface>