oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-17 11:30:54 +00:00
Code Wiki Activity

Implement emote-alignment setting (#409)

Browse source
This commit is contained in:
Lordmau5 2018-04-08 21:20:46 +02:00 • committed by Mike
parent ac78c0c9c4
commit 5fb92f52da
3 changed files with 33 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/sites/twitch-twilight/modules/chat/index.js
View file

@ -233,6 +233,21 @@ export default class ChatHook extends Module {
] ]
} }
}); });
this.settings.add('chat.lines.emote-alignment', {
default: 0,
ui: {
path: 'Chat > Appearance >> Chat Lines',
title: 'Emoticon Alignment',
description: 'Change how emotes are aligned and padded in chat, making messages taller but preventing emotes from overlapping.',
component: 'setting-select-box',
data: [
{value: 0, title: 'Standard'},
{value: 1, title: 'Padded'},
{value: 2, title: 'Baseline (BTTV-Like'}
]
}
});
} }
@ -262,6 +277,7 @@ export default class ChatHook extends Module {
updateChatCSS() { updateChatCSS() {
const width = this.chat.context.get('chat.width'), const width = this.chat.context.get('chat.width'),
size = this.chat.context.get('chat.font-size'), size = this.chat.context.get('chat.font-size'),
emote_alignment = this.chat.context.get('chat.lines.emote-alignment'),
lh = Math.round((20/12) * size); lh = Math.round((20/12) * size);
let font = this.chat.context.get('chat.font-family') || 'inherit'; let font = this.chat.context.get('chat.font-family') || 'inherit';
@ -275,6 +291,9 @@ export default class ChatHook extends Module {
this.css_tweaks.toggle('chat-font', size !== 12 || font); this.css_tweaks.toggle('chat-font', size !== 12 || font);
this.css_tweaks.toggle('chat-width', width !== 340); this.css_tweaks.toggle('chat-width', width !== 340);
this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1);
this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2);
} }
updateLineBorders() { updateLineBorders() {
@ -314,6 +333,8 @@ export default class ChatHook extends Module {
this.chat.context.on('changed:chat.filtering.highlight-tokens', this.updateMentionCSS, this); this.chat.context.on('changed:chat.filtering.highlight-tokens', this.updateMentionCSS, this);
this.chat.context.on('changed:chat.fix-bad-emotes', this.updateChatLines, this); this.chat.context.on('changed:chat.fix-bad-emotes', this.updateChatLines, this);
this.chat.context.on('changed:chat.lines.emote-alignment', this.updateChatCSS, this);
this.chat.context.on('changed:chat.lines.alternate', val => { this.chat.context.on('changed:chat.lines.alternate', val => {
this.css_tweaks.toggle('chat-rows', val); this.css_tweaks.toggle('chat-rows', val);
this.updateMentionCSS(); this.updateMentionCSS();

8
src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-baseline.scss Normal file
View file

@ -0,0 +1,8 @@
.message > .chat-line__message--emote {
vertical-align: baseline;
padding-top: 5px;
}
.message > .chat-line__message--emoji {
padding-top: 0px;
}

3
src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-padded.scss Normal file
View file

@ -0,0 +1,3 @@
.message > .chat-line__message--emote {
margin: -1px 0 0;
}