icon click event?

[Axel Grude]

/
(how) Is it possible to add a click event to a toolbarbutton icon if the icon is added
via list-style-image?

that would be a neat trick, as I have lots of context menu items on my toolbarbuttons
and I would like to put the default command on the icon.

thanks in advance
Axel
/

[gNeandr]

Am 21.07.2012 00:06, schrieb Axel Grude:
> added via list-style-image?
?? what this?
Normally you add an image via xul or use JS to place icons/image

[Axel Grude]

are you sure? interesting. I normally add icon images to toolbar buttons using simple
CSS rules:

#QuickFolders-Toolbar toolbarbutton.inbox.icon,
#QuickFolders-CurrentFolderTools toolbarbutton.inbox.icon {
list-style-image: url("chrome://quickfolders/skin/ico/folder-inbox-gnome.png");
}

this is the most trivial way to do it and it will create an anonymous xul:image node.

Axel

[Axel Grude]

On 21/07/12 08:48, gNeandr wrote:

[Neil]

I'm not sure what you're asking here. Adding an icon to a toolbarbutton
whether via the image attribute or the list-style-image style does not
affect the behaviour of the toolbarbutton in any way.

--
Warning: May contain traces of nuts.

[Axel Grude]

Like I said, I would like to affect the behavior in the sense that I get a separate
click event, when the _icon_ on the toolbarbutton is clicked (the toolbarbutton itself
acts as tab, representing a mail folder - the default click drops down a dynamic popup
menu with mail folder commands and subfolders, which also pops up when a message is
dropped onto it), so all fairly complex behavior.

I want to assign the default action from the context menu to the icon only, e.g. "get
Mail". Would it be possible to find out whether the icon was under the cursor when it
was clicked or is it better so add a floating image that is superimposed on the icon
to achieve this functionality?

The icon is only shown for special folders (the button represents the folder) such as
INbox, Sent or Junk. For Inbox I want it to get Email for the account, for Junk empty
junk, etc. I also noticed that I wasn't able to style the anonymous icon element (e.g.
making it slightly bigger on hover). Since I still want the button click to only popup
the menu, (which can also contain subfolders) I think having the default on the Icon
would be a neat, space-saving shortcut.

thanks,
Axel

[Axel Grude]

On 23/07/12 17:04, Neil wrote:

[Neil]

Axel Grude wrote:

> Like I said, I would like to affect the behavior in the sense that I
> get a separate click event, when the _icon_ on the toolbarbutton is
> clicked (the toolbarbutton itself acts as tab, representing a mail
> folder - the default click drops down a dynamic popup menu with mail
> folder commands and subfolders, which also pops up when a message is
> dropped onto it), so all fairly complex behavior.

OK, so you have two approaches:

1. You could use a dual menubutton. This combines a button with a
dropdown arrow; the icon triggers the button while the arrow opens
the popup. You can even switch a button between a regular and a
dual menubutton. (SeaMonkey does something similar with its Reply
button which turns into a dual menubutton when you're reading a
newsgroup.)
2. I think you could style the image with the (svg) pointer-events
CSS style, which would allow mouse events to target the image
(normally child elements of buttons aren't allowed to be the
target of events).

[Axel Grude]

On 24/07/12 10:18, Neil wrote:
> Axel Grude wrote:
>
>> Like I said, I would like to affect the behavior in the sense that I get a separate
>> click event, when the _icon_ on the toolbarbutton is clicked (the toolbarbutton
>> itself acts as tab, representing a mail folder - the default click drops down a
>> dynamic popup menu with mail folder commands and subfolders, which also pops up when
>> a message is dropped onto it), so all fairly complex behavior.
>
> OK, so you have two approaches:
>
> 1. You could use a dual menubutton. This combines a button with a
> dropdown arrow; the icon triggers the button while the arrow opens
> the popup. You can even switch a button between a regular and a
> dual menubutton. (SeaMonkey does something similar with its Reply
> button which turns into a dual menubutton when you're reading a
> newsgroup.)

I have seen this also in the Saved Password Editor addon, but it is not a solution for
me as it is too finicky. The main action will always be to show the dropdown with the
subfolders, and that should also 'take the most space'. The default action is actually
something that would be needed less often than just a simple click to get the
dropdown. However, a simple click on the icon (for advanced users) would be a
perfectly minimized UI (especially since the icons can be :hover styled to represent
the default action - green arrow into inbox = get mail - sweeping brush on junk =
purge junk, etc.).

> 2. I think you could style the image with the (svg) pointer-events
> CSS style, which would allow mouse events to target the image
> (normally child elements of buttons aren't allowed to be the
> target of events).
>

I do like the second approach (if it works), I need to learn about these (svg) pointer
events; svg is also an image format is this correct?

Let's see:
https://developer.mozilla.org/en/CSS/pointer-events/

I will give it a read...

Alternatively, could you imagine cloning the image to an unstyled "picture only
button" which "hovers above" the button by replication its relative position from that
of the contained image via Javascript?

thanks
Axel