Replace "simple view" checkbox with persistent sidebar toggle switch

src/modules/main_menu/components/main-menu.vue

@@ -87,23 +87,40 @@
 						/>
 					</simplebar>
 				</div>
-				<footer class="tw-c-text-alt tw-border-t tw-pd-1">
+				<footer>
-					<div>
+					<div class="tw-border-t">
-						{{ t('main-menu.version', 'Version {version}', {version: version.toString()}) }}
+						<toggle-switch
+							groupname="ffzSimpleView"
+							:options="{
+								config: {
+									preSelected: context.simple_view ? 'Simple' : 'Advanced',
+									items: [
+										{ name: t('main-menu.simple', 'Simple'), value: 'Simple' },
+										{ name: t('main-menu.advanced', 'Advanced'), value: 'Advanced' }
+									]
+								}
+							}"
+							@change="updateSimpleView"
+						/>
 					</div>
-					<div class="tw-c-text-alt-2">
+					<div class="tw-c-text-alt tw-border-t tw-pd-1">
-						<a
+						<div>
-							v-if="version.commit"
+							{{ t('main-menu.version', 'Version {version}', {version: version.toString()}) }}
-							:href="`https://www.github.com/FrankerFaceZ/FrankerFaceZ/commit/${version.commit}`"
+						</div>
-							class="ffz-link ffz-link--inherit"
+						<div class="tw-c-text-alt-2">
-							target="_blank"
+							<a
-							rel="noopener noreferrer"
+								v-if="version.commit"
-						>
+								:href="`https://www.github.com/FrankerFaceZ/FrankerFaceZ/commit/${version.commit}`"
-							{{ version.commit.slice(0,7) }}
+								class="ffz-link ffz-link--inherit"
-						</a>
+								target="_blank"
-						<span v-else>
+								rel="noopener noreferrer"
-							{{ version.hash }}
+							>
-						</span>
+								{{ version.commit.slice(0,7) }}
+							</a>
+							<span v-else>
+								{{ version.hash }}
+							</span>
+						</div>
 					</div>
 				</footer>
 			</nav>
@@ -349,6 +366,12 @@ export default {
 				if ( el )
 					el.scrollIntoView();
 			});
+		},
+
+		updateSimpleView(event) {
+			const key = 'ffz.simple-view';
+			const val = event.value === 'Simple';
+			this.context.currentProfile.set(key, val);
 		}
 	}
 }

src/modules/main_menu/index.js

