Merge "[legacy] Split sidebar code and mark layout as legacy in preparation for new layout"
This commit is contained in:
commit
0260424cf4
|
@ -129,7 +129,7 @@ class VectorTemplate extends BaseTemplate {
|
||||||
// Naming conventions for Mustache parameters.
|
// Naming conventions for Mustache parameters.
|
||||||
//
|
//
|
||||||
// Value type (first segment):
|
// Value type (first segment):
|
||||||
// - Prefix "is" for boolean values.
|
// - Prefix "is" or "has" for boolean values.
|
||||||
// - Prefix "msg-" for interface message text.
|
// - Prefix "msg-" for interface message text.
|
||||||
// - Prefix "html-" for raw HTML.
|
// - Prefix "html-" for raw HTML.
|
||||||
// - Prefix "data-" for an array of template parameters that should be passed directly
|
// - 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-page-actions-more' => $this->buildActionsProps(),
|
||||||
'data-search-box' => $this->buildSearchProps(),
|
'data-search-box' => $this->buildSearchProps(),
|
||||||
'data-sidebar' => [
|
'data-sidebar' => [
|
||||||
|
'has-logo' => true,
|
||||||
'html-logo-attributes' => Xml::expandAttributes(
|
'html-logo-attributes' => Xml::expandAttributes(
|
||||||
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
|
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
|
||||||
'class' => 'mw-wiki-logo',
|
'class' => 'mw-wiki-logo',
|
||||||
|
|
|
@ -6,12 +6,15 @@
|
||||||
string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
|
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
|
array array-portals contains options for Portal template
|
||||||
emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
|
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">
|
<div id="mw-panel">
|
||||||
|
{{#has-logo}}
|
||||||
<div id="p-logo" role="banner">
|
<div id="p-logo" role="banner">
|
||||||
<a {{{html-logo-attributes}}}></a>
|
<a {{{html-logo-attributes}}}></a>
|
||||||
</div>
|
</div>
|
||||||
|
{{/has-logo}}
|
||||||
{{#array-portals-first}}{{>Portal}}{{/array-portals-first}}
|
{{#array-portals-first}}{{>Portal}}{{/array-portals-first}}
|
||||||
{{#data-emphasized-sidebar-action}}
|
{{#data-emphasized-sidebar-action}}
|
||||||
<div class="vector-emphasized-sidebar-action">
|
<div class="vector-emphasized-sidebar-action">
|
||||||
|
|
|
@ -1,20 +1,5 @@
|
||||||
@import '../../variables.less';
|
@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 */
|
/* Panel */
|
||||||
#mw-panel {
|
#mw-panel {
|
||||||
font-size: @font-size-nav-main;
|
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. */
|
/* FIXME: For caching. Can be removed in a week from the git blame commit id of this line. */
|
||||||
#p-logo + .portal {
|
#p-logo + .portal {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
margin-top: 1em;
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -10,11 +10,12 @@
|
||||||
@import 'VectorMenu.less';
|
@import 'VectorMenu.less';
|
||||||
@import 'Portal.less';
|
@import 'Portal.less';
|
||||||
@import 'Sidebar.less';
|
@import 'Sidebar.less';
|
||||||
|
@import 'SidebarLogo.less';
|
||||||
@import 'Footer.less';
|
@import 'Footer.less';
|
||||||
@import 'EmphasizedSidebarAction.less';
|
@import 'EmphasizedSidebarAction.less';
|
||||||
@import 'externalLinks.less';
|
@import 'externalLinks.less';
|
||||||
}
|
}
|
||||||
|
|
||||||
@import 'layout.less';
|
@import 'legacy/layout.less';
|
||||||
@import 'watchstar-ie8.less';
|
@import 'watchstar-ie8.less';
|
||||||
@import 'print.less';
|
@import 'print.less';
|
||||||
|
|
|
@ -10,10 +10,11 @@
|
||||||
@import 'VectorMenu.less';
|
@import 'VectorMenu.less';
|
||||||
@import 'Portal.less';
|
@import 'Portal.less';
|
||||||
@import 'Sidebar.less';
|
@import 'Sidebar.less';
|
||||||
|
@import 'SidebarLogo.less';
|
||||||
@import 'Footer.less';
|
@import 'Footer.less';
|
||||||
@import 'externalLinks.less';
|
@import 'externalLinks.less';
|
||||||
}
|
}
|
||||||
|
|
||||||
@import 'layout.less';
|
@import 'legacy/layout.less';
|
||||||
@import 'watchstar-ie8.less';
|
@import 'watchstar-ie8.less';
|
||||||
@import 'print.less';
|
@import 'print.less';
|
||||||
|
|
|
@ -14,10 +14,12 @@ export const SIDEBAR_TEMPLATE_PARTIALS = {
|
||||||
|
|
||||||
export const SIDEBAR_DATA = {
|
export const SIDEBAR_DATA = {
|
||||||
withNoPortals: {
|
withNoPortals: {
|
||||||
|
'has-logo': true,
|
||||||
'array-portals-rest': [],
|
'array-portals-rest': [],
|
||||||
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
|
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
|
||||||
},
|
},
|
||||||
withPortalsAndOptOut: {
|
withPortalsAndOptOut: {
|
||||||
|
'has-logo': true,
|
||||||
'array-portals-first': PORTALS.navigation,
|
'array-portals-first': PORTALS.navigation,
|
||||||
'data-emphasized-sidebar-action': {
|
'data-emphasized-sidebar-action': {
|
||||||
href: '#',
|
href: '#',
|
||||||
|
@ -31,6 +33,7 @@ export const SIDEBAR_DATA = {
|
||||||
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
|
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
|
||||||
},
|
},
|
||||||
withPortals: {
|
withPortals: {
|
||||||
|
'has-logo': true,
|
||||||
'array-portals-first': PORTALS.navigation,
|
'array-portals-first': PORTALS.navigation,
|
||||||
'array-portals-rest': [
|
'array-portals-rest': [
|
||||||
PORTALS.toolbox,
|
PORTALS.toolbox,
|
||||||
|
@ -39,7 +42,17 @@ export const SIDEBAR_DATA = {
|
||||||
],
|
],
|
||||||
'html-logo-attributes': HTML_LOGO_ATTRIBUTES
|
'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: {
|
thirdParty: {
|
||||||
|
'has-logo': true,
|
||||||
'array-portals-rest': [
|
'array-portals-rest': [
|
||||||
PORTALS.toolbox,
|
PORTALS.toolbox,
|
||||||
PORTALS.navigation,
|
PORTALS.navigation,
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import mustache from 'mustache';
|
import mustache from 'mustache';
|
||||||
import '../.storybook/common.less';
|
import '../.storybook/common.less';
|
||||||
import '../resources/skins.vector.styles/Sidebar.less';
|
import '../resources/skins.vector.styles/Sidebar.less';
|
||||||
|
import '../resources/skins.vector.styles/SidebarLogo.less';
|
||||||
import '../resources/skins.vector.styles/Portal.less';
|
import '../resources/skins.vector.styles/Portal.less';
|
||||||
import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
|
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
|
sidebarTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const sidebarWithoutLogo = () => mustache.render(
|
||||||
|
sidebarTemplate, SIDEBAR_DATA.withoutLogo, SIDEBAR_TEMPLATE_PARTIALS
|
||||||
|
);
|
||||||
|
|
||||||
export const sidebarWithPortals = () => mustache.render(
|
export const sidebarWithPortals = () => mustache.render(
|
||||||
sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
|
sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue