jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Remove vector-layout-legacy styles and grid feature flag"

This commit is contained in:
jenkins-bot 2022-08-08 17:13:42 +00:00 committed by Gerrit Code Review
parent 8a46797eec ef2b0a2372
commit 0a7588f55b
8 changed files with 53 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
includes/Constants.php
View File

@ -211,21 +211,6 @@ final class Constants {
*/
public const WEB_AB_TEST_ARTICLE_ID_FACTORY_SERVICE = 'WikimediaEvents.WebABTestArticleIdFactory';
/**
* @var string
*/
public const CONFIG_GRID = 'VectorGrid';
/**
* @var string
*/
public const REQUIREMENT_GRID = 'Grid';
/**
* @var string
*/
public const FEATURE_GRID = 'Grid';
/**
* This class is for namespacing constants only. Forbid construction.
* @throws FatalError

23
includes/ServiceWiring.php
View File

@ -186,29 +186,6 @@ return [
]
);
// Feature: Grid
// ================================
$featureManager->registerRequirement(
new OverridableConfigRequirement(
$services->getMainConfig(),
$context->getUser(),
$context->getRequest(),
null,
Constants::CONFIG_GRID,
Constants::REQUIREMENT_GRID
)
);
// Requires title above tabs to be enabled to simplify the
// number of variants it needs to consider.
$featureManager->registerFeature(
Constants::FEATURE_GRID,
[
Constants::REQUIREMENT_FULLY_INITIALISED,
Constants::REQUIREMENT_GRID,
]
);
return $featureManager;
}
];

5
includes/SkinVector22.php
View File

@ -164,14 +164,9 @@ class SkinVector22 extends SkinVector {
}
$parentData = $this->mergeViewOverflowIntoActions( $parentData );
$isGrid = $featureManager->isFeatureEnabled(
Constants::FEATURE_GRID
);
return array_merge( $parentData, [
// Cast empty string to null
'html-subtitle' => $parentData['html-subtitle'] === '' ? null : $parentData['html-subtitle'],
'is-vector-grid' => $isGrid,
'vector-layout-class' => $isGrid ? 'vector-layout-grid vector-toc-visible' : 'vector-layout-legacy',
'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
Constants::FEATURE_STICKY_HEADER
) ? $this->getStickyHeaderData(

96
includes/templates/skin.mustache
View File

@ -30,65 +30,47 @@
object data-portlets-sidebar. See Sidebar.mustache for documentation.
object data-footer for footer template partial. see Footer.mustache for documentation.
}}
<div class="mw-page-container {{vector-layout-class}}">
<div class="mw-page-container vector-layout-grid">
<span id="top-page"></span>
<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
<div class="mw-page-container-inner {{#data-toc}} vector-toc-visible{{/data-toc}}">
<input
type="checkbox"
id="mw-sidebar-checkbox"
class="mw-checkbox-hack-checkbox"
{{#sidebar-visible}}checked{{/sidebar-visible}}>
{{>Header}}
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
{{#data-toc}}{{^is-vector-grid}}
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{/is-vector-grid}}{{/data-toc}}
<div id="mw-navigation">
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>
{{^is-vector-grid}}
{{>TableOfContentsContainer}}
{{/is-vector-grid}}
{{#is-vector-grid}}</div>
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{>TableOfContentsContainer}}
{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
<div id="siteNotice">{{{html-site-notice}}}</div>
<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">
<a id="top"></a>
{{>ContentHeader}}
{{>ArticleToolbar}}
<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
{{>ContentSubheader}}
{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
{{{html-user-message}}}
{{{html-body-content}}}
{{{html-categories}}}
</div>
{{#is-language-in-content-bottom}}
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
{{/is-language-in-content-bottom}}
</main>
{{{html-after-content}}}
</div> {{! END mw-content-container }}
{{^is-vector-grid}}</div>{{/is-vector-grid}} <!-- close .vector-sidebar-container -->
<div class="mw-workspace-container mw-footer-container">
{{^is-vector-grid}}<div class="mw-content-container">{{/is-vector-grid}}
{{#data-footer}}{{>Footer}}{{/data-footer}}
{{^is-vector-grid}}</div>{{/is-vector-grid}}
</div>
<div class="mw-page-container-inner">
<input
type="checkbox"
id="mw-sidebar-checkbox"
class="mw-checkbox-hack-checkbox"
{{#sidebar-visible}}checked{{/sidebar-visible}}>
{{>Header}}
<div class="mw-workspace-container vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
<div id="mw-navigation">
{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
</div>
</div>
<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
{{>TableOfContentsContainer}}
<div id="siteNotice">{{{html-site-notice}}}</div>
<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">
<a id="top"></a>
{{>ContentHeader}}
{{>ArticleToolbar}}
<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
{{>ContentSubheader}}
{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
{{{html-user-message}}}
{{{html-body-content}}}
{{{html-categories}}}
</div>
{{#is-language-in-content-bottom}}
{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
{{/is-language-in-content-bottom}}
</main>
{{{html-after-content}}}
</div>
<div class="mw-workspace-container mw-footer-container">
{{#data-footer}}{{>Footer}}{{/data-footer}}
</div>
</div> {{! END mw-page-container-inner }}
</div> {{! END mw-page-container }}
{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}

3
resources/common/variables.less
View File

@ -84,6 +84,9 @@
@padding-blockquote: 8px 32px;
@border-bottom-tabs: @border-width-base @border-style-base #eaecf0;
@background-color-secondary--modern: #f8f9fa;
@background-color-page-container: @background-color-base;
// Navigation
@background-color-secondary: #f6f6f6;
@color-nav-subtle: #444;

37
resources/skins.vector.styles/components/Sidebar.less
View File

@ -6,8 +6,6 @@
// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// Spacing when the main menu is closed, aligns sidebar TOC aligns with bottom of the page title.
@margin-top-sidebar-toc_title_inline: 3.5em;
// Default spacing separating the sidebar TOC from the main menu or viewport.
@margin-top-sidebar-toc: 1.5em;
@ -65,23 +63,6 @@
}
}
.vector-layout-legacy {
.sidebar-toc {
// Main menu is closed
margin-top: @margin-top-sidebar-toc_title_inline;
}
@{selector-workspace-container-sidebar-open} .sidebar-toc {
// Main menu is open
margin-top: @margin-top-sidebar-toc;
}
.vector-sticky-header-visible & .sidebar-toc {
// Sticky header is visible
margin-top: @margin-top-sidebar-toc;
}
}
.mw-sidebar-action {
// Align with the portal heading/links
// `.portal` + `.portal .body`
@ -141,12 +122,16 @@
}
}
// Use the MediaWiki checkbox hack class from checkboxHack.less. This class exists on the
// checkbox input for the menu panel.
// Hide sidebar entirely when the checkbox is disabled
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
// Turn off presentation so that screen readers get the same effect as visually hiding.
// Visibility and opacity can be animated. If animation is unnecessary, use `display: none`
// instead to avoid hidden rendering.
visibility: hidden;
opacity: 0;
display: none;
}
/**
* Makes the sidebar full screen at lower resolutions.
*/
@media ( max-width: @max-width-tablet ) {
.mw-sidebar {
width: 100%;
}
}

227
resources/skins.vector.styles/layouts/screen.less
View File

@ -10,62 +10,22 @@
@selector-workspace-container-sidebar-open: ~'#mw-sidebar-checkbox:checked ~ .mw-workspace-container';
@selector-workspace-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .mw-workspace-container';
@selector-sidebar-container-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container';
@selector-sidebar-no-toc-sidebar-closed: ~'#mw-sidebar-checkbox:not( :checked ) ~ .vector-sidebar-container-no-toc';
// Sidebar
@width-grid-column-one: 11em;
// Adjust the left position of the sidebar to align it with the sidebar menu button,
// in the header, while ensuring the background gradient still extends to the edge of the screen.
// note: the 1px comes from the transparent border of the sidebar button.
@padding-left-sidebar:
@margin-horizontal-sidebar-button-icon +
unit( @border-width-base / @font-size-browser, em );
// Layout containers
// Page container
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
// Content container
@max-width-workspace-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
// see T259331.
@padding-content: @padding-top-content @padding-horizontal-content 1.5em;
// We want ~60px of space between the end of the sidebar and the start of the
// content container for aesthetic reasons. The sidebar is already displaced
// -30px so we simply add 30px of space to the width of the sidebar.
@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16
// Tabs
@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height.
// Breakpoints
// This determines the maximum width breakpoint at which
// the content will have a fixed start margin applied to it when the sidebar
// is open. The content can shift its position when the sidebar is open/closed
// at or below this breakpoint and will maintain its position above this breakpoint.
@max-width-margin-start-content:
(2 * @margin-start-content ) +
( 2 * @padding-horizontal-page-container ) +
@max-width-content-container;
// 23em + 3.75em + 60em = 86.75em @ 16
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported:
unit( 500px / @font-size-browser, em ) -
( 2 * @padding-horizontal-page-container-wide );
// 31.25em - 3.75em = 27.5em @ 16
@background-color-secondary--modern: #f8f9fa;
@border-color-sidebar: #f8f9fa;
@background-color-page-container: @background-color-base;
body {
background-color: @background-color-secondary--modern;
@ -77,10 +37,6 @@ body {
.mw-body,
.parsoid-body {
direction: ltr;
.vector-layout-legacy & {
padding: @padding-content;
}
}
.mw-body {
@ -142,23 +98,6 @@ body {
}
}
/* Navigation Containers */
.vector-layout-legacy .mw-article-toolbar-container {
// Clear the floats on #left-navigation and #right-navigation.
.mixin-clearfix();
// We want to keep the max-width of the article-toolbar-container the
// same max-width as the article page's content container in order to
// prevent it from moving when going from an article page to a
// history/special page.
max-width: @max-width-content-container;
margin-left: auto;
margin-right: auto;
.skin-vector-disable-max-width & {
max-width: none;
}
}
#left-navigation {
float: left;
margin-left: -@padding-horizontal-tabs;
@ -175,45 +114,12 @@ body {
}
}
.vector-layout-legacy #mw-panel {
position: static;
top: 0;
float: none;
// Sidebar is displaced from the workspace container so that the
// sidebar is flush with the edge of the screen at small widths.
left: -@padding-horizontal-page-container;
z-index: @z-index-sidebar;
@media ( min-width: @min-width-desktop-wide ) {
left: -@padding-horizontal-page-container-wide;
}
}
// Add float at higher resolutions
@media ( min-width: @min-width-desktop ) {
.vector-layout-legacy #mw-panel {
float: left;
}
}
.mw-table-of-contents-container {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
position: sticky;
top: 0;
// Needed for Grid-based layout
align-self: start;
.vector-layout-legacy & {
float: left;
clear: both;
// To ensure the TOC is 1.5em (24px) from the top of the viewport when sticky
// we account for the TOC's top margin
top: ~'calc( 1.5em - @{margin-top-sidebar-toc_title_inline} )'; // top: -2em
}
.vector-layout-legacy @{selector-workspace-container-sidebar-open} & {
// When main menu is open the TOC's top margin is reduced
top: ~'calc( 1.5em - @{margin-top-sidebar-toc} )'; // top: 0
}
}
.parsoid-body {
@ -262,137 +168,4 @@ body {
min-width: auto;
}
// Used as a container for absolutely positioned elements.
.mw-page-container-inner {
position: relative;
}
.mw-workspace-container {
// The sidebar is absolutely positioned relative to the
// mw-workspace-container.
position: relative;
.vector-layout-legacy & {
max-width: @max-width-workspace-container;
margin-left: auto;
margin-right: auto;
}
&.mw-footer-container {
// T264679: There are elements (e.g. discussion tool popovers) in the main
// content container that we want to appear on top of the footer. We set the
// footer container to have static positioning instead of relative
// positioning (applied by .mw-workspace-container) to enable this.
position: static;
}
}
.mw-content-container {
.vector-layout-legacy & {
max-width: @max-width-content-container;
display: flow-root;
margin-left: auto;
margin-right: auto;
}
// For container logic specific to special pages and history pages.
.skin-vector-disable-max-width & {
// Allow the max-width of content on history/special pages to be wider than
// the max-width of content on article pages.
// Note, we don't disable the max-width on .mw-article-toolbar-container intentionally
// to support easier navigation between tabs.
// See T293441 for further information on that.
max-width: none;
}
}
.vector-layout-legacy .mw-footer-container {
padding-top: 50px;
padding-bottom: 82px;
}
// Hide sidebar entirely when the checkbox is disabled and the TOC is enabled
@{selector-workspace-container-sidebar-closed} .mw-sidebar {
display: none;
}
// Responsive overrides.
@media ( min-width: @min-width-page-container--padded ) {
.mw-page-container {
border-left: @border-width-base @border-style-base @border-color-sidebar;
border-right: @border-width-base @border-style-base @border-color-sidebar;
}
}
// Adjusts the content when sidebar is open regardless of the viewport width.
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
// For container logic specific to special pages and history pages.
.skin-vector-disable-max-width & {
margin-left: @margin-start-content;
}
}
@media ( max-width: @max-width-margin-start-content ) {
// Increase margin to account for TOC
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
margin-left: @margin-toc-start-content;
}
// Specificity needed to disable the default animations at lower resolutions.
.vector-animations-ready .mw-sidebar {
// Remove sidebar transition at smaller widths.
transition: none;
}
}
// Cannot use display: none on legacy TOC because it needs to be accessible
// to scrollObserver for the TOC A/B test (T303297)
// Instead we hide the contents of the legacy TOC and reset it's styles
// See I3f247730fa1c399e6d2e4d866677703fc24e8c58
.skin-vector-toc-experiment-treatment #toc {
padding: 0;
border: 0;
}
.skin-vector-toc-experiment-treatment #toc > * {
display: none;
}
// Update article page's content container when
// TOC is visible and when TOC is enabled and the sidebar is open.
//
// T306366: When the TOC AB test is enabled, both the old and new TOC are in the
// HTML but only one is actually visible. Prevent the left margin from undesirably
// applying if bucketed into the control or unsampled groups which won't show
// the new TOC.
.skin-vector-disable-max-width .vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container,
body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment-unsampled ) .vector-layout-legacy .vector-toc-visible .mw-workspace-container .mw-content-container,
.vector-layout-legacy @{selector-workspace-container-sidebar-open} .mw-content-container {
@media ( min-width: @min-width-desktop ) {
margin-left: @margin-toc-start-content;
}
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @margin-toc-start-content-wide;
}
}
/**
* Makes the sidebar full screen at lower resolutions.
*/
@media ( max-width: @max-width-tablet ) {
@{selector-workspace-container-sidebar-open} {
#mw-panel {
width: 100%;
}
// !important as we always want to disable the margin-left on these elements
// Using !important is cleaner than having to rely on specificity involved :checked elements
.mw-content-container {
// stylelint-disable-next-line declaration-no-important
margin-left: 0 !important;
}
}
}
@import 'grid.less';

4
skin.json
View File

@ -537,10 +537,6 @@
"VectorTableOfContentsCollapseAtCount": {
"value": 20,
"description": "@var The minimum number of headings required to collapse all headings in the sticky table of contents by default."
},
"VectorGrid": {
"value": true,
"description": "@var boolean `VectorGrid` enforces a grid system"
}
},
"ServiceWiringFiles": [