Add separate buttons for 'add languages' and language settings menus

Bug: T323694
Change-Id: I23cb4687d841025905224a52b843572206fa9ddb

extension.json

@@ -264,8 +264,7 @@
 				"ext-uls-undo-language-tooltip-text",
 				"ext-uls-undo-language-tooltip-text-local",
 				"ext-uls-actions-menu-language-settings-item-label",
-				"ext-uls-actions-menu-header",
+				"ext-uls-add-languages-button-label",
-				"ext-uls-actions-menu-language-settings-item-label",
 				"ext-uls-empty-state-header",
 				"ext-uls-empty-state-desc",
 				"ext-uls-empty-state-header-actions-available",

i18n/en.json

@@ -73,10 +73,10 @@
 	"ext-uls-setlang-accept": "Accept change",
 	"ext-uls-setlang-loading": "Applying...",
 	"ext-uls-setlang-cancel": "Don't change",
-	"ext-uls-actions-menu-header": "More options",
 	"ext-uls-actions-menu-language-settings-item-label": "Open language settings",
 	"ext-uls-empty-state-header": "No languages yet",
 	"ext-uls-empty-state-desc": "No languages are available for now",
 	"ext-uls-empty-state-header-actions-available": "No languages yet. Add a new one?",
-	"ext-uls-empty-state-desc-actions-available": " Make the content available in more languages."
+	"ext-uls-empty-state-desc-actions-available": " Make the content available in more languages.",
+	"ext-uls-add-languages-button-label": "Add languages"
 }

i18n/qqq.json

@@ -77,10 +77,10 @@
 	"ext-uls-setlang-accept": "Button label for accepting the suggested language in language preference dialog.",
 	"ext-uls-setlang-loading": "Button label displayed while the API call is in progress after the user clicks on the accept button. See {{msg-mw|ext-uls-setlang-accept}}.",
 	"ext-uls-setlang-cancel": "Button label for cancel on the language preference dialog.",
-	"ext-uls-actions-menu-header": "Title of the dialog that contains the quick actions menu, that opens when user clicks on the settings icon inside content language selector",
 	"ext-uls-actions-menu-language-settings-item-label": "Label of the button that opens the language settings inside the quick actions menu of the content language selector.",
 	"ext-uls-empty-state-header": "Header text shown in languages selector when there are no languages to select",
 	"ext-uls-empty-state-desc": "Description text shown in languages selector when there are no languages to select",
 	"ext-uls-empty-state-header-actions-available": "Header text shown in languages selector when there are no languages to select, but selector provides ways to create new.",
-	"ext-uls-empty-state-desc-actions-available": "Description text shown in languages selector when there are no languages to select, but selector provides ways to create new."
+	"ext-uls-empty-state-desc-actions-available": "Description text shown in languages selector when there are no languages to select, but selector provides ways to create new.",
+	"ext-uls-add-languages-button-label": "Label of the button"
 }

resources/css/ext.uls.actions.menu.less

@@ -16,10 +16,14 @@
 	}
 
 	.uls-language-action-items {
-		.uls-language-action {
+		.uls-language-action.oo-ui-widget {
 			margin: 0;
 			padding: 12px 8px;
 			display: block;
+
+			.oo-ui-buttonElement-button {
+				padding-left: 36px;
+			}
 		}
 	}
 }

resources/css/ext.uls.interface.less

@@ -1,55 +1,74 @@
 /* stylelint-disable selector-max-id */
 @import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables.less';
 
 #uls-settings-block {
