wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Additional FIXME cleanup relating to moving feature classes from body

Browse source 
Additional follow up to Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
(55bb37f2a)

Change-Id: Id98161572a09b1d3fc340d75bd8e28b277d68e30
This commit is contained in:
bwang 2023-02-07 14:23:19 -06:00
parent aea2e88ddb
commit f415a556dd
5 changed files with 16 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
resources/skins.vector.es6/features.js
View file

@ -33,32 +33,6 @@ function save( feature, enabled ) {
}
}
/**
*
* @param {string} name feature name
* @param {boolean} [override] option to force enabled or disabled state.
*
* @return {boolean} The new feature state (false=disabled, true=enabled).
* @throws {Error} if unknown feature toggled.
*/
function toggleBodyClasses( name, override ) {
const featureClassEnabled = 'vector-feature-' + name + '-enabled',
classList = document.body.classList,
featureClassDisabled = 'vector-feature-' + name + '-disabled';
if ( classList.contains( featureClassDisabled ) || override === true ) {
classList.remove( featureClassDisabled );
classList.add( featureClassEnabled );
return true;
} else if ( classList.contains( featureClassEnabled ) || override === false ) {
classList.add( featureClassDisabled );
classList.remove( featureClassEnabled );
return false;
} else {
throw new Error( 'Attempt to toggle unknown feature: ' + name );
}
}
/**
*
* @param {string} name feature name
@ -81,9 +55,7 @@ function toggleDocClasses( name, override ) {
classList.remove( featureClassEnabled );
return false;
} else {
// Perhaps we are dealing with cached HTML ?
// FIXME: Can be removed and replaced with throw new Error when cache is clear.
return toggleBodyClasses( name, override );
throw new Error( `Attempt to toggle unknown feature: ${name}` );
}
}
@ -103,10 +75,7 @@ function toggle( name ) {
* @return {boolean}
*/
function isEnabled( name ) {
const className = `vector-feature-${name}-enabled`;
return document.documentElement.classList.contains( className ) ||
// FIXME: For cached HTML. Remove after one train cycle.
document.body.classList.contains( className );
return document.documentElement.classList.contains( `vector-feature-${name}-enabled` );
}
module.exports = { isEnabled, toggle, toggleDocClasses };

8
resources/skins.vector.styles/components/Header.less
View file

@ -32,16 +32,12 @@
@media ( min-width: @min-width-desktop-wide ) {
// Ensure search box is aligned with content when search thumbnails or JS is off
// FIXME: Remove html:not( .client-js ) when cache has cleared.
.vector-feature-page-tools-disabled & .vector-search-box:not( .vector-search-box-auto-expand-width ),
.vector-feature-page-tools-disabled:not( .client-js ) & .vector-search-box,
html:not( .client-js ) .vector-feature-page-tools-disabled & .vector-search-box {
.vector-feature-page-tools-disabled:not( .client-js ) & .vector-search-box {
padding-left: @size-search-expand;
}
// FIXME: Remove .client-js .vector-feature-page-tools-enabled when cache has cleared.
.client-js.vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width,
.client-js .vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width {
.client-js.vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width {
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
margin-left: -@size-search-expand;
}

16
resources/skins.vector.styles/components/TableOfContentsPinned.less
View file

@ -19,16 +19,12 @@
contain: paint;
}
// FIXME: `.vector-feature-page-tools-disabled.vector-toc-pinned` can be removed when cached HTML no longer an issue.
.vector-feature-page-tools-disabled .vector-toc-pinned &,
.vector-feature-page-tools-disabled.vector-toc-pinned & {
.vector-feature-page-tools-disabled .vector-toc-pinned & {
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -27px;
}
// FIXME: `.vector-feature-page-tools-enabled.vector-toc-pinned` can be removed when cached HTML no longer an issue.
.vector-feature-page-tools-enabled .vector-toc-pinned &,
.vector-feature-page-tools-enabled.vector-toc-pinned & {
.vector-feature-page-tools-enabled .vector-toc-pinned & {
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
}
@ -49,16 +45,12 @@
margin-top: 1.5em;
}
// FIXME: .vector-feature-page-tools-disabled.vector-toc-pinned can be removed when cached HTML no longer an issue.
.vector-feature-page-tools-disabled .vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
.vector-feature-page-tools-disabled .vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
// Needed to align TOC with bottom of title.
margin-top: @margin-top-pinned-toc;
}
// FIXME: .vector-feature-page-tools-enabled.vector-toc-pinned can be removed when cached HTML no longer an issue.
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned &,
.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-toc-pinned & {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}

8
resources/skins.vector.styles/layouts/grid.less
View file

@ -109,10 +109,8 @@
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-page-tools-disabled {
// FIXME: &.vector-toc-unpinned can be removed when cache is clear.
@{selector-sidebar-no-toc-sidebar-closed},
.vector-toc-unpinned @{selector-main-menu-closed},
&.vector-toc-unpinned @{selector-main-menu-closed} {
.vector-toc-unpinned @{selector-main-menu-closed} {
& ~ .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
@ -124,10 +122,8 @@
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
.vector-feature-page-tools-enabled {
// FIXME: &.vector-toc-unpinned can be removed when cache is clear.
&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
&.vector-feature-main-menu-pinned-disabled .vector-toc-unpinned .mw-content-container,
&.vector-toc-unpinned.vector-feature-main-menu-pinned-disabled .mw-content-container {
&.vector-feature-main-menu-pinned-disabled .vector-toc-unpinned .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;
margin-right: auto;

12
tests/jest/skins.vector.es6/features.test.js
View file

@ -2,7 +2,7 @@ const features = require( '../../../resources/skins.vector.es6/features.js' );
describe( 'features', () => {
beforeEach( () => {
document.body.setAttribute( 'class', 'vector-feature-foo-disabled vector-feature-bar-enabled hello' );
document.documentElement.setAttribute( 'class', 'vector-feature-foo-disabled vector-feature-bar-enabled hello' );
} );
test( 'toggle', () => {
@ -10,19 +10,19 @@ describe( 'features', () => {
features.toggle( 'bar' );
expect(
document.body.classList.contains( 'vector-feature-foo-enabled' )
document.documentElement.classList.contains( 'vector-feature-foo-enabled' )
).toBe( true );
expect(
document.body.classList.contains( 'vector-feature-foo-disabled' )
document.documentElement.classList.contains( 'vector-feature-foo-disabled' )
).toBe( false );
expect(
document.body.classList.contains( 'vector-feature-bar-disabled' )
document.documentElement.classList.contains( 'vector-feature-bar-disabled' )
).toBe( true );
expect(
document.body.classList.contains( 'vector-feature-bar-enabled' )
document.documentElement.classList.contains( 'vector-feature-bar-enabled' )
).toBe( false );
expect(
document.body.classList.contains( 'hello' )
document.documentElement.classList.contains( 'hello' )
).toBe( true );
} );