oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-28 15:27:43 +00:00
Code Wiki Activity

Change the settings pop-out to use a chat pop-out. Tweaks to badge visibility rendering. Forcibly set tw-theme--dark on body since Twitch doesn't do it consistently with pop-outs.

Browse source
This commit is contained in:
SirStendec 2018-03-24 04:19:41 -04:00
parent cc682230e2
commit c190ecf5ed
11 changed files with 129 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

7
changelog.html
View file

@ -1,3 +1,10 @@
<div class="list-header">4.0.0-beta1.7<span>@177445c5a2dd0b0b9857</span> <time datetime="2018-03-24">(2018-03-24)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Changed: Reduce the size of badge previews in the badge visbility settings.</li>
<li>Changed: Use pop-out chat to host pop-out settings to reduce load times and avoid player ads.</li>
<li>Fixed: Tooltips and other things relying on <code>tw-theme--dark</code> to be set now work properly with pop-out chat.</li>
</ul>
<div class="list-header">4.0.0-beta1.7<span>@a50bda0e204137eb8f28</span> <time datetime="2018-03-22">(2018-03-22)</time></div>
<ul class="chat-menu-content menu-side-padding">
<li>Added: Chat Badge Visibility. Hide the badges you don't like.</li>

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

@ -184,16 +184,16 @@ export default class Badges extends Module {
provider: 'twitch',
name: v.title,
color: 'transparent',
image: v.image4x,
image: v.image2x,
versions: vs,
styleImage: `url("${v.image4x}")`
styleImage: `url("${v.image2x}")`
});
}
for(const key in this.badges)
if ( has(this.badges, key) ) {
const badge = this.badges[key],
image = badge.urls ? (badge.urls[4] || badge.urls[2] || badge.urls[1]) : badge.image;
image = badge.urls ? (badge.urls[2] || badge.urls[1]) : badge.image;
(/^addon/.test(key) ? addon : ffz).push({
id: key,
@ -207,7 +207,7 @@ export default class Badges extends Module {
return [
{title: 'Twitch', badges: twitch},
{title: 'Twitch: Game', badges: game},
{title: 'Twitch: Game', key: 'game', badges: game},
{title: 'FrankerFaceZ', badges: ffz},
{title: 'Add-on', badges: addon}
];

1
src/modules/main_menu/components/badge-visibility.vue
View file

@ -45,7 +45,6 @@
<button
class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper"
@click="reset(i.id)"
v-if="! badgeDefault(i.id)"
>
<span class="tw-button__text">Reset</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">

2
src/modules/main_menu/components/main-menu.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">

16
src/modules/main_menu/index.js
View file

@ -8,6 +8,10 @@ import Module from 'utilities/module';
import {createElement as e} from 'utilities/dom';
import {has, deep_copy} from 'utilities/object';
import {parse_path} from 'src/settings';
const EXCLUSIVE_CONTAINER = '.twilight-main,.twilight-minimal-root>div';
function format_term(term) {
return term.replace(/<[^>]*>/g, '').toLocaleLowerCase();
}
@ -91,7 +95,7 @@ export default class MainMenu extends Module {
async onEnable(event) {
await this.site.awaitElement('.twilight-root');
await this.site.awaitElement(EXCLUSIVE_CONTAINER);
this.on('site.menu_button:clicked', this.toggleVisible);
if ( this._visible ) {
@ -115,7 +119,7 @@ export default class MainMenu extends Module {
const maximized = this._maximized,
visible = this._visible = !this._visible,
main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height');
main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height');
if ( ! visible ) {
if ( maximized )
@ -144,7 +148,7 @@ export default class MainMenu extends Module {
return;
const maximized = this._maximized = !this._maximized,
main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height'),
main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height'),
old_main = this._menu.parentElement;
if ( maximized )
@ -381,7 +385,7 @@ export default class MainMenu extends Module {
}
getProfileProxy(profile, context) {
getProfileProxy(profile, context) { // eslint-disable-line class-methods-use-this
return {
id: profile.id,
@ -482,7 +486,7 @@ export default class MainMenu extends Module {
_context_changed() {
this.context = deep_copy(context.context);
const ids = this.profiles = context.__profiles.map(profile => profile.id);
for(const id in profiles) {
for(const id of ids) {
const profile = profiles[id];
profile.live = this.profiles.includes(profile.id);
}
@ -550,5 +554,3 @@ export default class MainMenu extends Module {
this._menu = this._vue.$el;
}
}
MainMenu.requires = ['site.menu_button'];

2
src/modules/metadata.js
View file

@ -5,7 +5,7 @@
// ============================================================================
import {createElement as e, ClickOutside} from 'utilities/dom';
import {has, get, maybe_call} from 'utilities/object';
import {maybe_call} from 'utilities/object';
import {duration_to_string} from 'utilities/time';

5
src/modules/tooltips.js
View file

@ -37,9 +37,10 @@ export default class TooltipProvider extends Module {
}
onEnable() {
const container = document.body.querySelector('.twilight-root') || document.body;
const container = document.querySelector('.twilight-root,.twilight-minimal-root') || document.body,
is_minimal = container && container.classList.contains('twilight-minimal-root');
this.tips = new Tooltip('body #root', 'ffz-tooltip', {
this.tips = new Tooltip(is_minimal ? '.twilight-minimal-root' : 'body #root', 'ffz-tooltip', {
html: true,
delayHide: this.checkDelayHide.bind(this),
delayShow: this.checkDelayShow.bind(this),

4
src/sites/twitch-twilight/modules/chat/settings_menu.js
View file

@ -60,9 +60,9 @@ export default class SettingsMenu extends Module {
const twMinimalRoot = document.querySelector('.twilight-minimal-root');
if (twMinimalRoot) {
const win = window.open(
'https://twitch.tv/frankerfacez?ffz-settings',
'https://twitch.tv/popout/frankerfacez/chat?ffz-settings',
'_blank',
'resizable=yes,scrollbars=yes,width=800,height=600'
'resizable=yes,scrollbars=yes,width=850,height=600'
);
win.focus();
} else {

4
src/sites/twitch-twilight/modules/theme/index.js
View file

@ -39,7 +39,8 @@ export default class ThemeEngine extends Module {
requires: ['context.ui.theme'],
process(ctx) {
return ctx.get('context.ui.theme') === 1;
}
},
changed: val => document.body.classList.toggle('tw-theme--dark', val)
});
this.settings.add('theme.tooltips-dark', {
@ -78,5 +79,6 @@ export default class ThemeEngine extends Module {
onEnable() {
this.updateSetting(this.settings.get('theme.dark'));
document.body.classList.toggle('tw-theme--dark', this.settings.get('theme.is-dark'));
}
}

2
styles/widgets.scss
View file

@ -29,7 +29,7 @@
header {
a {
font-weight: bold;
color: inherit;
color: inherit !important;
}
}
}

18
styles/widgets/badge-visibility.scss
View file

@ -3,6 +3,16 @@
label:before, label:after {
opacity: 0.5
}
input:focus + label {
&:before, &:after {
opacity: 1
}
}
button:not(:focus) {
visibility: hidden;
}
}
.tw-checkbox__input:checked+.tw-checkbox__label:after,
@ -11,11 +21,11 @@
}
.ffz-badge.preview-image {
width: 7.2rem;
height: 7.2rem;
background-size: 7.2rem;
width: 3.6rem;
height: 3.6rem;
background-size: 3.6rem;
background-repeat: no-repeat;
}
width: 30rem;
width: 22rem;
}