Merge "Revert "Do not use fancy styled badge on Modern and CologneBlue""

extension.json

@@ -193,8 +193,6 @@
 				"mediawiki.api.options"
 			],
 			"messages": [
-				"echo-notification-notice",
-				"echo-notification-alert",
 				"echo-popup-footer-special-page-invitation",
 				"echo-popup-footer-special-page-invitation-link"
 			],
@@ -407,20 +405,19 @@
 		},
 		"ext.echo.styles.badge": {
 			"position": "top",
+			"styles": [
+				"nojs/mw.echo.badge.less"
+			],
 			"skinStyles": {
-				"default": [
-					"nojs/mw.echo.badge.less"
-				],
 				"monobook": [
-					"nojs/mw.echo.badge.less",
 					"nojs/mw.echo.badge.monobook.less"
 				],
 				"vector": [
-					"nojs/mw.echo.badge.less",
 					"nojs/mw.echo.badge.vector.less"
 				],
-				"cologneblue": [],
-				"modern": []
+				"modern": [
+					"nojs/mw.echo.badge.modern.less"
+				]
 			},
 			"targets": [
 				"desktop",
@@ -449,9 +446,6 @@
 				],
 				"modern": [
 					"nojs/mw.echo.alert.modern.less"
-				],
-				"cologneblue": [
-					"nojs/mw.echo.alert.cologneblue.less"
 				]
 			},
 			"targets": [

modules/nojs/mw.echo.alert.cologneblue.less

@@ -1,3 +0,0 @@
-#pt-mytalk a.mw-echo-alert {
-	padding: 0;
-}

modules/nojs/mw.echo.alert.modern.less

@@ -1,9 +1,3 @@
 #pt-mytalk a.mw-echo-alert {
 	border-radius: 0;
-	display: block;
-	height: 100%;
-}
-
-#pt-mytalk a.mw-echo-alert:hover {
-	background-color: #fab951;
 }

modules/nojs/mw.echo.badge.modern.less

@@ -0,0 +1,8 @@
+.mw-echo-notifications-badge {
+	#pt-notifications-alert &,
+	#pt-notifications-notice & {
+		&:before {
+			z-index: 0;
+		}
+	}
+}

modules/styles/mw.echo.ui.NotificationBadgeWidget.modern.less

@@ -3,15 +3,16 @@ body #p-personal {
 }
 
 #p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
-	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
-		font-variant: normal;
-		text-transform: none;
-		font-weight: normal;
-
-		// Popup buttons
-		.oo-ui-buttonElement-button:hover {
-			// In modern, the hover color is white, which is unhelpful.
-			color: #666;
-		}
+	font-variant: normal;
+	text-transform: none;
+	font-weight: normal;
+	// Badge
+	> .oo-ui-buttonElement-button {
+		border-radius: 0;
+	}
+	// Popup buttons
+	.oo-ui-buttonElement-button:hover {
+		// In modern, the hover color is white, which is unhelpful.
+		color: #666;
 	}
 }

modules/ui/mw.echo.ui.NotificationBadgeWidget.js

@@ -24,7 +24,7 @@
 	 */
 	mw.echo.ui.NotificationBadgeWidget = function MwEchoUiNotificationBadgeButtonPopupWidget( controller, manager, config ) {
 		var buttonFlags, allNotificationsButton, preferencesButton, footerButtonGroupWidget, $footer,
-			notice, adjustedTypeString, wrappedBadgeLabel;
+			notice, adjustedTypeString;
 
 		config = config || {};
 		config.links = config.links || {};
@@ -45,6 +45,8 @@
 		this.controller = controller;
 		this.manager = manager;
 
+		adjustedTypeString = this.controller.getTypeString() === 'message' ? 'notice' : this.controller.getTypeString();
+
 		// Properties
 		this.types = this.manager.getTypes();
 
@@ -56,12 +58,9 @@
 		if ( config.hasUnseen ) {
 			buttonFlags.push( 'unseen' );
 		}
-		adjustedTypeString = this.controller.getTypeString() === 'message' ? 'notice' : this.controller.getTypeString();
-		// Messages: echo-notification-notice, echo-notification-alert
-		wrappedBadgeLabel = mw.message( 'echo-notification-' + adjustedTypeString, this.badgeLabel ).text();
 
 		this.badgeButton = new mw.echo.ui.BadgeLinkWidget( {
-			label: wrappedBadgeLabel,
+			label: this.badgeLabel,
 			type: this.manager.getTypeString(),
 			numItems: this.numItems,
 			flags: buttonFlags,
@@ -266,18 +265,14 @@
 	 * Update the badge state and label based on changes to the model
 	 */
 	mw.echo.ui.NotificationBadgeWidget.prototype.updateBadge = function () {
-		var unreadCount, cappedUnreadCount, badgeLabel, adjustedTypeString, wrappedBadgeLabel;
+		var unreadCount, cappedUnreadCount, badgeLabel;
 
 		unreadCount = this.manager.getUnreadCounter().getCount();
 		cappedUnreadCount = this.manager.getUnreadCounter().getCappedNotificationCount( unreadCount );
 		cappedUnreadCount = mw.language.convertNumber( cappedUnreadCount );
 		badgeLabel = mw.message( 'echo-badge-count', mw.language.convertNumber( cappedUnreadCount ) ).text();
 
-		adjustedTypeString = this.controller.getTypeString() === 'message' ? 'notice' : this.controller.getTypeString();
-		// Messages: echo-notification-notice, echo-notification-alert
-		wrappedBadgeLabel = mw.message( 'echo-notification-' + adjustedTypeString, badgeLabel ).text();
-
-		this.badgeButton.setLabel( wrappedBadgeLabel );
+		this.badgeButton.setLabel( badgeLabel );
 		this.badgeButton.setCount( unreadCount, badgeLabel );
 		// Update seen state only if the counter is 0
 		// so we don't run into inconsistencies and have an unseen state