rewrite of ui with gtk4

.gitignore

@@ -1 +1,3 @@
 better-osd.zip
+better-osd
+prefs.ui~

README.md

@@ -14,7 +14,6 @@ git clone https://github.com/hllvc/better-osd.git \
 ```
 
 You may need to restart the gnome shell environnment
-You may need to restart the gnome shell environnment \
 
 - logout and login again _or_
 - `alt+f2` then type `r` and `enter`

extension.js

@@ -1,14 +1,36 @@
+const Gio = imports.gi.Gio;
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me = ExtensionUtils.getCurrentExtension();
+
 const Lang = imports.lang;
 const Main = imports.ui.main;
 const OsdWindow = imports.ui.osdWindow;
 const OsdWindowManager = Main.osdWindowManager;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = Me.imports.convenience;
 
 //------------------------------------------------
 
+// function getSettings() {
+//   let GioSSS = Gio.SettingsSchemaSource;
+//   let schemSource = GioSSS.new_from_directory(
+//     Me.dir.get_child("schema").get_path(),
+//     GioSSS.get_default(),
+//     false
+//   );
+//   let schemaObj = schemSource.lookup(
+//     ("org.gnome.shell.extensions.better-osd", true)
+//   );
+//   if (!schemaObj) {
+//     throw new Error("cannot find schemas");
+//   }
+//   return new Gio.Settings({
+//     settings_schema: schemaObj,
+//   });
+// }
+
+//------------------------------------------------
+
 function init() {
   Convenience.initTranslations();
 }
@@ -67,7 +89,6 @@ function enable() {
     "org.gnome.shell.extensions.better-osd"
   );
 
-  style();
   _id = Main.layoutManager.connect(
     "monitors-changed",
     Lang.bind(this, this.style)
@@ -82,6 +103,8 @@ function enable() {
       let v_percent = _settings.get_int("vertical");
       let osd_size = _settings.get_int("size");
       let hide_delay = _settings.get_int("delay");
+      let transparency = _settings.get_boolean("transparency");
+      transparency ? style() : nostyle();
 
       this._box.translation_x = (h_percent * monitor.width) / 100;
       this._box.translation_y = (v_percent * monitor.height) / 100;

metadata.json

@@ -1,9 +1,11 @@
 {
-  "description": "Better OSD for Gnome 40 (move and resize the OSD popups).\n\nYou think the default volume popup is too big, and stays for too long? This allows you to move it out of the way, reduce its size, add transparency and set the hiding delay.",
+  "description": "Better OSD for Gnome 40 (move and resize the OSD popups).\n- forked from original Better OSD\n\nYou think the default volume popup is too big, and stays for too long? This allows you to move it out of the way, reduce its size, add transparency and set the hiding delay.",
   "gettext-domain": "better-osd",
   "name": "Better OSD - Gnome 40",
-  "shell-version": ["40"],
+  "shell-version": [
+    "40", "40.1", "40.2", "40.3"
+  ],
   "url": "https://github.com/hllvc/better-osd",
   "uuid": "better-osd@hllvc",
-  "version": 1.0
+  "version": 2
 }

prefs.js

@@ -1,12 +1,13 @@
 const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
+const ExtensionUtils = imports.misc.extensionUtils;
+const Me = ExtensionUtils.getCurrentExtension();
+
 const Lang = imports.lang;
 
 const Gettext = imports.gettext.domain("better-osd");
 const _ = Gettext.gettext;
 
-const ExtensionUtils = imports.misc.extensionUtils;
-const Me = ExtensionUtils.getCurrentExtension();
 const Convenience = Me.imports.convenience;
 
 //-----------------------------------------------
@@ -17,158 +18,56 @@ function init() {
 
 //-----------------------------------------------
 
-const OSDSettingsWidget = new GObject.Class({
-  Name: "OSD.Prefs.Widget",
-  GTypeName: "OSDPrefsWidget",
-  Extends: Gtk.Box,
-
-  _init: function (params) {
-    this.parent(params);
-    this.margin = 30;
-    this.spacing = 25;
-    this.fill = true;
-    this.set_orientation(Gtk.Orientation.VERTICAL);
-
-    this._settings = Convenience.getSettings(
-      "org.gnome.shell.extensions.better-osd"
-    );
-
-    let labelHorizontalPercentage = _("Horizontal position (percentage) :");
-
-    let horizontalPercentage = new Gtk.SpinButton();
-    horizontalPercentage.set_sensitive(true);
-    horizontalPercentage.set_range(-60, 60);
-    horizontalPercentage.set_value(0);
-    horizontalPercentage.set_value(this._settings.get_int("horizontal"));
-    horizontalPercentage.set_increments(1, 2);
-
-    horizontalPercentage.connect(
-      "value-changed",
-      Lang.bind(this, function (w) {
-        var value = w.get_value_as_int();
-        this._settings.set_int("horizontal", value);
-      })
-    );
-
-    let hBox = new Gtk.Box({
-      orientation: Gtk.Orientation.HORIZONTAL,
-      spacing: 15,
-    });
-    hBox.prepend(
-      new Gtk.Label({
-        label: labelHorizontalPercentage,
-        use_markup: true,
-        halign: Gtk.Align.START,
-      })
-    );
-    hBox.append(horizontalPercentage);
-    this.append(hBox);
-
-    //-------------------------------------------------------
-
-    let labelVerticalPercentage = _("Vertical position (percentage) :");
-
-    let verticalPercentage = new Gtk.SpinButton();
-    verticalPercentage.set_sensitive(true);
-    verticalPercentage.set_range(-110, 110);
-    verticalPercentage.set_value(70);
-    verticalPercentage.set_value(this._settings.get_int("vertical"));
-    verticalPercentage.set_increments(1, 2);
-
-    verticalPercentage.connect(
-      "value-changed",
-      Lang.bind(this, function (w) {
-        var value = w.get_value_as_int();
-        this._settings.set_int("vertical", value);
-      })
-    );
-
-    let vBox = new Gtk.Box({
-      orientation: Gtk.Orientation.HORIZONTAL,
-      spacing: 15,
-    });
-    vBox.prepend(
-      new Gtk.Label({
-        label: labelVerticalPercentage,
-        use_markup: true,
-        halign: Gtk.Align.START,
-      })
-    );
-    vBox.append(verticalPercentage);
-    this.append(vBox);
-
-    //-------------------------------------------------------
-
-    let labelSizePercentage = _("Size (percentage) :");
-
-    let sizePercentage = new Gtk.SpinButton();
-    sizePercentage.set_sensitive(true);
-    sizePercentage.set_range(0, 100);
-    sizePercentage.set_value(20);
-    sizePercentage.set_value(this._settings.get_int("size"));
-    sizePercentage.set_increments(1, 2);
-
-    sizePercentage.connect(
-      "value-changed",
-      Lang.bind(this, function (w) {
-        var value = w.get_value_as_int();
-        this._settings.set_int("size", value);
-      })
-    );
-
-    let sizeBox = new Gtk.Box({
-      orientation: Gtk.Orientation.HORIZONTAL,
-      spacing: 15,
-    });
-    sizeBox.prepend(
-      new Gtk.Label({
-        label: labelSizePercentage,
-        use_markup: true,
-        halign: Gtk.Align.START,
-      })
-    );
-    sizeBox.append(sizePercentage);
-    this.append(sizeBox);
-
-    //-------------------------------------------------------
-
-    let labelDelay = _("Hide Delay (ms) :");
-
-    let hideDelay = new Gtk.SpinButton();
-    hideDelay.set_sensitive(true);
-    hideDelay.set_range(0, 5000);
-    hideDelay.set_value(1500);
-    hideDelay.set_value(this._settings.get_int("delay"));
-    hideDelay.set_increments(1, 2);
-
-    hideDelay.connect(
-      "value-changed",
-      Lang.bind(this, function (w) {
-        var value = w.get_value_as_int();
-        this._settings.set_int("delay", value);
-      })
-    );
-
-    let delayBox = new Gtk.Box({
-      orientation: Gtk.Orientation.HORIZONTAL,
-      spacing: 15,
-    });
-    delayBox.prepend(
-      new Gtk.Label({
-        label: labelDelay,
-        use_markup: true,
-        halign: Gtk.Align.START,
-      })
-    );
-    delayBox.append(hideDelay);
-    this.append(delayBox);
+const MyBuilderScope = GObject.registerClass(
+  {
+    Implements: [Gtk.BuilderScope],
   },
-});
+  class MyBuilderScope extends GObject.Object {
+    vfunc_create_closure(builder, handlerName, flags, connectObject) {
+      if (flags & Gtk.BuilderClosureFlags.SWAPPED)
+        throw new Error('Unsupported template signal flag "swapped"');
+
+      if (typeof this[handlerName] === "undefined")
+        throw new Error(`${handlerName} is undefined`);
+
+      builder
+        .get_object("transparency")
+        .set_active(this._settings.get_boolean("transparency"));
+
+      return this[handlerName].bind(connectObject || this);
+    }
+
+    on_horizontal_value_changed(w) {
+      this._settings.set_int(w.get_value_as_int());
+    }
+
+    on_vertical_value_changed(w) {
+      this._settings.set_int(w.get_value_as_int());
+    }
+
+    on_size_value_changed(w) {
+      this._settings.set_int(w.get_value_as_int());
+    }
+
+    on_delay_value_changed(w) {
+      this._settings.set_int(w.get_value_as_int());
+    }
+
+    on_state_changed(w) {
+      this._settings.set_boolean(w.get_active());
+    }
+  }
+);
 
 //-----------------------------------------------
 
 //I guess this is like the "enable" in extension.js : something called each
 //time he user try to access the settings' window
 function buildPrefsWidget() {
-  return new OSDSettingsWidget();
+  let builder = new Gtk.Builder();
+
+  builder.set_scope(new MyBuilderScope());
+  builder.add_from_file(Me.dir.get_path() + "/prefs.ui");
+
+  return builder.get_object("main_prefs");
 }