From d8f242c046a12e01739d21355b83b36f56a60e45 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Wed, 14 Sep 2022 16:30:25 -0700
Subject: [PATCH] [Visual enhancements next] Restores the badge styling to Echo

Currently clicking on icons will result in the icon changing
style. This is fixed in the follow up patch
I4a0637fc19cf07d545b75fa55e15010b74fc474f

Bug: T257143
Change-Id: Ief51ac0bcab20fc87edf747b5347a5ef9dfdf36f
---
 includes/Hooks.php                    | 18 ++++++++++------
 skinStyles/ext.echo.styles.badge.less | 31 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/includes/Hooks.php b/includes/Hooks.php
index 47d761a2..b8f7f6cb 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -341,15 +341,21 @@ class Hooks implements
 		if ( isset( $content_navigation['notifications'] ) ) {
 			foreach ( $content_navigation['notifications'] as $key => $data ) {
 				$content_navigation[$overflow][$key] = $data;
-				if ( $visualEnhancements ) {
-					$content_navigation[$overflow][$key]['link-class'] = [
+				$icon = $data['icon'] ?? null;
+				if ( $visualEnhancements && $icon ) {
+					$linkClass = $content_navigation[$overflow][$key]['link-class'];
+					$item = $content_navigation[$overflow][$key];
+					$newLinkClass = [
 						// Allows Echo to react to clicks
 						'mw-echo-notification-badge-nojs'
 					];
-				} else {
-					unset( $content_navigation[$overflow][$key]['icon'] );
-					unset( $content_navigation[$overflow][$key]['button'] );
-					unset( $content_navigation[$overflow][$key]['text-hidden'] );
+					if ( in_array( 'mw-echo-unseen-notifications', $linkClass ) ) {
+						$newLinkClass[] = 'mw-echo-unseen-notifications';
+					}
+					$item['button'] = true;
+					$item['text-hidden'] = true;
+					$item['link-class'] = $newLinkClass;
+					$content_navigation[$overflow][$key] = $item;
 				}
 			}
 		}
diff --git a/skinStyles/ext.echo.styles.badge.less b/skinStyles/ext.echo.styles.badge.less
index 6d75a380..bed18330 100644
--- a/skinStyles/ext.echo.styles.badge.less
+++ b/skinStyles/ext.echo.styles.badge.less
@@ -1,3 +1,5 @@
+@import '../resources/common/variables.less';
+
 .vector-feature-visual-enhancement-next-disabled,
 .skin-vector-legacy {
 	#pt-notifications-notice .mw-echo-notifications-badge,
@@ -43,3 +45,32 @@
 		margin-right: 0.4em;
 	}
 }
+
+.vector-feature-visual-enhancement-next-enabled {
+	.mw-echo-notification-badge-nojs {
+		// When 99+ allow counter so spill outside icon
+		overflow: visible;
+
+		&:after {
+			position: absolute;
+			left: 55%;
+			top: 43%;
+			font-size: unit( 12 / @font-size-browser, em );
+			padding: 7px 0.3em;
+			border: 1px solid #fff;
+			border-radius: @border-radius-base;
+			background-color: @colorGray7;
+			content: attr( data-counter-text );
+			color: #fff;
+		}
+	}
+
+	// Special colors for unseen notifications
+	#pt-notifications-alert .mw-echo-unseen-notifications:after {
+		background-color: @color-destructive;
+	}
+
+	#pt-notifications-notice .mw-echo-unseen-notifications:after {
+		background-color: @color-primary;
+	}
+}