Create user preference to turn fixed width on and off

Additional changes:
* Move static classes (skin-vector-legacy and vector-toc-not-collapsed)
to skin.json

Bug: T319447
Change-Id: I3525f8bfe27445e3af83ce5cd34b4da643178fe2
This commit is contained in:
Moh'd Khier Abualruz 2022-10-17 10:43:26 +02:00 committed by Jdlrobson
parent f7d1e7b11a
commit 76d1135810
6 changed files with 71 additions and 16 deletions

View file

@ -51,5 +51,7 @@
"vector-toc-collapsible-button-label": "Toggle the table of contents",
"vector-site-nav-label": "Site",
"vector-2022-prefs-talkpage": "[[mw:Talk:Reading/Web/Desktop_Improvements|Discussion]]",
"tooltip-vector-anon-user-menu-title": "More options"
"tooltip-vector-anon-user-menu-title": "More options",
"prefs-skin-limited-width": "Enable limited width mode",
"prefs-help-skin-limited-width": "Enable limited width mode, for more centered reading and viewing experinence"
}

View file

@ -66,5 +66,7 @@
"vector-toc-collapsible-button-label": "Used as the label for the table of contents collapsible toggle button",
"vector-site-nav-label": "Accessible label for site (main menu) nav landmark",
"vector-2022-prefs-talkpage": "Link to the desktop improvements project talk page which is shown before the preview link in skin preferences. See T307113 for more information.",
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users.",
"prefs-skin-limited-width": "Used in [[Special:Preferences]]",
"prefs-help-skin-limited-width": "Help message used on [[Special:Preferences]].\n\nSee also:\n* {{msg-mw|Mypreferences}}"
}

View file

@ -240,6 +240,16 @@ final class Constants {
*/
public const FEATURE_ARTICLE_TOOLS = 'ArticleTools';
/**
* @var string
*/
public const PREF_KEY_LIMITED_WIDTH = 'skin-limited-width';
/**
* @var bool
*/
public const CONFIG_DEFAULT_LIMITED_WIDTH = 1;
/**
* This class is for namespacing constants only. Forbid construction.
* @throws FatalError

View file

@ -14,6 +14,7 @@ use MediaWiki\ResourceLoader as RL;
use MediaWiki\ResourceLoader\Hook\ResourceLoaderSiteModulePagesHook;
use MediaWiki\ResourceLoader\Hook\ResourceLoaderSiteStylesModulePagesHook;
use MediaWiki\Skins\Hook\SkinPageReadyConfigHook;
use MediaWiki\User\Hook\UserGetDefaultOptionsHook;
use OutputPage;
use RuntimeException;
use Skin;
@ -37,7 +38,8 @@ class Hooks implements
ResourceLoaderSiteModulePagesHook,
ResourceLoaderSiteStylesModulePagesHook,
RequestContextCreateSkinHook,
SkinPageReadyConfigHook
SkinPageReadyConfigHook,
UserGetDefaultOptionsHook
{
/**
* Checks if the current skin is a variant of Vector
@ -631,6 +633,13 @@ class Hooks implements
Constants::CONFIG_KEY_DEFAULT_SIDEBAR_VISIBLE_FOR_AUTHORISED_USER
),
],
Constants::PREF_KEY_LIMITED_WIDTH => [
'type' => 'toggle',
'label-message' => 'prefs-skin-limited-width',
'section' => 'rendering/skin/skin-prefs',
'help-message' => 'prefs-help-skin-limited-width',
'hide-if' => [ '!==', 'wpskin', Constants::SKIN_NAME_MODERN ],
]
];
$prefs += $vectorPrefs;
}
@ -708,27 +717,24 @@ class Hooks implements
//
// See https://codesearch.wmcloud.org/deployed/?q=skin-vector-legacy for an up-to-date
// list.
if ( self::isSkinVersionLegacy( $skinName ) ) {
$bodyAttrs['class'] .= ' skin-vector-legacy';
}
$tocClasses = self::getTocClasses( $sk, $config );
if ( $tocClasses ) {
$bodyAttrs['class'] .= ' ' . implode( ' ', $tocClasses );
}
$shouldDisableMaxWidth = !self::isSkinVersionLegacy( $skinName ) &&
$sk->getTitle() &&
self::shouldDisableMaxWidth(
$config->get( 'VectorMaxWidthOptions' ),
$sk->getTitle(),
$out->getRequest()->getValues()
);
// Should we disable the max-width styling?
if ( !self::isSkinVersionLegacy( $skinName ) && $sk->getTitle() && self::shouldDisableMaxWidth(
$config->get( 'VectorMaxWidthOptions' ),
$sk->getTitle(),
$out->getRequest()->getValues()
) ) {
if ( $sk instanceof SkinVector22 && ( !$sk->hasUserLimitedWidthEnabled() || $shouldDisableMaxWidth ) ) {
$bodyAttrs['class'] .= ' skin-vector-disable-max-width';
}
// TOC is not collapsed by default
$bodyAttrs['class'] .= ' vector-toc-not-collapsed';
$featureManager = VectorServices::getFeatureManager();
$bodyAttrs['class'] .= ' ' . implode( ' ', $featureManager->getFeatureBodyClass() );
$bodyAttrs['class'] = trim( $bodyAttrs['class'] );
@ -869,4 +875,11 @@ class Hooks implements
private static function isSkinVersionLegacy( $skinName ): bool {
return $skinName === Constants::SKIN_NAME_LEGACY;
}
/**
* @inheritDoc
*/
public function onUserGetDefaultOptions( &$defaultOptions ) {
$defaultOptions[ Constants::PREF_KEY_LIMITED_WIDTH ] = Constants::CONFIG_DEFAULT_LIMITED_WIDTH;
}
}

