Merge "Use client preferences for appearances menu"

This commit is contained in:
jenkins-bot 2024-04-16 18:02:38 +00:00 committed by Gerrit Code Review
commit f0673ac58a
9 changed files with 36 additions and 6 deletions

View file

@ -28,6 +28,7 @@ class VectorComponentClientPrefs implements VectorComponent {
FeatureManager $featureManager
) {
$this->localizer = $localizer;
// FIXME: isPinned is no longer accurate because the appearance menu uses client preferences
$this->isPinned = $featureManager->isFeatureEnabled( Constants::FEATURE_CLIENT_PREFS_PINNED );
}

View file

@ -43,6 +43,7 @@ class VectorComponentTableOfContents implements VectorComponent {
) {
$this->tocData = $tocData;
$this->localizer = $localizer;
// FIXME: isPinned is no longer accurate because the appearance menu uses client preferences
$this->isPinned = $featureManager->isFeatureEnabled( Constants::FEATURE_TOC_PINNED );
$this->config = $config;
$this->pinnableHeader = new VectorComponentPinnableHeader(

View file

@ -195,6 +195,7 @@ class FeatureManager {
break;
case CONSTANTS::FEATURE_LIMITED_WIDTH:
case CONSTANTS::FEATURE_TOC_PINNED:
case CONSTANTS::FEATURE_CLIENT_PREFS_PINNED:
$suffixEnabled = 'clientpref-1';
$suffixDisabled = 'clientpref-0';
break;

View file

@ -265,7 +265,7 @@ class FeatureManagerFactory {
]
);
// Feature: T345363: Client preferences dialog
// Feature: T345363: Client preferences menu
// ============================================
$featureManager->registerRequirement(
new OverridableConfigRequirement(

View file

@ -14,6 +14,7 @@ function save( feature, enabled ) {
switch ( feature ) {
case 'toc-pinned':
case 'limited-width':
case 'client-prefs-pinned':
// Save the setting under the new system
// @ts-ignore https://github.com/wikimedia/typescript-types/pull/44
mw.user.clientPrefs.set( `vector-feature-${ feature }`, enabled ? '1' : '0' );

View file

@ -239,12 +239,29 @@ function movePinnableElement( pinnableElementId, newContainerId ) {
popupNotification.hideAll();
}
/**
* Update the pinnable element location in the DOM based off of whether its pinned or not.
* This is only necessary with pinnable elements that use client preferences (i.e. appearances menu)
* as all other pinnable elements should be serverside rendered in the correct location
*
* @param {HTMLElement} header
*/
function updatePinnableElementLocation( header ) {
const newContainerId = isPinned( header ) ?
header.dataset.pinnedContainerId :
header.dataset.unpinnedContainerId;
if ( header.dataset.pinnableElementId && newContainerId ) {
movePinnableElement( header.dataset.pinnableElementId, newContainerId );
}
}
function initPinnableElement() {
const pinnableHeader = /** @type {NodeListOf<HTMLElement>} */ ( document.querySelectorAll( '.vector-pinnable-header' ) );
pinnableHeader.forEach( ( header ) => {
if ( header.dataset.featureName && header.dataset.pinnableElementId ) {
bindPinnableToggleButtons( header );
bindPinnableBreakpoint( header );
updatePinnableElementLocation( header );
}
} );
}

View file

@ -1,6 +1,9 @@
// Ensure there is only 1 client prefs landmark at anytime
// TODO: Remove old classes after has been in prod
.vector-feature-client-prefs-pinned-enabled .vector-user-links .vector-client-prefs-landmark,
.vector-feature-client-prefs-pinned-disabled .vector-column-end .vector-client-prefs-landmark {
.vector-feature-client-prefs-pinned-disabled .vector-column-end .vector-client-prefs-landmark,
.vector-feature-client-prefs-pinned-clientpref-1 .vector-user-links .vector-client-prefs-landmark,
.vector-feature-client-prefs-pinned-clientpref-0 .vector-column-end .vector-client-prefs-landmark {
display: none;
}

View file

@ -31,8 +31,10 @@
grid-area: footer;
}
// Remove selector after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
.vector-feature-page-tools-pinned-enabled .vector-column-end,
.vector-feature-client-prefs-pinned-enabled .vector-column-end {
.vector-feature-client-prefs-pinned-enabled .vector-column-end,
.vector-feature-client-prefs-pinned-clientpref-1 .vector-column-end {
width: @width-column-desktop;
}
@ -65,8 +67,10 @@
}
}
// TODO: Remove old classes after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
.vector-feature-page-tools-pinned-enabled .vector-column-end,
.vector-feature-client-prefs-pinned-enabled .vector-column-end {
.vector-feature-client-prefs-pinned-enabled .vector-column-end,
.vector-feature-client-prefs-pinned-clientpref-1 .vector-column-end {
width: @width-column-desktop-wide;
}
}
@ -122,8 +126,10 @@
}
}
// TODO: Remove old classes after I636a557e724f23ea18da135bac59cb304ba81091 has been in prod
.vector-feature-page-tools-pinned-enabled .mw-body,
.vector-feature-client-prefs-pinned-enabled .mw-body {
.vector-feature-client-prefs-pinned-enabled .mw-body,
.vector-feature-client-prefs-pinned-clientpref-1 .mw-body {
column-gap: @grid-column-gap;
}