From c86a1a5cf34cc4b64d6479a57e734f1fa4926431 Mon Sep 17 00:00:00 2001 From: shivanshbindal9 Date: Sun, 14 Apr 2019 00:15:11 +0530 Subject: [PATCH] Remove badgeicon module, use OOUI icon instead. Now that OOUI's "alerts" icon pack includes all the icons we need, we can use it and get rid of the badgeicons module. Bug: T139779 Change-Id: I8218530ed2cdd2d81c1fc24509f36ea2b6742bd9 --- extension.json | 8 +---- includes/EchoHooks.php | 6 ++-- includes/special/SpecialNotifications.php | 4 +-- modules/icons/badgeicons.json | 15 -------- modules/icons/bell.svg | 7 ---- modules/icons/tray.svg | 7 ---- modules/nojs/mw.echo.badge.less | 42 ++++------------------- modules/ui/mw.echo.ui.BadgeLinkWidget.js | 7 ++++ 8 files changed, 20 insertions(+), 76 deletions(-) delete mode 100644 modules/icons/badgeicons.json delete mode 100644 modules/icons/bell.svg delete mode 100644 modules/icons/tray.svg diff --git a/extension.json b/extension.json index f7e494b8f..45e3f0e8d 100644 --- a/extension.json +++ b/extension.json @@ -386,12 +386,6 @@ "desktop", "mobile" ] - }, - "ext.echo.badgeicons": { - "class": "ResourceLoaderImageModule", - "data": "icons/badgeicons.json", - "selectorWithoutVariant": ".oo-ui-icon-{name}", - "selectorWithVariant": ".oo-ui-image-{variant}.oo-ui-icon-{name}" } }, "ResourceFileModulePaths": { @@ -1021,4 +1015,4 @@ "UpdateEchoSchemaForSuppression": "maintenance/updateEchoSchemaForSuppression.php", "EchoUpdatePerUserBlacklist": "maintenance/updatePerUserBlacklist.php" } -} +} \ No newline at end of file diff --git a/includes/EchoHooks.php b/includes/EchoHooks.php index ece4a345e..be74fda5f 100644 --- a/includes/EchoHooks.php +++ b/includes/EchoHooks.php @@ -864,7 +864,7 @@ class EchoHooks { // Load the styles for the Notifications badge $out->addModuleStyles( [ 'ext.echo.styles.badge', - 'ext.echo.badgeicons' + 'oojs-ui.styles.icons-alerts' ] ); } @@ -998,8 +998,8 @@ class EchoHooks { $sk->getOutput()->setupOOUI( strtolower( $sk->getSkinName() ), $sk->getOutput()->getLanguage()->getDir() ); - $msgLinkClasses = [ "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs" ]; - $alertLinkClasses = [ "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs" ]; + $msgLinkClasses = [ "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs","oo-ui-icon-tray" ]; + $alertLinkClasses = [ "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs", "oo-ui-icon-bell" ]; $hasUnseen = false; if ( diff --git a/includes/special/SpecialNotifications.php b/includes/special/SpecialNotifications.php index 0304c8f39..6a5edc695 100644 --- a/includes/special/SpecialNotifications.php +++ b/includes/special/SpecialNotifications.php @@ -234,8 +234,8 @@ class SpecialNotifications extends SpecialPage { $out->addModuleStyles( [ 'ext.echo.styles.notifications', 'ext.echo.styles.special', - // We already load badgeicons in the BeforePageDisplay hook, but not for minerva - 'ext.echo.badgeicons' + // We already load OOUI icons in the BeforePageDisplay hook, but not for minerva + 'oojs-ui.styles.icons-alerts' ] ); // Log visit diff --git a/modules/icons/badgeicons.json b/modules/icons/badgeicons.json deleted file mode 100644 index 135261be2..000000000 --- a/modules/icons/badgeicons.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "variants": { - "invert": { - "color": "#FFFFFF" - } - }, - "images": { - "bell": { - "file": "icons/bell.svg" - }, - "tray": { - "file": "icons/tray.svg" - } - } -} diff --git a/modules/icons/bell.svg b/modules/icons/bell.svg deleted file mode 100644 index bab714651..000000000 --- a/modules/icons/bell.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - bell - - - diff --git a/modules/icons/tray.svg b/modules/icons/tray.svg deleted file mode 100644 index b3209529b..000000000 --- a/modules/icons/tray.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - tray - - - diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less index 855c14903..6f964463a 100644 --- a/modules/nojs/mw.echo.badge.less +++ b/modules/nojs/mw.echo.badge.less @@ -12,12 +12,14 @@ height: 20px; margin: 0 2px; // Hide the text, but keep accessible for screen-readers - // Later we put the icons back onscreen with an opposite offset - top: -@badge-offscreen-offset - 5px; + // Later we put the counter back onscreen with a zero text-indent + top: -5px; + text-indent: -9999px; cursor: pointer; text-decoration: none; line-height: normal; .box-sizing( border-box ); + opacity: 0.87; &:hover, &:active, @@ -30,28 +32,14 @@ opacity: 0.4; } - // Background icon - &:before { - position: absolute; - display: inline-block; - cursor: pointer; - opacity: 0.87; - content: ''; - background-repeat: no-repeat; - // Bring it back onscreen - top: @badge-offscreen-offset; - left: 0; - width: 100%; - height: 100%; - } - // Counter &:after { position: absolute; display: inline-block; cursor: pointer; // Bring it back onscreen - top: @badge-offscreen-offset + 9px; + top: 9px; + text-indent: 0; left: 55%; font-size: 0.9em; font-weight: bold; @@ -72,9 +60,7 @@ } &.mw-echo-notifications-badge-all-read { - &:before { - opacity: 0.51; - } + opacity: 0.51; &:after { visibility: hidden; @@ -82,20 +68,6 @@ } } - #pt-notifications-alert & { - &:before { - /* @embed */ - background-image: url( ../icons/bell.svg ); - } - } - - #pt-notifications-notice & { - &:before { - /* @embed */ - background-image: url( ../icons/tray.svg ); - } - } - &.oo-ui-flaggedElement-unseen, &.mw-echo-unseen-notifications { #pt-notifications-alert &:after { diff --git a/modules/ui/mw.echo.ui.BadgeLinkWidget.js b/modules/ui/mw.echo.ui.BadgeLinkWidget.js index b9015c2ec..ed1cf4c58 100644 --- a/modules/ui/mw.echo.ui.BadgeLinkWidget.js +++ b/modules/ui/mw.echo.ui.BadgeLinkWidget.js @@ -35,6 +35,13 @@ if ( config.href !== undefined && OO.ui.isSafeUrl( config.href ) ) { this.$element.attr( 'href', config.href ); } + if ( this.type === 'alert' ) { + this.$element + .addClass( 'oo-ui-icon-bell' ); + } else { + this.$element + .addClass( 'oo-ui-icon-tray' ); + } }; OO.inheritClass( mw.echo.ui.BadgeLinkWidget, OO.ui.Widget );