Merge "Remove badgeicon module, use OOUI icon instead."

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": {

includes/EchoHooks.php

@@ -839,7 +839,7 @@ class EchoHooks {
 			// Load the styles for the Notifications badge
 			$out->addModuleStyles( [
 				'ext.echo.styles.badge',
-				'ext.echo.badgeicons'
+				'oojs-ui.styles.icons-alerts'
 			] );
 		}
 
@@ -975,8 +975,8 @@ class EchoHooks {
 		$sk->getOutput()->setupOOUI(
 			strtolower( $sk->getSkinName() ), $sk->getOutput()->getLanguage()->getDir() );
 
-		$msgLinkClasses = [ "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" ];
+		$alertLinkClasses = [ "mw-echo-notifications-badge", "mw-echo-notification-badge-nojs", "oo-ui-icon-bell" ];
 
 		$hasUnseen = false;
 		if (

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
+			// We already load OOUI icons in the BeforePageDisplay hook, but not for minerva
-			'ext.echo.badgeicons'
+			'oojs-ui.styles.icons-alerts'
 		] );
 
 		// Log visit

modules/icons/badgeicons.json

@@ -1,15 +0,0 @@
-{
-	"variants": {
-		"invert": {
-			"color": "#FFFFFF"
-		}
-	},
-	"images": {
-		"bell": {
-			"file": "icons/bell.svg"
-		},
-		"tray": {
-			"file": "icons/tray.svg"
-		}
-	}
-}

modules/icons/bell.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<title>
-		bell
-	</title>
-	<path d="M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z"/>
-</svg>

modules/icons/tray.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-	<title>
-		tray
-	</title>
-	<path d="M17 1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 12h-4l-1 2H8l-1-2H3V3h14z"/>
-</svg>

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
+		// Later we put the counter back onscreen with a zero text-indent
-		top: -@badge-offscreen-offset - 5px;
+		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 {

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 );