Gnome 42 compat.

[demfabris]

Unfortunately its not a simple metadata update

[martindmtrv]

I just upgraded to Gnome 42 and with metadata update my existing config seems to kinda work. I could not access the settings though that part was broken after metadata update.

However after disabling and re-enabling the extension after metadata update the settings page works now. Also after any changes in the settings it works after disabling and re-enabling the extension.

It seems that vertical padding is broken though as with some configurations icons are overlapping; this can be fixed by just applying a config that has icons small enough to not overlap.

I'll still take this over stock Gnome which makes the grid look terrible on my display with tiny icons

[lost-melody]

implementing fillPreferencesWindow(window) for the preferences dialog:

prefsAdw.js

const { Adw, Gio, GLib, GObject, Gtk } = imports.gi;
const Utils = imports.misc.extensionUtils;
const Gettext = imports.gettext;
const Extension = Utils.getCurrentExtension();
const Metadata = Extension.metadata;

const Domain = Gettext.domain('app-grid-tweaks');
const _ = Domain.gettext;
const ngettext = Domain.ngettext;

function init() {
    Utils.initTranslations('app-grid-tweaks');
}

const SETTINGS_APPLY_DELAY_TIME = 500;

class PrefsWindow {
    constructor(window) {
        this.window = window;
        this.settings = Utils.getSettings(Metadata['settings-schema']);
    }

    // create a new Adw.PreferencesPage and add it into this.window
    create_page(title, icon) {
        let page = new Adw.PreferencesPage({
            title: title,
            icon_name: icon,
        });
        this.window.add(page);

        // get the headerbar
        if (!this.headerbar) {
            let pages_stack = page.get_parent(); // AdwViewStack
            let content_stack = pages_stack.get_parent().get_parent(); // GtkStack
            let preferences = content_stack.get_parent(); // GtkBox
            this.headerbar = preferences.get_first_child(); // AdwHeaderBar
        }

        return page;
    }

    // create a new Adw.PreferencesGroup and add it to a prefsPage
    create_group(page, title) {
        let group = new Adw.PreferencesGroup({
            // title: title,
            margin_top: 16,
            margin_bottom: 16,
            margin_start: 32,
            margin_end: 32,
        });
        page.add(group);
        return group;
    }

    // create a new Adw.ActionRow to insert an option into a prefsGroup
    append_row(group, title, widget) {
        let row = new Adw.ActionRow({
            title: title,
            margin_top: 4,
            margin_bottom: 4,
        });
        group.add(row);
        row.add_suffix(widget);
        row.activatable_widget = widget;
    }

    // create a new Gtk.SpinButton and insert it into a prefsGroup
    append_spin_button(group, is_double, key, min, max, step) {
        let v = 0;
        if (is_double) {
            v = this.settings.get_double(key);
        } else {
            v = this.settings.get_int(key);
        }
        let spin = Gtk.SpinButton.new_with_range(min, max, step);
        spin.set_value(v);
        this.settings.bind(key, spin, 'value', Gio.SettingsBindFlags.DEFAULT);
        this.append_row(group, _(this.settings.settings_schema.get_key(key).get_summary()), spin);
    }

    // create a new Gtk.ComboBoxText and insert it into a prefsGroup
    append_combo_text(group, key, options, items) {
        let combo = new Gtk.ComboBoxText();
        for (let i = 0; i < options.length; i++) {
            combo.append(options[i], items[i]);
        }
        combo.set_active(options.indexOf(this.settings.get_string(key)));
        // this.settings.bind(key, combo, 'active', Gio.SettingsBindFlags.DEFAULT);
        combo.connect('changed', () => {
            this.settings.set_string(key, options[combo.get_active()]);
        });
        this.append_row(group, _(this.settings.settings_schema.get_key(key).get_summary()), combo);
    }

    // create a Gtk.Image to show an icon
    append_image_icon(group, icon) {
        let image = new Gtk.Image({
            pixel_size: 128,
            margin_top: 16,
            margin_bottom: 16,
        });
        image.set_from_file(Extension.dir.get_child(icon).get_path());
        group.add(image);
    }

