diff options
Diffstat (limited to 'apps')
-rw-r--r-- | apps/dav/src/views/CalDavSettings.vue | 91 |
1 files changed, 49 insertions, 42 deletions
diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue index f1d39abee42..714fc9a4d32 100644 --- a/apps/dav/src/views/CalDavSettings.vue +++ b/apps/dav/src/views/CalDavSettings.vue @@ -1,20 +1,17 @@ <template> - <div class="section"> - <h2>{{ $t('dav', 'Calendar server') }}</h2> + <SettingsSection :title="$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"> + <CheckboxRadioSwitch id="caldavSendInvitations" + :checked.sync="sendInvitations" + type="switch"> {{ $t('dav', 'Send invitations to attendees') }} - </label> - <br> + </CheckboxRadioSwitch> <!-- Can use v-html as: - $t passes the translated string through DOMPurify.sanitize, - replacement strings are not user-controlled. --> @@ -22,14 +19,12 @@ <em v-html="sendInvitationsHelpText" /> </p> <p> - <input id="caldavGenerateBirthdayCalendar" - v-model="generateBirthdayCalendar" - type="checkbox" + <CheckboxRadioSwitch id="caldavGenerateBirthdayCalendar" + :checked.sync="generateBirthdayCalendar" + type="switch" class="checkbox"> - <label for="caldavGenerateBirthdayCalendar"> {{ $t('dav', 'Automatically generate a birthday calendar') }} - </label> - <br> + </CheckboxRadioSwitch> <em> {{ $t('dav', 'Birthday calendars will be generated by a background job.') }} </em> @@ -39,14 +34,11 @@ </em> </p> <p> - <input id="caldavSendEventReminders" - v-model="sendEventReminders" - type="checkbox" - class="checkbox"> - <label for="caldavSendEventReminders"> + <CheckboxRadioSwitch id="caldavSendEventReminders" + :checked.sync="sendEventReminders" + type="switch"> {{ $t('dav', 'Send notifications for events') }} - </label> - <br> + </CheckboxRadioSwitch> <!-- Can use v-html as: - $t passes the translated string through DOMPurify.sanitize, - replacement strings are not user-controlled. --> @@ -58,47 +50,47 @@ </em> </p> <p class="indented"> - <input id="caldavSendEventRemindersToSharedGroupMembers" - v-model="sendEventRemindersToSharedGroupMembers" - type="checkbox" - class="checkbox" + <CheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers" + :checked.sync="sendEventRemindersToSharedGroupMembers" + type="switch" :disabled="!sendEventReminders"> - <label for="caldavSendEventRemindersToSharedGroupMembers"> {{ $t('dav', 'Send reminder notifications to calendar sharees as well' ) }} - </label> - <br> + </CheckboxRadioSwitch> <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" + <CheckboxRadioSwitch id="caldavSendEventRemindersPush" + :checked.sync="sendEventRemindersPush" + type="switch" :disabled="!sendEventReminders"> - <label for="caldavSendEventRemindersPush"> {{ $t('dav', 'Enable notifications for events via push') }} - </label> + </CheckboxRadioSwitch> </p> - </div> + </SettingsSection> </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 SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection' +import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch' const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#') export default { name: 'CalDavSettings', + components: { + CheckboxRadioSwitch, + SettingsSection, + }, + data() { + return { + userSyncCalendarsDocUrl, + } + }, computed: { hint() { const translated = this.$t( @@ -151,3 +143,18 @@ export default { }, } </script> + +<style scoped> + .indented { + padding-left: 28px; + } + /** Use deep selector to affect v-html */ + * >>> a { + text-decoration: underline; + } + .settings-hint { + margin-top: -.2em; + margin-bottom: 1em; + opacity: .7; + } +</style> |