mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-07 23:00:54 +00:00
4.0.0-rc17
* Added: Highlight messages based on usernames and badges. * Added: Block messages based on usernames and badges. * Fixed: Display the number of months a subscriber has subscribed in badge tool-tips. * Fixed: Rendering of chat messages sent from Twitch Extensions.
This commit is contained in:
SirStendec
parent
b9cca1053d
commit
1649294bde
10 changed files with 809 additions and 82 deletions
213
src/modules/main_menu/components/badge-term-editor.vue
Normal file
213
src/modules/main_menu/components/badge-term-editor.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--term ffz--badge-term">
|
||||
<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
|
||||
<div class="tw-mg-r-1">
|
||||
<img
|
||||
v-if="current"
|
||||
:src="current.image"
|
||||
class="ffz--badge-term-image"
|
||||
>
|
||||
</div>
|
||||
<div class="tw-flex-grow-1 tw-mg-r-05">
|
||||
<h4 v-if="! editing && ! current" class="ffz-monospace">
|
||||
<pre>{{ t('setting.terms.invalid-badge', 'unknown/unloaded badge') }}</pre>
|
||||
</h4>
|
||||
<h4 v-if="! editing && current">
|
||||
{{ current.name }}
|
||||
</h4>
|
||||
<select
|
||||
v-if="editing"
|
||||
v-model="edit_data.v"
|
||||
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width tw-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05">
|
||||
<optgroup
|
||||
v-for="section in badges"
|
||||
:key="section.title"
|
||||
:label="section.title"
|
||||
>
|
||||
<option
|
||||
v-for="badge in section.badges"
|
||||
:key="badge.id"
|
||||
:value="badge.id"
|
||||
>
|
||||
{{ badge.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="colored" class="tw-flex-shrink-0 tw-mg-r-05">
|
||||
<color-picker v-if="editing" v-model="edit_data.c" :nullable="true" :show-input="false" :open-up="true" />
|
||||
<div v-else-if="term.c" class="ffz-color-preview">
|
||||
<figure :style="`background-color: ${term.c}`">
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-tooltip-wrapper">
|
||||
<button
|
||||
v-if="editing"
|
||||
:class="{active: edit_data.remove}"
|
||||
class="tw-button ffz-directory-toggle-block"
|
||||
@click="toggleRemove"
|
||||
>
|
||||
<span
|
||||
:class="edit_data.remove ? 'ffz-i-eye-off' : 'ffz-i-eye'"
|
||||
class="tw-button__text"
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
v-else-if="term.remove"
|
||||
class="ffz-i-eye-off tw-pd-x-1"
|
||||
/>
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
<span v-if="display.remove">
|
||||
{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ t('setting.terms.remove.off', 'Do not remove matching messages from chat.') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="adding" class="tw-flex-shrink-0">
|
||||
<button class="tw-button" @click="save">
|
||||
<span class="tw-button__text">
|
||||
{{ t('setting.terms.add-term', 'Add') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="editing" class="tw-flex-shrink-0">
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
|
||||
<span class="tw-button__text ffz-i-floppy" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.save', 'Save') }}
|
||||
</div>
|
||||
</button>
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
|
||||
<span class="tw-button__text ffz-i-cancel" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.cancel', 'Cancel') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="deleting" class="tw-flex-shrink-0">
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
|
||||
<span class="tw-button__text ffz-i-trash" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.delete', 'Delete') }}
|
||||
</div>
|
||||
</button>
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
|
||||
<span class="tw-button__text ffz-i-cancel" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.cancel', 'Cancel') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="tw-flex-shrink-0">
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
|
||||
<span class="tw-button__text ffz-i-cog" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.edit', 'Edit') }}
|
||||
</div>
|
||||
</button>
|
||||
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
|
||||
<span class="tw-button__text ffz-i-trash" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.delete', 'Delete') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {deep_copy} from 'utilities/object';
|
||||
|
||||
let id = 0;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
badges: Array,
|
||||
term: Object,
|
||||
colored: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
removable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
adding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
if ( this.adding )
|
||||
return {
|
||||
editor_id: id++,
|
||||
deleting: false,
|
||||
editing: true,
|
||||
edit_data: deep_copy(this.term)
|
||||
};
|
||||
|
||||
return {
|
||||
editor_id: id++,
|
||||
deleting: false,
|
||||
editing: false,
|
||||
edit_data: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
display() {
|
||||
return this.editing ? this.edit_data : this.term;
|
||||
},
|
||||
|
||||
current() {
|
||||
if ( ! this.badges || ! this.display || ! this.display.v )
|
||||
return null;
|
||||
|
||||
const v = this.display.v;
|
||||
|
||||
for(const section of this.badges) {
|
||||
if ( ! section || ! section.badges )
|
||||
continue;
|
||||
|
||||
for(const badge of section.badges)
|
||||
if ( badge.id === v )
|
||||
return badge;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit() {
|
||||
this.editing = true;
|
||||
this.edit_data = Object.assign({remove: false}, deep_copy(this.term));
|
||||
},
|
||||
|
||||
toggleRemove() {
|
||||
if ( this.editing )
|
||||
this.edit_data.remove = ! this.edit_data.remove;
|
||||
},
|
||||
|
||||
cancel() {
|
||||
if ( this.adding )
|
||||
this.edit_data = deep_copy(this.term);
|
||||
else {
|
||||
this.editing = false;
|
||||
this.edit_data = null
|
||||
}
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$emit('save', this.edit_data);
|
||||
this.cancel();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue