CODEWITHSUNDEEP
javascriptgnomegnome-shellgnome-shell-extensionsgjs
Muhammed Taha Ayan
Muhammed Taha Ayan

Reputation: 31

GNOME Shell Extension Button

I'm trying to write an extension with just using JavaScript. I wrote it with Python through Hello World! code. But, yet in the beginning, my button for menu items is not working. Also, I couldn't add menu item with Hello World! code. I think, I miss something.

The button code is here:

const Lang = imports.lang;
const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const St = imports.gi.St;

const TimeButton = new Lang.Class({
    Name: "Salah Time",
    Extends: PanelMenu.Button,

    _init: function () {
        let box = new St.BoxLayout({
            style_class: "system-status-icon"
        });
        let label = new St.Label({text: "Salah Time"});
        box.add_child(label);
        this.actor.addActor(box);
    }
});

function init() {

}

function enable() {
    let but = new TimeButton();
    Main.panel._leftBox.insert_child_at_index(but, 1);
}

function disable() {
    Main.panel._leftBox.remove_child(but);
}

There is no many tutorial for GJS. I'm already trying to write by reading other extensions.

Thanks.

Upvotes: 3

Views: 3167

Answers (1)

andy.holmes
andy.holmes

Reputation: 3696

const Lang = imports.lang;
const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const St = imports.gi.St;

const TimeButton = new Lang.Class({
    Name: "TimeButton",
    Extends: PanelMenu.Button,

    _init: function () {
        this.parent(null, "TimeButton");

        // Icon
        this.icon = new St.Icon({
            icon_name: "appointment-symbolic",
            style_class: "system-status-icon"
        });
        this.actor.add_actor(this.icon);

        // Menu
        this.menuItem = new PopupMenu.PopupMenuItem("Salah Time", {});
        this.menu.addMenuItem(this.menuItem);
    }
});

function init() {
}

function enable() {
    let indicator = new TimeButton();
    Main.panel.addToStatusArea("should-be-a-unique-string", indicator);

    // hide
    Main.panel.statusArea["should-be-a-unique-string"].actor.visible = false;

    // change icon
    Main.panel.statusArea["should-be-a-unique-string"].icon.icon_name = "appointment-soon-symbolic";

    // show
    Main.panel.statusArea["should-be-a-unique-string"].actor.visible = true;
}

function disable() {
    // you could also track "indicator" and just call indicator.destroy()
    Main.panel.statusArea["should-be-a-unique-string"].destroy();
}

Hope that helps someone (if you aren't around anymore).

Upvotes: 7

Related Questions