mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-28 01:20:07 +00:00
Merge "Replace incorrectly mw- prefixed classes Rename template and CSS files to match updated naming conventions, replaces instances of "sidebar" with "main menu""
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
598424b2e2
|
|
@ -15,7 +15,7 @@ module.exports = {
|
|||
'../resources/skins.vector.styles/MenuTabs.less': '../resources/common/components/MenuTabs.less',
|
||||
'../resources/skins.vector.styles/TabWatchstarLink.less': '../resources/common/components/TabWatchstarLink.less',
|
||||
'../resources/skins.vector.styles/SearchBox.less': '../resources/common/components/SearchBox.less',
|
||||
'../resources/skins.vector.styles/Sidebar.less': '../resources/skins.vector.styles/components/Sidebar.less',
|
||||
'../resources/skins.vector.styles/MainMenu.less': '../resources/skins.vector.styles/components/MainMenu.less',
|
||||
'../resources/skins.vector.styles/SidebarLogo.less': '../resources/common/components/SidebarLogo.less',
|
||||
'../resources/skins.vector.styles/MenuPortal.less': '../resources/skins.vector.styles/components/MenuPortal.less'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -405,14 +405,14 @@ abstract class SkinVector extends SkinMustache {
|
|||
}
|
||||
|
||||
/**
|
||||
* Generate data needed to create SidebarAction item.
|
||||
* Generate data needed to create MainMenuAction item.
|
||||
* @param array $htmlData data to make a link or raw html
|
||||
* @param array $headingOptions optional heading for the html
|
||||
* @return array keyed data for the SidebarAction template
|
||||
* @return array keyed data for the MainMenuAction template
|
||||
*/
|
||||
private function makeSidebarActionData( array $htmlData = [], array $headingOptions = [] ): array {
|
||||
private function makeMainMenuActionData( array $htmlData = [], array $headingOptions = [] ): array {
|
||||
$htmlContent = '';
|
||||
// Populates the sidebar as a standalone link or custom html.
|
||||
// Populates the main menu as a standalone link or custom html.
|
||||
if ( array_key_exists( 'link', $htmlData ) ) {
|
||||
$htmlContent = $this->makeLink( 'link', $htmlData['link'] );
|
||||
} elseif ( array_key_exists( 'html-content', $htmlData ) ) {
|
||||
|
|
@ -474,7 +474,7 @@ abstract class SkinVector extends SkinMustache {
|
|||
$commonSkinData = array_merge( $parentData, [
|
||||
'is-legacy' => $this->isLegacy(),
|
||||
'input-location' => $this->getSearchBoxInputLocation(),
|
||||
'sidebar-visible' => $this->isSidebarVisible(),
|
||||
'main-menu-visible' => $this->isSidebarVisible(),
|
||||
'is-language-in-content' => $this->isLanguagesInContent(),
|
||||
'is-language-in-content-top' => $this->isLanguagesInContentAt( 'top' ),
|
||||
'is-language-in-content-bottom' => $this->isLanguagesInContentAt( 'bottom' ),
|
||||
|
|
@ -504,7 +504,7 @@ abstract class SkinVector extends SkinMustache {
|
|||
$htmlData = [
|
||||
'link' => $optOutUrl,
|
||||
];
|
||||
$commonSkinData['data-emphasized-sidebar-action'][] = $this->makeSidebarActionData(
|
||||
$commonSkinData['data-main-menu-action'][] = $this->makeMainMenuActionData(
|
||||
$htmlData,
|
||||
[]
|
||||
);
|
||||
|
|
@ -527,7 +527,7 @@ abstract class SkinVector extends SkinMustache {
|
|||
$headingOptions = [
|
||||
'heading' => $this->msg( 'vector-languages' )->plain(),
|
||||
];
|
||||
$commonSkinData['data-vector-language-switch-alert'][] = $this->makeSidebarActionData(
|
||||
$commonSkinData['data-vector-language-switch-alert'][] = $this->makeMainMenuActionData(
|
||||
$languageSwitchAlert,
|
||||
$headingOptions
|
||||
);
|
||||
|
|
@ -831,18 +831,18 @@ abstract class SkinVector extends SkinMustache {
|
|||
$pData
|
||||
);
|
||||
}
|
||||
$sidebar = $data['data-portlets-sidebar'];
|
||||
$sidebar['data-portlets-first'] = $this->decoratePortletData(
|
||||
'navigation', $sidebar['data-portlets-first']
|
||||
$mainMenuData = $data['data-portlets-sidebar'];
|
||||
$mainMenuData['data-portlets-first'] = $this->decoratePortletData(
|
||||
'navigation', $mainMenuData['data-portlets-first']
|
||||
);
|
||||
$rest = $sidebar['array-portlets-rest'];
|
||||
$rest = $mainMenuData['array-portlets-rest'];
|
||||
foreach ( $rest as $key => $pData ) {
|
||||
$rest[$key] = $this->decoratePortletData(
|
||||
$pData['id'], $pData
|
||||
);
|
||||
}
|
||||
$sidebar['array-portlets-rest'] = $rest;
|
||||
$data['data-portlets-sidebar'] = $sidebar;
|
||||
$mainMenuData['array-portlets-rest'] = $rest;
|
||||
$data['data-portlets-main-menu'] = $mainMenuData;
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{{!-
|
||||
Content Subheader - Placed below the content header on all pages.
|
||||
Page Precontent - Placed below the page toolbar on all pages.
|
||||
Contains the indicators (if the language button is beside the title)
|
||||
qnd tagline, which is only rendered on article page.
|
||||
}}
|
||||
<div class="mw-body-subheader">
|
||||
<div class="mw-body-subheader vector-body-before-content">
|
||||
{{#is-language-in-content-top}}
|
||||
{{>Indicators}}
|
||||
{{/is-language-in-content-top}}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<header class="mw-header">
|
||||
<div class="mw-header-aside">
|
||||
<label
|
||||
id="mw-sidebar-button"
|
||||
class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element"
|
||||
for="mw-sidebar-checkbox"
|
||||
role="button"
|
||||
aria-controls="mw-panel"
|
||||
data-event-name="ui.sidebar"
|
||||
tabindex="0"
|
||||
title="{{msg-vector-main-menu-tooltip}}">
|
||||
<span>{{msg-vector-action-toggle-sidebar}}</span>
|
||||
</label>
|
||||
{{#data-logos}}{{>Logo}}{{/data-logos}}
|
||||
<div class="mw-header-aside vector-header-start">
|
||||
<label
|
||||
id="mw-sidebar-button"
|
||||
class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element"
|
||||
for="mw-sidebar-checkbox"
|
||||
role="button"
|
||||
aria-controls="mw-panel"
|
||||
data-event-name="ui.sidebar"
|
||||
tabindex="0"
|
||||
title="{{msg-vector-main-menu-tooltip}}">
|
||||
<span>{{msg-vector-action-toggle-sidebar}}</span>
|
||||
</label>
|
||||
{{#data-logos}}{{>Logo}}{{/data-logos}}
|
||||
</div>
|
||||
<div class="mw-header-content">
|
||||
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||
{{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}}
|
||||
<div class="mw-header-content vector-header-end">
|
||||
{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
|
||||
{{#data-vector-user-links}}{{>UserLinks}}{{/data-vector-user-links}}
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
27
includes/templates/MainMenu.mustache
Normal file
27
includes/templates/MainMenu.mustache
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{{!
|
||||
@typedef object main-menu-action
|
||||
@prop string href
|
||||
@prop string text
|
||||
|
||||
string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
|
||||
MenuDefinition data-portlets-first
|
||||
MenuDefinition[] array-portlets-rest
|
||||
main-menu-action data-main-menu-action For displaying an emphasized action in the main menu.
|
||||
}}
|
||||
<div class="vector-sidebar-container vector-main-menu-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div id="mw-navigation">
|
||||
{{#data-portlets-main-menu}}
|
||||
<nav id="mw-panel" class="mw-sidebar vector-main-menu" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
|
||||
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
|
||||
{{#data-main-menu-action}}{{>MainMenuAction}}{{/data-main-menu-action}}
|
||||
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
|
||||
{{^is-language-in-content}}
|
||||
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
||||
{{/is-language-in-content}}
|
||||
{{! T295555 Add language switch alert message temporarily (to be removed). }}
|
||||
{{#data-vector-language-switch-alert}}{{>MainMenuAction}}{{/data-vector-language-switch-alert}}
|
||||
</nav>
|
||||
{{/data-portlets-main-menu}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
9
includes/templates/MainMenuAction.mustache
Normal file
9
includes/templates/MainMenuAction.mustache
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{! `heading` is optional. }}
|
||||
<div class="mw-sidebar-action vector-main-menu-action">
|
||||
<div class="mw-sidebar-action-item vector-main-menu-action-item vector-menu-portal">
|
||||
{{#heading}}<div class="mw-sidebar-action-heading vector-main-menu-action-heading vector-menu-heading">{{.}}</div>{{/heading}}
|
||||
<div class="mw-sidebar-action-content vector-main-menu-action-content vector-menu-content">
|
||||
{{{html-content}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{!-
|
||||
Content Header - Main <H1> title for all pages, with either the indicators or language selector.
|
||||
When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
|
||||
Page titlebar - Main <H1> title for all pages, with either the indicators or language selector.
|
||||
When language button is visible, indicators are placed in the BeforeContent.mustache template instead.
|
||||
}}
|
||||
<header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">
|
||||
{{#data-toc}}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="vector-article-toolbar">
|
||||
<div class="mw-article-toolbar-container">
|
||||
<div class="vector-article-toolbar vector-page-toolbar">
|
||||
<div class="mw-article-toolbar-container vector-page-toolbar-container">
|
||||
{{#data-portlets}}
|
||||
<div id="left-navigation">
|
||||
<nav aria-label="{{msg-namespaces}}">
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{{!
|
||||
@typedef object emphasized-sidebar-action
|
||||
@prop string href
|
||||
@prop string text
|
||||
|
||||
string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
|
||||
MenuDefinition data-portlets-first
|
||||
MenuDefinition[] array-portlets-rest
|
||||
emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
|
||||
}}
|
||||
|
||||
<nav id="mw-panel" class="mw-sidebar" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
|
||||
{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
|
||||
{{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}}
|
||||
{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
|
||||
{{^is-language-in-content}}
|
||||
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
|
||||
{{/is-language-in-content}}
|
||||
{{! T295555 Add language switch alert message temporarily (to be removed). }}
|
||||
{{#data-vector-language-switch-alert}}{{>SidebarAction}}{{/data-vector-language-switch-alert}}
|
||||
</nav>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{{! `heading` is optional. }}
|
||||
<div class="mw-sidebar-action ">
|
||||
<div class="mw-sidebar-action-item vector-menu-portal">
|
||||
{{#heading}}<div class="mw-sidebar-action-heading vector-menu-heading">{{.}}</div>{{/heading}}
|
||||
<div class="mw-sidebar-action-content vector-menu-content">
|
||||
{{{html-content}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
MenuDefinition data-portlets.data-views
|
||||
MenuDefinition data-portlets.data-actions
|
||||
object data-search-box. See SearchBox.mustache for documentation.
|
||||
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
||||
object data-portlets-main-menu. See MainMenu.mustache for documentation.
|
||||
object data-footer for footer template partial. see Footer.mustache for documentation.
|
||||
}}
|
||||
<div id="mw-page-base" class="noprint"></div>
|
||||
|
|
@ -64,6 +64,6 @@
|
|||
</div>
|
||||
{{/data-portlets}}
|
||||
</div>
|
||||
{{#data-portlets-sidebar}}{{>LegacySidebar}}{{/data-portlets-sidebar}}
|
||||
{{#data-portlets-main-menu}}{{>LegacySidebar}}{{/data-portlets-main-menu}}
|
||||
</div>
|
||||
{{#data-footer}}{{>Footer}}{{/data-footer}}
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
MenuDefinition data-portlets.data-views
|
||||
MenuDefinition data-portlets.data-actions
|
||||
object data-search-box. See SearchBox.mustache for documentation.
|
||||
boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
|
||||
boolean main-menu-visible For users that want to see the sidebar on initial render, this should be
|
||||
true.
|
||||
string msg-vector-action-toggle-sidebar The label used by the sidebar button.
|
||||
string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
|
||||
object data-portlets-sidebar. See Sidebar.mustache for documentation.
|
||||
object data-portlets-main-menu. See MainMenu.mustache for documentation.
|
||||
object data-footer for footer template partial. see Footer.mustache for documentation.
|
||||
}}
|
||||
<div class="mw-page-container">
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
type="checkbox"
|
||||
id="mw-sidebar-checkbox"
|
||||
class="mw-checkbox-hack-checkbox"
|
||||
{{#sidebar-visible}}checked{{/sidebar-visible}}>
|
||||
{{#main-menu-visible}}checked{{/main-menu-visible}}>
|
||||
{{>Header}}
|
||||
<div class="vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div class="vector-sidebar-container vector-main-menu-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
|
||||
<div id="mw-navigation">
|
||||
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
|
||||
{{#data-portlets-main-menu}}{{>MainMenu}}{{/data-portlets-main-menu}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="vector-sitenotice-container">
|
||||
|
|
@ -52,10 +52,10 @@
|
|||
<div class="mw-content-container">
|
||||
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
|
||||
<main id="content" class="mw-body" role="main">
|
||||
{{>ContentHeader}}
|
||||
{{>ArticleToolbar}}
|
||||
{{>PageTitlebar}}
|
||||
{{>PageToolbar}}
|
||||
<div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container>
|
||||
{{>ContentSubheader}}
|
||||
{{>BeforeContent}}
|
||||
{{! the #contentSub element is currently used by editors, do not hide or remove it
|
||||
until https://phabricator.wikimedia.org/T316830 has been addressed}}
|
||||
<div id="contentSub"{{{html-user-language-attributes}}}>{{{html-subtitle}}}</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ function bindToggleOnSpaceEnter( button ) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Improve the interactivity of the sidebar panel by binding checkbox hack enhancements.
|
||||
* Improve the interactivity of the main menu by binding checkbox hack enhancements.
|
||||
*
|
||||
* @param {HTMLElement|null} checkbox
|
||||
* @param {HTMLElement|null} button
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/**
|
||||
* Copies interwiki links to sidebar
|
||||
* Copies interwiki links to main menu
|
||||
*
|
||||
* Temporary solution to T287206, can be removed when the new ULS built in Vue.js
|
||||
* has been released and contains this
|
||||
*/
|
||||
function addInterwikiLinkToSidebar() {
|
||||
function addInterwikiLinkToMainMenu() {
|
||||
// eslint-disable-next-line no-jquery/no-global-selector
|
||||
var $editLink = $( '#p-lang-btn .wbc-editpage' );
|
||||
if ( $editLink.length ) {
|
||||
|
|
@ -23,5 +23,5 @@ function addInterwikiLinkToSidebar() {
|
|||
* Initialize the language button.
|
||||
*/
|
||||
module.exports = function () {
|
||||
addInterwikiLinkToSidebar();
|
||||
addInterwikiLinkToMainMenu();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,17 +28,24 @@
|
|||
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
|
||||
}
|
||||
|
||||
/* FIXME: Remove selectors after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
&-content,
|
||||
&-aside {
|
||||
&-aside,
|
||||
.vector-header-start,
|
||||
.vector-header-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-aside {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
&-aside,
|
||||
.vector-header-start {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-content {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
&-content,
|
||||
.vector-header-end {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@
|
|||
|
||||
// Note vector-feature-language-in-header-enabled class is not used here as that class
|
||||
// only applies to main page.
|
||||
// This must be limited to mw-body-header as the mw-portlet-lang class is shared with
|
||||
// This must be limited to vector-page-titlebar as the mw-portlet-lang class is shared with
|
||||
// the language portlet that can display in the sidebar.
|
||||
.mw-body-header .mw-portlet-lang {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-body-header .mw-portlet-lang,
|
||||
.vector-page-titlebar .mw-portlet-lang {
|
||||
// FIXME [review whether margin-top is needed] center vertically in heading.
|
||||
margin-top: 2px;
|
||||
.mixin-vector-flush-right-margin-right();
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@
|
|||
// This is expressed in pixels to support different font sizes since our layout is currently
|
||||
// expressed in pixels. See T313817.
|
||||
.sidebar-toc:after,
|
||||
.mw-sidebar,
|
||||
.sidebar-toc {
|
||||
.sidebar-toc,
|
||||
.vector-main-menu,
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-sidebar {
|
||||
// T305069 Layout adjustments of sidebar elements
|
||||
// Align the left edge of main menu with the main menu button.
|
||||
width: @width-sidebar-px;
|
||||
|
|
@ -22,6 +24,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-main-menu,
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-sidebar {
|
||||
box-sizing: border-box;
|
||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||
|
|
@ -35,7 +39,9 @@
|
|||
}
|
||||
|
||||
// Hide sidebar entirely when the checkbox is disabled
|
||||
@{selector-main-menu-closed} ~ .vector-sidebar-container & {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
@{selector-main-menu-closed} ~ .vector-sidebar-container &,
|
||||
@{selector-main-menu-closed} ~ .vector-main-menu-container & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -45,19 +51,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mw-sidebar-action {
|
||||
// Styles for SidebarAction template.
|
||||
.mw-sidebar-action-item {
|
||||
/* FIXME: Remove mw prefixed selectors after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-sidebar-action,
|
||||
.vector-main-menu-action {
|
||||
// Styles for MainMenuAction template.
|
||||
.mw-sidebar-action-item,
|
||||
.vector-main-menu-action-item {
|
||||
// Align with the portal heading/links
|
||||
// `.portal` + `.portal .body`
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.mw-sidebar-action-heading {
|
||||
.mw-sidebar-action-heading,
|
||||
.vector-main-menu-action-heading {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.mw-sidebar-action-content {
|
||||
.mw-sidebar-action-content,
|
||||
.vector-main-menu-action-content {
|
||||
> * {
|
||||
font-size: @font-size-portal-list-item;
|
||||
}
|
||||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
|
||||
.mw-article-toolbar-container {
|
||||
/* FIXME: Remove mw prefixed selectors after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-article-toolbar-container,
|
||||
.vector-page-toolbar-container {
|
||||
display: flex;
|
||||
font-size: @font-size-tabs;
|
||||
// Use box-shadow instead of border to allow border collapsing between titlebar and toolbar
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// ID Selectors outside of .mw-article-toolbar-container to avoid over-specificity.
|
||||
// ID Selectors outside of .vector-page-toolbar-container to avoid over-specificity.
|
||||
#left-navigation {
|
||||
// flex ensures all child elements align on one line.
|
||||
display: flex;
|
||||
|
|
@ -64,7 +64,9 @@
|
|||
grid-area: header;
|
||||
}
|
||||
|
||||
.vector-sidebar-container {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.vector-sidebar-container,
|
||||
.vector-main-menu-container {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,18 @@
|
|||
@import 'mediawiki.mixins.less';
|
||||
|
||||
// Used to be under #mw-navigation, which is hidden in common/print.less
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.vector-article-toolbar,
|
||||
.vector-page-toolbar,
|
||||
// Hide main menu checkbox
|
||||
#mw-sidebar-checkbox,
|
||||
// Hide all header content except the logo
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-header-aside > *:not( .mw-logo ),
|
||||
.vector-header-start > *:not( .mw-logo ),
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-header-content,
|
||||
.vector-header-end,
|
||||
// T300178, T306719
|
||||
#mw-panel-toc,
|
||||
#vector-sticky-header,
|
||||
|
|
|
|||
|
|
@ -67,8 +67,12 @@ body {
|
|||
z-index: @z-index-indicators;
|
||||
}
|
||||
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-body-header,
|
||||
.mw-body-subheader {
|
||||
/* FIXME: Remove selector after Ib4050768f20b1734d356104f18aa539f657099d8 in prod for a week */
|
||||
.mw-body-subheader,
|
||||
.vector-page-titlebar,
|
||||
.vector-body-before-content {
|
||||
.mixin-clearfix();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,18 +11,18 @@
|
|||
@import './layouts/screen.less';
|
||||
|
||||
// Components
|
||||
@import './components/ArticleToolbar.less';
|
||||
@import './components/ContentHeader.less';
|
||||
@import './components/SearchBoxLoader.less';
|
||||
@import './components/VueEnhancedSearchBox.less';
|
||||
@import './components/Sidebar.less';
|
||||
@import './components/LanguageButton.less';
|
||||
@import './components/UserLinks.less';
|
||||
@import './components/Header.less';
|
||||
@import './components/Footer.less';
|
||||
@import './components/MainMenu.less';
|
||||
@import './components/MenuDropdown.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/MenuPortal.less';
|
||||
@import './components/PageTitlebar.less';
|
||||
@import './components/PageToolbar.less';
|
||||
@import './components/StickyHeader.less';
|
||||
@import './components/TabWatchstarLink.less';
|
||||
@import './components/TableOfContents.less';
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
import mustache from 'mustache';
|
||||
import { articleToolbarTemplate,
|
||||
ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||
ARTICLE_TOOLBAR_PARTIALS } from './ArticleToolbar.stories.data';
|
||||
import '../resources/skins.vector.styles/components/ArticleToolbar.less';
|
||||
|
||||
export default {
|
||||
title: 'ArticleToolbar'
|
||||
};
|
||||
|
||||
export const defaultState = () => mustache.render(
|
||||
articleToolbarTemplate,
|
||||
ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||
ARTICLE_TOOLBAR_PARTIALS
|
||||
);
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
import articleToolbarTemplate from '!!raw-loader!../includes/templates/ArticleToolbar.mustache';
|
||||
import pageToolbarTemplate from '!!raw-loader!../includes/templates/PageToolbar.mustache';
|
||||
import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data';
|
||||
import { menuTemplate } from './Menu.stories.data';
|
||||
|
||||
const ARTICLE_TOOLBAR_TEMPLATE_DATA = {
|
||||
const PAGE_TOOLBAR_TEMPLATE_DATA = {
|
||||
'data-portlets': {
|
||||
'data-views': pageActionsData,
|
||||
'data-namespaces': namespaceTabsData
|
||||
}
|
||||
};
|
||||
|
||||
const ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY = {
|
||||
const PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY = {
|
||||
'data-portlets': {
|
||||
'data-views': Object.assign( {}, pageActionsData, {
|
||||
class: 'vector-menu-tabs-legacy'
|
||||
|
|
@ -20,9 +20,9 @@ const ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY = {
|
|||
}
|
||||
};
|
||||
|
||||
const ARTICLE_TOOLBAR_PARTIALS = {
|
||||
const PAGE_TOOLBAR_PARTIALS = {
|
||||
Menu: menuTemplate
|
||||
};
|
||||
|
||||
export { articleToolbarTemplate, ARTICLE_TOOLBAR_TEMPLATE_DATA,
|
||||
ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY, ARTICLE_TOOLBAR_PARTIALS };
|
||||
export { pageToolbarTemplate, PAGE_TOOLBAR_TEMPLATE_DATA,
|
||||
PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY, PAGE_TOOLBAR_PARTIALS };
|
||||
15
stories/PageToolbar.stories.js
Normal file
15
stories/PageToolbar.stories.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import mustache from 'mustache';
|
||||
import { pageToolbarTemplate,
|
||||
PAGE_TOOLBAR_TEMPLATE_DATA,
|
||||
PAGE_TOOLBAR_PARTIALS } from './PageToolbar.stories.data';
|
||||
import '../resources/skins.vector.styles/components/PageToolbar.less';
|
||||
|
||||
export default {
|
||||
title: 'PageToolbar'
|
||||
};
|
||||
|
||||
export const defaultState = () => mustache.render(
|
||||
pageToolbarTemplate,
|
||||
PAGE_TOOLBAR_TEMPLATE_DATA,
|
||||
PAGE_TOOLBAR_PARTIALS
|
||||
);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import sidebarTemplate from '!!raw-loader!../includes/templates/Sidebar.mustache';
|
||||
import sidebarTemplate from '!!raw-loader!../includes/templates/MainMenu.mustache';
|
||||
import sidebarLegacyTemplate from '!!raw-loader!../includes/templates/LegacySidebar.mustache';
|
||||
import { vectorMenuTemplate } from './MenuDropdown.stories.data';
|
||||
import { PORTALS } from './MenuPortal.stories.data';
|
||||
|
|
@ -13,7 +13,7 @@ export const SIDEBAR_TEMPLATE_PARTIALS = {
|
|||
};
|
||||
|
||||
export const OPT_OUT_DATA = {
|
||||
'data-emphasized-sidebar-action': {
|
||||
'data-main-menu-action': {
|
||||
href: '#',
|
||||
'msg-vector-opt-out': 'Switch to old look',
|
||||
'msg-vector-opt-out-tooltip': 'Change your settings to go back to the old look of the skin (legacy Vector)'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import mustache from 'mustache';
|
||||
import '../resources/skins.vector.styles/Sidebar.less';
|
||||
import '../resources/skins.vector.styles/MainMenu.less';
|
||||
import '../resources/skins.vector.styles/SidebarLogo.less';
|
||||
import '../resources/skins.vector.styles/MenuPortal.less';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { htmlUserLanguageAttributes } from './utils';
|
||||
import { placeholder } from './utils';
|
||||
|
||||
import { articleToolbarTemplate, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY } from './ArticleToolbar.stories.data';
|
||||
import { pageToolbarTemplate, PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY } from './PageToolbar.stories.data';
|
||||
import { userLinksTemplateLegacy } from './UserLinks.stories.data';
|
||||
import { menuTemplate, legacyMenuTemplate } from './Menu.stories.data';
|
||||
import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
|
||||
|
|
@ -15,32 +15,32 @@ import { logoTemplate } from './Logo.stories.data';
|
|||
|
||||
export const NAVIGATION_TEMPLATE_DATA = {
|
||||
loggedInWithVariantsAndOptOut: Object.assign( {}, {
|
||||
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-portlets': Object.assign( {}, PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||||
'data-variants': variantsData
|
||||
} ),
|
||||
'data-search-box': searchBoxData,
|
||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||
'data-portlets-main-menu': SIDEBAR_DATA.withPortals,
|
||||
'msg-navigation-heading': 'Navigation menu',
|
||||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||||
}, OPT_OUT_DATA ),
|
||||
loggedOutWithVariants: {
|
||||
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-portlets': Object.assign( {}, PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedOut,
|
||||
'data-variants': variantsData
|
||||
} ),
|
||||
'data-search-box': searchBoxData,
|
||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||
'data-portlets-main-menu': SIDEBAR_DATA.withPortals,
|
||||
'msg-navigation-heading': 'Navigation menu',
|
||||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||||
},
|
||||
loggedInWithMoreActions: {
|
||||
'data-portlets': Object.assign( {}, ARTICLE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-portlets': Object.assign( {}, PAGE_TOOLBAR_TEMPLATE_DATA_LEGACY[ 'data-portlets' ], {
|
||||
'data-personal': PERSONAL_MENU_TEMPLATE_DATA.loggedInWithEcho,
|
||||
'data-actions': moreData
|
||||
} ),
|
||||
'data-search-box': searchBoxData,
|
||||
'data-portlets-sidebar': SIDEBAR_DATA.withPortals,
|
||||
'data-portlets-main-menu': SIDEBAR_DATA.withPortals,
|
||||
'msg-navigation-heading': 'Navigation menu',
|
||||
'html-logo-attributes': `class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"`
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@ export const NAVIGATION_TEMPLATE_DATA = {
|
|||
|
||||
export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
|
||||
Logo: logoTemplate,
|
||||
ArticleToolbar: articleToolbarTemplate,
|
||||
ArticleToolbar: pageToolbarTemplate,
|
||||
SearchBox: searchBoxTemplate,
|
||||
LegacySidebar: sidebarLegacyTemplate,
|
||||
Sidebar: sidebarTemplate,
|
||||
|
|
|
|||
Loading…
Reference in a new issue