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.

src/std-components/color-picker.vue

@@ -0,0 +1,192 @@
+<template lang="html">
+	<div class="ffz--color-widget">
+		<div v-if="showInput" class="tw-relative tw-full-width tw-mg-y-05">
+			<input
+				v-if="showInput"
+				ref="input"
+				v-model="color"
+				v-bind="$attrs"
+				type="text"
+				class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
+				autocapitalize="off"
+				autocorrect="off"
+				autocomplete="off"
+				@input="onChange"
+			>
+
+			<button
+				class="ffz-color-preview tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default"
+				@click="togglePicker"
+			>
+				<figure v-if="! valid" class="ffz-i-attention tw-c-text-alert" />
+				<figure v-else-if="color" :style="`background-color: ${color}`" />
+				<figure v-else class="ffz-i-eyedropper" />
+			</button>
+			<div
+				v-if="open"
+				v-on-clickaway="closePicker"
+				:class="{'ffz-bottom-100': openUp}"
+				class="tw-absolute tw-z-above tw-right-0"
+			>
+				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
+			</div>
+		</div>
+		<div v-else class="tw-relative">
+			<button
+				class="tw-button tw-button--text ffz-color-preview"
+				@click="togglePicker"
+				@contextmenu.prevent="maybeResetColor"
+			>
+				<figure v-if="! valid" class="ffz-i-attention tw-c-text-alert" />
+				<figure v-else-if="color" :style="`background-color: ${color}`">
+					&nbsp;
+				</figure>
+				<figure v-else class="ffz-i-eyedropper" />
+			</button>
+			<div
+				v-if="open"
+				v-on-clickaway="closePicker"
+				:class="{'ffz-bottom-100': openUp}"
+				class="tw-absolute tw-z-above tw-balloon--up tw-balloon--right"
+			>
+				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import {Color} from 'utilities/color';
+
+import {Sketch} from 'vue-color';
+
+export default {
+	components: {
+		'chrome-picker': Sketch
+	},
+
+	props: {
+		value: String,
+		alpha: {
+			type: Boolean,
+			default: true
+		},
+		default: {
+			type: String,
+			default: '#000'
+		},
+		nullable: {
+			type: Boolean,
+			default: false
+		},
+		validate: {
+			type: Boolean,
+			default: true
+		},
+		showInput: {
+			type: Boolean,
+			default: true
+		},
+		openUp: {
+			type: Boolean,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			color: '',
+			valid: false,
+			open: false
+		}
+	},
+
+	computed: {
+		colors() {
+			try {
+				return Color.RGBA.fromCSS(this.color || this.default)
+			} catch(err) {
+				return {
+					hex: this.default
+				}
+			}
+		}
+	},
+
+	watch: {
+		value(val) {
+			this.color = val;
+		}
+	},
+
+	mounted() {
+		this.color = this.value;
+		this._validate();
+	},
+
+	methods: {
+		maybeResetColor() {
+			if ( this.open )
+				return this.open = false;
+
+			if ( this.nullable ) {
+				this.color = '';
+				this._validate();
+				this.emit();
+			}
+		},
+
+		openPicker() {
+			this.open = true;
+		},
+
+		closePicker() {
+			this.open = false;
+		},
+
+		togglePicker() {
+			this.open = ! this.open;
+		},
+
+		onPick(color) {
+			const old_val = this.color;
+
+			if ( color.rgba.a == 1 )
+				this.color = color.hex;
+			else {
+				const c = color.rgba;
+				this.color = `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`;
+			}
+
+			if ( old_val !== this.color ) {
+				this._validate();
+				this.emit();
+			}
+		},
+
+		_validate() {
+			this.valid = true;
+			if ( ! this.color || ! this.color.length || ! this.validate )
+				return;
+
+			try {
+				Color.RGBA.fromCSS(this.color);
+			} catch(err) {
+				this.valid = false;
+			}
+		},
+
+		emit() {
+			if ( this.valid )
+				this.$emit('input', this.color);
+		},
+
+		onChange() {
+			this._validate();
+			this.emit();
+		}
+	}
+}
+
+</script>