From e9f2b02248cd87a0bae4e07c8e2a7eb900085bff Mon Sep 17 00:00:00 2001
From: Romain Vigier <romain@romainvigier.fr>
Date: Sun, 18 Feb 2024 14:45:21 +0100
Subject: [PATCH] Time Chooser: Follow system clock format

---
 src/data/ui/TimeChooser.ui     | 133 ++++++++++++++++++++++++++-------
 src/preferences/TimeChooser.js |  74 +++++++++++++++---
 2 files changed, 169 insertions(+), 38 deletions(-)

diff --git a/src/data/ui/TimeChooser.ui b/src/data/ui/TimeChooser.ui
index b9254c8..07d50ae 100644
--- a/src/data/ui/TimeChooser.ui
+++ b/src/data/ui/TimeChooser.ui
@@ -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>
diff --git a/src/preferences/TimeChooser.js b/src/preferences/TimeChooser.js
index cd74ad0..e651b84 100644
--- a/src/preferences/TimeChooser.js
+++ b/src/preferences/TimeChooser.js
@@ -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) {