wip notification settings

website/client/src/components/settings/notifications.vue

@@ -1,67 +1,70 @@
 <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>
-      <small>{{ $t('unsubscribeAllEmailsText') }}</small>
+      <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>
         <tr
-          v-for="notification in notificationsIds"
-          :key="notification"
+            v-for="notification in notificationsIds"
+            :key="notification"
         >
           <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