re-use Clutter and make it work in both worlds!

Author: omid

Makefile

@@ -26,8 +26,9 @@ release: eslint _version_bump _build
 	git push --tags
 	$(MAKE) zip
 
-zip: _build
-	cd build && zip -qr ../"$(_UUID)$(_VERSION).zip" .
+zip: export _VERSION=$(shell jq '.version' $(_UUID)/metadata.json)
+zip: eslint _build
+	cd build && zip -qr ../"$(_UUID).$(_VERSION).zip" .
 	$(MAKE) clean
 
 eslint:

PersianCalendar@oxygenws.com/Calendar.js

@@ -1,8 +1,7 @@
 'use strict';
 
-const St = imports.gi.St;
-const Gtk = imports.gi.Gtk;
-const Gdk = imports.gi.Gdk;
+import Clutter from 'gi://Clutter';
+import St from 'gi://St';
 
 import * as PersianDate from './PersianDate.js';
 import * as HijriDate from './HijriDate.js';
@@ -45,19 +44,11 @@ export class Calendar {
             this._selectedDate.getDate(),
         );
 
-        this.actor = new Gtk.Grid({
-            column_homogeneous: false,
-            row_homogeneous: false,
-            column_spacing: 6,
-            row_spacing: 6,
+        this.actor = new St.Widget({
+            style_class: 'calendar',
+            layout_manager: new Clutter.GridLayout(),
+            reactive: true,
         });
-        this.actor.add_css_class('calendar');
-
-        const click = new Gtk.GestureClick();
-        click.connect('pressed', (_gesture, nPress, x, y) => {
-            log(`Grid pressed at ${x}, ${y}`);
-        });
-        this.actor.add_controller(click);
         this.actor.connect('scroll-event', this._onScroll.bind(this));
 
         this._buildHeader();
@@ -190,12 +181,12 @@ export class Calendar {
 
     _onScroll(actor, event) {
         switch (event.get_scroll_direction()) {
-            case Gdk.ScrollDirection.UP:
-            case Gdk.ScrollDirection.RIGHT:
+            case Clutter.ScrollDirection.UP:
+            case Clutter.ScrollDirection.RIGHT:
                 this._onNextMonthButtonClicked();
                 break;
-            case Gdk.ScrollDirection.DOWN:
-            case Gdk.ScrollDirection.LEFT:
+            case Clutter.ScrollDirection.DOWN:
+            case Clutter.ScrollDirection.LEFT:
                 this._onPrevMonthButtonClicked();
                 break;
             default:
@@ -402,7 +393,7 @@ export class Calendar {
             const bottomLabel = new St.Label({
                 text: this._str.transDigits(events[0]),
                 style_class: 'pcalendar-event-label',
-                x_align: Gtk.ActorAlign.FILL,
+                x_align: Clutter.ActorAlign.FILL,
                 x_expand: true,
             });
             // this._setFont(bottomLabel);

PersianCalendar@oxygenws.com/extension.js

@@ -6,10 +6,11 @@ import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
 import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';
 import * as MessageTray from 'resource:///org/gnome/shell/ui/messageTray.js';
 
-const GObject = imports.gi.GObject;
-const GLib = imports.gi.GLib;
-const St = imports.gi.St;
-const Gio = imports.gi.Gio;
+import GObject from 'gi://GObject';
+import St from 'gi://St';
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import Clutter from 'gi://Clutter';
 
 import { Events } from './Events.js';
 import * as PersianDate from './PersianDate.js';
@@ -35,7 +36,7 @@ const PersianCalendar = GObject.registerClass(
             this._settings = extension._settings;
             this._gettext = extension._gettext;
             this._str = new Str(this._gettext);
-            this._locale = new Locale(this._gettext);
+            this._locale = new Locale(this._gettext, Clutter.get_default_text_direction());
             this._events = new Events(this._settings, this._str);
             this._openPreferences = () => this._extension.openPreferences();
 
@@ -150,6 +151,7 @@ const PersianCalendar = GObject.registerClass(
                     style_class: 'button system-menu-action calendar-preferences-button',
                     reactive: true,
                     can_focus: true,
+                    x_align: Clutter.ActorAlign.CENTER,
                     x_expand: true,
                 });
                 preferencesIcon.connect('clicked', () => {
@@ -168,6 +170,7 @@ const PersianCalendar = GObject.registerClass(
                     style_class: 'button system-menu-action calendar-preferences-button',
                     reactive: true,
                     can_focus: true,
+                    x_align: Clutter.ActorAlign.CENTER,
                     x_expand: true,
                 });
                 nowruzIcon.connect('clicked', this._showNowruzNotification.bind(this));