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

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
 );