@@ -230,14 +230,7 @@ export default class MainMenu extends Module {
 		});
 
 		this.settings.add('ffz.simple-view', {
-			default: false,
+			default: true,
-			ui: {
-				path: 'Appearance > Control Center >> Simple View',
-				title: 'Show simple view.',
-				component: 'setting-check-box',
-				simple: true,
-				simple_path: 'Twitch Appearance >> Control Center'
-			},
 			changed: val => {
 				this.rebuildSettingsTree();
 				this.updateLiveMenu();

src/sites/twitch-twilight/styles/main.scss

@@ -12,4 +12,5 @@
 //@import 'host_options';
 @import 'featured_follow';
 @import 'mod_card';
-@import 'easteregg';
+@import 'easteregg';
+@import 'toggle_switch';

src/sites/twitch-twilight/styles/toggle_switch.scss

@@ -0,0 +1,31 @@
+$darkNavy: #213140;
+$teal1: #66B3FB;
+$teal2: #4B9DEA;
+$charcoal: #555555;
+$gold: #B6985A;
+
+@mixin hideInput {width: 0; height: 0; position: absolute; left: -9999px;}
+
+.toggle-switch {
+	display: flex;
+	input {@include hideInput;}
+	input + label {
+		color: var(--color-text-button-primary);
+		flex-basis: 50%;
+		padding: 0.5rem 0;
+		text-align: center;
+		cursor: pointer;
+	}
+
+	input:hover + label {
+		background-color: var(--color-background-button-text-hover);
+	}
+
+	input:checked + label {
+		background-color: var(--color-background-button-primary-hover);
+		z-index: 1;
+	}
+	input.focus-visible + label {
+		outline: 2px solid var(--ffz-color-accent-8);
+	}
+}

src/std-components/toggle-switch.vue

@@ -0,0 +1,184 @@
+<template>
+	<fieldset
+		class="toggle-switch"
+	>
+		<template
+			v-for="item in defaultOptions.config.items"
+		>
+			<input
+				:id="item.value + group"
+				:value="item.value"
+				:disabled="defaultOptions.config.disabled || disabled"
+				:name="groupname"
+				:class="{ active: !defaultOptions.config.disabled || disabled}"
+				type="radio"
+				:checked="item.value === selectedItem"
+				@click="toggle"
+			>
+			<label
+				:class="{ active: !defaultOptions.config.disabled || disabled }"
+				:for="item.value + group"
+				type="radio"
+			>
+				{{ item.name }}
+			</label>
+		</template>
+	</fieldset>
+</template>
+
+<script>
+const rem = v => `${v}rem`
+
+export default {
+	props: {
+		options: {
+			type: Object,
+			required: false
+		},
+		modelValue: {
+			type: String,
+			required: false
+		},
+		groupname: {
+			type: String,
+			required: true
+		},
+		group: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: ['update:modelValue'],
+	data () {
+		return {
+			selected: false,
+			selectedItem: 'unknown',
+			defaultOptions: Object
+		}
+	},
+	computed: {
+		toggleSwitchStyle () {
+			return {
+				width: rem(this.defaultOptions.size.width),
+				height: rem(this.defaultOptions.size.height)
+			}
+		},
+		itemStyle () {
+			return {
+				width: rem(this.defaultOptions.size.width),
+				height: rem(this.defaultOptions.size.height),
+				fontFamily: this.defaultOptions.layout.fontFamily,
+				fontSize: rem(this.defaultOptions.size.fontSize),
+				textAlign: 'center'
+			}
+		},
+		labelStyle () {
+			return {
+				padding: rem(this.defaultOptions.size.padding),
+				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
+				backgroundColor: this.defaultOptions.layout.backgroundColor,
+				color: this.defaultOptions.layout.color,
+				fontWeight: this.defaultOptions.layout.fontWeight
+			}
+		}
+	},
+	watch: {
+		modelValue (val) {
+			this.selectedItem = val
+		},
+		options (val) {
+			if (val !== null && val !== undefined) {
+				this.mergeDefaultOptionsWithProp(val)
+			}
+		}
+	},
+	mounted () {
+		if (this.options !== null && this.options !== undefined) {
+			this.mergeDefaultOptionsWithProp(this.options)
+		}
+		if (this.defaultOptions.config.preSelected !== 'unknown') {
+			this.selectedItem = this.defaultOptions.config.preSelected
+			this.$emit('update:modelValue', this.selectedItem)
+			this.$emit('input', this.selectedItem)
+		} else if (this.modelValue) {
+			this.selectedItem = this.modelValue
+			this.$emit('update:modelValue', this.selectedItem)
+			this.$emit('input', this.selectedItem)
+		}
+	},
+	created () {
+		this.defaultOptions = {
+			layout: {
+				color: 'black',
+				backgroundColor: 'lightgray',
+				selectedColor: 'white',
+				selectedBackgroundColor: 'green',
+				borderColor: 'gray',
+				fontFamily: 'Arial',
+				fontWeight: 'normal',
+				fontWeightSelected: 'bold',
+				squareCorners: false,
+				noBorder: false
+			},
+			size: {
+				fontSize: 1.5,
+				height: 3.25,
+				padding: 0.5,
+				width: 10
+			},
+			config: {
+				preSelected: 'unknown',
+				disabled: false,
+				items: [
+					{ name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
+					{ name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
+				]
+			}
+		}
+	},
+	methods: {
+		toggle (event) {
+			if (!this.defaultOptions.config.disabled) {
+				this.selected = true
+				this.selectedItem = event.target.id.replace(this.group, '')
+				this.$emit('selected', this.selected)
+				this.$emit('update:modelValue', event.target.id.replace(this.group, ''))
+				this.$emit('input', this.selectedItem)
+				this.$emit('change', {
+					value: event.target.id.replace(this.group, ''),
+					srcEvent: event
+				})
+			}
+		},
+		labelStyleSelected (color, backgroundColor) {
+			return {
+				padding: rem(this.defaultOptions.size.padding),
+				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
+				fontWeight: this.defaultOptions.layout.fontWeightSelected,
+				backgroundColor: backgroundColor !== undefined ? backgroundColor : this.defaultOptions.layout.selectedBackgroundColor,
+				color: color !== undefined ? color : this.defaultOptions.layout.selectedColor
+			}
+		},
+		mergeDefaultOptionsWithProp (options) {
+			const result = this.defaultOptions
+			for (const option in options) {
+				if (options[option] !== null && typeof (options[option]) === 'object') {
+					for (const subOption in options[option]) {
+						if (options[option][subOption] !== undefined && options[option][subOption] !== null) {
+							result[option][subOption] = options[option][subOption]
+						}
+					}
+				} else {
+					result[option] = options[option]
+				}
+			}
+		}
+	}
+}
+</script>