notification controls: redesign entirely

2 files changed, 39 insertions, 47 deletions

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 69f1b44f..20b10979 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -167,47 +167,39 @@
           </div>
         </div>
 
-        <div :label="$t('settings.interactions_tab')" v-if="pleromaBackend">
+        <div :label="$t('settings.notifications')" v-if="pleromaBackend">
           <div class="setting-item">
-            <h2>{{$t('settings.notifications')}}</h2>
-            <ul class="setting-list">
-              <li>
-                <input type="checkbox" id="notification-setting-local" v-model="notificationSettings.local">
-                <label for="notification-setting-local">
-                {{$t('settings.notification_setting_local')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-setting-remote" v-model="notificationSettings.remote">
-                <label for="notification-setting-remote">
-                {{$t('settings.notification_setting_remote')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
-                <label for="notification-setting-follows">
-                {{$t('settings.notification_setting_follows')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
-                <label for="notification-setting-non-follows">
-                {{$t('settings.notification_setting_non_follows')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
-                <label for="notification-setting-followers">
-                {{$t('settings.notification_setting_followers')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
-                <label for="notification-setting-non-followers">
-                {{$t('settings.notification_setting_non_followers')}}
-                </label>
-              </li>
-            </ul>
+            <div class="select-multiple">
+              <span class="label">{{$t('settings.notification_setting')}}</span>
+              <ul class="option-list">
+                <li>
+                  <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
+                  <label for="notification-setting-follows">
+                  {{$t('settings.notification_setting_follows')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
+                  <label for="notification-setting-followers">
+                  {{$t('settings.notification_setting_followers')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
+                  <label for="notification-setting-non-follows">
+                  {{$t('settings.notification_setting_non_follows')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
+                  <label for="notification-setting-non-followers">
+                  {{$t('settings.notification_setting_non_followers')}}
+                  </label>
+                </li>
+              </ul>
+            </div>
+            <p>{{$t('settings.notification_mutes')}}</p>
+            <p>{{$t('settings.notification_blocks')}}</p>
             <button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button>
           </div>
         </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2840582b..2b5c5468 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -209,7 +209,6 @@
     "loop_video": "Loop videos",
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
-    "interactions_tab": "Interactions",
     "play_videos_in_modal": "Play videos directly in the media viewer",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
@@ -278,12 +277,13 @@
       "true": "yes"
     },
     "notifications": "Notifications",
-    "notification_setting_local": "Show notifications from local users",
-    "notification_setting_remote": "Show notifications from remote users",
-    "notification_setting_follows": "Show notifications from users you follow",
-    "notification_setting_non_follows": "Show notifications from users you do not follow",
-    "notification_setting_followers": "Show notifications from users who follow you",
-    "notification_setting_non_followers": "Show notifications from users who do not follow you",
+    "notification_setting": "Receive notifications from:",
+    "notification_setting_follows": "Users you follow",
+    "notification_setting_non_follows": "Users you do not follow",
+    "notification_setting_followers": "Users who follow you",
+    "notification_setting_non_followers": "Users who do not follow you",
+    "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
+    "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
     "style": {
       "switcher": {