The power buttons (powerMenu.js) still in white

[Tuxman2]

Hi,

you modified powermenu.js last month but the buttons are still in white. Here is the parts for it:

layout2x2(){
let vbox = new St.BoxLayout({ style: this.spacing, vertical: true });
let hbox1 = new St.BoxLayout({ style: this.spacing });
let hbox2 = new St.BoxLayout({ style: this.spacing });
hbox1.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this));
hbox1.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
hbox2.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
hbox2.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
vbox.add_child(hbox1);
vbox.add_child(hbox2);
this.contentLayout.add_child(vbox);
}

layout1x4(){
let hbox = new St.BoxLayout({ style: this.spacing });
hbox.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
hbox.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
hbox.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this));
hbox.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
this.contentLayout.add_child(hbox);
}

As you can see, it use symbolic files (white icons). I would like to see color icons instead. So, can you allow the user to change the icon (symbolic or color icon) for the powerbuttons through an option in the powermenu ?

Thanks.

Regards.

[Aylur]

the default Adwaita icons only have symbolic variants for these, so there is no point having an option for that.
if you want colored icons you can theme them like this

.power-menu .restart StIcon{ color: #ffff00; }
.power-menu .power-off StIcon{ color: #ff0000; }
.power-menu .suspend StIcon{ color: #0000ff; }
.power-menu .logout StIcon{ color: #008000; }

there could be an option for custom svgs, but then again that is what icon packs are for

[Tuxman2]

Hello,

thanks for your tip.

So, to be sure, I have to modify these lines

hbox1.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this));
hbox1.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
hbox2.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
hbox2.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));

to

.power-menu .restart StIcon{ color: #ffff00; }
.power-menu .power-off StIcon{ color: #ff0000; }
.power-menu .suspend StIcon{ color: #0000ff; }
.power-menu .logout StIcon{ color: #008000; }

and these lines

hbox.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
hbox.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
hbox.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this));
hbox.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));

to

.power-menu .restart StIcon{ color: #ffff00; }
.power-menu .power-off StIcon{ color: #ff0000; }
.power-menu .suspend StIcon{ color: #0000ff; }
.power-menu .logout StIcon{ color: #008000; }

Isn't it ?

Regards.

[Aylur]

No you dont need to modify any js file for this.

This is css, not javascript

.power-menu .restart StIcon{ color: #ffff00; }
.power-menu .power-off StIcon{ color: #ff0000; }
.power-menu .suspend StIcon{ color: #0000ff; }
.power-menu .logout StIcon{ color: #008000; }

Add this to
/home/demeter/.local/share/gnome-shell/extensions/widgets@aylur/stylesheet.css

[Tuxman2]

Hello,

ok. I will try in next days. Thanks. ;-)

Note: I translated your pot file in French but I need to check the translations. A soon as it is ok, I will send you the fr.po file.

Regards.

[Tuxman2]

@Aylur: The four lines above work. I would like to know if I can define custom icons for powerbuttons. Is there a way to modify this line: hbox1.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this)) to be able to use a custom icon (svg) rather than 'system-reboot-symbolic' symbolic icon (url or path) ?

Thanks.

[Aylur]

edit powerMenu.js

on line 3

//import Gio
const { GObject, St, Clutter, Gio } = imports.gi;

on line 24

//edit this._icon
this._icon = new St.Icon({
    //icon_name: powerIcon,
    gicon: Gio.icon_new_for_string(powerIcon),
    icon_size: this.settings.get_int('power-menu-icon-size'),
    x_align: Clutter.ActorAlign.CENTER,
});

then

//instead of 'system-reboot-symbolic'
//use path to the icon
hbox1.add_child(new PowerButton('path_to_icon', _('Restart'), 'restart', this));

but with this you have to provide every button with your svg.

If you only want to change one, do this

    layout2x2(){
        let vbox = new St.BoxLayout({ style: this.spacing, vertical: true });
        let hbox1 = new St.BoxLayout({ style: this.spacing });
        let hbox2 = new St.BoxLayout({ style: this.spacing });
        let reboot = new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this);
        reboot._icon.gicon = Gio.icon_new_for_string('path_to_icon');
        hbox1.add_child(reboot);
        hbox1.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
        hbox2.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
        hbox2.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
        vbox.add_child(hbox1);
        vbox.add_child(hbox2);
        this.contentLayout.add_child(vbox);
    }

if you still want to color the icon with css, name your svg whatever-symbolic.svg

[Tuxman2]

@Aylur: Thank you very much. I have a last question. For 'path_to_icon', I must define the place where the icon is (for example: '/usr/share/icons/myicons/shutdown.svg'). Okay ?

Note: Sorry, I'm not familiar with the javascript.

[Aylur]

Yes, the absolute path works

[Tuxman2]

Hello,

I replaced the 'path_to_icon' with the place where my icons are (for example: './local/$USER/..../widgets@aylur/powerbuttons/system-restart.svg') but the svg icon is not displayed. It is empty. Am I Doing wrong ?

Regards.

[Aylur]

make sure Gio is imported

//on line 3
const { GObject, St, Clutter, Gio } = imports.gi;

use absolute path

    layout2x2(){
        let vbox = new St.BoxLayout({ style: this.spacing, vertical: true });
        let hbox1 = new St.BoxLayout({ style: this.spacing });
        let hbox2 = new St.BoxLayout({ style: this.spacing });

        let reboot = new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this);
        reboot._icon.gicon = Gio.icon_new_for_string('/usr/share/icons/Adwaita/scalable/emotes/face-cool-symbolic.svg');
        hbox1.add_child(reboot);

        hbox1.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
        hbox2.add_child(new PowerButton('weather-clear-night-symbolic', _('Suspend'), 'suspend', this));
        hbox2.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
        vbox.add_child(hbox1);
        vbox.add_child(hbox2);
        this.contentLayout.add_child(vbox);
    }

    layout1x4(){
        let hbox = new St.BoxLayout({ style: this.spacing });

        let suspend = new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this);
        suspend._icon.gicon = Gio.icon_new_for_string('/usr/share/icons/Adwaita/scalable/emotes/face-cool-symbolic.svg');
        hbox.add_child(suspend);

        hbox.add_child(new PowerButton('system-log-out-symbolic', _('Log Out'), 'logout', this));
        hbox.add_child(new PowerButton('system-reboot-symbolic', _('Restart'), 'restart', this));
        hbox.add_child(new PowerButton('system-shutdown-symbolic', _('Shutdown'), 'power-off', this));
        this.contentLayout.add_child(hbox);
    }