krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-13 04:37:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip notification settings

Browse Source
This commit is contained in:
negue
2022-09-10 16:00:56 +02:00
parent 56f956be5a
commit 7b5568ed23
1 changed files with 69 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
website/client/src/components/settings/notifications.vue
View File

@@ -1,42 +1,48 @@
<template>
<div class="row standard-page">
<div class="col-12">
<h1>{{ $t('notifications') }}</h1>
<h1 class="page-header">{{ $t('notifications') }}</h1>
</div>
<div class="col-12">
<div class="checkbox">
<label>
<input
v-model="user.preferences.pushNotifications.unsubscribeFromAll"
type="checkbox"
class="mr-2"
@change="set('pushNotifications', 'unsubscribeFromAll')"
>
<span>{{ $t('unsubscribeAllPush') }}</span>
</label>
</div>
<br>
<div class="checkbox">
<label>
<input
v-model="user.preferences.emailNotifications.unsubscribeFromAll"
type="checkbox"
class="mr-2"
@change="set('emailNotifications', 'unsubscribeFromAll')"
>
<span>{{ $t('unsubscribeAllEmails') }}</span>
</label>
</div>
<h2>All Notifications</h2>
<table class="table">
<tr>
<td>{{ $t('unsubscribeAllPush') }}</td>
<td>
<toggle-switch :checked="user.preferences.pushNotifications.unsubscribeFromAll"
@toggle="set('pushNotifications', 'unsubscribeFromAll')"
/>
</td>
</tr>
<tr>
<td>
{{ $t('unsubscribeAllEmails') }} <br>
<small>{{ $t('unsubscribeAllEmailsText') }}</small>
</td>
<td>
<toggle-switch :checked="user.preferences.emailNotifications.unsubscribeFromAll"
@toggle="set('emailNotifications', 'unsubscribeFromAll')"
/>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="col-8">
<div class="col-12">
<h2>Email & Push</h2>
<table class="table">
<tr>
<td></td>
<th>
<th class="email_push_col">
<span>{{ $t('email') }}</span>
</th>
<th>
<th class="email_push_col">
<span>{{ $t('push') }}</span>
</th>
</tr>
@@ -47,21 +53,18 @@
<td>
<span>{{ $t(notification) }}</span>
</td>
<td>
<input
v-model="user.preferences.emailNotifications[notification]"
type="checkbox"
@change="set('emailNotifications', notification)"
>
<td class="email_push_col">
<toggle-switch :checked="user.preferences.emailNotifications[notification]"
@toggle="set('emailNotifications', notification)"
class="toggle-switch-width"
/>
</td>
<td v-if="onlyEmailsIds.indexOf(notification) === -1">
<input
v-model="user.preferences.pushNotifications[notification]"
type="checkbox"
@change="set('pushNotifications', notification)"
>
</td><td v-else>
&nbsp;
<td class="email_push_col">
<toggle-switch :checked="user.preferences.pushNotifications[notification]"
@toggle="set('pushNotifications', notification)"
v-if="!onlyEmailsIds.includes(notification)"
class="toggle-switch-width"
/>
</td>
</tr>
</table>
@@ -69,28 +72,45 @@
</div>
</template>
<style type="text/scss">
.toggle-switch-width {
::v-deep {
.toggle-switch {
margin-left: 0;
}
}
}
.email_push_col {
width: 50px;
padding-left: 0 !important;
padding-right: 0 !important;
}
</style>
<script>
import { mapState } from '@/libs/store';
import notificationsMixin from '@/mixins/notifications';
import ToggleSwitch from '@/components/ui/toggleSwitch';
export default {
components: { ToggleSwitch },
mixins: [notificationsMixin],
data () {
return {
notificationsIds: Object.freeze([
'majorUpdates',
'onboarding',
'newPM',
'wonChallenge',
'giftedGems',
'giftedSubscription',
'invitedParty',
'invitedGuild',
'kickedGroup',
'questStarted',
'invitedQuest',
'wonChallenge',
'questStarted',
// 'weeklyRecaps',
'kickedGroup',
'onboarding',
'importantAnnouncements',
'weeklyRecaps',
'subscriptionReminders',
]),
// list of email-only notifications