diff --git a/extension.json b/extension.json index b493537..c1ad7fe 100644 --- a/extension.json +++ b/extension.json @@ -19,7 +19,7 @@ ] }, "Hooks": { - "SkinTemplateOutputPageBeforeExec": "CookieWarning\\Hooks::onSkinTemplateOutputPageBeforeExec", + "SiteNoticeAfter": "CookieWarning\\Hooks::onSiteNoticeAfter", "BeforePageDisplay": "CookieWarning\\Hooks::onBeforePageDisplay", "GetPreferences": "CookieWarning\\Hooks::onGetPreferences", "BeforeInitialize": "CookieWarning\\Hooks::onBeforeInitialize", @@ -98,6 +98,9 @@ }, "ext.CookieWarning.mobile.styles": { "styles": "resources/ext.CookieWarning/ext.CookieWarning.mobile.less", + "skinStyles": { + "minerva": "skinStyles/ext.CookieWarning.minerva.styles.less" + }, "targets": [ "mobile" ] diff --git a/includes/Hooks.php b/includes/Hooks.php index 9d22a48..358b88a 100644 --- a/includes/Hooks.php +++ b/includes/Hooks.php @@ -11,8 +11,7 @@ use MediaWiki\MediaWikiServices; use MobileContext; use MWException; use OutputPage; -use QuickTemplate; -use SkinTemplate; +use Skin; use Title; use User; use WebRequest; @@ -49,41 +48,55 @@ class Hooks { } /** - * SkinTemplateOutputPageBeforeExec hook handler. + * SiteNoticeAfter hook handler. * - * Adds the CookieWarning information bar to the output html. + * Adds the CookieWarning information bar to the output html for mobile. * - * @param SkinTemplate &$sk - * @param QuickTemplate &$tpl + * @param string &$siteNotice + * @param Skin $skin * @throws ConfigException * @throws MWException + * @return bool|void True or no return value to continue or false to abort */ - public static function onSkinTemplateOutputPageBeforeExec( - SkinTemplate &$sk, QuickTemplate &$tpl + public static function onSiteNoticeAfter( + string &$siteNotice, + Skin $skin ) { /** @var Decisions $cookieWarningDecisions */ $cookieWarningDecisions = MediaWikiServices::getInstance() ->getService( 'CookieWarning.Decisions' ); - if ( !$cookieWarningDecisions->shouldShowCookieWarning( $sk->getContext() ) ) { + if ( !$cookieWarningDecisions->shouldShowCookieWarning( $skin->getContext() ) ) { return; } + + $isMobile = ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) && + MobileContext::singleton()->shouldDisplayMobileView(); + + $siteNotice .= self::generateElements( $skin, $isMobile ); + } + + /** + * Generates the elements for the banner. + * + * @param Skin $skin + * @param bool $isMobile This will return true if using mobile site. + * @return string|null The html for cookie notice. + */ + private static function generateElements( Skin $skin, bool $isMobile ) { $moreLink = self::getMoreLink(); if ( $moreLink ) { $moreLink = "\u{00A0}" . Html::element( 'a', [ 'href' => $moreLink ], - $sk->msg( 'cookiewarning-moreinfo-label' )->text() + $skin->msg( 'cookiewarning-moreinfo-label' )->text() ); } - if ( !isset( $tpl->data['headelement'] ) ) { - $tpl->data['headelement'] = ''; - } $form = Html::openElement( 'form', [ 'method' => 'POST' ] ) . Html::submitButton( - $sk->msg( 'cookiewarning-ok-label' )->text(), + $skin->msg( 'cookiewarning-ok-label' )->text(), [ 'name' => 'disablecookiewarning', 'class' => 'mw-cookiewarning-dismiss' @@ -97,16 +110,13 @@ class Hooks { "\u{1F36A}" ); - $isMobile = ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) && - MobileContext::singleton()->shouldDisplayMobileView(); - $tpl->data['headelement'] .= Html::openElement( + return Html::openElement( 'div', // banner-container marks this as a banner for Minerva // Note to avoid this class, in future we may want to make use of SiteNotice // or banner display [ 'class' => 'mw-cookiewarning-container banner-container' ] ) . - ( $isMobile ? $form : '' ) . Html::openElement( 'div', [ 'class' => 'mw-cookiewarning-text' ] @@ -115,11 +125,11 @@ class Hooks { Html::element( 'span', [], - $sk->msg( 'cookiewarning-info' )->text() + $skin->msg( 'cookiewarning-info' )->text() ) . $moreLink . - ( !$isMobile ? $form : '' ) . Html::closeElement( 'div' ) . + $form . Html::closeElement( 'div' ); } diff --git a/resources/ext.CookieWarning/ext.CookieWarning.less b/resources/ext.CookieWarning/ext.CookieWarning.less index 0b7179f..01fccdf 100644 --- a/resources/ext.CookieWarning/ext.CookieWarning.less +++ b/resources/ext.CookieWarning/ext.CookieWarning.less @@ -1,8 +1,15 @@ +@z-index: 1999; + +/* stylelint-disable selector-max-id */ +#siteNotice { + z-index: @z-index; +} +/* stylelint-enable selector-max-id */ + .mw-cookiewarning-container { position: fixed; - background-color: #5a5a5a; + background-color: rgba( 90, 90, 90, 0.85 ); box-sizing: border-box; - opacity: 0.85; color: #fff; font-weight: bold; font-size: 13px; @@ -10,17 +17,7 @@ top: 0; left: 0; width: 100%; - z-index: 1999; -} - -.mw-cookiewarning-text { - span { - margin-right: 0.5em; - } - - form { - display: inline; - } + z-index: @z-index; a, .mw-cookiewarning-dismiss { @@ -37,12 +34,16 @@ font-weight: bold; font-size: 13px; } -} -.mw-mobile-mode { - .mw-cookiewarning-container { - bottom: 0; - top: inherit; - opacity: 1; + .mw-cookiewarning-text { + display: inline-block; + + span { + margin-right: 0.5em; + } + } + + form { + display: inline-block; } } diff --git a/resources/ext.CookieWarning/ext.CookieWarning.mobile.less b/resources/ext.CookieWarning/ext.CookieWarning.mobile.less index 4a5ae76..585fb0a 100644 --- a/resources/ext.CookieWarning/ext.CookieWarning.mobile.less +++ b/resources/ext.CookieWarning/ext.CookieWarning.mobile.less @@ -10,19 +10,26 @@ font-weight: 500; font-style: normal; font-stretch: normal; + display: flex; + align-items: center; + justify-content: space-between; - .mw-cookiewarning-cimage { - width: 28px; - height: 100%; - font-size: 28px; - margin-right: 15px; - float: left; - text-align: center; - line-height: 100%; + .mw-cookiewarning-text { + display: flex; + align-items: center; + + .mw-cookiewarning-cimage { + width: 28px; + height: 100%; + font-size: 28px; + margin-right: 15px; + float: left; + text-align: center; + line-height: 100%; + } } form { - float: right; margin-left: 5px; /* borrowed from mediawiki/core Login Button, following `ButtonWidget (progressive)‎` from OOjs UI */ .mw-cookiewarning-dismiss { diff --git a/skinStyles/ext.CookieWarning.minerva.styles.less b/skinStyles/ext.CookieWarning.minerva.styles.less new file mode 100644 index 0000000..9c01495 --- /dev/null +++ b/skinStyles/ext.CookieWarning.minerva.styles.less @@ -0,0 +1,12 @@ +@import 'mediawiki.ui/variables.less'; + +.mw-cookiewarning-container { + border-bottom: 1px solid #c8ccd1; + padding: 2.5em; +} + +@media all and ( min-width: @width-breakpoint-tablet ) { + .mw-cookiewarning-container { + line-height: normal; + } +} diff --git a/tests/phpunit/includes/HooksTest.php b/tests/phpunit/includes/HooksTest.php index d2a4a64..b1a0603 100644 --- a/tests/phpunit/includes/HooksTest.php +++ b/tests/phpunit/includes/HooksTest.php @@ -10,7 +10,6 @@ use FauxRequest; use MediaWiki\MediaWikiServices; use MediaWiki\Revision\SlotRecord; use MediaWikiLangTestCase; -use QuickTemplate; use RequestContext; use SkinTemplate; use Title; @@ -24,11 +23,11 @@ use WikitextContent; class HooksTest extends MediaWikiLangTestCase { /** - * @dataProvider providerOnSkinTemplateOutputPageBeforeExec + * @dataProvider providerOnSiteNoticeAfter * @throws \MWException * @throws \ConfigException */ - public function testOnSkinTemplateOutputPageBeforeExec( $enabled, $morelinkConfig, + public function testOnSiteNoticeAfter( $enabled, $morelinkConfig, $morelinkCookieWarningMsg, $morelinkCookiePolicyMsg, $expectedLink ) { $this->setMwGlobals( [ @@ -53,28 +52,21 @@ class HooksTest extends MediaWikiLangTestCase { $pageUpdater->saveRevision( CommentStoreComment::newUnsavedComment( 'CookieWarning test' ) ); } $sk = new SkinTemplate(); - $tpl = new class extends QuickTemplate { - public function execute() { - } - }; - Hooks::onSkinTemplateOutputPageBeforeExec( $sk, $tpl ); - $headElement = ''; - if ( isset( $tpl->data['headelement'] ) ) { - $headElement = $tpl->data['headelement']; - } + $data = ''; + Hooks::onSiteNoticeAfter( $data, $sk ); if ( $expectedLink === false ) { $expected = ''; } else { // @codingStandardsIgnoreStart Generic.Files.LineLength $expected = str_replace( '$1', $expectedLink, - '' ); + '' ); // @codingStandardsIgnoreEnd } - $this->assertEquals( $expected, $headElement ); + $this->assertEquals( $expected, $data ); } - public function providerOnSkinTemplateOutputPageBeforeExec() { + public function providerOnSiteNoticeAfter() { return [ [ // $wgCookieWarningEnabled @@ -142,11 +134,11 @@ class HooksTest extends MediaWikiLangTestCase { } /** - * @dataProvider providerOnSkinTemplateOutputPageBeforeExecGeoLocation + * @dataProvider providerOnSiteNoticeAfterGeoLocation * @throws \MWException * @throws \ConfigException */ - public function testOnSkinTemplateOutputPageBeforeExecGeoLocation( $ipAddress, $countryCodes, + public function testOnSiteNoticeAfterGeoLocation( $ipAddress, $countryCodes, $expected ) { $this->setMwGlobals( [ @@ -162,19 +154,16 @@ class HooksTest extends MediaWikiLangTestCase { $context->setRequest( $request ); $sk = new SkinTemplate(); $sk->setContext( $context ); - $tpl = new class extends QuickTemplate { - public function execute() { - } - }; - Hooks::onSkinTemplateOutputPageBeforeExec( $sk, $tpl ); + $data = ''; + Hooks::onSiteNoticeAfter( $data, $sk ); $this->assertEquals( $expected, - isset( $tpl->data['headelement'] ) && (bool)$tpl->data['headelement'] + (bool)$data ); } - public function providerOnSkinTemplateOutputPageBeforeExecGeoLocation() { + public function providerOnSiteNoticeAfterGeoLocation() { return [ [ '8.8.8.8',