Reorganize LESS files to match ResourceLoader conventions

Separating most LESS files into 2 ResourceLoader modules and a common
folder:

- skins.vector.styles
- skins.vector.styles.legacy
- common

This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.

Inside each directory are separate folders for `layouts` and
`components`.

The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.

Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.

This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.

Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
This commit is contained in:
Jan Drewniak 2021-02-02 11:04:37 +01:00 committed by Sam Smith
parent ec6bca52ee
commit edd2f4ff85
52 changed files with 245 additions and 213 deletions

View File

@ -1,4 +1,4 @@
@import '../variables.less';
@import '../resources/common/variables.less';
@import 'integration.less';
@import 'icons.less';
@import '../skinStyles/mediawiki.ui.icon.less';

View File

@ -1,6 +1,25 @@
const path = require( 'path' );
module.exports = {
resolve: {
alias: {
// FIXME: These imports should be updated in the story files instead of here.
'../resources/skins.vector.styles/Footer.less': '../resources/common/components/Footer.less',
'../resources/skins.vector.styles/LanguageButton.less': '../resources/skins.vector.styles/components/LanguageButton.less',
'../resources/skins.vector.styles/skin-legacy.less': '../resources/skins.vector.styles.legacy/skin-legacy.less',
'../resources/skins.vector.styles/Logo.less': '../resources/skins.vector.styles/components/Logo.less',
'../resources/skins.vector.styles/Menu.less': '../resources/common/components/Menu.less',
'../.storybook/common.less': '../resources/common/common.less',
'../resources/skins.vector.styles/MenuDropdown.less': '../resources/common/components/MenuDropdown.less',
'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less',
'../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/SidebarLogo.less': '../resources/common/components/SidebarLogo.less',
'../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less'
}
},
module: {
rules: [ {
test: /\.js$/,
@ -37,11 +56,17 @@ module.exports = {
use: [ {
loader: 'style-loader'
}, {
loader: 'css-loader'
loader: 'css-loader',
options: {
// FIXME: Disable resolving of CSS urls until Storybook is upgraded
// to use Webpack 5 and array values for aliases
// (which would cleanly resolve urls in LESS partial starting with `url(images/...)` )
url: false
}
}, {
loader: 'less-loader',
options: {
relativeUrls: false,
relativeUrls: true,
strictUnits: true,
paths: [
path.resolve( __dirname, 'resolve-imports' )

View File

@ -0,0 +1,29 @@
/**
* Common styles and components shared by both,
* Vector legacy and Vector modern.
*/
@import './variables.less';
@import 'mediawiki.mixins.less';
@media screen {
// Common styles
@import './normalize.less';
@import './typography.less';
// Components
@import './components/Indicators.less';
@import './components/SiteNotice.less';
@import './components/Menu.less';
@import './components/MenuTabs.less';
@import './components/TabWatchstarLink.less';
@import './components/MenuDropdown.less';
@import './components/MenuPortal.less';
@import './components/SearchBox.less';
@import './components/SidebarLogo.less';
@import './components/Footer.less';
}
@media print {
@import './print.less';
}

View File

@ -1,8 +1,7 @@
@import '../../variables.less';
@import '../variables.less';
/* Footer */
.mw-footer {
padding: 0.75em;
direction: ltr;
ul {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
// FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside?
.mw-body {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
@import 'mediawiki.mixins.less';
/* Personal Menu */

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
@import 'mediawiki.mixins.less';
/* Variants and Actions */

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
@import 'mediawiki.mixins.less';
.vector-menu-portal {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
@import 'mediawiki.mixins.less';
/**

View File

@ -1,6 +1,6 @@
@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables.less';
@import '../../variables.less';
@import '../../common/variables.less';
// Search portlet.
#p-search h3 {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
/* Logo */
#p-logo {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../variables.less';
@import 'mediawiki.mixins.less';
@import 'mediawiki.mixins.rotation.less';

View File

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 223 B

View File

Before

Width:  |  Height:  |  Size: 159 B

After

Width:  |  Height:  |  Size: 159 B

View File

Before

Width:  |  Height:  |  Size: 387 B

After

Width:  |  Height:  |  Size: 387 B

View File

Before

Width:  |  Height:  |  Size: 386 B

After

Width:  |  Height:  |  Size: 386 B

View File

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

View File

Before

Width:  |  Height:  |  Size: 280 B

After

Width:  |  Height:  |  Size: 280 B

View File

Before

Width:  |  Height:  |  Size: 116 B

After

Width:  |  Height:  |  Size: 116 B

View File

Before

Width:  |  Height:  |  Size: 124 B

After

Width:  |  Height:  |  Size: 124 B

View File

Before

Width:  |  Height:  |  Size: 620 B

After

Width:  |  Height:  |  Size: 620 B

View File

Before

Width:  |  Height:  |  Size: 602 B

After

Width:  |  Height:  |  Size: 602 B

View File

Before

Width:  |  Height:  |  Size: 737 B

After

Width:  |  Height:  |  Size: 737 B

View File

Before

Width:  |  Height:  |  Size: 725 B

After

Width:  |  Height:  |  Size: 725 B

View File

Before

Width:  |  Height:  |  Size: 254 B

After

Width:  |  Height:  |  Size: 254 B

View File

Before

Width:  |  Height:  |  Size: 264 B

After

Width:  |  Height:  |  Size: 264 B

View File

Before

Width:  |  Height:  |  Size: 225 B

After

Width:  |  Height:  |  Size: 225 B

View File

Before

Width:  |  Height:  |  Size: 252 B

After

Width:  |  Height:  |  Size: 252 B

View File

@ -4,7 +4,7 @@
*
*/
@import '../../../variables.less';
@import './variables.less';
html,
body {

View File

@ -5,7 +5,7 @@
*
*/
@import '../../../variables.less';
@import './variables.less';
html {
font-size: @font-size-root;

View File

@ -1,5 +1,4 @@
// Extends the dropdown menu but allows it to be opened via hover.
@import '../MenuDropdown.less';
// Extends the common MenuDropdown, but allows it to be opened via hover.
.vector-menu-dropdown {
&:hover .vector-menu-content {

View File

@ -1,4 +1,4 @@
@import '../../../variables.less';
@import '../../common/variables.less';
/* Panel */
#mw-panel {

View File

@ -1,8 +1,11 @@
// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
// The rules here should only define the layout, not color or typography.
/**
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
* The rules here should only define the layout, not color or typography.
* See '../../common/' folder for latter stylesheets.
*/
@import 'mediawiki.mixins.less';
@import '../../../variables.less';
@import '../../common/variables.less';
body {
background-color: @background-color-secondary;
@ -152,6 +155,7 @@ body {
.mw-footer {
margin-left: 10em;
margin-top: 0;
padding: 0.75em;
}
/* Vector screen styles for high definition displays. These rules cross the above components and are

View File

@ -0,0 +1,13 @@
/**
* Vector legacy stylesheets
* See '../common/common.less' for common screen and print Vector stylesheets.
*/
@media screen {
// Layouts
@import './layouts/screen.less';
// Legacy specific components
@import './components/MenuDropdown.less';
@import './components/Sidebar.less';
}

View File

@ -1,5 +1,5 @@
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
@import '../../variables.less';
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
// `.mw-body-header` class can be removed when language button is the default.

View File

@ -1,4 +1,4 @@
@import '../../variables.less';
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
.mw-logo {

View File

@ -12,7 +12,7 @@
*
**/
@import '../../variables.less';
@import '../../common/variables.less';
#simpleSearch.search-form__loader:after {
// Set the i18n message.

View File

@ -1,8 +1,8 @@
@import '../../variables.less';
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@import './layout.less';
@import 'legacy/Sidebar.less';
@import 'checkboxHack.less';
@import '../layouts/screen.less';
@import '../../skins.vector.styles.legacy/components/Sidebar.less';
@import './checkboxHack.less';
.mw-sidebar-action {
// Align with the portal heading/links

View File

@ -1,5 +1,3 @@
@import 'SearchBox.less';
/**
* Minimal styling for initial no-JS server-rendered
* search form, which gets replaced by WVUI on focus.

View File

@ -1,124 +0,0 @@
/**
* Layout
*
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
* The rules here should only define the layout, not color or typography.
*/
@import '../../variables.less';
@import 'mediawiki.mixins.less';
// Header
// Header sizes defined in the description of T246170 and comment T246170#5957100
@width-grid-column-one: 11em;
@padding-vertical-header: 0.125em;
@margin-top-header: 0.625em;
@margin-bottom-header: 0.3125em;
@height-header:
@height-logo-icon +
@margin-top-header +
@margin-bottom-header +
2 * @padding-vertical-header;
// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
// Menu button
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
// Logo
// Logo sizes per specification in T245190.
@height-logo-icon: 3.125em;
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
// Search
// Canonical version of spec: T270202
// This assumes the presence of variables inside layout.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
// Personal menu
@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
// Sidebar
@margin-top-sidebar: 0.5em;
// 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
@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
// Content containers
@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 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 );
// 31.25em - 3.75em = 27.5em @ 16
// Width used to determine when to break the personal tools onto a separate line
// below the search box.
@width-comfortable:
( 2 * @padding-horizontal-page-container ) +
@size-sidebar-button +
@margin-horizontal-sidebar-button-icon +
@min-width-logo +
( 2 * @margin-horizontal-search ) +
@max-width-search +
@min-width-personal-tools;
// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
@border-color-sidebar: @background-color-secondary--modern;
@background-color-secondary--modern: #f8f9fa;
@background-color-page-container: @background-color-base;
// Default layout.
@import 'layout-default.less';

View File

@ -1,6 +1,124 @@
//
// Default layout for Modern Vector.
//
/**
* Vector modern layout styles for screen
*
* Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
* The rules here should only define the layout, not color or typography.
*/
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
// Header
// Header sizes defined in the description of T246170 and comment T246170#5957100
@width-grid-column-one: 11em;
@padding-vertical-header: 0.125em;
@margin-top-header: 0.625em;
@margin-bottom-header: 0.3125em;
@height-header:
@height-logo-icon +
@margin-top-header +
@margin-bottom-header +
2 * @padding-vertical-header;
// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
// Menu button
@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
// Logo
// Logo sizes per specification in T245190.
@height-logo-icon: 3.125em;
// The logo is variable width but typically consists of:
// - a icon (50x50)
// - a wordmark (approx 120px)
@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
// Search
// Canonical version of spec: T270202
// This assumes the presence of variables inside screen.less. DO NOT import it separately.
// Assumes various variables defined there.
@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
// Personal menu
@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16
// Sidebar
@margin-top-sidebar: 0.5em;
// 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
@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16
// Content containers
@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16
@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 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 );
// 31.25em - 3.75em = 27.5em @ 16
// Width used to determine when to break the personal tools onto a separate line
// below the search box.
@width-comfortable:
( 2 * @padding-horizontal-page-container ) +
@size-sidebar-button +
@margin-horizontal-sidebar-button-icon +
@min-width-logo +
( 2 * @margin-horizontal-search ) +
@max-width-search +
@min-width-personal-tools;
// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16
@border-color-sidebar: @background-color-secondary--modern;
@background-color-secondary--modern: #f8f9fa;
@background-color-page-container: @background-color-base;
body {
background-color: @background-color-secondary--modern;
@ -162,7 +280,7 @@ body {
.mw-footer {
border-top: @border-base;
padding: 32px 0 0 0;
padding: 0.75em;
}
// Container logic.

View File

@ -1,27 +0,0 @@
// Legacy Vector stylesheets
@import '../../variables.less';
@import 'mediawiki.mixins.less';
@media screen {
@import 'common/normalize.less';
@import 'legacy/layout.less';
@import 'common/typography.less';
// Components
@import 'Indicators.less';
@import 'SiteNotice.less';
@import 'Menu.less';
@import 'SearchBox.less';
@import 'MenuTabs.less';
@import 'TabWatchstarLink.less';
@import 'legacy/MenuDropdown.less';
@import 'MenuPortal.less';
@import 'legacy/Sidebar.less';
@import 'SidebarLogo.less';
@import 'Footer.less';
}
@media print {
@import 'common/print.less';
}

View File

@ -1,35 +1,27 @@
// Modern Vector stylesheets
/**
* Vector modern stylesheets
* See '../common/common.less' for common screen and print Vector stylesheets.
*/
@import '../../variables.less';
@import '../common/variables.less';
@import 'mediawiki.mixins.less';
@media screen {
@import 'common/normalize.less';
@import 'layout.less';
@import 'common/typography.less';
// Layouts
@import './layouts/screen.less';
// Components
@import 'Indicators.less';
@import 'SiteNotice.less';
@import 'Menu.less';
@import 'VueEnhancedSearchBox.less';
@import 'SearchBoxLoader.less';
@import 'MenuTabs.less';
@import 'TabWatchstarLink.less';
@import 'MenuDropdown.less';
@import 'MenuPortal.less';
@import 'LanguageButton.less';
@import 'Sidebar.less';
@import 'SidebarLogo.less';
@import 'Footer.less';
@import './components/SearchBoxLoader.less';
@import './components/VueEnhancedSearchBox.less';
@import './components/Sidebar.less';
@import './components/LanguageButton.less';
}
@media all {
// Component styles that should apply in all modes.
@import 'Logo.less';
// Component styles that should apply in all media.
@import './components/Logo.less';
}
@media print {
@import 'common/print.less';
@import 'layout-print.less';
@import './layouts/print.less';
}

View File

@ -111,7 +111,10 @@
"desktop",
"mobile"
],
"styles": [ "resources/skins.vector.styles/skin-legacy.less" ]
"styles": [
"resources/common/common.less",
"resources/skins.vector.styles.legacy/skin-legacy.less"
]
},
"skins.vector.styles": {
"class": "ResourceLoaderSkinModule",
@ -127,7 +130,10 @@
"desktop",
"mobile"
],
"styles": [ "resources/skins.vector.styles/skin.less" ]
"styles": [
"resources/common/common.less",
"resources/skins.vector.styles/skin.less"
]
},
"skins.vector.icons": {
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",

View File

@ -1,5 +1,5 @@
@import 'mediawiki.ui/variables.less';
@import '../variables.less';
@import '../resources/common/variables.less';
/* mediawiki.notification */

View File

@ -1,7 +1,7 @@
// Override core's `.mw-ui-icon` which defaults to 24x24.
// The Design Style Guide and its icons are now set to 20x20.
// FIXME: With core set to 20x20 this file should become obsolete, see T191021.
@import '../variables.less';
@import '../resources/common/variables.less';
.mw-portlet-lang .mw-ui-icon:before {
background-size: unit( @size-icon / @font-size-base, em ) auto;

View File

@ -1,4 +1,4 @@
@import '../variables.less';
@import '../resources/common/variables.less';
.oo-ui-defaultOverlay,
.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,