diff --git a/README.md b/README.md new file mode 100644 index 0000000..4b3f40b --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +Vector Skin +======================== + +Configuration options +--------------------- + +### $wgVectorPrintLogo + +Logo used in print styles. Keys are `url`, `width`, and `height` (in +pixels). Note that this solution only works correctly if the image +pointed to by `url` is an SVG that does not specify width and height +attributes, or its width and height match the corresponding variables +below. Alternatively, a PNG or other type of image can be used, but +its dimensions also need to match the corresponding variable below. +That in turn may result in blurry images, though. + +Example configuration: + + $wgVectorPrintLogo = [ + 'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', + 'width' => 174, + 'height' => 27 + ]; + +* Type: `Array` +* Default: `false` diff --git a/ResourceLoaderLessModule.php b/ResourceLoaderLessModule.php new file mode 100644 index 0000000..ca980fd --- /dev/null +++ b/ResourceLoaderLessModule.php @@ -0,0 +1,55 @@ +getConfigFactory()->makeConfig( 'vector' ); + $printLogo = $config->get( 'VectorPrintLogo' ); + if ( $printLogo ) { + $lessVars[ 'printLogo' ] = true; + $lessVars[ 'printLogoUrl' ] = CSSMin::buildUrlValue( $printLogo['url'] ); + $lessVars[ 'printLogoWidth' ] = intval( $printLogo['width'] ); + $lessVars[ 'printLogoHeight' ] = intval( $printLogo['height'] ); + } else { + $lessVars[ 'printLogo' ] = false; + } + return $lessVars; + } +} diff --git a/print.less b/print.less index 3b3f26f..c518577 100644 --- a/print.less +++ b/print.less @@ -40,6 +40,22 @@ line-height: 28pt; margin-bottom: 20px; padding-bottom: 5px; + + // 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( @printLogo = 1 ) { + &:before { + content: @printLogoUrl; + display: block; + height: ~'@{printLogoHeight}px'; + line-height: 0; // line-height is needed for correctly displaying the size of the content box. + margin-bottom: 10px; + width: ~'@{printLogoWidth}px'; + } + } } // Headings diff --git a/skin.json b/skin.json index 3694d6d..f283c67 100644 --- a/skin.json +++ b/skin.json @@ -27,7 +27,8 @@ "AutoloadClasses": { "VectorHooks": "Hooks.php", "SkinVector": "SkinVector.php", - "VectorTemplate": "VectorTemplate.php" + "VectorTemplate": "VectorTemplate.php", + "Vector\\ResourceLoaderLessModule": "ResourceLoaderLessModule.php" }, "Hooks": { "BeforePageDisplayMobile": [ @@ -49,6 +50,7 @@ } }, "skins.vector.styles.experimental.print": { + "class": "Vector\\ResourceLoaderLessModule", "targets": [ "desktop", "mobile" ], "position": "top", "styles": [ @@ -110,7 +112,8 @@ "VectorUseIconWatch": true, "@VectorExperimentalPrintStyles": "Temporary config variable to feature flag new print styles (T154965)", "VectorExperimentalPrintStyles": false, - "VectorResponsive": false + "VectorResponsive": false, + "VectorPrintLogo": false }, "manifest_version": 1 }