Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove the need for Vector's ResourceLoaderLessModule and wgVectorPrintLogo

Browse source 
This allows us to remove code in Vector by using the newly added
wgLogos (see I569e0d800e147eabc7852567acd140108613f074)

The ResourceLoaderSkinModule with the logo feature enabled will surface
the horizontal wordmark at the top of pages for printed media.

Change-Id: I00899c16c0325f36b671baf17e88c2b5187b3526
Bug: T242177
Bug: T232140
This commit is contained in:
jdlrobson 2020-01-07 14:02:29 -08:00 committed by Tim Starling
parent 8cd2e13363
commit 7931d76b96
3 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
includes/resourceloader/ResourceLoaderSkinModule.php
View file

@ -76,7 +76,10 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule {
* This feature also contains all `i18n-` prefixed features.
*/
private const FEATURE_FILES = [
'logo' => [],
'logo' => [
'screen' => [ 'resources/src/mediawiki.skinning/logo.less' ],
'print' => [ 'resources/src/mediawiki.skinning/logo-print.less' ],
],
'content' => [
'screen' => [ 'resources/src/mediawiki.skinning/content.css' ],
],
@ -402,6 +405,28 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule {
return false;
}
/**
* Get language-specific LESS variables for this module.
*
* @param ResourceLoaderContext $context
* @return array
*/
protected function getLessVars( ResourceLoaderContext $context ) {
$lessVars = parent::getLessVars( $context );
$logos = self::getAvailableLogos( $this->getConfig() );
if ( isset( $logos['wordmark'] ) ) {
$logo = $logos['wordmark'];
$lessVars[ 'logo-enabled' ] = true;
$lessVars[ 'logo-wordmark-url' ] = CSSMin::buildUrlValue( $logo['src'] );
$lessVars[ 'logo-wordmark-width' ] = intval( $logo['width'] );
$lessVars[ 'logo-wordmark-height' ] = intval( $logo['height'] );
} else {
$lessVars[ 'logo-enabled' ] = false;
}
return $lessVars;
}
public function getDefinitionSummary( ResourceLoaderContext $context ) {
$summary = parent::getDefinitionSummary( $context );
$summary[] = [

10
resources/src/mediawiki.skinning/logo-print.less Normal file
View file

@ -0,0 +1,10 @@
/* stylelint-disable-next-line selector-class-pattern */
.firstHeading {
// Bring back the wordmark to the viewport (see logo.less for how it's rendered outside the viewport).
& when( @logo-enabled = 1 ) {
&:before {
left: auto;
position: relative;
}
}
}

23
resources/src/mediawiki.skinning/logo.less Normal file
View file

@ -0,0 +1,23 @@
// We have to render the wordmark image before the print dialog is invoked, otherwise the image
// won't render in the printed file. Use a little hack to render the image outside the viewport
// and bring it in the viewport in print view.
/* stylelint-disable-next-line selector-class-pattern */
.firstHeading {
// We could also use a CSS background to display the logo.
// The problem is that the logo won't be printed unless the user prints the background too.
// Note. This specification does not fully define the interaction of :before and :after with
// replaced elements (such as IMG in HTML). This will be defined in more detail in a future
// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
& when( @logo-enabled = 1 ) {
&:before {
content: @logo-wordmark-url;
display: block;
height: ~'@{logo-wordmark-height}px';
left: -9999px;
line-height: 0; // line-height is needed for correctly displaying the size of the content box.
margin-bottom: 20px;
position: absolute;
width: ~'@{logo-wordmark-width}px';
}
}
}