[legacy] Split sidebar code and mark layout as legacy in preparation for new layout

Going into the new version of Vector, we'll want to rewrite the layout
rules entirely and decouple the sidebar from the logo.

To prepare for this we will move the layout file into a legacy folder.
We also separate Sidebar styles needed for the legacy mode from the old mode.

This will allow us to make changes to the header in new Vector without having to touch
or test the legacy codebase via a new file layout.less and using the existing sidebar
code.

Bug: T246170
Change-Id: Ieb4f8f2b2f0e4f48d76a210ab30acd08e3e83bcb

includes/VectorTemplate.php

@@ -129,7 +129,7 @@ class VectorTemplate extends BaseTemplate {
 		// Naming conventions for Mustache parameters.
 		//
 		// Value type (first segment):
-		// - Prefix "is" for boolean values.
+		// - Prefix "is" or "has" for boolean values.
 		// - Prefix "msg-" for interface message text.
 		// - Prefix "html-" for raw HTML.
 		// - Prefix "data-" for an array of template parameters that should be passed directly
@@ -192,6 +192,7 @@ class VectorTemplate extends BaseTemplate {
 			'data-page-actions-more' => $this->buildActionsProps(),
 			'data-search-box' => $this->buildSearchProps(),
 			'data-sidebar' => [
+					'has-logo' => true,
 					'html-logo-attributes' => Xml::expandAttributes(
 						Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
 							'class' => 'mw-wiki-logo',

includes/templates/Sidebar.mustache

@@ -6,12 +6,15 @@
 	string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
 	array array-portals contains options for Portal template
 	emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
+	@prop boolean has-logo whether to show a logo or not.
 }}
 
 <div id="mw-panel">
+	{{#has-logo}}
 	<div id="p-logo" role="banner">
 		<a {{{html-logo-attributes}}}></a>
 	</div>
+	{{/has-logo}}
 	{{#array-portals-first}}{{>Portal}}{{/array-portals-first}}
 	{{#data-emphasized-sidebar-action}}
 	<div class="vector-emphasized-sidebar-action">

resources/skins.vector.styles/Sidebar.less

@@ -1,20 +1,5 @@
 @import '../../variables.less';
 
-/* Logo */
-#p-logo {
-	width: 10em;
-	height: 160px;
-
-	a {
-		background-position: center center;
-		background-repeat: no-repeat;
-		display: block;
-		width: 10em;
-		height: 160px;
-		text-decoration: none;
-	}
-}
-
 /* Panel */
 #mw-panel {
 	font-size: @font-size-nav-main;
@@ -23,7 +8,6 @@
 	/* FIXME: For caching. Can be removed in a week from the git blame commit id of this line. */
 	#p-logo + .portal {
 		background-image: none;
-		margin-top: 1em;
 
 		h3 {
 			display: none;

resources/skins.vector.styles/SidebarLogo.less

@@ -0,0 +1,17 @@
+@import '../../variables.less';
+
+/* Logo */
+#p-logo {
+	width: 10em;
+	height: 160px;
+	margin-bottom: 1em;
+
+	a {
+		background-position: center center;
+		background-repeat: no-repeat;
+		display: block;
+		width: 10em;
+		height: 160px;
+		text-decoration: none;
+	}
+}

resources/skins.vector.styles/index.less

@@ -10,11 +10,12 @@
 	@import 'VectorMenu.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
+	@import 'SidebarLogo.less';
 	@import 'Footer.less';
 	@import 'EmphasizedSidebarAction.less';
 	@import 'externalLinks.less';
 }
 
-@import 'layout.less';
+@import 'legacy/layout.less';
 @import 'watchstar-ie8.less';
 @import 'print.less';

resources/skins.vector.styles/legacy.less

@@ -10,10 +10,11 @@
 	@import 'VectorMenu.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
+	@import 'SidebarLogo.less';
 	@import 'Footer.less';
 	@import 'externalLinks.less';
 }
 
-@import 'layout.less';
+@import 'legacy/layout.less';
 @import 'watchstar-ie8.less';
 @import 'print.less';

stories/Sidebar.stories.data.js

@@ -14,10 +14,12 @@ export const SIDEBAR_TEMPLATE_PARTIALS = {
 
 export const SIDEBAR_DATA = {
 	withNoPortals: {
+		'has-logo': true,
 		'array-portals-rest': [],
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withPortalsAndOptOut: {
+		'has-logo': true,
 		'array-portals-first': PORTALS.navigation,
 		'data-emphasized-sidebar-action': {
 			href: '#',
@@ -31,6 +33,7 @@ export const SIDEBAR_DATA = {
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withPortals: {
+		'has-logo': true,
 		'array-portals-first': PORTALS.navigation,
 		'array-portals-rest': [
 			PORTALS.toolbox,
@@ -39,7 +42,17 @@ export const SIDEBAR_DATA = {
 		],
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
+	withoutLogo: {
+		'has-logo': false,
+		'array-portals-first': PORTALS.navigation,
+		'array-portals-rest': [
+			PORTALS.toolbox,
+			PORTALS.otherProjects,
+			PORTALS.langlinks
+		]
+	},
 	thirdParty: {
+		'has-logo': true,
 		'array-portals-rest': [
 			PORTALS.toolbox,
 			PORTALS.navigation,

stories/Sidebar.stories.js

@@ -1,6 +1,7 @@
 import mustache from 'mustache';
 import '../.storybook/common.less';
 import '../resources/skins.vector.styles/Sidebar.less';
+import '../resources/skins.vector.styles/SidebarLogo.less';
 import '../resources/skins.vector.styles/Portal.less';
 import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
 
@@ -12,6 +13,10 @@ export const sidebarWithNoPortals = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
 );
 
+export const sidebarWithoutLogo = () => mustache.render(
+	sidebarTemplate, SIDEBAR_DATA.withoutLogo, SIDEBAR_TEMPLATE_PARTIALS
+);
+
 export const sidebarWithPortals = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
 );