Author: swalling
Description:
The icon (down arrow or chevron) on the action dropdown in Vector (now labeled with "more") animates when clicked. This animation serves no purpose, since it does not close or open the dropdown.
Screencast: http://quick.as/dzywsxlq
Version: unspecified
Severity: normal
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Remove irritating transition on menu tabs | mediawiki/skins/Vector | master | +0 -5 |
It "pins" the dropdown, so that it says open when you move your mouse away.
The pinning is an accessibility feature (makes the items inside the dropdown accessible with keyboard-only navigation), the animation was added relatively recently and is meant to provide some sort of a visual indicator for the pinning. The behavior is here to stay, but better ideas on what indicator to use would definitely be useful.
swalling wrote:
(In reply to Jared Zimmerman (WMF) from comment #2)
Do any other flyouts in mediawiki work like this? it seems odd.
The notifications flyout definitely does not. It follows the behavior I expect, which is that a click closes or opens the flyout just like hover would.
I agree that the Vector drop-down menu is strange. I happened to notice this recently as well. You can just hover the mouse over it and keep clicking and that triangle just moves up and down a little. I found the behavior unexpected and I thought it had the appearance of being broken.
(In reply to Bartosz Dziewoński from comment #1)
the animation was added relatively recently
(In reply to Bartosz Dziewoński from comment #1)
It "pins" the dropdown, so that it says open when you move your mouse away.
The pinning is an accessibility feature (makes the items inside the dropdown
accessible with keyboard-only navigation), [...]
The pinning seems great. I don't think anyone objects to it.
the animation was added
relatively recently and is meant to provide some sort of a visual indicator
for the pinning. The behavior is here to stay, but better ideas on what
indicator to use would definitely be useful.
Is there a bug report or can you link the relevant Gerrit change for the animation? The animation feels a bit ehhh. I'm unclear what exactly the use-case for animation is, but in the past adding (any?) user interface animation has required a fairly high burden of proof that it's absolutely necessary, as I recall.
[Mid-air collision, reading the change now. Thanks for the link!]
The other strange behavior I find is that clicking "More" when the menu is expanded does not currently re-collapse the menu. The lack of collapsing is weird, especially when it's only accompanied by a very small animation of a related triangle icon. This is the part that looks particularly broken. Is the lack of collapsing due to the menu expanding on hover _or_ click? It seems as though even if I don't move the mouse at all and only click, that does not re-collapse the menu when it is expanded. That seems like a bug.
Okay, so I read https://gerrit.wikimedia.org/r/110584. I personally don't see a very compelling case for the animation. It seems to be mostly "because we can (with CSS)", which I agree is nice and neat, but I'm not sure this animation is necessary or helpful... it feels a bit superfluous and distracting and, in my opinion, and perhaps mixed with the lack of menu re-collapsing on click, it looks a bit broken. On other hand, I mostly use Monobook. :-) Fomafix: in the months since this change was merged, have you had any further thoughts about this?
If there's to be any animation, perhaps flipping the triangle upside down would be better? Though that's typically associated with sorting... so perhaps change the icon to a "+" and do something with that? Blergh.
swalling wrote:
(In reply to MZMcBride from comment #8)
Okay, so I read https://gerrit.wikimedia.org/r/110584. I personally don't
see a very compelling case for the animation. It seems to be mostly "because
we can (with CSS)", which I agree is nice and neat, but I'm not sure this
animation is necessary or helpful... it feels a bit superfluous and
distracting and, in my opinion, and perhaps mixed with the lack of menu
re-collapsing on click, it looks a bit broken. On other hand, I mostly use
Monobook. :-) Fomafix: in the months since this change was merged, have you
had any further thoughts about this?
Agreed.
If there's to be any animation, perhaps flipping the triangle upside down
would be better? Though that's typically associated with sorting... so
perhaps change the icon to a "+" and do something with that? Blergh.
The fundamental problem here is that a chevron like this is not typically used to representing "pinning" something permanently.[1] Instead, this kind of downward arrow is usually only to represent opening of a dropdown menu.[2]
What about switching the down-arrow icon for an actual pin, instead of relying on an obscure and unclear animation to convey the “pin” behavior? Before finding this bug report (sorry, “task”), I also thought the animation was a bug.
Is the issue about removing the movement of the down arrow mark in the more option when clicked on it ? and also when the arrow moves down the dropdown which came due to hovering on it is not closing even when I have clicked outside anywhere but if I click on the more button again so that the arrow mark goes up the hovering works again, Is the dropdown got pinned by masking the arrow move down ? if it is the case what is the issue here?
@Rammanojpotla bzimport is a bot so theres no point pinging it, and no this is about the animation of clicking the more button arrow in vector
@Zppix yes I know, when the we click on the more button once the arrow comes down (i.e it means the arrow is pining the contents in the dropdown so that they doesn't move again up till we click on it once again(so that the arrow goes up) ) but if we just hover on it, it only display the dropdown till the pointer is on the more button or arrow mark , then Is the issue about removing the pinning of the contents or the moving down of arrow(i.e animation on click which represents the pinning of the dropdown contents ?
I read the description above, from the above description and comments, it meant to change the symbol(downward arrow) which generally moves upside down(i.e represents pinning)(as said by bzimport in a comment above) Am I right?
@Rammanojpotla If you want to take this on, you should try to follow our WikimediaUI design specifications and its implementation in the standard UI library OOjs UI (linked is the toolbars demo) and –to repeat the task description – remove the animation.
Change 366730 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/Vector@master] Remove irritating transition on menu tabs
Change 366730 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Remove irritating transition on menu tabs