refs #581 Show notification setting in preferences

src/config/locales/en/translation.json

@@ -99,6 +99,16 @@
       "fav_rb_sound": "Favorite and Boost:",
       "toot_sound": "Toot:"
     },
+    "notification": {
+      "title": "Notification",
+      "notify": {
+        "title": "Notify",
+        "reply": "Reply:",
+        "reblog": "Reblog:",
+        "favourite": "Favourite:",
+        "follow": "Follow:"
+      }
+    },
     "account": {
       "title": "Account",
       "connected": "Connected Account",

src/renderer/components/Preferences.vue

@@ -23,11 +23,15 @@
             <icon name="cog" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.general.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="2" :route="{path: '/preferences/account'}" @click="account">
+          <el-menu-item index="2" :route="{path: '/preferences/notification'}" @click="notification">
+            <icon name="bell" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.notification.title') }}</span>
+          </el-menu-item>
+          <el-menu-item index="3" :route="{path: '/preferences/account'}" @click="account">
             <icon name="user" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="3" :route="{path: '/preferences/language'}" @click="language">
+          <el-menu-item index="4" :route="{path: '/preferences/language'}" @click="language">
             <icon name="language" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.language.title') }}</span>
           </el-menu-item>
@@ -60,6 +64,9 @@ export default {
     general () {
       this.$router.push('/preferences/general')
     },
+    notification () {
+      this.$router.push('/preferences/notification')
+    },
     account () {
       this.$router.push('/preferences/account')
     },

src/renderer/components/Preferences/Notification.vue

@@ -0,0 +1,74 @@
+<template>
+<div id="notification">
+  <h2>{{ $t('preferences.notification.title') }}</h2>
+  <div class="notify">
+    <h3>{{ $t('preferences.notification.notify.title') }}</h3>
+    <table class="notification">
+      <tbody>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.reply') }}</td>
+          <td class="status">
+            <el-switch
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.reblog') }}</td>
+          <td class="status">
+            <el-switch
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.favourite') }}</td>
+          <td class="status">
+            <el-switch
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+        <tr>
+          <td class="title">{{ $t('preferences.notification.notify.follow') }}</td>
+          <td class="status">
+            <el-switch
+              active-color="#13ce66">
+            </el-switch>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'notification'
+}
+</script>
+
+<style lang="scss" scoped>
+#notification {
+  .notify {
+    table {
+      width: 100%;
+    }
+
+    td {
+      padding: 16px 0;
+    }
+
+    .title {
+      text-align: right;
+      width: 50%;
+    }
+
+    .status {
+      width: 50%;
+      text-align: center;
+    }
+  }
+}
+</style>

src/renderer/router/index.js

@@ -26,6 +26,11 @@ export default new Router({
           name: 'general',
           component: require('@/components/Preferences/General').default
         },
+        {
+          path: 'notification',
+          name: 'notification',
+          component: require('@/components/Preferences/Notification').default
+        },
         {
           path: 'account',
           name: 'account',

src/renderer/store/Preferences.js

@@ -1,13 +1,15 @@
 import General from './Preferences/General'
 import Account from './Preferences/Account'
 import Language from './Preferences/Language'
+import Notification from './Preferences/Notification'
 
 const Preferences = {
   namespaced: true,
   modules: {
     General,
     Account,
-    Language
+    Language,
+    Notification
   },
   state: {
     defaultActive: '1'