1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-28 13:38:30 +00:00
FrankerFaceZ/src/modules/chat/override-editor.vue
SirStendec 7638a885f2 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.
2020-07-10 20:08:29 -04:00

129 lines
No EOL
2.7 KiB
Vue

<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>