Merge "[modern] Usability improvements to dropdown"

resources/skins.vector.js/dropdownMenus.js

@@ -0,0 +1,17 @@
+/**
+ * Make sure that clicking outside a menu closes it.
+ */
+function closeDropdownsOnClickOutside() {
+	$( document.body ).on( 'click', function ( ev ) {
+		var $closestPortlet = $( ev.target ).closest( '.mw-portlet' );
+		// Uncheck (close) any menus that are open.
+		// eslint-disable-next-line no-jquery/no-global-selector
+		$( '.vector-menu-checkbox:checked' ).not(
+			$closestPortlet.find( '.vector-menu-checkbox' )
+		).prop( 'checked', false );
+	} );
+}
+
+module.exports = function dropdownMenus() {
+	closeDropdownsOnClickOutside();
+};

resources/skins.vector.js/skin.js

@@ -2,6 +2,7 @@ var collapsibleTabs = require( '../skins.vector.legacy.js/collapsibleTabs.js' ),
 	vector = require( '../skins.vector.legacy.js/vector.js' ),
 	languageButton = require( './languageButton.js' ),
 	initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
+	dropdownMenus = require( './dropdownMenus.js' ),
 	sidebar = require( './sidebar.js' );
 
 /**
@@ -44,6 +45,7 @@ function main( window ) {
 	enableCssAnimations( window.document );
 	collapsibleTabs.init();
 	sidebar.init( window );
+	dropdownMenus();
 	$( vector.init );
 	initSearchLoader( document );
 	languageButton();

resources/skins.vector.styles/MenuDropdown.less

@@ -66,7 +66,6 @@
 		z-index: @z-index-menu;
 	}
 
-	&:hover .vector-menu-content,
 	.vector-menu-checkbox:checked ~ .vector-menu-content {
 		opacity: 1;
 		visibility: visible;
@@ -148,10 +147,6 @@
 		display: block;
 	}
 
-	&:checked + h3:after {
-		transform: scaleY( -1 );
-	}
-
 	&:focus + h3 {
 		// Simulate browser focus ring
 		outline: dotted 1px; // Firefox style

resources/skins.vector.styles/legacy/MenuDropdown.less

@@ -0,0 +1,15 @@
+// Extends the dropdown menu but allows it to be opened via hover.
+@import '../MenuDropdown.less';
+
+.vector-menu-dropdown {
+	&:hover .vector-menu-content {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+.vector-menu-checkbox {
+	&:checked + h3:after {
+		transform: scaleY( -1 );
+	}
+}

resources/skins.vector.styles/skin-legacy.less

@@ -15,7 +15,7 @@
 	@import 'SearchBox.less';
 	@import 'MenuTabs.less';
 	@import 'TabWatchstarLink.less';
-	@import 'MenuDropdown.less';
+	@import 'legacy/MenuDropdown.less';
 	@import 'MenuPortal.less';
 	@import 'legacy/Sidebar.less';
 	@import 'SidebarLogo.less';

skin.json

@@ -145,6 +145,7 @@
 					"name": "resources/skins.vector.js/config.json",
 					"callback": "Vector\\Hooks::getVectorResourceLoaderConfig"
 				},
+				"resources/skins.vector.js/dropdownMenus.js",
 				"resources/skins.vector.js/sidebar.js",
 				"resources/skins.vector.legacy.js/collapsibleTabs.js",
 				"resources/skins.vector.legacy.js/vector.js",