Time Chooser: Follow system clock format

This commit is contained in:
Romain Vigier
2024-03-04 15:17:43 +00:00
parent 374e7bad10
commit e9f2b02248
2 changed files with 169 additions and 38 deletions
+106 -27
View File
@@ -4,37 +4,116 @@ SPDX-FileCopyrightText: Night Theme Switcher Contributors
SPDX-License-Identifier: GPL-3.0-or-later
-->
<interface domain="nightthemeswitcher@romainvigier.fr">
<template class="TimeChooser" parent="GtkBox">
<property name="orientation">horizontal</property>
<property name="spacing">8</property>
<signal name="notify::time" handler="onTimeChanged" swapped="no"/>
<template class="TimeChooser" parent="GtkWidget">
<property name="layout-manager">
<object class="GtkBinLayout"/>
</property>
<signal name="notify::time" handler="onTimeChanged"/>
<child>
<object class="GtkSpinButton" id="hours">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">hours_adjustment</property>
<signal name="value-changed" handler="onValueChanged" swapped="no"/>
<signal name="output" handler="onOutputChanged" swapped="no"/>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes" comments="Time separator (eg. 08:27)">:</property>
</object>
</child>
<child>
<object class="GtkSpinButton" id="minutes">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">minutes_adjustment</property>
<signal name="value-changed" handler="onValueChanged" swapped="no"/>
<signal name="output" handler="onOutputChanged" swapped="no"/>
<object class="GtkStack" id="clock_format_stack">
<child>
<object class="GtkStackPage">
<property name="name">12h</property>
<property name="child">
<object class="GtkBox">
<property name="spacing">8</property>
<property name="halign">end</property>
<child>
<object class="GtkSpinButton" id="hours_12">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">hours_12_adjustment</property>
<signal name="value-changed" handler="onValueChanged"/>
<signal name="output" handler="onOutputChanged"/>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes" comments="Time separator (eg. 08:27)">:</property>
</object>
</child>
<child>
<object class="GtkSpinButton" id="minutes_12">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">minutes_adjustment</property>
<signal name="value-changed" handler="onValueChanged"/>
<signal name="output" handler="onOutputChanged"/>
</object>
</child>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="valign">center</property>
<child>
<object class="GtkToggleButton" id="am_toggle_button">
<property name="label" translatable="yes">AM</property>
<signal name="toggled" handler="onValueChanged"/>
</object>
</child>
<child>
<object class="GtkToggleButton" id="pm_toggle_button">
<property name="label" translatable="yes">PM</property>
<property name="group">am_toggle_button</property>
<signal name="toggled" handler="onValueChanged"/>
</object>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
</object>
</property>
</object>
</child>
<child>
<object class="GtkStackPage">
<property name="name">24h</property>
<property name="child">
<object class="GtkBox">
<property name="spacing">8</property>
<property name="halign">end</property>
<child>
<object class="GtkSpinButton" id="hours_24">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">hours_24_adjustment</property>
<signal name="value-changed" handler="onValueChanged"/>
<signal name="output" handler="onOutputChanged"/>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes" comments="Time separator (eg. 08:27)">:</property>
</object>
</child>
<child>
<object class="GtkSpinButton" id="minutes_24">
<property name="orientation">vertical</property>
<property name="numeric">True</property>
<property name="wrap">True</property>
<property name="adjustment">minutes_adjustment</property>
<signal name="value-changed" handler="onValueChanged"/>
<signal name="output" handler="onOutputChanged"/>
</object>
</child>
</object>
</property>
</object>
</child>
</object>
</child>
</template>
<object class="GtkAdjustment" id="hours_adjustment">
<object class="GtkAdjustment" id="hours_12_adjustment">
<property name="lower">0</property>
<property name="upper">11</property>
<property name="step-increment">1</property>
</object>
<object class="GtkAdjustment" id="hours_24_adjustment">
<property name="lower">0</property>
<property name="upper">23</property>
<property name="step-increment">1</property>
+63 -11
View File
@@ -1,16 +1,21 @@
// SPDX-FileCopyrightText: Night Theme Switcher Contributors
// SPDX-License-Identifier: GPL-3.0-or-later
import GDesktopEnums from 'gi://GDesktopEnums';
import Gio from 'gi://Gio';
import GObject from 'gi://GObject';
import Gtk from 'gi://Gtk';
export class TimeChooser extends Gtk.Box {
export class TimeChooser extends Gtk.Widget {
#clockFormat;
#interfaceSettings;
static {
GObject.registerClass({
GTypeName: 'TimeChooser',
Template: 'resource:///org/gnome/Shell/Extensions/nightthemeswitcher/preferences/ui/TimeChooser.ui',
InternalChildren: ['hours', 'minutes'],
InternalChildren: ['clock_format_stack', 'hours_12', 'minutes_12', 'hours_24', 'minutes_24', 'am_toggle_button', 'pm_toggle_button'],
Properties: {
time: GObject.ParamSpec.double(
'time',
@@ -25,17 +30,64 @@ export class TimeChooser extends Gtk.Box {
}, this);
}
onTimeChanged(chooser) {
const hours = Math.trunc(chooser.time);
const minutes = Math.round((chooser.time - hours) * 60);
chooser._hours.value = hours;
chooser._minutes.value = minutes;
constructor({ ...params } = {}) {
super(params);
this.#interfaceSettings = new Gio.Settings({ schema: 'org.gnome.desktop.interface' });
this.#interfaceSettings.connect('changed::clock-format', this.#onClockFormatChanged.bind(this));
this.#onClockFormatChanged();
}
onValueChanged(_spin) {
const hours = this._hours.value;
const minutes = this._minutes.value / 60;
this.time = hours + minutes;
#onClockFormatChanged(_settings) {
this.#clockFormat = this.#interfaceSettings.get_enum('clock-format');
this.#syncClockFormatStack();
}
#syncClockFormatStack() {
this._clock_format_stack.set_visible_child_name(this.#clockFormat === GDesktopEnums.ClockFormat['12H'] ? '12h' : '24h');
}
#convertTimeTo24hFormat(time) {
const hours = Math.trunc(time);
const minutes = Math.round((time - hours) * 60);
return { hours, minutes };
}
#convertTimeTo12hFormat(time) {
const { hours: hours24, minutes } = this.#convertTimeTo24hFormat(time);
const hours = hours24 % 12;
const isPm = hours24 > 12;
return { hours, minutes, isPm };
}
#convert24hFormatToTime({ hours, minutes }) {
return hours + minutes / 60;
}
#convert12hFormatToTime({ hours, minutes, isPm }) {
return this.#convert24hFormatToTime({
hours: hours + Number(isPm) * 12,
minutes,
});
}
onTimeChanged(_chooser) {
const time = this.time;
const clock12 = this.#convertTimeTo12hFormat(time);
this._hours_12.value = clock12.hours;
this._minutes_12.value = clock12.minutes;
this._am_toggle_button.active = !clock12.isPm;
this._pm_toggle_button.active = clock12.isPm;
const clock24 = this.#convertTimeTo24hFormat(time);
this._hours_24.value = clock24.hours;
this._minutes_24.value = clock24.minutes;
}
onValueChanged(_widget) {
this.time = this.#clockFormat === GDesktopEnums.ClockFormat['12H']
? this.#convert12hFormatToTime({ hours: this._hours_12.value, minutes: this._minutes_12.value, isPm: this._pm_toggle_button.active })
: this.#convert24hFormatToTime({ hours: this._hours_24.value, minutes: this._minutes_24.value });
}
onOutputChanged(spin) {