    // create a Gtk.Label to show captions
    append_label(group, caption) {
        let label = new Gtk.Label({
            label: caption,
            margin_top: 4,
            margin_bottom: 4,
            justify: Gtk.Justification.CENTER,
        });
        group.add(label);
    }

    // create a Gtk.Button
    append_button(group, label, callback) {
        let btn = new Gtk.Button({
            label: label,
        });
        group.add(btn);
        btn.connect('clicked', callback);
    }

    // add a Gtk.Widget to the left side of the HeaderBar
    pack_start(widget) {
        if (this.headerbar) {
            this.headerbar.pack_start(widget);
        }
    }

    fillPreferencesWindow() {
        // AppGridSettingsPage
        let page_grid = this.create_page(_('Apps'), 'preferences-system-symbolic');
        {
            let group_grid = this.create_group(page_grid, _('Apps'));
            this.append_spin_button(group_grid, false, 'appgrid-max-rows', 1, 20, 1);
            this.append_spin_button(group_grid, false, 'appgrid-max-columns', 1, 20, 1);
            this.append_spin_button(group_grid, false, 'appgrid-icon-size', 1, 20, 1);
            this.append_spin_button(group_grid, false, 'side-padding', 1, 20, 1);
            this.append_spin_button(group_grid, true, 'app-icon-font-size', 0, 20, 0.1);
            this.append_combo_text( group_grid, "label-style", [ "font-weight: normal;", "font-weight: normal; text-shadow: 2px 3px 3px #000000, 2px 3px 3px #000000;", "font-weight: bold;", "font-weight: bold; text-shadow: 2px 3px 3px #000000, 2px 3px 3px #000000;" ], [ _("Normal"), _("Normal with Shadow"), _("Bold"), _("Bold with Shadow") ] );
            this.append_spin_button(group_grid, false, 'open-animation-time', 1, 20, 1);
            this.append_spin_button(group_grid, false, 'page-switch-animation-time', 1, 20, 1);
        }

        // FolderSettingsPage
        let page_folder = this.create_page(_('Folders'), 'preferences-system-symbolic');
        {
            let group_folder = this.create_group(page_folder, _('Folders'));
            this.append_spin_button(group_folder, false, 'folder-max-rows', 1, 20, 1);
            this.append_spin_button(group_folder, false, 'folder-max-columns', 1, 20, 1);
        }

        // HelpPage
        // let page_help = this.create_page(_('Help'), 'help-faq-symbolic');
        // {
        // }

        // AboutPage
        let page_about = this.create_page(_('About'), 'help-about-symbolic');
        {
            let group_about = this.create_group(page_about, _('About'));
            this.append_image_icon(group_about, 'eicon.png');
            this.append_label(group_about, Metadata.name);
            this.append_label(group_about, Metadata.description);
            this.append_label(group_about, 'v' + Metadata.version.toString());
            this.append_label(group_about, Metadata.status);
            this.append_label(group_about, Metadata.comment);
        }

        // left HeaderBar button
        let btn = new Gtk.Button({
            icon_name: 'view-refresh-symbolic',
        });
        btn.connect('clicked', () => {
            GLib.timeout_add(SETTINGS_APPLY_DELAY_TIME, GLib.PRIORITY_DEFAULT, () => {
                this.settings.set_boolean("reload-signal", (this.settings.get_boolean("reload-signal")) ? false : true); 
                return false;
            });
        });
        this.pack_start(btn);
    }
}

function fillPreferencesWindow(window) {
    let prefs_win = new PrefsWindow(window);
    prefs_win.fillPreferencesWindow();
}

function fillPreferencesWindow(window) is only used by gnome shell 40+ so it might not break 3.xx versions compatibility.

and my prefs.js looks like:

prefs.js

function init() {
    if (Config.PACKAGE_VERSION >= '40') {
        Extension.imports.prefsAdw.init();
    }
}

function fillPreferencesWindow(window) {
    Extension.imports.prefsAdw.fillPreferencesWindow(window);
}

function buildPrefsWidget() {
    // something for gnome 3.xx
}

not familiar with js or gnome, I still can't figure out how to let it reload settings upon updates