Change multi-badge tooltips to put two badges on each line for a nicer display. Fix replacing badges while also setting per-user badge overrides.

src/modules/chat/badges.js

@@ -175,6 +175,8 @@ export default class Badges extends Module {
 		this.loadGlobalBadges();
 
 		this.tooltips.types.badge = (target, tip) => {
+			tip.add_class = 'ffz__tooltip--badges';
+
 			const show_previews = this.parent.context.get('tooltip.badge-images'),
 				container = target.parentElement.parentElement,
 				room_id = container.dataset.roomId,
@@ -202,9 +204,6 @@ export default class Badges extends Module {
 						show_previews && e('div', {
 							className: 'preview-image ffz-badge',
 							style: {
-								height: '7.2rem',
-								width: '7.2rem',
-								backgroundSize: '7.2rem',
 								backgroundColor: d.color,
 								backgroundImage: `url("${d.image}")`
 							}
@@ -279,6 +278,8 @@ export default class Badges extends Module {
 					slot = has(badge, 'slot') ? badge.slot : full_badge.slot,
 					old_badge = slotted[slot],
 					urls = badge.urls || (badge.image ? {1: badge.image} : null),
+					color = badge.color || full_badge.color || 'transparent',
+					masked = color !== 'transparent' && is_mask,
 
 					bu = (urls || full_badge.urls || {1: full_badge.image}),
 					bd = {
@@ -288,22 +289,26 @@ export default class Badges extends Module {
 						title: badge.title || full_badge.title
 					};
 
+				let style;
+
 				if ( old_badge ) {
+					old_badge.badges.push(bd);
+
 					const replaces = has(badge, 'replaces') ? badge.replaces : full_badge.replaces,
 						replaces_type = badge.replaces_type || full_badge.replaces_type;
 					if ( replaces && (!replaces_type || replaces_type === old_badge.id) )
 						old_badge.replaced = badge.id;
-
+					else
-					old_badge.badges.push(bd);
 						continue;
 
+					style = old_badge.props.style;
+
 				} else if ( ! slot )
 					continue;
 
-				const style = {},
+				else {
-					color = badge.color || full_badge.color || 'transparent',
+					style = {};
-					masked = color !== 'transparent' && is_mask,
+					const props = {
-					props = {
 						className: 'ffz-tooltip ffz-badge',
 						'data-tooltip-type': 'badge',
 						'data-provider': 'ffz',
@@ -311,6 +316,9 @@ export default class Badges extends Module {
 						style
 					};
 
+					slotted[slot] = {id: badge.id, props, badges: [bd]}
+				}
+
 				if ( has_image && urls ) {
 					let image_set, image = `url("${urls[1]}")`;
 					if ( urls[2] || urls[4] )
@@ -327,8 +335,6 @@ export default class Badges extends Module {
 					else
 						style.backgroundColor = badge.color;
 				}
-
-				slotted[slot] = { id: badge.id, props, badges: [bd] };
 			}
 
 		for(const slot in slotted)

src/utilities/tooltip.js

@@ -217,6 +217,11 @@ export class Tooltip {
 
 		arrow.setAttribute('x-arrow', true);
 
+		if ( tip.add_class ) {
+			inner.classList.add(tip.add_class);
+			tip.add_class = undefined;
+		}
+
 		const interactive = maybe_call(opts.interactive, null, target, tip);
 		el.classList.toggle('interactive', interactive || false);
 

styles/tooltips.scss

@@ -137,13 +137,14 @@ body {
 .ffz__tooltip--inner {
 	display: block;
 	max-width: 30rem;
-	padding: 3px 6px;
+	padding: .3rem .6rem;
 	text-align: center;
 
 	.preview-image {
 		&.ffz-badge {
-			height: 72px;
+			height: 7.2rem;
-			width: 72px;
+			width: 7.2rem;
+			background-size: 7.2rem;
 			background-repeat: no-repeat;
 		}
 
@@ -161,6 +162,18 @@ body {
 }
 
 
+.ffz__tooltip--badges {
+	display: flex;
+	flex-wrap: wrap;
+	max-width: 20rem;
+	padding: .1rem .2rem;
+}
+
+.ffz-badge-tip {
+	margin: .2rem .4rem;
+}
+
+
 .ffz-rich-tip {
 	max-width: 340px;
 	width: 340px;