Indicator for menuForceShow in skin vector

The actions menu with the down arrow has two events:
hover and click to toggle. Both opens the menu. For the click toggle
is no indicator because the menu is already open by hover.

Change-Id: Ie251ab0d4d573937e08314de18ee731f154003bd

diff --git a/skins/vector/components/tabs.less b/skins/vector/components/tabs.less
index 43e77cd..596dff5 100644 (file)
--- a/skins/vector/components/tabs.less
+++ b/skins/vector/components/tabs.less
@@ -127,6 +127,11 @@ div.vectorMenu {
        background-position: 100% 60%;
        background-repeat: no-repeat;
        cursor: pointer;
+       .transition(background-position 250ms);
+}
+
+div.vectorMenu.menuForceShow {
+       background-position: 100% 100%;
 }
 
 div.vectorMenuFocus {
@@ -212,7 +217,7 @@ x:-moz-any-link {
 
 /* Enable forcing showing of the menu for accessibility */
 div.vectorMenu:hover div.menu,
-div.vectorMenu div.menuForceShow {
+div.vectorMenu.menuForceShow div.menu {
        display: block;
 }
 

diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index aa64624..8420431 100644 (file)
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -9,7 +9,7 @@ jQuery( function ( $ ) {
                        // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
                        .on( 'click keypress', function ( e ) {
                                if( e.type === 'click' || e.which === 13 ) {
-                                       $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );
+                                       $el.toggleClass( 'menuForceShow' );
                                        e.preventDefault();
                                }
                        } )