0

So task is simple, but not for me - green Gnome Extensions Development noob. Of course I googled this, but didn't find something that can be helpful here.

extension.js:

https://pastebin.com/TqDVp8Yz - because 'your post mostly code'.

stylesheet.css:

.poppy-button {
    background-size: 20px;
    width: 20px;
    height: 20px;
    background-image: url("Resources/poppy.svg");
}

.poppy-button:active,
.poppy-button:focus,
.poppy-button:checked,
.poppy-button:hover {
    background-image: url("Resources/poppy-active.svg");
}
DIES
  • 345
  • 5
  • 14

1 Answers1

2

I would avoid the CSS and connect to the "enter-event" and "leave-event" signals, since all StWidget elements are also ClutterActors.

myIcon = new St.Icon({ icon_name: "normal-icon-name"; });

myIcon.connect("enter-event", (widget) => {
    widget.icon_name = "hover-icon-name";
});

myIcon.connect("leave-event", (widget) => {
    widget.icon_name = "normal-icon-name";
});

On the other hand, your CSS might work if you set "track-hover" to true on the StIcon.

Pro-Amateur-Tip: add the "gjs" tag to you questions to pull in more help for Gnome Shell extensions.

andy.holmes
  • 3,383
  • 17
  • 28
  • Connect event dont work for some reason, I tried many times and it all boiled down to 'extension didn't activate at all' and 'events being just ignored'. It leaves nothing to do more else than use 'track_hover' and what I don't know I need before 'reactive'. Is there also any 'track_active' thing? If you want to see my code right now (it hardly changed) - https://pastebin.com/m0adRq2w – DIES Aug 15 '17 at 16:22
  • Your extension seems to work okay (from what I can tell), but you have not defined an `icon_name` for `this.icon` at line 74. You should add add something like `icon_name: "gnome-applications"` to the hash for that definition. – andy.holmes Aug 15 '17 at 23:24
  • 1
    Additionally, running `journalctl /usr/bin/gnome-shell -f -o cat` in an open terminal will give you useful output and help you debug errors. – andy.holmes Aug 16 '17 at 03:55
  • It's not defined because of that I use custom icon, not that exists in icon theme. – DIES Aug 18 '17 at 11:14
  • In that case, the code you posted for your extension worked for me. Since the hierarchy is ClutterActor->StWidget->StIcon, see [StWidget properties](https://developer.gnome.org/st/stable/StWidget.html#StWidget.properties) and [ClutterActor properties](https://developer.gnome.org/clutter/stable/ClutterActor.html#ClutterActor.properties). – andy.holmes Aug 18 '17 at 22:23
  • TL;DR Set `reactive: true`, `track_hover: true` then either catch the `enter-event`/`leave-event` or try `myIcon.connect("notify::hover", (widget) => { widget.icon_name = (widget.hover) ? "hover_icon_name" : "not_hover_icon_name" });`. With a custom icon you'll probably load it as a GIcon and use the `gicon` parameter instead of `icon_name`. – andy.holmes Aug 18 '17 at 22:31