apply controls to components

2 files changed, 24 insertions, 33 deletions

diff --git a/src/js/components/Settings/ExpertimantalSettings.vue b/src/js/components/Settings/ExpertimantalSettings.vue
index 5b38c5ed..032ca192 100644
--- a/src/js/components/Settings/ExpertimantalSettings.vue
+++ b/src/js/components/Settings/ExpertimantalSettings.vue
@@ -23,18 +23,14 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<input id="realTimePolling" v-model="realTimePolling"
-				type="checkbox" class="checkbox">
-			<label for="realTimePolling">{{ t('polls', 'Beta - watch for updated polls in realtime') }}</label>
+			<CheckBoxDiv v-model="realTimePolling" :label="t('polls', 'Beta - watch for updated polls in realtime')" />
 			<div class="settings_details">
 				{{ t('polls', 'All changes to the current poll, done by other users, will be recognized in realtime.') }}
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<input id="experimental" v-model="experimental"
-				type="checkbox" class="checkbox">
-			<label for="experimental">{{ t('polls', 'Try experimental styles') }}</label>
+			<CheckBoxDiv v-model="experimental" :label="t('polls', 'Try experimental styles')" />
 			<div class="settings_details">
 				{{ t('polls', 'Some experimental UI variants. Changes the background color of the main area.') }}
 			</div>
@@ -42,9 +38,7 @@
 
 		<div v-if="experimental">
 			<div class="user_settings">
-				<input id="useImage" v-model="useImage"
-					type="checkbox" class="checkbox">
-				<label for="useImage">{{ t('polls', 'Use background image') }}</label>
+				<CheckBoxDiv v-model="useImage" :label="t('polls', 'Use background image')" />
 				<div class="settings_details">
 					{{ t('polls', 'Add a background image to the main area.') }}
 					<input v-if="useImage" v-model="imageUrl" type="text">
@@ -55,18 +49,14 @@
 			</div>
 
 			<div class="user_settings">
-				<input id="glassyNavigation" v-model="glassyNavigation"
-					type="checkbox" class="checkbox">
-				<label for="glassyNavigation">{{ t('polls', 'Glassy navigation') }}</label>
+				<CheckBoxDiv v-model="glassyNavigation" :label="t('polls', 'Glassy navigation')" />
 				<div class="settings_details">
 					{{ t('polls', 'Blurs the background of the navigation (Does not work with all browsers).') }}
 				</div>
 			</div>
 
 			<div class="user_settings">
-				<input id="glassySidebar" v-model="glassySidebar"
-					type="checkbox" class="checkbox">
-				<label for="glassySidebar">{{ t('polls', 'Glassy sidebar') }}</label>
+				<CheckBoxDiv v-model="glassySidebar" :label="t('polls', 'Glassy sidebar')" />
 				<div class="settings_details">
 					{{ t('polls', 'Blurs the background of the sidebar (Does not work with all browsers).') }}
 				</div>
@@ -78,10 +68,15 @@
 <script>
 
 import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
 
 export default {
 	name: 'ExpertimantalSettings',
 
+	components: {
+		CheckBoxDiv,
+	},
+
 	props: {
 		show: {
 			type: Boolean,
diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue
index c3e09f23..f3e50c25 100644
--- a/src/js/components/Settings/FeatureSettings.vue
+++ b/src/js/components/Settings/FeatureSettings.vue
@@ -23,40 +23,31 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<input id="calendarPeek" v-model="calendarPeek"
-				type="checkbox" class="checkbox">
-			<label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label>
+			<CheckBoxDiv v-model="calendarPeek" :label="t('polls', 'Use calendar lookup')" />
 			<div class="settings_details">
 				{{ t('polls', 'Check, if an option in a date poll is conflicting with or near an entry in your calendar.') }}
 				{{ t('polls', 'Opt in to the calendars, which should be checked.') }}
 
 				<div v-for="(calendar) in calendarChoices" :key="calendar.key" class="calendar-item">
-					<input :id="'calendar_' + calendar.key"
-						v-model="calendar.selected"
-						type="checkbox"
-						class="checkbox"
-						@click="clickedCalendar(calendar)">
-					<label :for="'calendar_' + calendar.key" class="calendar-checkbox">
-						<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
-						<span>{{ calendar.name }}</span>
-					</label>
+					<CheckBoxDiv v-model="calendar.selected" :label="calendar.name"
+						@input="clickedCalendar(calendar)">
+						<template #before>
+							<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
+						</template>
+					</CheckBoxDiv>
 				</div>
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<input id="defaultViewTextPoll" v-model="defaultViewTextPoll"
-				type="checkbox" class="checkbox">
-			<label for="defaultViewTextPoll">{{ t('polls', 'Text polls default to list view') }}</label>
+			<CheckBoxDiv v-model="defaultViewTextPoll" :label="t('polls', 'Text polls default to list view')" />
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }}
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<input id="defaultViewDatePoll" v-model="defaultViewDatePoll"
-				type="checkbox" class="checkbox">
-			<label for="defaultViewDatePoll">{{ t('polls', 'Date polls default to list view') }}</label>
+			<CheckBoxDiv v-model="defaultViewDatePoll" :label="t('polls', 'Date polls default to list view')" />
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }}
 			</div>
@@ -67,10 +58,15 @@
 <script>
 
 import { mapState } from 'vuex'
+import CheckBoxDiv from '../Base/CheckBoxDiv'
 
 export default {
 	name: 'FeatureSettings',
 
+	components: {
+		CheckBoxDiv,
+	},
+
 	props: {
 		show: {
 			type: Boolean,