From 703903daaced27e011b59ab93dd7657f8d3db38f Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Tue, 14 Apr 2020 15:44:33 -0700 Subject: [PATCH] [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 | 3 ++- includes/templates/Sidebar.mustache | 3 +++ resources/skins.vector.styles/Sidebar.less | 16 ---------------- resources/skins.vector.styles/SidebarLogo.less | 17 +++++++++++++++++ resources/skins.vector.styles/index.less | 3 ++- resources/skins.vector.styles/legacy.less | 3 ++- .../{ => legacy}/layout.less | 0 stories/Sidebar.stories.data.js | 13 +++++++++++++ stories/Sidebar.stories.js | 5 +++++ 9 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 resources/skins.vector.styles/SidebarLogo.less rename resources/skins.vector.styles/{ => legacy}/layout.less (100%) diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index 0f7d0cac7..fe0d9f4a0 100644 --- a/includes/VectorTemplate.php +++ b/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', diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache index badb444ee..43f4d791f 100644 --- a/includes/templates/Sidebar.mustache +++ b/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. }}
+ {{#has-logo}} + {{/has-logo}} {{#array-portals-first}}{{>Portal}}{{/array-portals-first}} {{#data-emphasized-sidebar-action}}
diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/Sidebar.less index 11e963054..786a2d0f7 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/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; diff --git a/resources/skins.vector.styles/SidebarLogo.less b/resources/skins.vector.styles/SidebarLogo.less new file mode 100644 index 000000000..d4b4924c0 --- /dev/null +++ b/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; + } +} diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index 24b773a5c..e5dd2e242 100644 --- a/resources/skins.vector.styles/index.less +++ b/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'; diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index 5089f0cbe..ca2a4fdfb 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/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'; diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/legacy/layout.less similarity index 100% rename from resources/skins.vector.styles/layout.less rename to resources/skins.vector.styles/legacy/layout.less diff --git a/stories/Sidebar.stories.data.js b/stories/Sidebar.stories.data.js index 27814d5d0..4cbcb1a4c 100644 --- a/stories/Sidebar.stories.data.js +++ b/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, diff --git a/stories/Sidebar.stories.js b/stories/Sidebar.stories.js index aa16fcedd..1dbfb67e4 100644 --- a/stories/Sidebar.stories.js +++ b/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 );