View file

@ -2,6 +2,8 @@
namespace MediaWiki\Skins\Vector;
use MediaWiki\MediaWikiServices;
/**
* @ingroup Skins
* @package Vector
@ -194,4 +196,25 @@ class SkinVector22 extends SkinVector {
) : false,
] );
}
/**
* Indicates if this skin should be shown with max-width.
* @internal
* @since 1.40
*
* @return bool
*/
public function hasUserLimitedWidthEnabled() {
$userOptionsLookup = MediaWikiServices::getInstance()->getUserOptionsLookup();
$isSkinModern = $this->getSkin()->getSkinName() === Constants::SKIN_NAME_MODERN;
$isLimitedWidth = $userOptionsLookup->getOption(
$this->getSkin()->getUser(),
Constants::PREF_KEY_LIMITED_WIDTH
);
$isLimitedWidth = $isLimitedWidth === null ? true : $userOptionsLookup->getBoolOption(
$this->getUser(),
Constants::PREF_KEY_LIMITED_WIDTH
);
return $isSkinModern && $this->getSkin()->getTitle() && $isLimitedWidth;
}
}

View file

@ -39,7 +39,8 @@
},
"bodyClasses": [
"skin-vector",
"skin-vector-search-vue"
"skin-vector-search-vue",
"vector-toc-not-collapsed"
],
"menus": [
"user-interface-preferences",
@ -107,6 +108,9 @@
"tag": "span"
}
},
"bodyClasses": [
"skin-vector-legacy"
],
"scripts": [
"skins.vector.legacy.js"
],
@ -166,7 +170,8 @@
"OutputPageBodyAttributes": "VectorHooks",
"ResourceLoaderSiteModulePages": "VectorHooks",
"ResourceLoaderSiteStylesModulePages": "VectorHooks",
"SkinPageReadyConfig": "VectorHooks"
"SkinPageReadyConfig": "VectorHooks",
"UserGetDefaultOptions": "VectorHooks"
},
"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
"ResourceModules": {