mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-02 07:58:31 +00:00
4.20.5
* Added: Chat Action for editing a user's displayed name and color. Only applies to chat. * Changed: Re-enable the setting for hiding offline channels from the side-bar. * Changed: Updated dependencies. * Fixed: Issue with multiple copies of FFZ emotes appearing in tab-completion. * Fixed: Issue with tab-completion crashing sometimes in mod view. (Closes #839) * Fixed: Support for swapping sidebars with the latest Twitch changes. * Fixed: Hiding Recommended Channels from the sidebar. (Closes #840) * Removed: Setting for hiding Recommended Friends from the sidebar, since that section no longer exists.
This commit is contained in:
parent
50378bb3dc
commit
7638a885f2
16 changed files with 2862 additions and 2420 deletions
129
src/modules/chat/override-editor.vue
Normal file
129
src/modules/chat/override-editor.vue
Normal file
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="ffz-override-editor tw-c-background-base tw-c-text-base tw-pd-05 tw-pd-l-1">
|
||||
<div class="tw-flex tw-align-items-center tw-pd-b-05 tw-border-b tw-mg-b-05">
|
||||
<div class="tw-flex-grow-1">
|
||||
{{ t('chat.overrides.editing', 'Editing {user.login}...', {user}) }}
|
||||
</div>
|
||||
<button
|
||||
class="tw-mg-l-05 tw-button tw-button--text"
|
||||
@click="close"
|
||||
>
|
||||
<span class="tw-button__text ffz-i-window-close" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tw-flex tw-align-items-center">
|
||||
<label for="user-name" class="tw-mg-r-1">
|
||||
{{ t('chat.overrides.name', 'Name') }}
|
||||
</label>
|
||||
|
||||
<input
|
||||
id="user-name"
|
||||
ref="name"
|
||||
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-input tw-flex-grow-1"
|
||||
:value="name"
|
||||
@change="updateName"
|
||||
>
|
||||
|
||||
<button
|
||||
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
|
||||
:class="{'tw-button--disabled': name == null}"
|
||||
@click="clearName"
|
||||
>
|
||||
<span class="tw-button__text ffz-i-cancel" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.reset', 'Reset to Default') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tw-flex tw-align-items-center">
|
||||
<label for="user-color" class="tw-mg-r-1">
|
||||
{{ t('chat.overrides.color', 'Color') }}
|
||||
</label>
|
||||
|
||||
<color-picker
|
||||
id="user-color"
|
||||
ref="color"
|
||||
:alpha="false"
|
||||
:nullable="true"
|
||||
:value="editColor"
|
||||
@input="updateColor"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
|
||||
:class="{'tw-button--disabled': color == null}"
|
||||
@click="clearColor"
|
||||
>
|
||||
<span class="tw-button__text ffz-i-cancel" />
|
||||
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
|
||||
{{ t('setting.reset', 'Reset to Default') }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { debounce } from 'utilities/object';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return this.$vnode.data
|
||||
},
|
||||
|
||||
computed: {
|
||||
editColor() {
|
||||
if ( ! this.color )
|
||||
return '';
|
||||
|
||||
return this.color;
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.updateName = debounce(this.updateName, 250);
|
||||
this.updateColor = debounce(this.updateColor, 250);
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.updateTip();
|
||||
},
|
||||
|
||||
methods: {
|
||||
clearName() {
|
||||
this.name = null;
|
||||
this.deleteName();
|
||||
},
|
||||
|
||||
updateName() {
|
||||
const value = this.$refs.name.value;
|
||||
if ( value == null || ! value.length ) {
|
||||
this.clearName();
|
||||
return;
|
||||
}
|
||||
|
||||
this.name = value;
|
||||
this.setName(value);
|
||||
},
|
||||
|
||||
clearColor() {
|
||||
this.color = null;
|
||||
this.deleteColor();
|
||||
},
|
||||
|
||||
updateColor(value) {
|
||||
if ( value == null || ! value.length ) {
|
||||
this.clearColor();
|
||||
return;
|
||||
}
|
||||
|
||||
this.color = value;
|
||||
this.setColor(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue