oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-02 16:08:31 +00:00
Code Wiki Activity

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.

Browse source
This commit is contained in:
SirStendec 2018-02-02 18:51:38 -05:00
parent 2efbd1ae59
commit 8e27f2e6a3
3 changed files with 38 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/modules/chat/badges.js
View file

@ -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;
old_badge.badges.push(bd);
else
continue;
style = old_badge.props.style;
} else if ( ! slot )
continue;
const style = {},
color = badge.color || full_badge.color || 'transparent',
masked = color !== 'transparent' && is_mask,
props = {
else {
style = {};
const 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)

5
src/utilities/tooltip.js
View file

@ -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);

19
styles/tooltips.scss
View file

@ -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;
width: 72px;
height: 7.2rem;
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;