diff options
author | dartcafe <github@dartcafe.de> | 2021-02-11 14:39:14 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-02-11 14:39:14 +0300 |
commit | 67e29a3772c5846cf09f8aa02dc13911a7de7735 (patch) | |
tree | d3e091e853c7b0e3cbbabb364088626ee9f006f5 /src/js/components/Settings | |
parent | 7879a8cdda776c1e0364ec71196eba78ee0825f2 (diff) |
apply controls to components
Diffstat (limited to 'src/js/components/Settings')
-rw-r--r-- | src/js/components/Settings/ExpertimantalSettings.vue | 25 | ||||
-rw-r--r-- | src/js/components/Settings/FeatureSettings.vue | 32 |
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, |