Port for Gnome 40

extension.json

@@ -2,6 +2,8 @@
 	"extension": "datetime-format",
 	"domain": "Daniel-Khodabakhsh.github.com",
 	"description": "Allow users to customise the datetime format on the clock panel and lock screen.",
-	"gnomeShellVersions": ["3.20.4"],
+	"gnomeShellVersions": [
+		"40", "42", "43"
+	],
 	"url": "https://github.com/Daniel-Khodabakhsh/datetime-format"
-}
+}

src/EditWindow.js

@@ -10,14 +10,15 @@
 /// @param {Settings} settings - Settings object.
 /// @param {Object} language - Language map.
 /// 
-const Class = function (parent, gladeFile, settings, language) {
+var Class = function (parent, gladeFile, settings, language) {
 	const GLib = imports.gi.GLib;
 	const Utilities = imports.misc.extensionUtils.getCurrentExtension().imports.Utilities;
 
 	const builder = Utilities.getBuilder(gladeFile);
 	const window = builder.get_object("editWindow");
-	const header = builder.get_object("editWindowHeaderBar");
+	const title = builder.get_object("editWindowTitle");
 	const applyButton = builder.get_object("editWindowApplyButton");
+	const closeButton = builder.get_object("editWindowCloseButton");
 	const formatEntry = builder.get_object("editWindowFormatEntry");
 	const preview = builder.get_object("editWindowPreviewLabel");
 	const notebook = builder.get_object("editWindowFormatOptionsNotebook");
@@ -68,9 +69,15 @@ const Class = function (parent, gladeFile, settings, language) {
 	};
 
 	formatEntry.connect("changed", updatePreview);
+	formatEntry.connect("notify::text", () => {
+		applyButton.get_style_context().add_class("suggested-action");
+		applyButton.set_sensitive(true);
+		applyButton.set_receives_default(true);
+	});
+
 
 	// Hide window and disconnect elements.
-	const hide = function () {
+	const hideWindow = function () {
 		// Stop updatePreview()
 		if (updateTimeoutID != 0) {
 			GLib.Source.remove(updateTimeoutID);
@@ -87,7 +94,8 @@ const Class = function (parent, gladeFile, settings, language) {
 	};
 
 	// Close button
-	builder.get_object("editWindowCloseButton").connect("clicked", hide);
+	closeButton.connect("clicked", hideWindow);
+	//builder.get_object("editWindowCloseButton").connect_swapped(window, "response", hide, window);
 
 	///
 	/// Show the edit window.
@@ -98,23 +106,26 @@ const Class = function (parent, gladeFile, settings, language) {
 	/// @param {function(): boolean} updateParentPreview - Callback to update the parent preview label.
 	/// @param {string} name - Format target name.
 	///
-	this.show = function (formatTarget, formatTargetObject, updateParentPreview, name) {
-		header.set_title(name + " - " + language.format);
-		window.set_transient_for(parent.get_parent().get_parent());
+	this.showWindow = function (formatTarget, formatTargetObject, updateParentPreview, name) {
+		title.set_text(name + " - " + language.format);
+		window.set_transient_for(parent.get_root());
 		formatEntry.set_text(settings.getFormat(formatTarget));
 		formatEntry.select_region(0, -1);
 		formatEntry.grab_focus();
+		applyButton.get_style_context().remove_class("suggested-action");
+		applyButton.set_sensitive(false);
+		closeButton.set_receives_default(true);
 		defaultFormat = formatTargetObject.defaultFormat;
 
 		// Click apply button, hide window, save settings, and update parent
 		applyButtonClickID = applyButton.connect("clicked", function () {
-			hide();
+			hideWindow();
 			settings.setFormat(formatTarget, formatEntry.get_text());
 			updateParentPreview();
 		});
 
 		updateTimeoutID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, updatePreview);
 		updatePreview();
-		window.show_all();
+		window.show();
 	};
-};
+};

src/FormatTarget.js

@@ -11,7 +11,7 @@
 /// @param {Settings} settings - Settings object.
 /// @param {EditWindow} editWindow - Edit window to show when the settings button is pressed.
 ///
-const create = function (container, formatTarget, builder, settings, editWindow) {
+var create = function (container, formatTarget, builder, settings, editWindow) {
 	const GLib = imports.gi.GLib;
 	const extension = imports.misc.extensionUtils.getCurrentExtension();
 	const formatTargetObject = extension.imports.formatTargets[formatTarget];
@@ -56,8 +56,8 @@ const create = function (container, formatTarget, builder, settings, editWindow)
 
 	// Edit button click -> show edit window
 	builder.get_object("formatTargetEditButton").connect("clicked", function () {
-		editWindow.show(formatTarget, formatTargetObject, updatePreview, name);
+		editWindow.showWindow(formatTarget, formatTargetObject, updatePreview, name);
 	});
 
-	container.pack_start(builder.get_object("formatTargetBox"), false, true, 0);
-};
+	container.append(builder.get_object("formatTargetBox"));
+};

src/Settings.js

@@ -5,7 +5,7 @@
 ///
 /// Settings constructor.
 ///
-const Class = function () {
+var Class = function () {
 	const Gio = imports.gi.Gio;
 	const extension = imports.misc.extensionUtils.getCurrentExtension();
 
@@ -64,4 +64,4 @@ const Class = function () {
 	this.setToggle = function (formatTarget, value) {
 		settings.set_boolean(toggleKey(formatTarget), value);
 	};
-};
+};

src/Utilities.js

@@ -2,8 +2,8 @@
 /// Common Utilities
 ///
 
-const Gtk = imports.gi.Gtk;
-
+const { GLib, Gtk } = imports.gi;
+let _localTimeZone = null;
 ///
 /// Convert string to datetime format.
 ///
@@ -23,4 +23,19 @@ function dateTimeFormat(format, defaultFormat) {
 ///
 function getBuilder(gladeContent) {
 	return Gtk.Builder.new_from_string(gladeContent, gladeContent.length);
-}
+}
+// Code from https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/environment.js
+// Work around https://bugzilla.mozilla.org/show_bug.cgi?id=508783
+Date.prototype.toLocaleFormat = function (format) {
+	if (_localTimeZone === null)
+		_localTimeZone = GLib.TimeZone.new_local();
+
+	let dt = GLib.DateTime.new(_localTimeZone,
+		this.getFullYear(),
+		this.getMonth() + 1,
+		this.getDate(),
+		this.getHours(),
+		this.getMinutes(),
+		this.getSeconds());
+	return dt?.format(format) ?? '';
+};

src/formatTargets/DateMenuDate.js

@@ -1,10 +1,10 @@
-const name = {
+var name = {
 	en: "Date Menu: Date",
 	fr: "Menu de date: Date",
 	ja: "日付メニュー：日付"
 };
 
-const defaultFormat = "%B %e %Y";
+var defaultFormat = "%B %e %Y";
 
 let dateLabel;
 let dateTimeDisplay;
@@ -28,4 +28,4 @@ function disable() {
 
 function update(format) {
 	dateTimeDisplay.set_text(format);
-}
+}

src/formatTargets/DateMenuDay.js

@@ -1,10 +1,10 @@
-const name = {
+var name = {
 	en: "Date Menu: Day",
 	fr: "Menu de date: Jour",
 	ja: "日付メニュー：日"
 };
 
-const defaultFormat = "%A";
+var defaultFormat = "%A";
 
 let dayLabel;
 let dateTimeDisplay;
@@ -29,4 +29,4 @@ function disable() {
 
 function update(format) {
 	dateTimeDisplay.set_text(format);
-}
+}

src/formatTargets/StatusBar.js

@@ -1,10 +1,10 @@
-const name = {
+var name = {
 	en: "Status Bar",
 	fr: "Barre d'état",
 	ja: "ステータスバー"
 };
 
-const defaultFormat = "%c";
+var defaultFormat = "%c";
 
 let clockDisplay;
 let dateTimeDisplay;
@@ -28,4 +28,4 @@ function disable() {
 
 function update(format) {
 	dateTimeDisplay.set_text(format);
-}
+}

src/preferences.css

@@ -1,8 +1,4 @@
 .formatTargetBox {
-	border-bottom: solid 1px rgba(0, 0, 0, 0.25);
-	padding: 10px 0 10px;
+	padding: 14px;
 }
 
-.formatTargetBox:last-child {
-	border: 0;
-}