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

[anon prefs] TOC pinned / unpinned

Browse source 
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC

Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1

Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
This commit is contained in:
Moh'd Khier Abualruz 2023-09-14 17:27:58 +02:00 committed by Jdlrobson
parent 9db0f9c3c4
commit c88d72f1d7
7 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/FeatureManagement/FeatureManager.php
View file

@ -140,6 +140,7 @@ class FeatureManager {
// Client side preferences
switch ( $featureClass ) {
case 'toc-pinned':
case 'limited-width':
$suffixEnabled = 'clientpref-1';
$suffixDisabled = 'clientpref-0';

1
resources/skins.vector.js/features.js
View file

@ -12,6 +12,7 @@ const debounce = require( /** @type {string} */ ( 'mediawiki.util' ) ).debounce;
function save( feature, enabled ) {
if ( !mw.user.isNamed() ) {
switch ( feature ) {
case 'toc-pinned':
case 'limited-width':
// Save the setting under the new system
// @ts-ignore https://github.com/wikimedia/typescript-types/pull/44

4
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -145,13 +145,15 @@
transform: translateY( 0 );
}
// - T314330 `.vector-feature-toc-pinned-enabled #vector-toc-pinned-container`
// - T314330 `.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container`
// Prevent ToC from jumping when sticky header is enabled.
// - T289817 `.mw-sticky-header-element` provides an API for template developers
// to make their templates compatible with the Vector 2022 sticky header.
// @stable See the Integration notes for developers section at
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
// - `.charts-stickyhead th` makes chart and table headers appear below the sticky header.
&.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container,
&.vector-feature-toc-pinned-enabled #vector-toc-pinned-container,
&.vector-feature-page-tools-pinned-enabled .vector-page-tools-landmark,
.mw-sticky-header-element,

4
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -136,6 +136,10 @@
display: none;
}
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible .vector-sticky-header-context-bar,
&.vector-feature-toc-pinned-clientpref-1 .mw-page-container-inner,
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) .vector-page-titlebar,
&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible .vector-sticky-header-context-bar,
&.vector-feature-toc-pinned-enabled .mw-page-container-inner {

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

@ -81,7 +81,9 @@
}
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-0 .mw-content-container,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-disabled .mw-content-container {
grid-column: mainMenu / pageContent;
margin-left: auto;

6
resources/skins.vector.styles/layouts/toc/pinned.less
View file

@ -8,6 +8,8 @@
}
@media ( min-width: @min-width-desktop ) {
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc,
&.vector-feature-toc-pinned-enabled #mw-panel-toc {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
@ -25,11 +27,15 @@
top: 0;
}
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container,
&.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container,
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;

10
resources/skins.vector.styles/layouts/toc/unpinned.less
View file

@ -70,6 +70,8 @@
//
// TOC in page titlebar
//
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ),
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ) {
.vector-page-titlebar-toc {
.mixin-toc-unpinned();
@ -79,6 +81,8 @@
//
// TOC in page titlebar below page title
//
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-0 body:not( .vector-sticky-header-visible ).vector-below-page-title,
&.vector-feature-toc-pinned-disabled body:not( .vector-sticky-header-visible ).vector-below-page-title {
.vector-page-titlebar-toc {
.mixin-toc-below-page-title();
@ -88,6 +92,8 @@
//
// TOC in sticky header
//
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-0 .vector-sticky-header-visible,
&.vector-feature-toc-pinned-disabled .vector-sticky-header-visible {
.vector-sticky-header-toc {
.mixin-toc-unpinned();
@ -100,6 +106,8 @@
//
// No-JS TOC in page titlebar
//
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-0,
&.vector-feature-toc-pinned-disabled {
.vector-page-titlebar-toc {
.mixin-toc-unpinned();
@ -113,6 +121,8 @@
// Make the TOC appear in the page titlebar on small viewports
// even when the TOC location in the DOM is actually in the sidebar
// This case only happens for no-js anon users.
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-toc-pinned-clientpref-1,
&.vector-feature-toc-pinned-enabled {
#vector-toc-collapsed-button {
display: block;