diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index 365898ba..bbae6a4c 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -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() { const width = this.chat.context.get('chat.width'), size = this.chat.context.get('chat.font-size'), + emote_alignment = this.chat.context.get('chat.lines.emote-alignment'), lh = Math.round((20/12) * size); 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-width', width !== 340); + + this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1); + this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2); } 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.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.css_tweaks.toggle('chat-rows', val); this.updateMentionCSS(); @@ -829,4 +850,4 @@ function extractCheerPrefix(parts) { } return null; -} \ No newline at end of file +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-baseline.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-baseline.scss new file mode 100644 index 00000000..b0483490 --- /dev/null +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-baseline.scss @@ -0,0 +1,8 @@ +.message > .chat-line__message--emote { + vertical-align: baseline; + padding-top: 5px; +} + +.message > .chat-line__message--emoji { + padding-top: 0px; +} diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-padded.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-padded.scss new file mode 100644 index 00000000..8ea67d3d --- /dev/null +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-alignment-padded.scss @@ -0,0 +1,3 @@ +.message > .chat-line__message--emote { + margin: -1px 0 0; +}