-	background-color: #f8f9fa;
+	&.uls-settings-block--vector-2022 {
-	border-top: 1px solid #c8ccd1;
+		display: flex;
-	padding-left: 10px;
+		justify-content: space-between;
-	line-height: 1.2em;
+		padding: 8px 12px;
-	border-radius: 0 0 2px 2px;
 
-	> button {
+		// override grid styles, as we use flexbox here
-		background: left top transparent no-repeat;
+		&.row {
-		// Support: Safari 3.1-6.1 & Android browser 3-4.3
+			&:before,
-		// Don't support `background-size` values in `background` shorthand
+			&:after {
-		background-size: 20px auto;
+				content: none;
-		color: #54595d;
+			}
-		display: inline-block;
-		// Normalize the button
-		margin: 8px 15px;
-		border: 0;
-		padding: 0 0 0 26px;
-		font-size: medium;
-		cursor: pointer;
-
-		&:hover {
-			color: #202122;
 		}
 
-		&.display-settings-block {
+		&.uls-settings-block--with-add-languages {
-			background-image: url( ../images/display.svg );
+			background-color: @colorGray15;
+			border-top: 1px solid @colorGray12;
 		}
 
-		&.input-settings-block {
+		> button {
-			background-image: url( ../images/input.svg );
+			&.uls-add-languages-button {
+				background: transparent url( ../images/add.svg ) no-repeat left center;
+				margin-right: 32px;
+				padding-left: 32px;
+			}
+
+			&.uls-language-settings-button {
+				background: transparent url( ../images/cog.svg ) no-repeat center;
+				margin-left: auto;
+				min-width: unset;
+				border: 0;
+			}
 		}
 	}
-}
 
-.mw-ui-button.uls-language-actions-button {
+	&:not( .uls-settings-block--vector-2022 ) {
-	position: absolute;
+		background-color: @colorGray15;
-	bottom: 0;
+		border-top: 1px solid @colorGray12;
-	// set a value that doesn't cause overlap with scrollbar
+		padding-left: 10px;
-	right: 16px;
+		line-height: 1.2em;
-	background: center transparent no-repeat;
+		border-radius: 0 0 2px 2px;
-	min-width: unset;
 
-	&--single {
+		> button {
-		background-image: url( ../images/cog.svg );
+			background: left top transparent no-repeat;
-	}
+			// Support: Safari 3.1-6.1 & Android browser 3-4.3
+			// Don't support `background-size` values in `background` shorthand
+			background-size: 20px auto;
+			color: @colorGray5;
+			display: inline-block;
+			margin: 8px 15px;
+			border: 0;
+			padding: 0 0 0 26px;
+			font-size: medium;
+			cursor: pointer;
 
-	&--multiple {
+			&:hover {
-		background-image: url( ../images/ellipsis.svg );
+				color: @colorGray2;
+			}
+
+			&.display-settings-block {
+				background-image: url( ../images/display.svg );
+			}
+
+			&.input-settings-block {
+				background-image: url( ../images/input.svg );
+			}
+		}
 	}
 }
 
@@ -62,7 +81,7 @@
 
 	.uls-empty-state__header,
 	.uls-empty-state__desc {
-		color: #54595d;
+		color: @colorGray5;
 	}
 
 	.uls-language-action-items {

resources/images/add.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title> add </title>
+	<path d="M11 9V4H9v5H4v2h5v5h2v-5h5V9z"/>
+</svg>

resources/js/ext.uls.actions.menu.js

@@ -77,7 +77,7 @@
 
 		i18n: function () {
 			this.$template.find( '.uls-language-actions-title strong' )
-				.text( $.i18n( 'ext-uls-actions-menu-header' ) );
+				.text( $.i18n( 'ext-uls-add-languages-button-label' ) );
 		},
 
 		hide: function () {

resources/js/ext.uls.interface.js

@@ -66,47 +66,6 @@
 		return $( '#p-lang-btn' ).length > 0 || mw.config.get( 'wgULSDisplaySettingsInInterlanguage' );
 	}
 
-	/**
-	 * @return {jQuery}
-	 */
-	function createActionsMenuTrigger() {
-		var classes = [ 'mw-ui-button', 'mw-ui-quiet', 'uls-language-actions-button' ];
-		return $( '<button>' ).addClass( classes );
-	}
-
-	/**
-	 * @param {jQuery} actionsMenuTrigger
-	 * @param {number} menuItemsCount
-	 */
-	function setActionsMenuTriggerIconClass( actionsMenuTrigger, menuItemsCount ) {
-		var iconClass, iconClasses = {
-			single: 'uls-language-actions-button--single',
-			multiple: 'uls-language-actions-button--multiple'
-		};
-		if ( menuItemsCount > 1 ) {
-			iconClass = iconClasses.multiple;
-		} else {
-			iconClass = iconClasses.single;
-		}
-		iconClasses = Object.keys( iconClasses ).map( function ( key ) {
-			return iconClasses[ key ];
-		} );
-		// reset icon classes
-		// The following classes are being removed here (if present):
-		// * uls-language-actions-button--multiple
-		// * uls-language-actions-button--single
-		actionsMenuTrigger.removeClass( iconClasses );
-		// One of the following classes are being added here:
-		// * uls-language-actions-button--multiple
-		// OR
-		// * uls-language-actions-button--single
-		actionsMenuTrigger.addClass( iconClass );
-	}
-
-	function hideLanguageSettingsFooter( uls ) {
-		uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();
-	}
-
 	/**
 	 * @param {jQuery} $element
 	 * @param {Function} onCloseHandler
@@ -186,69 +145,72 @@
 	}
 
 	/**
-	 * Add language actions menu
+	 * Helper method for creating jQuery buttons, used in "addActionsMenuTriggers" method below
+	 *
+	 * @param {string} buttonClass a class to be added to the created button class list
+	 * @return {jQuery}
+	 */
+	function createMenuButton( buttonClass ) {
+		var classes = [ 'mw-ui-button', 'mw-ui-quiet', buttonClass ];
+		// eslint-disable-next-line mediawiki/class-doc
+		return $( '<button>' ).addClass( classes );
+	}
+
+	/**
+	 * Add the button that opens the "Add languages" menu (that contain options
+	 * like "Translate this page" and "Edit language links") and the button that
+	 * opens the "Language settings" menu.
 	 *
 	 * @param {Object} uls The ULS object
 	 */
-	function addActionsMenuTrigger( uls ) {
+	function addActionsMenuTriggers( uls ) {
-		var actionsMenuDialog;
+		var $ulsSettingsBlock = uls.$menu.find( '#uls-settings-block' ).eq( 0 );
+		$ulsSettingsBlock.addClass( 'uls-settings-block--vector-2022' );
 
-		function openActionsMenuEventHandler( event ) {
+		var $languageSettingsMenuButton = createMenuButton( 'uls-language-settings-button' );
-			event.stopPropagation();
+		$languageSettingsMenuButton.one( 'click', function () {
-
+			openLanguageSettings( $languageSettingsMenuButton, uls.show.bind( uls ), uls );
-			function onMenuClose() {
+		} );
-				actionsMenuDialog.hide();
+		$ulsSettingsBlock.append( $languageSettingsMenuButton );
-				uls.show();
-			}
-			openLanguageSettings( $( event.target ), onMenuClose, uls );
-		}
-
-		var languageSettingsMenuItem = {
-			name: 'languageSettings',
-			icon: 'settings',
-			text: $.i18n( 'ext-uls-actions-menu-language-settings-item-label' ),
-			handler: openActionsMenuEventHandler
-		};
 
 		var actionItemsRegistry = mw.uls.ActionsMenuItemsRegistry;
-		actionItemsRegistry.register( languageSettingsMenuItem );
+		actionItemsRegistry.on( 'register', onActionItemAdded );
 
-		var $actionsMenuTrigger = createActionsMenuTrigger();
+		var addLanguagesMenuDialog;
-		setActionsMenuTriggerIconClass( $actionsMenuTrigger, actionItemsRegistry.size() );
+		var $addLanguagesMenuButton;
 
-		function registerTriggerListener() {
+		var prependAddLanguagesMenuButton = function () {
-			$actionsMenuTrigger.off( 'click' );
+			$addLanguagesMenuButton = createMenuButton( 'uls-add-languages-button' ).attr( {
-			$actionsMenuTrigger.on( 'click', function () {
+				'data-i18n': 'ext-uls-add-languages-button-label'
-				var menuItemsLength = actionItemsRegistry.size();
+			} ).i18n();
 
-				if ( menuItemsLength === 1 ) {
+			$ulsSettingsBlock.addClass( 'uls-settings-block--with-add-languages' );
-					openLanguageSettings( $actionsMenuTrigger, uls.show.bind( uls ), uls );
+			$ulsSettingsBlock.prepend( $addLanguagesMenuButton );
-					$actionsMenuTrigger.off( 'click' );
+
-				} else if ( menuItemsLength > 1 ) {
+			// Action menu items need OOUI widgets. Load them and register trigger event handler.
-					actionsMenuDialog = actionsMenuDialog || new ActionsMenu( {
+			mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () {
+				$addLanguagesMenuButton.on( 'click', function () {
+					addLanguagesMenuDialog = addLanguagesMenuDialog || new ActionsMenu( {
 						actions: actionItemsRegistry.getItems(),
 						onPosition: uls.position.bind( uls ),
 						onClose: uls.show.bind( uls )
 					} );
-					actionsMenuDialog.render();
+					addLanguagesMenuDialog.render();
 					uls.hide();
-				}
+				} );
 			} );
+		};
+
+		if ( actionItemsRegistry.getItems().length ) {
+			prependAddLanguagesMenuButton();
 		}
-		function onActionItemAdded( item ) {
+		function onActionItemAdded( itemName, item ) {
-			var itemsLength = actionItemsRegistry.size();
+			if ( !$addLanguagesMenuButton ) {
-			setActionsMenuTriggerIconClass( $actionsMenuTrigger, itemsLength );
+				prependAddLanguagesMenuButton();
-			registerTriggerListener();
+			} else if ( addLanguagesMenuDialog ) {
-			if ( actionsMenuDialog ) {
+				addLanguagesMenuDialog.renderAction( item );
-				actionsMenuDialog.renderAction( item );
 			}
 		}
-		actionItemsRegistry.on( 'register', onActionItemAdded );
-		uls.$menu.append( $actionsMenuTrigger );
-		// Action menu items need OOUI widgets. Load them and register trigger event handler.
-		mw.loader.using( [ 'oojs-ui-widgets', 'oojs-ui.styles.icons-interactions' ] ).done( function () {
-			registerTriggerListener();
-		} );
 	}
 
 	/**
@@ -683,12 +645,12 @@
 				// Provide access to display and input settings if this entry point is the single
 				// point of access to all language settings.
 				uls = $target.data( 'uls' );
-				// first hide #uls-settings-block div since it's unused, and it causes
-				// an unwanted extra border to show up at the bottom of the menu
-				hideLanguageSettingsFooter( uls );
 				if ( languageNodes.length ) {
-					addActionsMenuTrigger( uls );
+					addActionsMenuTriggers( uls );
 				} else {
+					// first hide #uls-settings-block div since it's unused, and it causes
+					// an unwanted extra border to show up at the bottom of the menu
+					uls.$menu.find( '#uls-settings-block' ).eq( 0 ).hide();
 					// There are no languages - The article exist only the current language wiki
 					// Provide entry points to create article in other languages. T290436
 					addEmptyState( uls );