Merge "Languages can be moved out of sidebar"

includes/Constants.php

@@ -101,11 +101,26 @@ final class Constants {
 	 */
 	public const FEATURE_LATEST_SKIN = 'LatestSkin';
 
+	/**
+	 * @var string
+	 */
+	public const FEATURE_LANGUAGE_IN_HEADER = 'LanguageInHeader';
+
 	/**
 	 * @var string
 	 */
 	public const CONFIG_KEY_DISABLE_SIDEBAR_PERSISTENCE = 'VectorDisableSidebarPersistence';
 
+	/**
+	 * @var string
+	 */
+	public const CONFIG_KEY_LANGUAGE_IN_HEADER = 'VectorLanguageInHeader';
+
+	/**
+	 * @var string
+	 */
+	public const REQUIREMENT_LANGUAGE_IN_HEADER = 'LanguageInHeader';
+
 	// These are used for query parameters.
 	/**
 	 * Override the skin version user preference and site Config. See readme.

includes/ServiceWiring.php

@@ -66,6 +66,25 @@ return [
 			]
 		);
 
+		// Feature: Languages in sidebar
+		// ================================
+		$featureManager->registerRequirement(
+			new DynamicConfigRequirement(
+				$services->getMainConfig(),
+				Constants::CONFIG_KEY_LANGUAGE_IN_HEADER,
+				Constants::REQUIREMENT_LANGUAGE_IN_HEADER
+			)
+		);
+
+		$featureManager->registerFeature(
+			Constants::FEATURE_LANGUAGE_IN_HEADER,
+			[
+				Constants::REQUIREMENT_FULLY_INITIALISED,
+				Constants::REQUIREMENT_LATEST_SKIN_VERSION,
+				Constants::REQUIREMENT_LANGUAGE_IN_HEADER,
+			]
+		);
+
 		return $featureManager;
 	}
 ];

includes/SkinVector.php

@@ -88,6 +88,16 @@ class SkinVector extends SkinMustache {
 		parent::__construct( $options );
 	}
 
+	/**
+	 * @return bool
+	 */
+	private function isLanguagesInHeader() {
+		$featureManager = VectorServices::getFeatureManager();
+		return $featureManager->isFeatureEnabled(
+			Constants::FEATURE_LANGUAGE_IN_HEADER
+		);
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -97,8 +107,6 @@ class SkinVector extends SkinMustache {
 		$out = $skin->getOutput();
 		$title = $out->getTitle();
 
-		$featureManager = VectorServices::getFeatureManager();
-
 		// Naming conventions for Mustache parameters.
 		//
 		// Value type (first segment):
@@ -130,6 +138,7 @@ class SkinVector extends SkinMustache {
 			'input-location' => $this->getSearchBoxInputLocation(),
 
 			'sidebar-visible' => $this->isSidebarVisible(),
+			'is-language-in-header' => $this->isLanguagesInHeader(),
 		] );
 
 		if ( $skin->getUser()->isRegistered() ) {
@@ -228,6 +237,10 @@ class SkinVector extends SkinMustache {
 			case 'personal':
 				$type = self::MENU_TYPE_DEFAULT;
 				break;
+			case 'lang':
+				$type = $this->isLanguagesInHeader() ?
+					self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_PORTAL;
+				break;
 			default:
 				$type = self::MENU_TYPE_PORTAL;
 				break;

includes/templates/Sidebar.mustache

@@ -18,5 +18,7 @@
 	</div>
 	{{/data-emphasized-sidebar-action}}
 	{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
+	{{^is-language-in-header}}
 	{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	{{/is-language-in-header}}
 </div>

includes/templates/skin.mustache

@@ -52,7 +52,15 @@
 	<a id="top"></a>
 	<div id="siteNotice" class="mw-body-content">{{{html-site-notice}}}</div>
 	{{>Indicators}}
+	{{^is-language-in-header}}
 	<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
+	{{/is-language-in-header}}
+	{{#is-language-in-header}}
+	<header>
+		<h1 id="firstHeading" class="firstHeading" {{{html-user-language-attributes}}}>{{{html-title}}}</h1>
+		{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	</header>
+	{{/is-language-in-header}}
 	<div id="bodyContent" class="mw-body-content">
 		{{#page-isarticle}}<div id="siteSub" class="noprint">{{msg-tagline}}</div>{{/page-isarticle}}
 		<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>

resources/skins.vector.styles/layout-default.less

@@ -315,3 +315,19 @@ body {
 		}
 	}
 }
+
+main.mw-body {
+	header {
+		border-bottom: 1px solid @border-color-base;
+		.mixin-clearfix();
+
+		h1 {
+			border-bottom: 0;
+			float: left;
+		}
+	}
+
+	#p-lang {
+		float: right;
+	}
+}

skin.json

@@ -29,6 +29,7 @@
 						"mediawiki.ui.icon"
 					],
 					"messages": [
+						"otherlanguages",
 						"tooltip-p-logo",
 						"vector-opt-out-tooltip",
 						"vector-opt-out",
@@ -234,6 +235,9 @@
 		"VectorDefaultSidebarVisibleForAnonymousUser": {
 			"value": false
 		},
+		"VectorLanguageInHeader": {
+			"value": false
+		},
 		"VectorDisableSidebarPersistence": {
 			"value": false,
 			"description": "@var boolean Temporary feature flag that disables saving the sidebar expanded/collapsed state as a user-preference (triggered via clicking the main menu icon). This is intended as a temporary kill-switch in the event that the DB is overloaded with writes to the user_options table."