fix(Echo): 🐛 re-implement nojs Echo buttons

StarCitizenTools · May 6, 2024 · 76a93e9 · 76a93e9
1 parent de315b2
commit 76a93e9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/includes/Hooks/SkinHooks.php b/includes/Hooks/SkinHooks.php
@@ -341,6 +341,14 @@ private static function updateToolboxMenu( &$links ) {
 	 * @param array &$links
 	 */
 	private static function updateNotificationsMenu( &$links ) {
+		$iconMap = [
+			'notifications-alert' => 'bell',
+			'notifications-notice' => 'tray'
+		];
+
+		self::mapIconsToMenuItems( $links, 'notifications', $iconMap );
+		self::addIconsToMenuItems( $links, 'notifications' );
+
 		/**
 		 * Echo has styles that control icons rendering in places we don't want them.
 		 * Based on fixEcho() from Vector, see T343838
@@ -351,7 +359,8 @@ private static function updateNotificationsMenu( &$links ) {
 				$linkClass = $item['link-class'] ?? [];
 				$newLinkClass = [
 					// Allows Echo to react to clicks
-					'mw-echo-notification-badge-nojs'
+					'mw-echo-notification-badge-nojs',
+					'citizen-header__button'
 				];
 				if ( in_array( 'mw-echo-unseen-notifications', $linkClass ) ) {
 					$newLinkClass[] = 'mw-echo-unseen-notifications';

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -74,6 +74,11 @@
 				opacity: var( --opacity-icon-base--active );
 			}
 		}
+
+		// Disable default padding when menu item is used as header button
+		.citizen-menu .mw-list-item & {
+			padding: 0;
+		}
 	}
 
 	&__logo {
@@ -135,6 +140,13 @@
 		gap: var( --space-xxs );
 		align-items: center;
 	}
+
+	// Echo badge styles do not load before init in 1.39
+	.mw-echo-notification-badge-nojs {
+		.citizen-ui-icon + span {
+			.mixin-screen-reader-text;
+		}
+	}
 }
 
 #p-personal {

diff --git a/skin.json b/skin.json
@@ -381,7 +381,7 @@
 			"+ext.dismissableSiteNotice.styles": "skinStyles/extensions/DismissableSiteNotice/ext.dismissableSiteNotice.less",
 			"+ext.echo.ui.desktop": "skinStyles/extensions/Echo/ext.echo.ui.desktop.less",
 			"+ext.echo.ui": "skinStyles/extensions/Echo/ext.echo.ui.less",
-			"+ext.echo.styles.badge": "skinStyles/extensions/Echo/ext.echo.styles.badge.less",
+			"ext.echo.styles.badge": "skinStyles/extensions/Echo/ext.echo.styles.badge.less",
 			"+ext.echo.styles.notifications": "skinStyles/extensions/Echo/ext.echo.styles.notifications.less",
 			"+ext.echo.styles.alert": "skinStyles/extensions/Echo/ext.echo.styles.alert.less",
 			"+ext.echo.special": "skinStyles/extensions/Echo/ext.echo.special.less",

diff --git a/skinStyles/extensions/Echo/ext.echo.styles.badge.less b/skinStyles/extensions/Echo/ext.echo.styles.badge.less
@@ -3,9 +3,9 @@
  *
  * SkinStyles for Extension:Echo
  * Module: ext.echo.styles.badge
- * Version: REL1_35 347c30e
+ * Version: REL1_39
  *
- * Date: 2021-08-11
+ * Date: 2024-05-06
 */
 
 .mw-echo-notifications-badge {