mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 07:43:47 +00:00
Merge "Use client preferences for appearances menu"
This commit is contained in:
commit
f0673ac58a
|
@ -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 );
|
||||
}
|
||||
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -265,7 +265,7 @@ class FeatureManagerFactory {
|
|||
]
|
||||
);
|
||||
|
||||
// Feature: T345363: Client preferences dialog
|
||||
// Feature: T345363: Client preferences menu
|
||||
// ============================================
|
||||
$featureManager->registerRequirement(
|
||||
new OverridableConfigRequirement(
|
||||
|
|
|
@ -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' );
|
||||
|
|
|
@ -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 );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue