diff options
Diffstat (limited to 'apps/dav/src/views/CalDavSettings.vue')
| -rw-r--r-- | apps/dav/src/views/CalDavSettings.vue | 104 |
1 files changed, 58 insertions, 46 deletions
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue index f1d39abee42..6be67cf93ff 100644 --- a/apps/dav/src/views/CalDavSettings.vue +++ b/apps/dav/src/views/CalDavSettings.vue @@ -1,20 +1,21 @@ +<!-- + - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <div class="section"> - <h2>{{ $t('dav', 'Calendar server') }}</h2> + <NcSettingsSection :name="$t('dav', 'Calendar server')" + :doc-url="userSyncCalendarsDocUrl"> <!-- Can use v-html as: - $t passes the translated string through DOMPurify.sanitize, - replacement strings are not user-controlled. --> <!-- eslint-disable-next-line vue/no-v-html --> <p class="settings-hint" v-html="hint" /> <p> - <input id="caldavSendInvitations" - v-model="sendInvitations" - type="checkbox" - class="checkbox"> - <label for="caldavSendInvitations"> + <NcCheckboxRadioSwitch id="caldavSendInvitations" + :checked.sync="sendInvitations" + type="switch"> {{ $t('dav', 'Send invitations to attendees') }} - </label> - <br> + </NcCheckboxRadioSwitch> <!-- Can use v-html as: - $t passes the translated string through DOMPurify.sanitize, - replacement strings are not user-controlled. --> @@ -22,14 +23,12 @@ <em v-html="sendInvitationsHelpText" /> </p> <p> - <input id="caldavGenerateBirthdayCalendar" - v-model="generateBirthdayCalendar" - type="checkbox" + <NcCheckboxRadioSwitch id="caldavGenerateBirthdayCalendar" + :checked.sync="generateBirthdayCalendar" + type="switch" class="checkbox"> - <label for="caldavGenerateBirthdayCalendar"> {{ $t('dav', 'Automatically generate a birthday calendar') }} - </label> - <br> + </NcCheckboxRadioSwitch> <em> {{ $t('dav', 'Birthday calendars will be generated by a background job.') }} </em> @@ -39,14 +38,11 @@ </em> </p> <p> - <input id="caldavSendEventReminders" - v-model="sendEventReminders" - type="checkbox" - class="checkbox"> - <label for="caldavSendEventReminders"> + <NcCheckboxRadioSwitch id="caldavSendEventReminders" + :checked.sync="sendEventReminders" + type="switch"> {{ $t('dav', 'Send notifications for events') }} - </label> - <br> + </NcCheckboxRadioSwitch> <!-- Can use v-html as: - $t passes the translated string through DOMPurify.sanitize, - replacement strings are not user-controlled. --> @@ -58,47 +54,47 @@ </em> </p> <p class="indented"> - <input id="caldavSendEventRemindersToSharedGroupMembers" - v-model="sendEventRemindersToSharedGroupMembers" - type="checkbox" - class="checkbox" + <NcCheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers" + :checked.sync="sendEventRemindersToSharedUsers" + type="switch" :disabled="!sendEventReminders"> - <label for="caldavSendEventRemindersToSharedGroupMembers"> {{ $t('dav', 'Send reminder notifications to calendar sharees as well' ) }} - </label> - <br> + </NcCheckboxRadioSwitch> <em> {{ $t('dav', 'Reminders are always sent to organizers and attendees.' ) }} </em> </p> <p class="indented"> - <input id="caldavSendEventRemindersPush" - v-model="sendEventRemindersPush" - type="checkbox" - class="checkbox" + <NcCheckboxRadioSwitch id="caldavSendEventRemindersPush" + :checked.sync="sendEventRemindersPush" + type="switch" :disabled="!sendEventReminders"> - <label for="caldavSendEventRemindersPush"> {{ $t('dav', 'Enable notifications for events via push') }} - </label> + </NcCheckboxRadioSwitch> </p> - </div> + </NcSettingsSection> </template> -<style lang="scss" scoped> - .indented { - padding-left: 28px; - } -</style> - <script> import axios from '@nextcloud/axios' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#') export default { name: 'CalDavSettings', + components: { + NcCheckboxRadioSwitch, + NcSettingsSection, + }, + data() { + return { + userSyncCalendarsDocUrl, + } + }, computed: { hint() { const translated = this.$t( @@ -132,17 +128,17 @@ export default { OCP.AppConfig.setValue( 'dav', 'sendInvitations', - value ? 'yes' : 'no' + value ? 'yes' : 'no', ) }, sendEventReminders(value) { OCP.AppConfig.setValue('dav', 'sendEventReminders', value ? 'yes' : 'no') }, - sendEventRemindersToSharedGroupMembers(value) { + sendEventRemindersToSharedUsers(value) { OCP.AppConfig.setValue( 'dav', - 'sendEventRemindersToSharedGroupMembers', - value ? 'yes' : 'no' + 'sendEventRemindersToSharedUsers', + value ? 'yes' : 'no', ) }, sendEventRemindersPush(value) { @@ -151,3 +147,19 @@ export default { }, } </script> + +<style scoped> + .indented { + padding-inline-start: 28px; + } + /** Use deep selector to affect v-html */ + * :deep(a) { + text-decoration: underline; + } + + .settings-hint { + margin-top: -.2em; + margin-bottom: 1em; + opacity: .7; + } +</style> |