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

Fix balloon popups for metadata.

Browse source
This commit is contained in:
SirStendec 2017-12-13 20:45:22 -05:00
parent ac6663053f
commit ac35ee5fab
2 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/modules/metadata.js
View file

@ -349,24 +349,33 @@ export default class Metadata extends Module {
el._ffz_destroy = el._ffz_outside = null; el._ffz_destroy = el._ffz_outside = null;
}; };
const tt = el._ffz_popup = new Tooltip(document.body.querySelector('.twilight-root') || document.body, el, { const parent = document.body.querySelector('.twilight-root') || document.body,
manual: true, tt = el._ffz_popup = new Tooltip(parent, el, {
html: true, manual: true,
html: true,
tooltipClass: 'ffz-metadata-balloon tw-balloon block', tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
arrowClass: 'tw-balloon__tail', arrowClass: 'tw-balloon__tail tw-absolute',
innerClass: 'tw-pd-1', innerClass: 'tw-pd-1',
popper: { popper: {
placement: 'top-end' placement: 'top-end',
}, modifiers: {
content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key)), preventOverflow: {
onShow: (t, tip) => boundariesElement: parent
setTimeout(() => { },
el._ffz_outside = new ClickOutside(tip.outer, destroy); flip: {
}), behavior: ['top', 'bottom', 'left', 'right']
onHide: destroy }
}) }
},
content: (t, tip) => def.popup.call(this, el._ffz_data, tip, () => refresh_fn(key)),
onShow: (t, tip) =>
setTimeout(() => {
el._ffz_outside = new ClickOutside(tip.outer, destroy);
}),
onHide: destroy
});
tt._enter(el); tt._enter(el);
}); });

16
styles/tooltips.scss
View file

@ -32,8 +32,8 @@ body {
} }
} }
&[x-placement^="left"] > .tw-balloon__tail { &[x-placement^="right"] > .tw-balloon__tail {
right: -3px; left: -3px;
box-shadow: -1px 1px 0 #dad8de; box-shadow: -1px 1px 0 #dad8de;
.tw-theme--dark & { .tw-theme--dark & {
@ -45,8 +45,8 @@ body {
} }
} }
&[x-placement^="right"] > .tw-balloon__tail { &[x-placement^="left"] > .tw-balloon__tail {
left: -3px; right: -3px;
box-shadow: 1px -1px 0 #dad8de; box-shadow: 1px -1px 0 #dad8de;
.tw-theme--dark & { .tw-theme--dark & {
@ -108,16 +108,16 @@ body {
} }
} }
&[x-placement^="left"] { &[x-placement^="right"] {
.ffz__tooltip--arrow { .ffz__tooltip--arrow {
right: -3px; left: -3px;
border-radius: 0 2px 0 0; border-radius: 0 2px 0 0;
} }
} }
&[x-placement^="right"] { &[x-placement^="left"] {
.ffz__tooltip--arrow { .ffz__tooltip--arrow {
left: -3px; right: -3px;
border-radius: 0 0 0 2px; border-radius: 0 0 0 2px;
} }
} }