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

extension.json

@@ -193,6 +193,8 @@
 				"mediawiki.api.options"
 			],
 			"messages": [
+				"echo-notification-notice",
+				"echo-notification-alert",
 				"echo-popup-footer-special-page-invitation",
 				"echo-popup-footer-special-page-invitation-link"
 			],
@@ -405,19 +407,20 @@
 		},
 		"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"
 				],
-				"modern": [
-					"nojs/mw.echo.badge.modern.less"
-				]
+				"cologneblue": [],
+				"modern": []
 			},
 			"targets": [
 				"desktop",
@@ -446,6 +449,9 @@
 				],
 				"modern": [
 					"nojs/mw.echo.alert.modern.less"
+				],
+				"cologneblue": [
+					"nojs/mw.echo.alert.cologneblue.less"
 				]
 			},
 			"targets": [

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

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

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

@@ -1,3 +1,9 @@
 #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

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

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

@@ -3,16 +3,15 @@ body #p-personal {
 }
 
 #p-personal li.mw-echo-ui-notificationBadgeButtonPopupWidget {
-	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;
+	.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;
+		}
 	}
 }

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;
+			notice, adjustedTypeString, wrappedBadgeLabel;
 
 		config = config || {};
 		config.links = config.links || {};
@@ -45,8 +45,6 @@
 		this.controller = controller;
 		this.manager = manager;
 
-		adjustedTypeString = this.controller.getTypeString() === 'message' ? 'notice' : this.controller.getTypeString();
-
 		// Properties
 		this.types = this.manager.getTypes();
 
@@ -58,9 +56,12 @@
 		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: this.badgeLabel,
+			label: wrappedBadgeLabel,
 			type: this.manager.getTypeString(),
 			numItems: this.numItems,
 			flags: buttonFlags,
@@ -265,14 +266,18 @@
 	 * Update the badge state and label based on changes to the model
 	 */
 	mw.echo.ui.NotificationBadgeWidget.prototype.updateBadge = function () {
-		var unreadCount, cappedUnreadCount, badgeLabel;
+		var unreadCount, cappedUnreadCount, badgeLabel, adjustedTypeString, wrappedBadgeLabel;
 
 		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();
 
-		this.badgeButton.setLabel( badgeLabel );
+		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.setCount( unreadCount, badgeLabel );
 		// Update seen state only if the counter is 0
 		// so we don't run into inconsistencies and have an unseen state